Building an App for Good: Intern Experiences with NativeScript and Firebase
Note: This post was co-authored by Noah Costello and Allie Rauner.
As three Don’t Panic summer interns, our project was to create the MyLNK app. The goal of this app is to provide an easy-to-navigate interface that allows people to find all of the services provided by Lincoln’s nonprofits and organizations. It should be available to download on the App Store and Google Play store this fall. We decided that the best way to create this app was to use a stack consisting primarily of NativeScript and Firebase, and this post is our opportunity to share our thoughts on these tools.
NativeScript
NativeScript is a free, open source framework created by Telerik that allows developers to build apps native to both iOS and Android without having to code them separately. The reason why we chose NativeScript is that it allowed us to design our app in the popular Angular framework and have our code compiled to each mobile platform. We chose NativeScript over its competitors (namely Ionic) because it did not run a web view of our code, but instead used the native libraries of each platform.
We really enjoyed using NativeScript and were really blown away by its speed. Even on our sluggish Android emulators, NativeScript’s UI felt really quick and snappy. NativeScript has a huge selection of plugins so we were able to find a plugin for everything we needed, and adding a plugin was simple:
'tns plugin add (plugin-name)'
Version control with NativeScript is incredibly easy. All of your apps’ code goes into the /app directory. Everything else (except package.json) can be placed in your .gitignore file.
Despite the many great parts of NativeScript, there are some areas in which it can improve. For example, apps built with NativeScript can only run on Android version 4.4 or newer and iOS 8 or newer. While this probably won’t be a problem for most users, we found this to be an issue as our app is partly for those below the poverty line and may not have access to the newest technology. It was also a challenge to get our Android emulators set up to meet NativeScript requirements as well.
Another aspect of NativeScript is that it does not have full support for CSS because of their unique markup. Here is the list of available CSS properties. This limitation makes it more difficult to customize the UI because you have to work within the constraints that NativeScript contributors set. However, we could usually find a way to get the results that we wanted by using NativeScript components like Border, Span, and GridLayout in creative ways.
Firebase
Firebase is a set of tools created by Google that allows developers to manage authentication, database, hosting, and other services. With Firebase Authentication, application security is mostly handled for you. Firebase takes care of storing usernames, emails, and passwords, and gives you the option of utilizing Google or Facebook for your sign-in. Firebase also has a way to add rules to the database that manage data verification and access control. The database itself can be imported or exported in a JSON format, so using data from an Excel sheet or integrating data from another JSON-based database is relatively easy. As for hosting, Firebase uses a mix of their online console and a Command Line Interface to deploy web applications onto Google’s servers with very little hassle. We chose Firebase over other database services as it had these features, was backed by Google and it’s relative compatible with NativeScript.
Firebase has three pricing plans. All plans include Analytics, Notifications, Crash Reporting, Realtime Database, Storage, Authentication, Hosting, Test Lab, and Functions. The main stipulation of the free account is the presence of usage quotas. Firebase allows 100 simultaneous connections, 1 GB of storage, and 10 GB of downloads for free. Firebase offers a $25/month plan, which includes 100,000 simultaneous connections, 50GB of storage and 50GB of downloads per day. For even bigger projects, Firebase offers a customizable pay-as-you-go plan.
One problem we faced was using Firebase with NativeScript. Firebase has not yet created a way to merge these technologies, so we relied on the NativeScript Firebase plugin by Eddy Verbruggen. This plugin is limited in the features as well as the documentation that it provided. A good way to become familiar with the methods available is to go into the GitHub code and look at the unit tests.
Similarly, using Angular 2 for a web application was a challenge with Firebase. Firebase’s documentation for integrating with web applications is for AngularJS. A little bit of searching led us to a plugin called AngularFire2, which is the official library for Firebase and Angular 2. While this is not easily useable with NativeScript, it was very helpful when creating our website for managing data. Once again, this plugin was not very well documented, so a look at the unit tests was invaluable.
Further Reading
- NativeScript Official Documentation – https://docs.nativescript.org/
- NativeScript Installation Guide – https://docs.nativescript.org/start/quick-setup
- Angular 2 Official Documentation – https://angular.io/docs
- Angularfire2 GitHub Repository – https://github.com/angular/angularfire2
- Firebase Official Documentation – https://firebase.google.com/docs/
- NativeScript Firebase Plugin – https://github.com/EddyVerbruggen/nativescript-plugin-firebase
