Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Getting Started with NativeScript Development

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

IDE

Put your first NativeScript 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 NativeScript developer app. To speed up the process, you can clone one of the AppBuilder sample apps and build your app around it.

If you want to develop apps with NativeScript and Angular 2, see Create NativeScript Apps from Template and Building Apps with NativeScript and Angular 2.

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

In your browser, navigate to https://platform.telerik.com and select Telerik Platform. On the Login to Telerik Platform page, select a login provider and provide your credentials.

Step 2: Create your first NativeScript app

To create your first NativeScript app, in the Telerik Platform home page click Create app and select NativeScript. Provide name and description for your app and click Create App. After the operation completes, click Code.

Step 3: Examine the app structure

In the Project Navigator, expand the file and folder structure of the app and examine it.

NativeScript apps consist of the following folder:

  • app: The folder contains the entire app functionality.

Step 4: Run your app on device

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

Run your app on an iOS device

  1. On your device, install the NativeScript developer app from the App Store.
  2. On your device, install the Platform companion app from the App Store.
  3. On the device, run the 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 your code to load in the Cordova developer app.

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 Platform companion app from the Google Play.
  3. On the device, run the 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 your code to load in the Cordova developer 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 the in-browser client, just tap and hold with three fingers. For more information about LiveSync, see AppBuilder LiveSync.

Windows

Step 1: Run 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.

If prompted, log in with the account details you provided when you signed up for the NativeScript Insiders program.

Step 2: Create your first NativeScript app

To create your first NativeScript app from template, in the classic Windows desktop client dashboard, click New and select Native. You can start your NativeScript development from any of these templates.

Option Description
NativeScript Blank (JavaScript) A truly blank app that provides all the required framework files for development with NativeScript. The template provides a blank interface and a sample NativeScript app structure consisting of empty app.css, app.js, main-page.js and main-page.xml.
NativeScript HelloWorld (JavaScript) A simple app that provides all the required framework files for development with NativeScript. The template provides a native button linked to a simple counter.
NativeScript MasterDetail (JavaScript) A simple app that provides all the required framework files for development with NativeScript. The template provides a simple list view with a master-detail interface.
NativeScript TabbedApp (JavaScript) A simple app that provides all the required framework files for development with NativeScript. The template consists of two views with tabstrip navigation.
NativeScript Blank (TypeScript) A truly blank app that provides all the required framework files for development with NativeScript and TypeScript.
NativeScript HelloWorld (TypeScript) A simple app that provides all the required framework files for development with NativeScript and TypeScript. The template provides a native button linked to a simple counter.
NativeScript MasterDetail (TypeScript) A simple app that provides all the required framework files for development with NativeScript and TypeScript. The template provides a simple list view with a master-detail interface.
NativeScript TabbedApp (TypeScript) A simple app that provides all the required framework files for development with NativeScript and TypeScript. The template consists of two views with tabstrip navigation.
NativeScript Blank with Angular 2 (TypeScript) A truly blank app that provides all the required framework files for development with NativeScript, Angular 2 and TypeScript.
NativeScript with Angular 2 (TypeScript) A truly blank app that provides all the required framework files for development with NativeScript, Angular 2 and TypeScript. This template is enabled for the Views service.

Select Blank (JavaScript), provide an app name, and click Create.

Step 3: Examine the app structure

In the Project Navigator, expand the file and folder structure of the app and examine it.

NativeScript apps consist of the following folder:

  • app: The folder contains the entire app functionality.

Step 4: Run your app on device

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

Run your app on an iOS device

  1. QR code for installing the developer app
    Scan to install the NativeScript developer app
    Verify that you have installed a QR code reader on your device.
  2. On your device, install the NativeScript developer app.
    Scan the QR code or install the NativeScript developer app from the App Store.
  3. With your app loaded in the classic Windows desktop client, select RunBuild.
  4. Select iOSAppBuilder companion app and click Next.
  5. Scan the application QR code with your device.
  6. Tap the URL to open it.
    Your app launches in the NativeScript developer app.

Run your app on an Android device

  1. QR code for installing the NativeScript developer app
    Scan to install the NativeScript developer app
    Verify that you have installed a QR code reader on your device.
  2. On your device, install the NativeScript developer app.
    Scan the QR code or install the NativeScript developer app from Google Play.
  3. On your device, go to Settings -> Security -> Device administration and verify that Unknown sources is selected.
  4. With your app loaded in the classic Windows desktop client, select RunBuild.
  5. Select AndroidAppBuilder companion app and click Next.
  6. Scan the application QR code with your device.
  7. Open the URL in the browser.
    Your app launches in the NativeScript developer 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 the classic Windows desktop client, just tap and hold with three fingers. For more information about LiveSync, see AppBuilder LiveSync.

Visual Studio

Step 1: Run the extension for Visual Studio

In your browser, navigate to https://platform.telerik.com and select Telerik Platform. On the Login to Telerik Platform page, select a login provider and provide your credentials. 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.

Step 2: Create your first NativeScript app

To create your first NativeScript app from template, run Microsoft Visual Studio and select FileNewProject. In the sidebar, select TelerikPlatformNativeScript.

You can start your NativeScript development from any of these templates.

Option Description
NativeScript Blank (JavaScript) A truly blank app that provides all the required framework files for development with NativeScript. The template provides a blank interface and a sample NativeScript app structure consisting of empty app.css, app.js, main-page.js and main-page.xml.
NativeScript HelloWorld (JavaScript) A simple app that provides all the required framework files for development with NativeScript. The template provides a native button linked to a simple counter.
NativeScript MasterDetail (JavaScript) A simple app that provides all the required framework files for development with NativeScript. The template provides a simple list view with a master-detail interface.
NativeScript TabbedApp (JavaScript) A simple app that provides all the required framework files for development with NativeScript. The template consists of two views with tabstrip navigation.
NativeScript Blank (TypeScript) A truly blank app that provides all the required framework files for development with NativeScript and TypeScript.
NativeScript HelloWorld (TypeScript) A simple app that provides all the required framework files for development with NativeScript and TypeScript. The template provides a native button linked to a simple counter.
NativeScript MasterDetail (TypeScript) A simple app that provides all the required framework files for development with NativeScript and TypeScript. The template provides a simple list view with a master-detail interface.
NativeScript TabbedApp (TypeScript) A simple app that provides all the required framework files for development with NativeScript and TypeScript. The template consists of two views with tabstrip navigation.
NativeScript Blank with Angular 2 (TypeScript) A truly blank app that provides all the required framework files for development with NativeScript, Angular 2 and TypeScript.
NativeScript with Angular 2 (TypeScript) A truly blank app that provides all the required framework files for development with NativeScript, Angular 2 and TypeScript. This template is enabled for the Views service.

Select NativeScript Blank (JavaScript), provide an app name and click OK.

If prompted, log in with the account details you provided when you signed up for the NativeScript Insiders program.

Step 3: Examine the app structure

In the Solution Explorer, expand the file and folder structure of the app and examine it.

NativeScript apps consist of the following folders:

  • app: The folder contains the entire app functionality.

Step 4: Run your app on device

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

Run your app on an iOS device

  1. QR code for installing the developer app
    Scan to install the NativeScript developer app
    Verify that you have installed a QR code reader on your device.
  2. On your device, install the NativeScript developer app.
    Scan the QR code or install the NativeScript developer app from the App Store.
  3. With your app loaded in Microsoft Visual Studio, select AppBuilderBuild <app_name> in Cloud.
  4. Select iOSAppBuilder companion app and click Next.
  5. Scan the application QR code with your device.
  6. Tap the URL to open it.
    Your app launches in the NativeScript developer app.

Run your app on an Android device

  1. QR code for installing the NativeScript developer app
    Scan to install the NativeScript developer app
    Verify that you have installed a QR code reader on your device.
  2. On your device, install the NativeScript developer app.
    Scan the QR code or install the NativeScript developer app from Google Play.
  3. On your device, go to Settings -> Security -> Device administration and verify that Unknown sources is selected.
  4. With your app loaded in Microsoft Visual Studio, select AppBuilderBuild <app_name> in Cloud.
  5. Select AndroidAppBuilder companion app and click Next.
  6. Scan the application QR code with your device.
  7. Open the URL in the browser.
    Your app launches in the NativeScript developer 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 the extension for Visual Studio, synchronize your changes with the cloud and just tap and hold with three fingers on the device. For more information about LiveSync, see AppBuilder LiveSync.

CLI

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.

Step 1: Run the command-line interface

  1. In the command prompt, run the following command.

    npm install appbuilder -g
    
  2. Wait for the operation to complete and restart the command prompt.

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

    appbuilder help
    

Step 2: Create your first NativeScript app

You can start your NativeScript development from any of these templates.

Option Description
Blank A truly blank app that provides all the required framework files for development with NativeScript. The template provides a blank interface and a sample NativeScript app structure consisting of empty app.css, app.js, main-page.js and main-page.xml.
HelloWorld A simple app that provides all the required framework files for development with NativeScript. The template provides a native button linked to a simple counter.
MasterDetail A simple app that provides all the required framework files for development with NativeScript. The template provides a simple list view with a master-detail interface.
TabbedApp A simple app that provides all the required framework files for development with NativeScript. The template consists of two views with tabstrip navigation.
TypeScript.Blank A truly blank app that provides all the required framework files for development with NativeScript. In addition, the template is developed with TypeScript and provides all the required declaration files to let you develop NativeScript apps using TypeScript. The template provides a blank interface and a sample NativeScript app structure consisting of empty app.css, app.js, main-page.js and main-page.xml.
TypeScript.HelloWorld A simple app that provides all the required framework files for development with NativeScript. In addition, the template is developed with TypeScript and provides all the required declaration files to let you develop NativeScript apps using TypeScript. The template provides a native button linked to a simple counter.
TypeScript.MasterDetail A simple app that provides all the required framework files for development with NativeScript. In addition, the template is developed with TypeScript and provides all the required declaration files to let you develop NativeScript apps using TypeScript. The template provides a simple list view with a master-detail interface.
TypeScript.TabbedApp A simple app that provides all the required framework files for development with NativeScript. In addition, the template is developed with TypeScript and provides all the required declaration files to let you develop NativeScript apps using TypeScript. The template consists of two views with tabstrip navigation.
  • In the command prompt, run the following command to create your first app from the Blank template.

    appbuilder create native "Hello World"
    

If prompted, log in with the account details you provided when you signed up for the NativeScript Insiders program.

Step 3: Examine the app structure

On your local file system, locate the app directory and examine it.

NativeScript apps consist of the following folder:

  • app: The folder contains the entire app functionality.

Step 4: Run your app on device

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

Run your app on an iOS device

  1. QR code for installing the developer app
    Scan to install the NativeScript developer app
    Verify that you have installed a QR code reader on your device.
  2. On your device, install the NativeScript developer app.
    Scan the QR code or install the NativeScript developer app from the App Store.
  3. In the command prompt, navigate to the directory that contains your app.
  4. Run appbuilder build ios --companion
  5. Scan the application QR code with your device.
  6. Tap the URL to open it.
    Your app launches in the NativeScript developer app.

Run your app on an Android device

  1. QR code for installing the NativeScript developer app
    Scan to install the NativeScript developer app
    Verify that you have installed a QR code reader on your device.
  2. On your device, install the NativeScript developer app.
    Scan the QR code or install the NativeScript developer app from Google Play.
  3. On your device, go to Settings -> Security -> Device administration and verify that Unknown sources is selected.
  4. In the command prompt, navigate to the directory that contains your app.
  5. Run appbuilder build android --companion
  6. Scan the application QR code with your device.
  7. Open the URL in the browser.
    Your app launches in the NativeScript developer 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, synchronize your changes with the cloud and just tap and hold with three fingers on the device. For more information about LiveSync, see AppBuilder LiveSync.

Next Steps

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

Examine the NativeScript API documentation and continue with your native development.

See Also

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