Part 1: Starting a Project

Step 1: Logging into Monaca

  1. Login to Monaca.
  2. Input your Monaca account information.
../../../_images/94.png

Step 2: Creating a New Project

After a successful sign-in, you will be directed to Monaca Dashboard. You are now ready to create your first Monaca project. Please do as follows:

  1. From Monaca Dashboard, click on Create Project or Import Project to create a new Monaca project.
../../../_images/118.png
  1. If you choose Create Project, you will be able to create a new Monaca project based on various templates. On the other hand, if you choose Import Project, you will be able to create a new Monaca project by importing an existing project in 3 ways such as:
  • filling in a project’s URL
  • uploading a project package
  • or selecting your existing GitHub repository. Please refer to Version Control (GitHub) on how to set up GitHub integration with Monaca.
../../../_images/103.png

Create Project Dialog

../../../_images/1110.png

Import Project Dialog

  1. In this tutorial, we will choose the Create Project option. In the Create Project dialog, select Sample Applications and choose jQuery TODO App template by clicking on its Create New button.
../../../_images/223.png
  1. Fill in the project’s information and click on Make Project button.
../../../_images/313.png
  1. Then, you will see your newly created project listed under the Online tab of the Dashboard.

Step 3: Previewing a Project

Monaca Cloud IDE allows you to preview your project through a Preview window without any real devices.

Note

Some functionalities of applications might not be properly previewed because the Preview window has several limitations such as Ajax requests, Cordova plugin APIs and so on. For more information, please refer to usage and limitation of Live Preview.

  1. From the Monaca Dashboard, open a project. Then, Monaca Cloud IDE will be open. You can find the Preview window on the right panel of the IDE.
../../../_images/59.png
  1. Try adding some TODO items in the Preview window.
../../../_images/68.png

Step 4: Editing a Project

Note

All editable files are listed under www folder.

  1. From the File Tree panel, choose a file to edit. Let’s make some changes in index.html file in the code editor.
  2. Save the changes, then you will be able to see the updates instantly in the Preview window. Feel free to edit the project as you wish. For more detailed explanation about this template, please refer to Explanation about jQuery TODO App.

Note

For more information regarding the code editor in Monaca Cloud IDE, please refer to Code Editor.