Create Your First App

In this tutorial, we will create a camera app. The app will launch the camera and display the captured photo within the app.

Creating a New Project

To develop your first app in Monaca, start by creating a new project. The project will be based on an empty template and can be created following these steps:

  1. Click the "Create New Project" button

  2. Select "Blank Template"

  3. Click the "Create" button

Creating the Screen

Next, we will create a screen to launch the camera.

In the body tag of index.html, add a button tag to start the camera and an img tag to display the captured image as follows:

<body>
    <img id="photo" height="400">
    <button id="shoot-button" onclick="shoot()">Take a Photo</button>
</body>

Launching the Camera

We will now create the process to launch the camera.

This process will be written in JavaScript. In the script tag of index.html, write the following code for the camera execution process (shoot function).

<script>
    function shoot() {
        const option = {
            destinationType: Camera.DestinationType.DATA_URL,   // Convert to URL
            correctOrientation: true 
        };
          
        // Launch the camera
        navigator.camera.getPicture(onSuccess, onError, option);

        // Callback function called on success
        function onSuccess(data) {
            document.querySelector("#photo").src = "data:image/jpeg;base64," + data;
        }
        
        // Callback function called on failure
        function onError(message) {
            alert("Error:" + message);
        }
    }
</script>

Enabling the Camera Plugin

To use the mobile device's camera functionality, you need to install the plugin.

Plugins are necessary when utilizing mobile device features from JavaScript code.

  1. Navigate to the "Configure" menu > "Cordova Plugin Settings"

  2. Enable the "Camera" plugin

Running the App

At this point, the camera app is complete. Let's check the finished camera app on your device. There are two ways to do this:

  1. Building the project for Android or iOS and checking it

  2. Checking it using the "Monaca Debugger" provided on the iOS and Android stores

Here, we will explain both methods: building the project for Android and checking it with the "Monaca Debugger."

Android Build

To build the project for Android, follow these steps:

  1. Go to the "Build" menu > "Build App for Android"

  2. Start the build process

Monaca Debugger

Install the Monaca Debugger from the following app store link:

Once you log in to the app, you will see the project you created.

Click on the project to launch the camera app.

PreviousMonacaNextRelease Notes and Updates

Last updated