Build and publish a Ionic application

These are the posts about how I implemented a Ionic framework application (v1).

Here it is the Github repository https://github.com/jmtalarn/strikethru

The idea

The idea

Any project starts with an idea. In this case, with the target of learning about Ionic framework, I decided to use the idea from the Strikethru productivity method, a kind of improved GTD, which in its analogical version it worked for me.

Configuring Firebase

Configuring Firebase

Any application with needs to be some kind of online logic needs a counterpart in the backend. Firebase offers you some kind of backend capabilities as NoSQL database, a useful simple data store or the backend managament for integrating authentication with some of the most common website accounts like Google, Github, Facebook… Everything with a ready to use interface to manage directly that data and configurations.

First steps

First steps

In this post there is a little guide with all the tools you need to install Node.js, Bower or the own Ionic Framework CLI and the few commands you need to create an initial application with a scaffold of the project structure.

AngularJs views and routes

AngularJs views and routes

A Ionic application is nothing else than a AngularJS application running inside a Webviewer in the device. Each application needs to define its views and in any web application each view corresponds, usually, into a web route. Here there is the relation of views created in the application.

Defining services and controllers

Defining services and controllers

AngularJS needs code to work :D. It is interesting to put that code in a place or another depending on the scope of the functionality for the good of the project maintenance and for future developers. The services or factories have the mission of providers whilst the controllers have the mission to contain the business logic of the application components.

Defining directives

Defining directives

Reusing code is something that you always want to do… Creating directives allows you to create components that can be reused in many places on your app and even export externally to be used in other apps.

Adding Cordova plugins

Adding Cordova plugins

Ionic framework is built on top of Apache Cordova. This framework integrates the native API of the devices to the application developed and let’s add some plugins with many additional integrations. In this post there is a list of the plugins used in the application.

Sync data with Firebase

Sync data with Firebase

The application saved on save buttons so, while you are writing and moving tasks around it is updating automatically the backend provided with Firebase. This is the procedure implemented.

Create icon and splash images

Create icon and splash images

It’s not only a marketing question. Mainly the icon and second the splash image is the presentation of your application and in many case the first impression counts… a lot.

Build the final application package and publish to the market

Publishing it!

Pending of the publication on my own of the application in the app store here there is this final post, original from the ionic framework documentation. It guides you in the task of build, sign and publish your application in the Google Play store application market or the iOs App Store.