What is NativeScript?

NativeScript is an open-source framework for creating mobile applications on iOS and Android devices. Its primary advantage is that you can develop any mobile application without any web views. Several different frameworks are compatible with NativeScript - most mobile apps built with NativeScript use either Angular, Vue.js (what we’ll be using today!), React, or plain JavaScript and CSS.

How do I start developing with NativeScript?

NativeScript mobile apps can be developed either locally or through a Cloud-based integrated development environment (IDE) called NativeScript Playground. The best part about the Playground is that you don’t need to do any complicated setup - simply navigate to the Playground web client, download a couple apps on your mobile device, and you’re all set for creating that mobile app!

In this pre-lab, we’ll be demonstrating how to use NativeScript Playground as well as building apps locally.

NativeScript Playground & NativeScript Preview

1. To build an app on the Playground, navigate to: https://play.nativescript.org/ This is where you’ll be writing your app code.
2. Download these two apps on either the Apple App Store if you have an iOS device or Google Play if you have an Android device:
   • NativeScript Playground
     • IOS
     • Android
   • NativeScript Preview
     • IOS
     • Android
   Downloading the NativeScript Playground mobile app allows you to connect your online code with your mobile device, and NativeScript Preview allows you to preview your app (basically run your app) on your phone.

The IDE

If you’ve done iOS development before, you’ll notice that the Playground has similar functions to Xcode. In the very center is where you’ll write your JavaScript code (in HelloWorld.vue ). On the left side is the Explorer that contains your folders and files (sort of like Finder ). To add a file, folder, resources (images, fonts), or NPM package (such as nativescript-geolocation allowing your app to have access to the user’s location), simply press the + icon in the top right of the Explorer.

Also on the left side is a Components section that allows you to drag items, such as Buttons and Images, into your app. This is extremely convenient because it allows you to save time writing HTML tags - simply drag and drop!

The top bar contains options to start a new project (by clicking New ), scan a QR code, save your project to your account (if you create an account on the NativeScript Playground), or download your project so you can develop locally.

You might be wondering, How do I run the app on my phone? This is where the QR code option comes in! Tap this option in the top bar and you’ll see a QR code like this pop up:

Open the NativeScript Playground app on your mobile device and scan this QR code. It will then forward you to the NativeScript Preview app which allows you to view your live app. It’s that easy!

When you write more code and make changes to your app, no need to scan the QR code again. All you need to do is hit Preview in the top right corner of the page and your app will automatically refresh with the new changes.

Functionality & Syntax

All your app contains right now are some Labels. These Labels are wrapped in a StackLayout embedded in a ScrollView . HelloWorld.vue is a single file component , where all the HTML-like code goes in the <template> tag and the JS code goes in the <script> tags. Similarly, all the CSS code goes in the <style> tags.

For debugging purposes, to print to the console, use console.log().

To add NPM packages just like you would in the command line, click the + sign in the Explorer → Add NPM Package .

• nativescript-geolocation
• nativescript-cloud
• nativescript-baidu-push-notifications

Refer back to Lab 4 and Assignment 3 if you need a refresher on writing JS code in Vue. You are also welcome to develop NativeScript app using Typescript, Angular or other technologies you find comfortable.

Other Useful Information for Developing Locally

If you’re sick of the Playground and want to develop in your favorite IDE, such as VSCode or Sublime, click the Download button in the top bar of the playground. (Note: This will not be necessary for completing the lab, though could be useful if you plan on using his for your final project).

NativeScript is run on Node.js, so if you don’t have Node already installed on your computer, navigate to: Node.js to install the latest version.

In Terminal, type: npm install -g nativescript@latest to install the latest version of NativeScript locally.

cd into your project folder and in Terminal, type: tns preview to view your app.

Tasks

To summarize, for this prelab you will need to:

• Download both NativeScript Playground and NativeScript Preview on your mobile device
• Practice installing npm packages following the instructions listed above. You will need to be familiar with this for the lab.
• In your HelloWorld.vue, you will need to modify your Action Bar title to say "Pre-Lab 7"
• Lastly, change the background of your mobile app to your favorite color. (Hint: Done in the styling section)