NativeScript and Angular – Mobilising a Progress System
Pace IT recently attended the PUG 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
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.
After you provide your app name, NS will download all NS dependencies and ready your app for you to begin coding.
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
- 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
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
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
- 2. app-routing.modules.ts file also located within the root of the app folder
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.
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
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.
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.
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.
Creating PUG members listing
Next we create our member component and call the load method from our member service within the ngOnInit method.
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.