Monaca Cloud IDE consists of 5 main parts such as:
In the menu bar, there are several main menus such as:
|Version Control||Manages version control of your project with GitHub.|
|Save||Saves the file currently openeded. If no file is opened, this function is disable.|
|Run on Device||Runs the current project in Monaca Debugger.|
|Share||Invites other Monaca users to join the project.|
|New File||Creates a new file.|
|New Folder||Creates a new folder.|
|Save||Saves the file currently openeded.|
|Save All||Saves all the files currently openeded.|
|Upload||Uploads the files in the current folder.|
|Delete||Deletes the currently selected file/folder.|
|Rename||Renames the currently selected file/folder.|
|Open File||Opens the currently selected file.|
|Copy File||Makes a copy of the currently selected file.|
|View Older Version…||Views older versions of the currently selected file.|
|Export Project||Exports Monaca project.|
|Publish Project||Makes the current project public (see Publish Project).|
|Editor Configuration||Configures the appearance of the editor.|
|Manage Cordova Plugins||Adds/Removes Cordova plugins in the current project.|
|Undo||Undoes the latest action.|
|Redo||Redoes the previous action.|
|Search||Searches for a string in the currently opened file.|
|Search Next||Goes to the next found string.|
|Search Previous||Goes to the previously found string.|
|Replace||Replaces a found string in the currently opened file.|
|Replace All||Replaces all the found strings in the currently opened file.|
|Comment Out||Comments out the current line.|
|Comment In||Uncomments the current line.|
|Project Tree||Shows/Hides the project tree.|
|Maximize Editor||Switches the ON/OFF of the editor maximization.|
|Grep||Searches for files by using Unix command.|
|Backend||Goes Monaca Backend settings page.|
|Preview||Opens Preview window.|
|Run on Device||Runs the project on Monaca Debugger.|
|Setup Monaca Debugger||Installs the Monaca Debugger on your device.|
|Build App for Android||Builds the app for Android device.|
|Build App for iOS||Builds the app for iOS device.|
|Build App for Windows||Builds the app for Windows device.|
|Build History||Shows all build history of the current project.|
|CI History||Shows all Continuous Integration history of the current project.|
|Commit||Commits local changes.|
|Push||Pushes local changes to remote server.|
|Pull||Pulls remote changes.|
|Show Remote History||Shows all commits history in remote server.|
|Show Commit History||Shows all commits history from Monaca Cloud IDE.|
|Configure||Configures the remote repository.|
For more information to enable vision control on your project, please refer to Version Control.
|Android App Settings||Configures Android app’s information (see Configure Android App).|
|Android Key Store Settings||Configures Android’s keystore (see Configure Android Keystore).|
|iOS App Settings||Configures iOS App’s information (see Configure iOS App Settings).|
|iOS Build Settings||Configures iOS build settings (see Configure iOS Build Settings).|
|Windows App Settings||Configures necessary information to build a Windows app (see Configure Windows App Settings).|
|Manage Cordova Plugins||Enables/Disables Cordova plugins in the current project (see Cordova Plugins).|
|Service Integration||Integrates various services to Monaca projects in the form of plugins (see Service Integration).|
|Continuous Integration||Automates building and deployment cycles (see Monaca CI).|
|Deploy Service||Adds/Removes deployment services for Monaca CI (see Deploy Services).|
|Editor Configuration||Configures the appearance of code editor.|
This feature allows you to make your project available to other users by sharing the link generated after publishing your project. By accessing the generated link, users can get a copy of their own in their account. All changes made in the copies are not transferred to the original, so there will be no fear of someone messing up the original.
Publishing your project is really easy and done by following the next simple steps:
Click on Publish button.
Use the generated link to share your project.
With this feature, we allow Monaca users to directly import published Monaca projects or projects from a given URL directly by just accessing a link. Upon accessing the link, the users will be forwarded to the following screen (if signed in), whereby just clicking the import button the project will be imported into their account.
In the Project panel, there are 3 main tabs:
Monaca Backend: Contains the backend settings of the project.
File Tree, Grep & Backend
Once Monaca Debugger is connected with Monaca Cloud IDE, you can do console debugging as well DOM inspection in this panel. For more information, please refer to Monaca Debugger with Monaca Cloud IDE.
The Live Preview provides an overview of your app in real-time. You can also interact with this preview as if it is running on an actual device with the limitation of executing the specific device’s functionality (such as camera, contact and so on) and cross-origin network AJAX request. Along with the Monaca Debugger, you will have effective and efficient experiences during app development.
In this tab, you can:
Configureicon in that tab. Then, you will see a drop-down list of different devices such as iPad, iPhone, and Nexus. You can change the orientation of the screen as well.
When using Live Preview, you should be aware of the the following limitations:
Access-Control-Allow-OriginHeader (i.e., Cross-Origin Ajax Request is permitted).
The Share function allows you to:
You can share your project with other Monaca users. You can also add/remove other Monaca users to/from your project. In order to manage the members of your project, please do as follows:
Then, the Team Member Manage screen will appear. To add a member, input the email(s) of your team member(s). Please enter one email address per line. You can also assign the role of each member as Developer or Tester by choosing from the drop-down menu. Then, click on Add Member button to send the invitation to them.
To remove a member from the project, you can just click on the
delete icon at the end of the row of that member’s info as shown below:
Views and edits the selected file from the file tree. Various settings such as Preferences is also shown and can be edited here. Once you open a file, you can select it from the tab.
Inside this editor, there is also a small and short menu bar as shown below:
Within this short menu, you can:
Settingicon. You will see 3 menu items such as: