In this page, we will demonstrate a quick and easy steps to migrate a Telerik AppBuilder project into Monaca. After finish this guide, you would be able to run, test/debug and build an app from your telerik project using Monaca! Let’s get started!
Before getting started with the migration, you may want to know about the supported Cordova version and build environment in Monaca.
All newly created projects in Monaca will be using the latest supported Cordova version (currently, Cordova 7.1) by default. If you want to use a lower version, please contact us.
Build environment for Cordova 7.1:
6.4.0
(API level 26)4.3.1
4.5.4
9
For more information on build environment for lower Cordova version, pleaser refer to Build Environment.
Use Telerik tool to convert your project to Cordova CLI. This will convert your project into a Cordova project. Then, zip your project.
From Monaca Dashboard, select Import.
Enter a project name and choose Upload Project Package
option. Then, browse your project ZIP file.
Click Import to import the project into Monaca.
Click Open to open your project in Monaca Cloud IDE.
When the IDE appears, you can view your app in the Preview window.
Monaca Debugger is an application for testing and debugging your Monaca apps on real devices in real-time. When developing Monaca apps in the Cloud IDE, all changes made to your project file(s) will be synced with your Monaca Debugger in real-time as soon as you save them.
Let’s get started with Monaca Debugger as follows:
Install Monaca Debugger app on your device from Google Play or AppStore.
Launch Monaca Debugger app and sign in with your Monaca account. Make sure you are using the same account for Monaca Cloud IDE.
To run a project, simply tap on the project name in Monaca Debugger or click on Run on Device in Monaca Cloud IDE.
Your project should now be running in the debugger. Go ahead and try out the various operations of your project!
Let’s make some code changes in your project in the Cloud IDE and save them. Then, you should see the changes reflected in the debugger.
After knowing how to debug your app, let’s start building it. For simplicity, we only show how to create a debug build for Android in this guide.
From Monaca Cloud IDE, go to Build → Build App for Android .
The debug build is selected by default. Click Start Build. Then, the build window will be opened in a new tab.
It may take several minutes for the build to complete. Please wait. The following screen will appear after the build is successfully completed. You can then choose various ways to install the build app into your device.
That’s it! With just that you’ve succesfully built the migrated project with Monaca! That’s easy, right?
When migrating a project into Monaca, there are a few things you should be aware of such as:
Store-version Monaca Debugger (found in Google play or AppStore) only includes Core Cordova plugins. If your project contains any third-party Cordova plugins besides the Core Cordova plugins, you will need to build custom debugger to test this kind of project. Custom debugger will only include the plugins used in the project. Please refer to:
In Monaca Cloud IDE, there is a GUI page for you to include CSS/JavaScript libraries. You can go there by going to Configure → JS/CSS Component Settings . Then, the following page will appear.
You can then add various CSS/JavaScript libraries. However, this is only working if you include the following 2 lines into your index.html
file:
<!--Load selected JavaScript libraries-->
<script src="components/loader.js"></script>
<!--Load selected CSS libraries-->
<link rel="stylesheet" href="components/loader.css”>
Please note that loader.js
file is also loaded cordova.js
file. Therefore, if you are going to include the above lines, you can remove this line:
<script src="cordova.js"></script>
To learn more about Monaca, please refer to the following materials: