Getting Started with Hybrid Development

Filter by IDE
Select the AppBuilder client you are currently using for development.

IDE

Put your first AppBuilder app to life and experience the mobile app development process with AppBuilder. Select a client, log in and start writing your code. You can test your app immediately in the simulator or on an actual device.

Before you begin reading through this tutorial, choose the AppBuilder IDE with which you want to start from the IDE drop-down menu above.

In-Browser

Step 1: Run the in-browser client

The in-browser client lets you develop hybrid mobile apps from every device with Internet connection in every corner of the world. All you need is a supported browser and an Internet connection. In your browser, navigate to Telerik Platform and log in.

If you are already logged in with your preferred login provider in the browser, Telerik Platform might not prompt you to provide login credentials. If you are logged in, you can log out and change your login provider at any time.

To ease collaboration and app management, a single user can be a member of and access multiple accounts. You can switch between accounts.

If your login credentials are associated with multiple Telerik Platform accounts, you can switch to the account in which you want to develop your mobile application. On the Telerik Platform home page, click the account drop-down menu at the top left and select the account to which you want to switch.

Step 2: Create your first app

In the Telerik Platform home page, click Create app and select Cordova Hybrid.

Provide a name for your app and click Create App. After the Telerik Platform loads your app in the Views tab, click Code to navigate to the code and assets for your app.

(Optional) Step 3: Configure your app for collaboration

In Telerik Platform, you can develop applications in collaboration with other account members. To share your AppBuilder app with other account members, you need to set a remote GitHub repository for your app and invite collaborators to it.

Select Version ControlConfigure Remote Repository, select Connect to GitHub and click Next. Provide your login credentials for GitHub and click Sign In. Select a remote repository to which you want to connect and click Connect. To invite collaborators, start typing the GitHub user name of the account member with whom you want to share your app. In the dynamically generated list, select the user that you want to invite and click Invite.

After you have invited all account members with whom you want to share your app, close the wizard.

(Optional) Step 4: Run your app in the device simulator

Before running your app on a physical device, you might want to verify the app look, feel and behavior in the device simulator. To launch the device simulator, in the main menu bar, click Run and select Open Simulator. You can change the device, the mobile operating system version and configure other simulator settings in the simulator window.

Step 5: Run your app on device

Now that you have created your first hybrid mobile app, you are a few steps away from seeing it in action.

You do not need to re-build and reinstall the app every time you make a change. After you modify your code and save the changes in the in-browser client, just touch and hold with three fingers on your device to sync the changes. For more information about LiveSync, see AppBuilder LiveSync.

Run your app on an iOS device

  1. On your device, install the Cordova developer app from the App Store.
  2. On your device, install the Telerik Platform companion app from the App Store.
  3. On the device, run the Telerik Platform companion app and complete the tutorial.
  4. Tap My Apps and log in with your Telerik Platform credentials.
  5. Tap Open for your app.
  6. Wait for the download to complete.

Run your app on an Android device

  1. On your device, install the Cordova developer app from the Google Play.
  2. On your device, install the Telerik Platform companion app from the Google Play.
  3. On the device, run the Telerik Platform companion app and complete the tutorial.
  4. Tap My Apps and log in with your Telerik Platform credentials.
  5. Tap Open for your app.
  6. Wait for the download to complete.

Run your app on a Windows Phone device

  1. QR code for installing the Cordova developer app
    Scan to install the Cordova developer app
    On your device, install the Cordova developer app.
    Scan the QR code or install the Cordova developer app from Windows Phone Store.
  2. With your app loaded in the in-browser client, select RunBuild.
  3. Select Windows Phone and click Next.
  4. On the device, run the Cordova developer app.
  5. With two fingers, tap and swipe the left edge of the screen to the right.
    This gesture toggles the built-in drawer menu.
  6. Tap QR Scanner and scan the QR code that AppBuilder produced in Step 3.
  7. Wait for the download to complete.

Next Steps

You have just created and run your first app with AppBuilder.

You can continue developing your mobile app, start a new app or distribute your app.

See Also

Universal

Step 1: Download and run the universal desktop client

To develop mobile apps from the convenience of your Windows or OS X desktop, you can use the universal desktop client. In your browser, navigate to Telerik Platform and log in. In the title bar, select Getting StartedDownloads, click Code and download the universal desktop client for your operating system. When the download completes, double-click the executable to initiate the one-click installation of the universal desktop client. After the installation completes, the universal desktop client starts automatically.

On your first run, you need to perform one-click login in Telerik Platform. Select your preferred login provider, enter your credentials, accept the End-User License Agreement and get started with your first app.

To ease collaboration and app management, in Telerik Platform, a single user can be a member of and access multiple accounts. You can switch between accounts.

If your login credentials are associated with multiple Telerik Platform accounts, you can switch to the account in which you want to develop your mobile application. In the dashboard, locate the account drop-down menu in the top left corner of the screen. Click the drop-down menu and from the list, select the account in which you want to develop.

Step 2: Create your first app

In the dashboard, click Create app and select Cordova Hybrid.

Provide a name for your app and click Create app.

(Optional) Step 3: Configure your app for collaboration

In the Telerik Platform, you can develop applications in collaboration with other account members. To share your newly created AppBuilder app with other account members, you need to set a remote GitHub repository for your app and invite collaborators to it.

Select Version ControlConfigure Remote Repository, select Connect to GitHub and click Next. Provide your login credentials for GitHub and click Sign In. Select a remote repository to which you want to connect and click Connect. To invite collaborators, start typing the GitHub user name of the account member with whom you want to share your app. In the dynamically generated list, select the user that you want to invite and click Invite.

After you have invited all account members with whom you want to share your app, close the wizard.

(Optional) Step 4: Run your app in the device simulator

Before running your app on a physical device, you might want to verify the app look, feel and behavior in the device simulator. To launch the device simulator, in the main menu bar, click Run and select Open Simulator. You can change the device, the mobile operating system version and configure other simulator settings in the simulator window.

Step 5: Run your app on device

Now that you have created your first hybrid mobile app, you are a few steps away from seeing it in action.

You do not need to re-build and reinstall the app every time you make a change. After you modify your code and save the changes in the universal desktop client, just touch and hold with three fingers on your device to sync the changes. For more information about LiveSync, see AppBuilder LiveSync.

Run your app on an iOS device

  1. On your device, install the Cordova developer app from the App Store.
  2. On your device, install the Telerik Platform companion app from the App Store.
  3. On the device, run the Telerik Platform companion app and complete the tutorial.
  4. Tap My Apps and log in with your Telerik Platform credentials.
  5. Tap Open for your app.
  6. Wait for the download to complete.

Run your app on an Android device

  1. On your device, install the Cordova developer app from the Google Play.
  2. On your device, install the Telerik Platform companion app from the Google Play.
  3. On the device, run the Telerik Platform companion app and complete the tutorial.
  4. Tap My Apps and log in with your Telerik Platform credentials.
  5. Tap Open for your app.
  6. Wait for the download to complete.

Run your app on a Windows Phone device

  1. QR code for installing the Cordova developer app
    Scan to install the Cordova developer app
    On your device, install the Cordova developer app.
    Scan the QR code or install the Cordova developer app from Windows Phone Store.
  2. With your app loaded in the universal desktop client, select RunBuild.
  3. Select Windows Phone and click Next.
  4. On the device, run the Cordova developer app.
  5. With two fingers, tap and swipe the left edge of the screen to the right.
    This gesture toggles the built-in drawer menu.
  6. Tap QR Scanner and scan the QR code that AppBuilder produced in Step 3.
  7. Wait for the download to complete.

Next Steps

You have just created and run your first app with AppBuilder.

You can continue developing your mobile app, start a new app or distribute your app.

See Also

Windows

Step 1: Download and run the classic Windows desktop client

To develop mobile apps from the convenience of your Windows desktop, you can use the classic Windows desktop client. In your browser, navigate to Telerik Platform and log in. In the title bar, select Getting StartedDownloads, click Code and click Download for the classic Windows desktop client. When the download completes, double-click the executable to initiate the one-click installation of the classic Windows desktop client. After the installation completes, the classic Windows desktop client starts automatically.

On your first run, you need to perform one-click login in Telerik Platform. Select your preferred login provider, enter your credentials, accept the End-User License Agreement and get started with your first app.

If you are already logged in with your preferred login provider in your default browser, the classic Windows desktop client might not prompt you to provide login credentials. If you are logged in, you can log out and change your login provider at any time.

To ease collaboration and app management, in Telerik Platform, a single user can be a member of and access multiple accounts. You can switch between accounts.

If your login credentials are associated with multiple Telerik Platform accounts, you can switch to the account in which you want to develop your mobile application. In the title bar, click your user name and select Change Accounts. From the list, select the account in which you want to develop and click Ok.

Step 2: Create your first app

After you log in for the first time, the New dialog appears and prompts you to create your first app.

Select Hybrid. In the list of templates, select Kendo UI TabStrip, type a name for your app and click Create. After the classic Windows desktop client loads your app, all files and folders in your app appear in the Project Navigator.

The Kendo UI TabStrip template is a sample app with TabStrip navigation, developed with the Kendo UI Core framework.

(Optional) Step 3: Configure your app for collaboration

In the Telerik Platform, you can develop applications in collaboration with other account members. To share your AppBuilder app with other account members, you need to set a remote GitHub repository for your app and invite collaborators to it.

In the main menu bar, select Version ControlConfigure Remote Repository, select Connect to GitHub and click Configure. Provide your login credentials for GitHub, select a remote repository to which you want to connect and click Connect. To invite collaborators, enter the GitHub user name or email of the account member with whom you want to share your app. In the dynamically generated list, double-click the user that you want to invite.

After you have invited all account members with whom you want to share your app, close the wizard.

(Optional) Step 4: Run your app in the device simulator

Before running your app on a physical device, you might want to verify the app look, feel and behavior in the device simulator. To launch the device simulator, in the main menu bar, select RunIn simulator.

Step 5: Connect mobile devices to your system

To run the app that you have just created on a mobile phone or tablet, you need to connect the device to your system.

Step 5.1: Connect an iOS device

All you need to test your app on an iOS device is to have iTunes installed on your system and the Cordova developer app installed on your mobile device.

The Cordova developer app is a development tool that lets you test your apps on device without being enrolled in the Apple iOS Developer Program. For more information, see Run Apps in the Cordova developer app.

  1. QR code for installing the Cordova developer app
    Scan to install the Cordova developer app
    On your system, install the latest version of iTunes on your system, if not already installed.
    To download iTunes, go to the iTunes section on the Apple website and click Download iTunes.
  2. On your device, install the Cordova developer app.
    Scan the QR code or install Cordova developer app from the App Store.
  3. Connect your iOS device to your system.
  4. Run the classic Windows desktop client, if not already running and open your app.
  5. If prompted, unlock your device.
  6. In the classic Windows desktop client, click Show Mobile Devices and verify that your iOS device is listed with Companion app LiveSync set to On.

Step 5.2: Connect an Android device

Because of the fragmentation of the Android platform and device market, you might need to perform fewer or additional steps to configure your device. Start by installing the latest USB drivers for the device.

  1. QR code for installing the Cordova developer app
    Scan to install the Cordova developer app
    On your device, install the Cordova developer app.
    Scan the QR code or install the Cordova developer app from Google Play.
  2. Configure your device for USB debugging.
    • On Android 3.x and earlier devices, go to SettingsApplicationsDevelopment and verify that USB debugging is selected.
    • On Android 4.x devices, go to SettingsDeveloper options and verify that USB debugging is selected.
      If Developer options is not present in the Settings menu, tap About phone. In the About phone screen, tap Build number seven times until the You are now a developer! tooltip appears. The Settings menu now shows Developer options.
  3. Connect your device to your system via USB cable.
  4. Run the classic Windows desktop client, if not already running and open your app.
  5. If prompted, unlock your device.
  6. Click Show Mobile Devices and verify that your Android device is listed.

If you cannot enable USB debugging because Android does not show Developer options in the Settings menu, you need to manually enable Developer options for your phone.

  1. On your device, go to SettingsAbout phone.
  2. Locate Build number and tap it seven times.
    On the third tap Android starts showing a notification that you are now a few steps away from being a developer. On the seventh tap Android show the following notification: You are now a developer!

If your device does not appear in the list, you might need to perform the following additional steps. If this does not solve your problem, see Troubleshooting or visit our forums.

  • (Optional) Enable installing applications from unknown sources on your device.
    On Android 3.x and earlier devices, go to Settings -> Applications and verify that Unknown sources is selected.
    On Android 4.x devices, go to Settings -> Security -> Device administration and verify that Unknown sources is selected.
  • (Optional) On Android 4.x devices, change the USB connection mode.
    On an Android device without additional OEM customizations, go to Settings -> Storage and tap and hold USB connection in the top right corner of the screen. Select a different USB connection mode than the currently selected.
    If you cannot find the USB connection button in Settings -> Storage, browse for this setting in the Settings menu and its submenus.

Step 5.3: Connect a Windows Phone device

To test your app on Windows Phone devices, you need to have the Windows Phone 8.0 SDK or the Windows Phone 8.1 SDK installed on your system.

  1. On your system, install the Windows Phone 8.0 SDK or the Windows Phone 8.1 SDK.
    To download your preferred SDK, go to the Windows Phone Dev Center, locate the SDK and click Download.
  2. Verify that your Windows Phone device is registered for development.
    To learn how to set up your device for development, see How to register your phone for development for Windows Phone.
  3. Connect your Windows Phone device to your system.
    You can connect only one Windows Phone device to your system at a time.
  4. Run the classic Windows desktop client, if not already running and open your app.
  5. If prompted, unlock your device.
  6. Click Show Mobile Devices and verify that your Windows Phone device is listed.

Step 6: Run your app on device

Now that you have created your first hybrid mobile app, it is time to see it in action.

You do not need to re-build and reinstall the app every time you make a change. With LiveSync enabled, every time you modify your code and click Save in the classic Windows desktop client, your changes are synced automatically and you can see them on the device. For more information about LiveSync, see AppBuilder LiveSync.

Step 6.1: Run your app on iOS or Android devices

With your app loaded in the classic Windows desktop client and your devices connected to your system, run the Cordova developer app and start testing your app. You do not need to click RunBuild and Deploy.

Step 6.2: Run your app on Windows Phone devices

With your app loaded in the classic Windows desktop client and your device connected to your system, click AppBuilderBuild and Deploy.

Next Steps

You have just created and run your first app with AppBuilder on connected devices.

You can continue developing your mobile app, start a new app or distribute your app.

See Also

Visual Studio

Prerequisites

Before you can start developing mobile apps with the extension for Visual Studio, you need to have Microsoft Visual Studio Community, Professional, Premium or Ultimate installed on your system.

Step 1: Download and run the extension for Visual Studio

To develop mobile apps with the toolset of Microsoft Visual Studio, you can use the extension for Visual Studio. In your browser, navigate to Telerik Platform and log in. In the title bar, select Getting StartedDownloads, click Code and click Download for the extension for Visual Studio. After the download completes, double-click the downloaded file. Review the End-User License Agreement and proceed with the installation.

After the installation completes, run Microsoft Visual Studio.

Step 2: Begin the Quick Start tutorial

On the Telerik Platform Start Page, click Quick start under Interactive Tutorials. An additional Interactive Tutorial side bar loads. Click Start Tutorial and wait for the extension for Visual Studio to create your project.

All files and folders in your app appear in the Solution Explorer.

The Kendo UI TabStrip template is a sample app with TabStrip navigation, developed with the Kendo UI Core framework.

(Optional) Step 3: Complete the Quick Start tutorial

Complete each of the provided lessons. They will walk you through the following key features of the extension for Visual Studio:

  • Working with the device simulator
  • Working with the developer apps
  • Working with connected devices, including debugging
  • Connecting your local project with the Telerik Platform to make it available for development in the cloud
  • Enabling data services
  • Accessing the camera

Next Steps

You have just created and run your first app with AppBuilder. You can continue developing your mobile app or start a new app.

(Optional) You can remove app data from the cloud.

See Also

CLI

Prerequisites

Before you can start developing mobile apps with the command-line interface, you need to install the required software. For more information, see System Requirements for the command-line interface.

Step 1: Install and run the command-line interface

To develop mobile apps with the toolset of AppBuilder and your preferred IDE or code editor, you can use the command-line interface.

In Sublime Text, you can install the Telerik AppBuilder package which provides integration with the Telerik AppBuilder CLI. For more information, see Telerik AppBuilder in Package Control.

In the command prompt, run the following command.

OS Node.js installed from http://nodejs.org/ Node.js installed via package manager
Windows npm install appbuilder -g npm install appbuilder -g
OS X sudo npm install appbuilder -g --unsafe-perm npm install appbuilder -g
Linux sudo npm install appbuilder -g --unsafe-perm npm install appbuilder -g

On an OS X system, if prompted, confirm that you want to install the Xcode command-line developer tools.

After the installation completes, restart the command prompt.

  • To get familiar with the available operations, run the following command.

    appbuilder help
    

Step 2: Create your first app

  • In the command prompt, navigate to an empty directory. Run the following command.

    appbuilder create hybrid MyApp
    

The Telerik AppBuilder CLI creates a new subdirectory MyApp in the current directory and places the app files inside it. By default, the app is based on the KendoUI.TabStrip template. You can choose another template by setting a value for the --template option.

The KendoUI.TabStrip template is a sample app with TabStrip navigation, developed with the Kendo UI Core framework.

(Optional) Step 3: Run your app in the device simulator

Before running your app on a physical device, you might want to verify the app look, feel and behavior in the device simulator.

  • To launch the device simulator, in the command prompt navigate to the folder containing your app files and run the following command.

    appbuilder simulate
    

In this version of the command-line interface, you cannot run the device simulator on Linux systems.

Step 4: Run your app on device

Now that you have created your first hybrid mobile app, you are a few steps away from seeing it in action. With the command-line interface, you do not need to connect mobile devices to your system to test your app.

You do not need to re-build and reinstall the app every time you make a change. After you modify your code and save the changes in your code editor, run appbuilder livesync cloud in the command prompt and tap and hold with three fingers on the device screen to sync the changes. For more information about LiveSync, see AppBuilder LiveSync.

Run your app on an iOS device

  1. QR code for installing the Cordova developer app
    Scan to install the Cordova developer app
    On your device, install the Cordova developer app.
    Scan the QR code or install the Cordova developer app from the App Store.
  2. In the command prompt, navigate to the folder containing your app files and run appbuilder build ios --companion
    After the operation completes, the command-line interface opens a new tab in your browser and shows a QR code for deployment in the developer app.
  3. On the device, run the Cordova developer app and complete the tutorial.
  4. With two fingers, tap and swipe the left edge of the screen to the right.
    This gesture toggles the built-in drawer menu.
  5. Tap QR Scanner and scan the QR code that AppBuilder produced in Step 2.
  6. Wait for the download to complete.

Run your app on an Android device

  1. QR code for installing the Cordova developer app
    Scan to install the Cordova developer app
    On your device, install the Cordova developer app.
    Scan the QR code or install the Cordova developer app from Google Play.
  2. In the command prompt, navigate to the folder containing your app files and run appbuilder build android --companion
    After the operation completes, the Telerik AppBuilder CLI opens a new tab in your browser and shows a QR code for deployment in the developer app.
  3. On the device, run the Cordova developer app and complete the tutorial.
  4. With two fingers, tap and swipe the left edge of the screen to the right.
    This gesture toggles the built-in drawer menu.
  5. Tap QR Scanner and scan the QR code that AppBuilder produced in Step 2.
  6. Wait for the download to complete.

Run your app on a Windows Phone device

  1. QR code for installing the Cordova developer app
    Scan to install the Cordova developer app
    On your device, install the Cordova developer app.
    Scan the QR code or install the Cordova developer app from Windows Phone Store.
  2. In the command prompt, navigate to the folder containing your app files and run appbuilder build wp8 --companion
    After the operation completes, the Telerik AppBuilder CLI opens a new tab in your browser and shows a QR code for deployment in the developer app.
  3. On the device, run the Cordova developer app.
  4. With two fingers, tap and swipe the left edge of the screen to the right.
    This gesture toggles the built-in drawer menu.
  5. Tap QR Scanner and scan the QR code that AppBuilder produced in Step 2.
  6. Wait for the download to complete.

Next Steps

You have just created and run your first app with AppBuilder. You can continue developing your mobile app or start a new app.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.