Building a NativeScript + Angular 2 Mobile App using Firebase
The powerful combination of NativeScript, Firebase, and Angular 2 can kickstart your app building into high gear, especially during the holidays when you find yourself confronted with the need to speed up your app development AND meet your family’s gift-giving needs! Just in time, I am happy to present to you(see what I did there 🎁) a demo of how to leverage Firebase in your Angular 2-powered NativeScript apps using several elements of Eddy Verbruggen’s famous NativeScript-Firebase plugin.
In this tutorial, I’m going to show you how to use four popular Firebase elements in your NativeScript app: Authentication with a login and registration routine; Database for data storage and real-time updates; Remote Config to make changes to an app remotely; and Storage for saving photos. To do this, I decided to rewrite my Giftler app, originally written in Ionic.
Before we get started, I encourage you to read through the documentation before starting in on your project, and make sure that a few prerequisites are in place:
Ensure that NativeScript is installed on your local machine and that the CLI works as expected
Configure your preferred IDE for NativeScript and Angular development. You’re going to need TypeScript, so ensure that your transpiling process is working. There are excellent NativeScript plugins available for Visual Studio, Visual Studio Code, and Jetbrains-compatible IDEs, among others. Visual Studio Code in particular has handy snippets that speed up development
Log in to your Firebase account and find your console
Create a new project in the Firebase console. I named mine‘Giftler’. Also create an iOS and Android app in the Firebase console. As part of this process you’ll download both a GoogleServices-Info.plist and google-services.json file. Make sure you note where you place those files, and you’ll need them in a minute.
Install the dependencies
I’ve built Giftler as an example of an authenticated NativeScript app where users can list the gifts that they would like to receive for the holidays, including photos and text descriptions. For the time being, this app does the following on iOS and Android:
allows login and logout, registration, and a‘forgot password’ routine
lets users enter gift items into a list
lets users delete items from a list
lets users edit items in the list individually by adding descriptions and photos
provides messaging from the Remote Config service in Firebase that can be quickly changed in the backend
Now, fork the Giftler source code, which is a complete and functional app. Once your app is cloned, replace the app’s current Firebase-oriented files that you downloaded when you created your app:
In the /app/App_Resources/Android folder, put the google.services.json file that you downloaded from Firebase.
Likewise, in /app/App_Resources/iOS folder, put the GoogleService-Info.plist file also downloaded from Firebase.
These files are necessary to initialize Firebase in your app and connect it to the relevant external services.
Now, let’s take a look at the package.json at the root of this app. It contains the plugins that you’ll use in this app. I want to draw your attention to the NativeScript-oriented plugins:
"nativescript-angular": "1.2.0",
"nativescript-camera": "^0.0.8",
"nativescript-iqkeyboardmanager": "^1.0.1",
"nativescript-plugin-firebase": "^3.8.4",
"nativescript-theme-core": "^1.0.2",
The NativeScript-Angular plugin is NativeScript’s integration of Angular. The Camera plugin makes managing the camera a bit easier. IQKeyboardManager is an iOS-specific plugin that handles the finicky keyboard on iOS. The Theme plugin is a great way to add default styles to your app without having to skin the app entirely yourself. And finally, the most important plugin in this app is the Firebase plugin.
With the dependencies in place and the plugins ready to install, you can build your app to create your platforms folder with iOS and Android-specific code and initialize the Firebase plugin along with the rest of the npm-based plugins. Using the NativeScript CLI, navigate to the root of your cloned app and type tns run iosortns run android . This will start the plugin building routines and, in particular, you’ll see the various parts of the Firebase plugin start to install. The install script that runs will prompt you to install several elements to integrate to the various Firebase services. We’re going to select everything except Messaging and social authentication for the moment. A great feature is that a firebase.nativescript.json file is installed at the root of the app, so if you need to install a new part of the plugin later, you can edit that file and reinstall the plugin.
At this point, if you run tns livesync ios --watch or tns livesync android --watch to see the app running on an emulator and watching for changes, you would see a the app running and ready to accept your new login. Before you initialize a login, however, ensure that Firebase handles Email/Password type logins by enabling this feature in the Firebase console in the Authentication tab:
Install the dependencies
"nativescript-angular": "1.2.0","nativescript-camera": "^0.0.8","nativescript-iqkeyboardmanager": "^1.0.1","nativescript-plugin-firebase": "^3.8.4","nativescript-theme-core": "^1.0.2",