All articles:

NativeScript and Angular – Mobilising a Progress System

NativeScript and Angular – Mobilising a Progress System

Pace IT recently attended the PUG Spring Conference 2019 where our senior software developer, Sam Bacon, gave a presentation on how to utilise Progress NativeScript and Google’s Angular Framework to mobilise a Progress system into a cross platform mobile app. Sam has 7 years’ experience working on web apps and over 2 years’ experience of NativeScript and he’s passionate about building apps for both iPhone and Android. Here we summarise his insight and advice.

The benefits of NativeScript

With its OpenEdge API Backend, NativeScript has many benefits over hybrid alternatives such as:

  • Full access to the phone’s underlying APIs
  • The UI is the same as a native app as it can use the phone’s native components rather than looking like a website inside a phone container
  • Ability to use the phone’s hardware such as camera, accelerometer and payment abilities
  • Produces true .ipa and .ipk builds for iOS and Android respectively, which can then be sent to testers using TestFlight, Google Play console for Hockey app

NativeScript uses existing web technologies so existing web developers will find it easy to use and quick to learn. And, of course, the greatest benefit of all is that you can produce two apps from one code base, as we explored in more detail in a previous blog, thereby reducing development time and cost.

How NativeScript works

There are four major components to NativeScript:

  • 1. Runtimes Enabling you to call APIs in the Android and iOS frameworks using JS code
  • 2. Core modules Translate JS code into native gesture API calls
  • 3. NativeScript CLI which enables you to create, build and run apps using NS
  • 4. NativeScript Plugins

native script architecture

To set up the environment you simply need to:

  • 1. Install Node JS The NativeScript CLI is built on Node.js. You need to have Node.js and the Node package manager installed to use NativeScript
  • 2. Install the NativeScript CLI via NPM (npm install -g nativescript)
  • 3. Run tns to verify CLI is installed
  • 4. Configure iOS and Android development environments:
    • Install Java, Android Studio
    • Install Xcode (While you can now develop iPhone apps using cloud bills, you will still need a Mac to deploy to the App Store)
  • 5. Run tns Doctor to confirm everything has installed correctly

You’re now ready to use the CLI to set up your new app. You have the option to use Vanilla JS, Vue.js, Angular, or TypeScript, but we’ll be focusing on the Angular variation.

Nativescript app create

After you provide your app name, NS will download all NS dependencies and ready your app for you to begin coding.

Folder structure

There are five main folders as follows:

  • App resources Contains the platform specific resources (icons, config files etc)
  • Hooks Executable pieces of code or Node.js scripts that are used to alter behaviour of an extendable NativeScript CLI command
  • Node Modules Contains JavaScript packages including NativeScript core libraries and Angular core#
  • SRC Contains the Angular NS app where you will do your development
  • Platforms Contains the platform-specific project structure required for native development with the native SDKs of the platform. When the project is prepared for build, the NativeScript tooling copies relevant content from the app directory to the platform-specific subdirectory for each target platform

Nativescript Folder structure

Creating your first component – Login page

NativeScript components are made up of 3 main parts:

  • 1. TypeScript component
  • 2. HTML / Mark-up file
  • 3. Styling SCSS / CSS

login components

Registering your component – Login page

You must register your new component in two places for it to be loaded by the app:

  • 1. app.module.ts file located in the root of the app folder

app module

  • 2. app-routing.modules.ts file also located within the root of the app folder

app routing module

This maps a route Uri to a specific component so that we can navigate to specific components throughout our app.

Creating page HTML

The next step is to create the mark-up for our login screen. Elements are created in a similar way to html mark-up but use their own special NativeScript tags.

Adding styling

Styling can be added similarly to a web application in one of 3 ways:

  • Using cascading stylesheets (though note that only certain CSS properties are supported)
  • Setting style properties directly on the element
  • Changing style element using JS

login components style

Running your app

You can now run your app on the Android and iOS emulators using the following commands:

  • tns run ios (OSX is required)
  • tns run android

or on a physical device by suffixing the above commands with -device and providing one of the listed device ids.

pug app screens

Wiring up the login component to your authentication provider

You’re now ready to use any OAuth service to connect to your authentication provider. In this example we’re using the Kinvey SDK authentication process.

  • ngOnInit – Check for active user. Redirect to members if active user is set.
  • Login – Validate user from form. Call Kinvey authentication and redirect to members if authenticated.

ngOnInit

Creating PUG members listing

Next we create a service to load the members from the backend Kinvey API.

This method loads all members and the getMemberById method filters the dataset to a particular user.

PUG members listing

Creating PUG members listing

Next we create our member component and call the load method from our member service within the ngOnInit method.

Creating PUG members listing

Creating PUG members listing

Try our demo app for yourself here.

Can Pace IT assist you with a NativeScript project?

Pace IT would be delighted to help you mobilise your business application, whatever industry you may be in. Contact us for a meetup session on NativeScript and Angular or for any other assistance we can provide.

Comments are closed.