For the following 3 weeks we are going to build a small ionic2 app from the ground up using Firebase as the backend. We’re gonna call this app CajaFuerte - Online Information Manager App. I chose this topic for 3 simple reasons:
- Building an app from scratch is fun
- I needed this kind of app for my teenage kids who always forget their passwords
- Last but not least, why not…
I will cover the following
- Week 1: The Basics / Prototyping
- Week 2: Implement Services
- Week 3: Going Live
This is the third post of the ionic2 weekly challenge series (#ionic2weeklychallenge) and for the purposes of this tutorial I’m assuming you already have ionic fully configured and running on your DEV environment and you are familiar with Firebase.
So let’s get started…
Check your dependecies first: Ionic Info
Compare your local configuration against the dependencies below to make sure we’re both on the same page. Ionic is moving at lightning speed (kudos to the ionic team ) that different versions may have different resuls.
|Ionic Framework Version||2.0.0|
|Ionic CLI Version||2.2.1|
|Ionic App Lib Version||2.2.0|
|Ionic App Scripts Version||1.0.0|
|ios-deploy version||Not installed|
|ios-sim version||Not installed|
|Xcode version||Not installed|
Please Note RC5 is already out; HOWEVER, I had quite a few issues with it. I’ll stick to RC4 for now until the next update comes out.
Week 1: The Basics / Prototype
The approach I’m taking on this tutorial is as if I’m working with a customer who just hired me to develop an app and is expecting quick results. So we’re going to build a prototype / DEMO of our app first.
I don’t know about you but for me, building a prototype gives me a better sense of the moving pieces and allows me to plan better for what needs to go under the hood. It also helps me keep the customer happy! Win…Win…Win…
For this app, I’ll use the following:
- The Ionic Super Starter template, to get off the ground quickly
- Fontawesome, to make the app look better
- Firebase, to save our data
- AngularFire2, to access our data
TL;DR - In a Rush?
I hear you. You can get the code from this GitHub Repo and also follow along with the commits referenced in the sections below.
Building our prototype on top of last week’s tutorial
In my previous tutorial, I covered how to install the Ionic Super Starter template and how to add Fontawesome to your app: Best practice when adding FontAwesome to an ionic2 app. We’re going to build our prototype on top of that to save time.
Take a look at the GitHub commit below. This is the app we build on my last tutorial and the first commit for our new app.
From here I have dome some housekeeping to our app to get rid of all the pages and logic that we don’t want and keep only the stuff that we need. I have removed things like:
- Maps page
- Menu page
- Cards page
- i18n Languages
For full details take a look at this commit
See it in action: these are the results we have so far
So what’s next?
Now that we’ve come this far, we’re ready to start building our prototype. In the next couple of days I will post Week 1 Part 2 of the series and by the end of week 1 we will have a good looking prototype that we can show to our fake customer.
See you in a 2/3 days!!!