CajaFuerte: ionic and firebase app (Part 2)

Image

Welcome to Part 2 of the series: Build an ionic2 app in 3 weeks! In the last post we started laying the foundation for our new app using the Ionic Super Starter Template with FontAwesome in the mix. We removed several components we didn’t need that were included in the template and cleaned up the ones we wanted to keep.

The commit below shows the results after doing some basic housekeeping to our app


Did you miss Part 1?

For those who haven’t read Part 1, go take a look, it will give you a better idea of what we’re trying to accomplish in this series.

But to refresh your memory, the approach I’m taking on this tutorial series is as if I’m working with a customer who just hired me to develop an app and is expecting quick results. I offered my fake customer that I would produce a prototype of the app for his approval before I implemented the services/logic.

TL;DR - In a Hurry?

Get the code from this GitHub Repo or test drive the finished mockup in Ionic View ID: 7a8e133b

What do I need to complete the mockup?

  1. List of components/functionality
  2. Add a theme to our ionic app
  3. Add mockup data for our prototype


1. List of components/functionality

After meeting with my fake customer we came up with a laundry list of items we wanted the app to include:

  1. Login
  2. Sign up
  3. Intro
  4. Tab layout: Accounts, Favorites, Search, Settings
  5. Account details

Luckily for us, the Ionic Super Starter Template that we used to get off the ground already included all those items out of the box. As for the type of information we want to save in our Online Information Manager app, we could potentially include:

  1. Passwords
  2. Alarm Codes
  3. Bank Account Numbers and details
  4. Debit/Credit Card Information
  5. Calling Cards
  6. Meds
  7. etc, etc, etc

You get my point. But due to time and budget constraints, my customer wanted to keep it simple and concentrate on passwords for now. He did promise to hire me again for phase two :wink:

2. Add a theme to our ionic app

In my fake scenario with my fake customer, I was provided specific guidelines in terms of the colors and look and feel for this app. So the first thing I need is to create a new ionic theme for this app.

By default, ionic includes an App Theme section in variables.scss

// App Theme
// --------------------------------------------------
// Ionic apps can have different themes applied, which can
// then be future customized. This import comes last
// so that the above variables are used and Ionic's
// default are overridden.

@import "ionic.theme.default";

Ionic created a dark theme in addition to the default theme ionic.theme.dark.scss here. We’re going to create a new theme for our app called cajafuerte.theme.default.scss and save it under the theme folder, as shown below:

CajaFuerte-app/
├── src/
│   ├── theme
│   │   ├── cajafuerte.theme.default.scss
│   │   ├── variables.scss

Last, but not least, we’re going to modify the theme variables to suit our look and feel preferences.

Here are the changes:

If you noticed, for this commit I also updated to ionic 2 final. Congratulations to the ionic team for such an amazing achievement :clap: :beer: :tada:

3. Add mockup data for our prototype

At this point, we know the component we need for this app and we know what kind of data we’re going to deal with. Remember that at this point we’re interested in building a prototype so we can hard-code demo data for our mockup. This will give our customer a good sense of what the app would look like when complete.

To add mockup data I used the following HTML markup

<ion-content>
  <ion-list>
      <ion-list-header color="light">
        Navigate
      </ion-list-header>
      <button ion-item menuClose *ngFor="let p of pages" (click)="openPage(p)">
        <i class="fa   cf-icon"></i>
        <span class="mlmenuitem"></span>
      </button>
    </ion-list>
</ion-content>

And I used the following code

ionViewDidLoad() {
    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Passwords', component: PasswordsPage, icon: 'fa-unlock', color: '', showloader: true },
      { title: 'Bank Accounts', component: ItemDetailPage, icon: 'fa-bank', color: '', showloader: false  },
      { title: 'Drivers License', component: ItemDetailPage, icon: 'fa-id-card-o', color: '', showloader: false  },
      { title: 'Meds', component: ItemDetailPage, icon: 'fa-heart-o', color: '', showloader: true  },
      { title: 'Alarm Codes', component: ItemDetailPage, icon: 'fa-bell-o', color: '', showloader: true  },
      { title: 'Vehicle Registrations', component: ItemDetailPage, icon: 'fa-car', color: '', showloader: false  },
      { title: 'Gifts', component: ItemDetailPage, icon: 'fa-gift', color: '', showloader: false  },
    ];
  }


And with these simple changes, our mockup is complete:


cajafuerte-tutorial

cajafuerte-welcome

cajafuerte-forms

cajafuerte-passwords

Ready for a Test Drive?

You can test the mockup using Ionic View ID: 7a8e133b. Download it here http://view.ionic.io/

What’s next?

Next week I’ll add all the necesarry functionality for our app, including

  1. Firebase 3
  2. AngularFire 2
  3. Firebase Rules
  4. Code and logic

Until then, have a great weekend! I’ll see you in 3/4 days…


Older posts...

Written by

Get in touch!

Notice any mistakes?
Leave me a message