NativeScript Beers

A tutorial

NativeScript Beers is a tutorial of the Beer Tutorials series.
In this tutorial we will create a simple app that queries a beer catalog and displays a list of beers.

Getting Started

Install NodeJS and then using the node package manager (npm), install native script.

npm install -g nativescript

After installing native script, create a new project called nativescript-beers.

tns create nativescript-beers

Navigate to the project directory and add the mobile development platform.

tns platform add android

Run the application on the Android emulator.

tns run android --emulator

Note: To run the application in the Android emulator, you need to have the Android SDK
installed and configured on your computer.
The easiest way to do it is to install Android Studio
for your platform.

The tns livesync command instantly transfers XML, CSS, and JavaScript files to a running NativeScript app. If you set the command’s --watch flag (tns livesync ios --emulator --watch or tns livesync android --emulator --watch), the NativeScript CLI will watch your app for changes, and apply those changes automatically after you save files. Be warned, however, that the livesync command currently does not show console.log() output or stack traces. So during debugging you may want to switch back to tns run or use adb logcat in parallel to get logs directly from the android emulator.

Inside the project folder there are 3 sub-folders: app, node_modules and platforms :

app: This folder contains all the development resources you need to build your app. You’ll be spending most of your time editing the files in here.

node_modules: This folder contains your app’s npm module dependencies. All new NativeScript projects start with a single dependency on tns-core-modules.

node_modules/tns-core-modules: This folder contains your app’s NativeScript modules, which are a series of NativeScript-provided JavaScript modules you’ll use to build your app. Each module contains the platform-specific code needed to implement some feature—the camera, http calls, the file system, and so forth—exposed through a platform-agnostic API (e.g. camera.takePicture()). We’ll look at some examples momentarily.

package.json: This file contains your app’s configuration details, such as your app id, the version of NativeScript you’re using, and also which npm modules your app uses. We’ll take a closer look at how to use this file when we talk about using npm modules in chapter 5.

platforms: This folder contains the platform-specific code NativeScript needs to build native iOS and Android apps. For example in the android folder you’ll find things like your project’s AndroidManifest.xml and .apk executable files. Similarly, the ios folder contains the Groceries’ Xcode project and .ipa executables. Note, users on Windows machines will not have an ios folder.

Application code is written using JavaScript and the user interface designed using XML. Inside the app folder is a file called main-page.xml which has the default user interface code. In main-view-model.js is the default model code and main-page.js defines the application logic. Finally app.js contains the code to start the application with the defined modules.

Designing the app

Let’s start by designing the application using XML. Open main-page.xml and look at the default code. Remove everything except the Page tag. The Page tag has an attribute called loaded which executes the pageLoaded function once the app loads. The pageLoaded function is inside the main-page.js file.