Building a NativeScript mobile application for Android
In this tutorial i'm going to take you step by step in a journey to build a tiny and helpful mobile application using NativeScript,We can easily target iOS too since we are using NativeScript which allows developers to build cross platform mobile apps using the same (or nearly the same in some cases ) code base ,but infortunatly i don't have a MAC which's required if you want to develop iOS apps.If you have a MAC feel free to use it to build an iOS app too ,the steps are the same.
The mobile app we are going to build in this tutorial is a small applications which can help you to do calculations with dates ,you can use it to answer questions such as
How old am I ?
How many days passed since some predefined date ?
This is from a user perspective ,from a developer percepective ,building this mobile app will show you
How to use the NativeScript CLI to generate/scaffold a new mobile app project ?
How to build your mobile app for a specific platform (Android or iOS) ?
How to use NativeScript XML based language to build the UI of your mobile app ?
How to use Angular 2 to build your mobile application ?
How to use NPM/Node.js modules (in our case moment.js ) in your app ?
So lets get started .
Using NativeScript CLI to create our project
So the first step is creating our project with NativeScript ,you need of course to have NativeScript CLI installed in your development machine ,if this is not the case then you need to check my previous tutorial getting started with NativeScript.
Now if you have your development machine ready for NativeScript start your terminal/or command prompt and enter the following command to generate a new project.
tns create momentapp --appid "com.techiediaries.momentapp" --ng
Notice also --appid switch which's used to specify the application unique id
You should get this message in your terminal/command prompt if there is no problem
Project momentapp was successfully created.
Next plug in your mobile app for testing and enter the following command
cd momentapp tns livesync android
If you want to test with an emulator instead of a physical mobile device you just need to add --emulator
tns livesync android --emulator
If you are under a MAC system and you want to build an iOS mobile app just change android to ios
tns livesync ios
tns livesync ios --emulator
Installing NPM modules in NativeScript app
To install an npm module inside your NativeScript project ,first cd into your project directory
And then use the normal npm install command
npm install momentjs
Next in your app's code you can require it normally
var moment = require('momentjs');
After building your app for a specific platform the nativescript cli will copy all modules (icluding your own installed modules) inside of nodemodules to 'platforms/
A primer on Moment.js
You can install it via npm with
npm install moment
Then you need to require it and start using it
var moment = require('moment');
Getting the current date and time with :
To convert to a specified format use format() function
moment().format('YYYY MM DD');
How to manipulate dates
var current = moment(); current.add('days', 1); // adds one day to the current date current.add('months', 1); //adds one month to the current date current.add('years',1); // adds one year to the current date
In the same way you can use substract()
var current = moment(); current.substract('days', 1); // substracts one day to the current date current.substract('months', 1); //substracts one month to the current date current.substract('years',1); // substracts one year to the current date
How to calculate the difference between dates
You can calculate the difference between two dates easily using the diff() method
var firstDate = moment('2016-10-23'); var secondDate = moment('2016-10-1'); console.log('Milliseconds between firstDate and secondDate is ', firstDate.diff(secondDate), 'milliseconds'); console.log('Days between firstDate and secondDate is ', firstDate.diff(secondDate,'days'), 'milliseconds'); console.log('Weeks between firstDate and secondDate is ', firstDate.diff(secondDate,'weeks'), 'milliseconds');
Calculate time between two dates
var firstDate = moment('2016-10-23'); var secondDate = moment('2016-10-1'); console.log(firstDate.from(secondDate)); console.log(firstDate.fromNow());
Building our app's User interface
We will start by building the home screen
RELATED TUTORIALSNativeScript & Camera Tutorial
NativeScript 3 : Create a Barcode/QR/UPC Code Scanner [Angular]
NativeScript 3 - Upgrade your existing project(s)
NativeScript vs Xamarin
How to persist data in your NativeScript mobile app
Getting started with NativeScript