Part 1: Starting a Project¶
Table of Contents
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:
- From Monaca Dashboard, click on Create Project or Import Project to create a new Monaca project.
- 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.
- In this tutorial, we will choose the Create Project option. In the Create Project dialog, select Sample Applications and choose
jQuery TODO Apptemplate by clicking on its Create New button.
- Fill in the project’s information and click on Make Project button.
- Then, you will see your newly created project listed under the Online tab of the Dashboard.
Monaca Cloud IDE allows you to preview your project through a Preview window without any real devices.
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.
- 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.
- Try adding some TODO items in the Preview window.
All editable files are listed under
- From the File Tree panel, choose a file to edit. Let’s make some changes in
index.htmlfile in the code editor.
- 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.
For more information regarding the code editor in Monaca Cloud IDE, please refer to Code Editor.