Monaca – The foundation of Cordova application (hybrid application)

Tram Ho

1. What is Monaca?

Monaca is a platform that helps develop HTML5 hybrid mobile app (if you don’t know, search it out) with simple and easy PhoneGap / Cordova provided by Asial Corporation. It is an open hybrid app development platform and ready to apply immediately to your current workflow and development environment. From Cloud IDE, CLI to debugger and remote online build, everything you need to develop a hybrid app is here.

2. Why Use Monaca?

The top 3 benefits of Monaca are:

Cloud-Empowered Development: Monaca allows you to develop your application in two ways. The complete cloud development environment gives you the flexibility without any settings, you can code and build right on the cloud. Second, develop applications from local and synchronize directly with cloud via Monaca Localkit.

Framework Agnostic: integrated open source Onsen Framework for popular frontend languages ​​(Angular 1, 2+, React and Vue.js). However, you can optionally use Monaca with any JavaScript framework you want in addition to the supported frameworks.

Mix-and-match as You Like: Monaca helps you cover everything from design, app development, backend development, testing & debugging to build & distribution. Monaca cloud can be used in whole or in part like Sublime Text or Git. You can edit the code in the cloud but the build will not “eat” the source, must sync and Transpile in Local Kit first.

3.Monaca Development Tools

Monaca Cloud IDE

After signing up for an account at: Monaca . You go to Dashboard -> Create new project . There will be 3 types of projects for you to choose:

  • Sample Applications: Monaca’s built-in sample applications (Maybe with Cordova, javascript, electrons, etc.) of your choice.
  • Framework Templates: Includes Javascript, Angular, AngularJS, React, Vue.
  • Blank: Create html file with Hello world content here

I created the Demo with blank!

Next, click Open in Clound IDE will display cloud editor, you can directly edit the code on this, then Ctrl + S, the next preview pane will change accordingly, without having to run or build.

But if you want to write a real application, you will have to download the Monaca Debugger and log in with your Monaca account.

Monaca Localkit

Because you created a project from the Monaca cloud earlier, now import it into Monaca Localkit by step:

+ -> Import -> From Cloud IDE

After syncing to local you can develop the app with any editor you want. Then upload to the cloud or download from the cloud simply by 2 buttons marked above.

Monaca Debugger

Login with your Monaca account -> Local computer -> Connect with your computer.

Note: To debug the app under local you have to open Monaca Localkit, if not just debug remotely from the code in Cloud IDE

As seen in the picture above, the Local projects section will be home to projects in the local PC, the Monaca.io Projects section will contain projects in the Cloud IDE. And of course, we can create projects from local and import them into the Monaca Cloud IDE (if the new init project is ok, if the project has been developed, the import is often faulty because there are many that are not supported or incompatible)

When editing the source in the editor, the Monacade debugger will automatically reload to update if we save the code.

Thank you for reading, I will write in the Build app and Remote Debugging WebViews section for a while ??

Share the news now

Source : Viblo