Meet the Telerik AppBuilder

Many web developers ignore the application development domain, citing the fact that the study of mobile development technologies will take a lot of time. In part, this is the case; studying the development of native applications for mobile platforms practically implies not only the use of a new programming language, but also patterns.

If you are one of these developers, you should pay attention to the development of hybrid applications, since you can work with a language that you already know, be it HTML5 or JavaScript. Moreover, you can use popular frameworks, for example: Twitter Bootstrap or jQuery Mobile to develop your applications.

Now, for those who are interested, I propose to dive into Telerik AppBuilder , a powerful cloud development environment that makes the development of hybrid applications incredibly simple. In this tutorial, we learn what AppBuilder can offer and in the process of dating, we will build a simple hybrid application.
')
Why Telerik AppBuilder?

One of the main reasons to use AppBuilder is a full-fledged online IDE. It allows you to create, test and even publish hybrid applications from any computer or mobile device, without the need to download it.

The ability to create iOS applications working on Windows or Linux is another advantage.

And finally, the AppBuilder belonging to the Telerik Platform gives you the ability to use such features as analytics, pop-up notifications, user authorization and cloud storage.

Let's start creating an application!

All you need to start is a Telerik account. If you do not already have it, you can create it using the free 30 day version.

Open a new window in the browser and go to the Telerik Platform. Immediately after authorization, you get to the page with a list of your applications.



After clicking on the Create app, you will be asked a few questions regarding the application being developed.

First you need to choose the type of application being developed, we will select the Cordova Hybrid as we will create an application using Apache Cordova, a popular framework for developing hybrid applications.



Now we give our application a name and description.



Click Create App to generate a customized hybrid application that uses the default Kendo UI framework.

Create Views

Once the application is created, you will be taken to the Views service. With this service you can create views without HTML code.

Create a simple converter application. It will have two views:

Converter in which the user will enter the weight in kilograms
About will show application info.

Let's start with About. Select Home View and click Change view type. You will see several templates. Click on the About template.



In the next screen, we set the title for About and click on the Template to customize the contents of the view. As a rule, “about” has: name, version and description. Therefore, fill in these fields properly. The template also includes social networking buttons. We will not use them today, so remove the checkmark from the buttons Contact us, Facebook and Twitter.

As soon as you clicked the Apply button, you will have the opportunity to see the view you just created.



Now let's click on the Add View button and create a view converter. You will once again be offered to choose a template. This time, select the Form template, since this view will have two input fields:

• The first field to enter weight in kilograms.
• The second will show the cost.

On the next screen, fill in the field Title and Name for the converter. In order to add input fields, click on Form Fields and after clicking on the Add form fields button. Now you need to select field types.



Since the weight should be in kilograms, select Number input. Call it kgs and give it the appropriate label.

Similarly, create a text field and name it result. Make sure you also give him the appropriate label.

Now that the fields are ready click on the Buttons. The form template includes the confirm and cancel buttons. We do not need the cancel button, so we uncheck it.

Click Apply, save the changes. Now the view should look like this:

Customize the navigation pattern

Create the ability to switch between windows, for this we will use the navigation pattern. To customize the navigation, switch to the Navigation section.

The application will use the Tab Menu as a template for navigation.

About, by default, is the main page of the application. To use the converter as the main page, click on Application start up and select Converter as the Initial view.



The navigation menu will look like this:

Create application logic

Now that the user interface is ready, let's build a conversion mechanism using JavaScript code.

To open the editor you need to click on the Code. There you will find a directory for each of the generated pages that contain the view.html and index.js files.



Opening Converter, the index.js file, you will notice that AppBuilder has already created a kendo.observable object called converterModel to manage the created form. It has fields containing the names of the forms we created. It also has a submit function, which is called when the Confirm button is clicked. As you may have guessed, all our code should be placed in the submit function.

Now, all we need to do is get the value of fields.kgs, multiply it by 2.2046 and update the value of the field fields.result. To get and set the converterModel value, we need to use the get and set methods. Add the following code to the index.js file:

// START_CUSTOM_CODE_converterModel var model = app.converter.converterModel; model.set("submit", function() { var lbs = model.get("fields.kgs") * 2.2046; model.set("fields.result", lbs + " lbs"); }); // END_CUSTOM_CODE_converterModel 

Note that you need to write code between the automatically generated comments START_CUSTOM_CODE and END_CUSTOM_CODE.

Testing

Our application is ready. To test it, we can use the simulators built into AppBuilder. Run the iPhone simulator by pressing the Control + F6 keys. After launching the application, check if the conversion works.



AppBuilder also allows you to test the application on different versions of iOS.

Now, after we have verified that the application works correctly on the iPhone, let's see how it will work on other devices.



The application works correctly and on the Android simulator. Nevertheless, it looks strange as an Android application. This is because our application uses a skin called flat. To give it a material design look, open app.js and change the skin value to material.

The application will look like this:

Using the AppBuilder Companion App

The simulator is very useful in the development process. However, it never hurts to test on a real device. With the AppBuilder's companion app , you can do this quickly and easily.

After you have downloaded the companion app to your device, open the editor and press Control + B. Then you will be asked to select the platform on which you want to launch the application. Next, select the AppBuilder companion app option and click on the Next button.



After the build is complete, you will see the following:



Now you can open the AppBuilder companion app on your device and scan the QR code to start the application.

Using AppBuilder's CLI

If you prefer to work locally from the command line, you can use AppBuilder's CLI (Command Line Interface). The CLI is a Node.js package that you can easily download using npm (Node Package Manager).

 sudo npm install -g appbuilder 

Most of the functions in the CLI become available after logging in to Telerik. Therefore, use the following command before doing any actions:

 appbuilder login 

Once you are logged in, you can use the -h option to familiarize yourself with the commands that appbuilder can offer you.

 appbuilder -h 

Conclusion

In this guide, we learned about the basic features of Telerik AppBuilder for developing hybrid applications, and also learned how to use AppBuilder's companion app and device simulator to test applications. We focused on developing in an online editor, but for those who prefer to use the IDE, AppBuilder also offers a Windows client and a Visual Studio extension.

On the link below, you can find a video with a discussion of the Telerik AppBuilder platform and an overview of the main features.