Getting Started With Telerik AppBuilder

Introduction

Many web developers shy away from developing mobile apps thinking it would take too long for them to learn the ropes of mobile application development. Well, they are not completely wrong, because learning how to develop native apps for a mobile platform usually does mean becoming familiar with not only a new programming language, but also concepts and patterns that are often platform specific.

If you are one of those developers, you should consider creating hybrid apps instead, because you could then work with languages you are already familiar with: HTML5, CSS, and JavaScript. What’s more, you could use popular frameworks like Twitter Bootstrap or jQuery Mobile to create your apps.

Now that I have your attention, let’s dive into Telerik AppBuilder, a powerful cloud-based development environment that makes it incredibly easy to create hybrid apps. In this tutorial, we are going to look at what AppBuilder has to offer, and while doing so, create a simple, hybrid app.

Why Choose Telerik AppBuilder

One of the most compelling reasons for using AppBuilder is its in-browser client, a full-fledged IDE (Integrated Development Environment) that runs in the browser. It allows you to create, test, and even publish hybrid apps from any computer or mobile device without having to install anything locally.

Being able to develop iOS apps using computers running Windows or Linux is another reason why you would want to use AppBuilder. The iOS device simulators can also be used from any operating system.

Lastly, as AppBuilder is a part of the Telerik Platform, using it means your app has easy access to features such as analytics, push notifications, user authentication, and cloud data storage.

Prerequisites

In order to follow this tutorial, all you need is a Telerik account. If you don’t have one already, you can sign up for free and start a 30-day trial immediately.

1. Creating a New App

In this tutorial, we’ll be working primarily with AppBuilder’s in-browser client. Open a new tab in your browser and log in to the Telerik Platform. Once you’re logged in, you will see a page listing all your apps.

To create a new app, click the Create app button. You will now be asked to specify various details about the app.

First, select the type of the app you want to build. For now, select Cordova Hybrid because we’ll be creating our app using Apache Cordova, a popular hybrid app development framework.

Next, give a meaningful name and description to the app by filling in the App Name and Description fields. I’m going to use My First App as the name.

Finally, click the Create App button to generate a fully configured hybrid app that uses the Kendo UI framework by default.

2. Creating Views

Once the app is created, you will be taken to the Views service. With this service, you can create all the views of your hybrid app without having to write any HTML code.

In this tutorial, we will be creating a very simple app that converts kilograms to pounds. It will have two views:

• a view called Converter, in which the user can enter a weight in kilograms


• a view called About, which shows details about the app

Let’s first create the About view. To do so, select the Home View and click Change view type. You will now be presented with several view templates. Click the About template.

In the next screen, set the Title to About and click the Template heading to configure the contents of the view. Typically, an “about” screen has the app’s name, version, and description. Therefore, fill in those fields appropriately. The template also includes social buttons. We won’t be using them today, so uncheck the Contact us, Facebook button, and Twitter button fields.

Once you click the Apply button, you will be able to see the view you just created.

Let’s now create the Converter view by clicking the Add View button. You will be prompted to choose a template again. This time, select the Form template, because this view will have two input fields:

• one field to accept the weight in kilograms


• another field to show the weight in pounds

In the next screen, set the Title field to Converter and the Name field to converter. To add the two input fields, first click the Form Fields heading and then click the Add form fields button. You will now be asked to select the type of the form field.

Because the weight in kilograms should be a number, select Number input from the list of options. Name it kgs and give it an appropriate label.

Similarly, create a Text box and name it result. Make sure you give it an appropriate label as well.

Now that the form fields are ready, click the Buttons heading. By default, the form template has a confirm button and a cancel button. We don’t need the cancel button so uncheck the Cancel button field.

Click Apply to save the changes. The view should now look like this:

3. Configuring the Navigation Layout

To make it possible for users to navgiate between the two views we created, the Views service has already added a navigation layout to our app. To configure it, switch to the Navigation Layout section.

You will see that the app currently uses a Tab Menu as the navigation layout. I am going to leave it that way, but you are free to experiment with the other options available.

By default, our app is using the About view as the initial view. To use Converter as the initial view, click the Application start up heading and set the value of Initial view to Converter. Don’t forget to click Apply to save your changes.

Your app’s navigation layout should now look like this:

4. Adding Custom Code

Now that the user interface of our app is ready, let’s write some JavaScript code to do the actual conversion from kilograms to pounds.

On the left, click Code to open the code editor. This will reveal the hybrid project’s structure. You will see that there is a directory for each view we created, containing files named view.html and index.js. While view.html contains the HTML code that defines the layout of the view, index.js contains the JavaScript code that can handle various UI events.

Open the Converter view’s index.js file. You will notice that AppBuilder has already created a kendo.observable object called converterModel to manage the form we created. It has a fields attribute containing the names of the form elements we created. It also has a submit function that is called when the user presses the Confirm button. As you might have guessed, all our code should be added to the submit function.

The code to do the conversion from kilograms to pounds is almost trivial. All you need to do is get the value of fields.kgs, multiply it by 2.2046, and update the value of fields.result. To get and set the attributes of converterModel, you’ll have to use its get and set methods. Add the following code to the index.js file:

// START_CUSTOM_CODE_converterModel
// Add custom code here. For more information about custom code, see https://docs.telerik.com/platform/screenbuilder/troubleshooting/how-to-keep-custom-code-changes

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

// END_CUSTOM_CODE_converterModel

Note that you should write your custom code between the automatically generated START_CUSTOM_CODE and END_CUSTOM_CODE comments. If you don’t, your code will be lost when you make further changes in your views using the Views service.

5. Using Device Simulators

Our app is ready. To test it, we can use one of the many device simulators AppBuilder includes. For now, launch the iPhone simulator by pressing Control + F6. When the app has launched, check if the conversion logic is working by typing a number into the first text field and pressing the Confirm button.

You can change the orientation of the device simulator to see what it looks like in landscape mode. To do so, click one of the Rotate buttons at the top.

AppBuilder also allows you to test your app on different iOS versions. You can change the version of the operating system by clicking the Version drop-down at the top.

Now that you’ve seen how the app looks and behaves on an iPhone, let’s run it on a different device simulator. Click the drop-down containing the list of devices and choose Android Phone.

You will notice that the app works just fine on the Android simulator too. However, it doesn’t quite look and feel like an Android app. That’s because our app is currently using a skin called flat. To give it a material design look and feel, open app.js and change the value of skin to material.

The app should now look like this:

6. Using AppBuilder’s Companion App

The device simulators are very useful during development. However, it’s always a good idea to determine how the app performs on a real phone or tablet. By using AppBuilder’s companion app, running the app on your device is as easy as running it in the simulator.

After you have installed the companion app on a physical device, open the code editor and press Control + B to start the build process. You will be asked to select the platform you want to run the app on. Make sure the platform you choose matches that of the device you installed the companion app on. Next, select the AppBuilder companion app option and press the Next button.

When the build completes successfully, you should see the following screen:

You can now open the AppBuilder companion app on your device and scan the QR code to run your app.

7. Using AppBuilder’s CLI

If you prefer working locally from the command line, you can use AppBuilder’s CLI (Command Line Interface), which can do almost everything the in-browser client can. Because the CLI is a Node.js package, you can easily install it using npm (Node Package Manager).

sudo npm install -g appbuilder

Most of the features included in the CLI are only accessible after you log in to your Telerik account. Therefore, use the following command to log in before you do anything else:

appbuilder login

Once logged in, you can use the -h option to see what the appbuilder command can do for you.

appbuilder -h

To help you get started, here’s how you can download all the code of the app we created in the in-browser client:

appbuilder cloud export "My First App"

Conclusion

In this tutorial, you learned how to use Telerik AppBuilder to create a simple, hybrid app. You also learned how to use AppBuilder’s companion app and device simulators to test the app. Even though we focused on the in-browser client today, for developers who prefer using a conventional IDE, AppBuilder also offers a stand-alone Windows client and a Visual Studio extension.

Start a free trial today. To learn more about AppBuilder, you can refer to its comprehensive documentation.