# 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="/files/nE4ulebuhb4ICEhuIoAE" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://en.docs.monaca.io/create-your-first-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
