# Create Your First App

## Creating a New Project&#x20;

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

<figure><img src="https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfWe1U2tFctp8FkP9W8%2Fuploads%2FCPMLfmQLsi9mvn6sWg4A%2Fcreate-project.gif?alt=media&#x26;token=9eced88b-f088-4298-8dc0-4360ff785a84" alt=""><figcaption></figcaption></figure>

## Creating the Screen&#x20;

Next, we will create a screen to launch the camera.&#x20;

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:

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

## Launching the Camera&#x20;

We will now create the process to launch the camera.&#x20;

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).

```javascript
<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&#x20;

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

Plugins are necessary when utilizing mobile device features from JavaScript code.&#x20;

1. Navigate to the "Configure" menu > "Cordova Plugin Settings"&#x20;
2. Enable the "Camera" plugin

## Running the App&#x20;

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&#x20;

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&#x20;

Install the Monaca Debugger from the following app store link:

{% embed url="<https://play.google.com/store/apps/details?id=mobi.monaca.debugger>" %}

Once you log in to the app, you will see the project you created.&#x20;

Click on the project to launch the camera app.
