These are the first steps, the initial commands and the index.html file you need to start developing your Ionic App with Firebase.
Install Node.js, Apache Cordova and Ionic framework
The first step will be install Node.js as Ionic provides a CLI that helps you to generate the app and provides some commands to build and generate the APK file and many other useful commands.
You should choose your development platform and Node.js version (Long Time Support or latest stable version) and follow the steps provided by the Node.js page.
Once is installed, you proceed to install Ionic and Cordova as the Ionic Framework is built on the top of the Apache Cordova.
Installing Apache Cordova
The Apache Cordova bot logo. The Apache Cordova is a fundation part of the Ionic App
The following command will install the needed cordova executables globally, this is accessible for the whole system.
Installing Ionic Framework CLI
Ionic adds a layer over the Cordova framework providing an optimized version of the Angular framework, a set of visual components that will adapt to the specified target to follow the visual development guidelines respectively and a Command Line Interface with own commands and as a wrapping of the Bower and Cordova commands.
The next command will do the proper with the Ionic CLI to set it available throw all the system.
Installing Bower to manage front-end dependencies
We add Bower support to install front-end libraries as project dependencies. Ionic provides a configuration to save them into a specific folder in order to be included in the final geneated bundle. The following command will set it available also globally.
Bower helps you to manage libraries and dependencies.
Generating the Ionic app
Once you have the Ionic CLI installed you can proceed to generate the application with just only one command:
The command details are:
- start will generate a new app
- yourappname is the name you want to give to your app
- the third parameter is the app template to generate a basic HTML code: blank,tabs,...
blank will provide the HTML for a blank page and tabs provide the HTML skeleton for a tabbed application.
In our app, we have chosen the tabbed template as it fits to the starting idea of the app.
- The final parameter --type ionic1 forces the generator to use the version 1 of the framework because of the technology chosen
Adding the mobile development platforms
The following command will add support for the project for the specified mobile platform.
After this command you will be able to generate, build or emulate the application into the added platforms but you will need to install the needed SDK. In the case of Android you can follow the to add the SDK to your development box. A practical way to do it is installing and tune up the Android Studio and the Android SDK.
Android Studio and Android SDK
Adding Firebase libraries to the Ionic App project
We base our backend with Firebase and Ionic Framework adds Angular to build the application. So we will install the JS libraries needed. We use the bower command to install the dependency and use it locally:
To help us in the development we added also the AngularFire library to provide an easy use and access to the objects and collections of objects from the Firebase realtime database with the Angular Framework. AngularFire is the officially supported AngularJS binding for Firebase.
In both cases we add the --save flag to save it in dependencies definition and persist it on the project.
This command opens a browser and display the result of the application in the standard view. If we need to show it as it was a handheld device we need to run the developer tools in Chrome, Firefox or the browser you use and adjust it in the options. This will open a server in a specific port and will be aware of live changes in code to automatically update the view.
Like the previous command but this one opens a browser with the views that will be generated for the iOS and Android versions of the app. Both at the same time and synchronized one from another.
Ionic app with iOS and Android views at the same time
Other interesting commands in the development are the following:
This will generate the APK package with the content of the application if the Android SDK is correctly installed on the system.
This will launch an emulator running the app.
This will run the app into a device with USB debuggging enabled connected to the system as described in the Android developer site. It will also automatically update if any change is detected in the source code of the application and is very useful for online debugging.
If this doesn’t work, make sure you have USB debugging enabled on your device, as described on the Android developer site.
The index.html file of the Ionic App
This is the final index.html file used in the project.