Migrating from Telerik Platform

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!

Cordova version & Build Environment

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:

  • Cordova Android platform: 6.4.0 (API level 26)
  • Gradle version: 4.3.1
  • Cordova iOS platform: 4.5.4
  • Xcode: 9

For more information on build environment for lower Cordova version, pleaser refer to Build Environment.

Step 1: Preparation

Use Telerik tool to convert your project to Cordova CLI. This will convert your project into a Cordova project. Then, zip your project.

Step 2: Importing to Monaca Cloud IDE

  1. From Monaca Dashboard, select Import.

  2. Enter a project name and choose Upload Project Package option. Then, browse your project ZIP file.

  3. Click Import to import the project into Monaca.

  4. Click Open to open your project in Monaca Cloud IDE.

  5. When the IDE appears, you can view your app in the Preview window.

    The views or operations in the Preview window might not work properly when Ajax requests or Cordova APIs are used. Read more on Live Preview Limitations . In this case, you can test/debug your project with Monaca Debugger (we will talk about this in the next section).

Step 3: Debugging with Monaca

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:

  1. Install Monaca Debugger app on your device from Google Play or AppStore.

    If you want to install Monaca Debugger on Android emulator, please refer to Monaca Debugger for Android Emulator .

  2. Launch Monaca Debugger app and sign in with your Monaca account. Make sure you are using the same account for Monaca Cloud IDE.

  3. To run a project, simply tap on the project name in Monaca Debugger or click on Run on Device in Monaca Cloud IDE.

  4. Your project should now be running in the debugger. Go ahead and try out the various operations of your project!

  5. 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.

Step 4: Building the app

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.

  1. From Monaca Cloud IDE, go to Build → Build App for Android .

  2. The debug build is selected by default. Click Start Build. Then, the build window will be opened in a new tab.

  3. 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?

Remarks

When migrating a project into Monaca, there are a few things you should be aware of such as:

When using third-party Cordova plugins

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:

When using JS/CSS Component page

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>

Where to go from here

To learn more about Monaca, please refer to the following materials: