How to Set Up a Shopping App with Ionic Firebase
Oct 15, 2018 • 7 Minute Read
Introduction
In this tutorial, you’ll learn how the app ShoppingTODO (published both in Apple's App Store and Google's Play Store) was built. You can get access to the full source code on Github. We'll go through each file and explain all the bits and pieces that were needed for it to work.
You’ll learn how to use Firebase as your backend and also how to incorporate the Material design. The app will have features like list sharing, budget tracking, and live updates.
It All Starts with an Idea
The idea serves to solve a problem that we may have. Our problem is easy to define: we tend to forget things that we have to buy at the store. More so, we don't like getting tricked into buying something that we don't need and then having buyers remorse when we get home. How many times have you gone to the store with a list full of items to buy? And how many times were you crossing it off with your pen while, in the other hand, using your smartphone to chat with your friend? So, wouldn’t it make more sense to just accomplish both of those tasks directly from your phone and ditch the pen and paper?
The app that we're about to build will let you enter items, enter exact prices of those items, and the amounts of each item you actually bought. Additionally, it will immediately display the total price of the items on your list. Lastly, live updates will enable just-in-time edits so that the person you share lists with doesn't have to call you to let you know that you should add that "one more thing.”
Design
The way we’ll approach this implementation is by trying to reuse as much as open source help as possible by using an open source theme. We'll use the following open source template. More specifically, we will only use the demo example.
Finished Project Screens
The finished app, which you can take a look at here, has the following screens:
Login: The app offers Facebook and Google login. It even has a DEMO mode where you can test the app without needing to log in.
Home screen: You can add as many projects (we call them groups in the code) as you like.
Project screen: Shows a list of items that need to be bought and those that are already bought. It also has a view of the price of bought/to-buy items.
Adding items to the project screen:
Adding users to your project:
Finished Project Code
You can clone the project and get it running locally by doing the following:
- Clone the code from Github
- cd into the new folder
- Run ionic serve
You should see the login screen (shown above) in your browser. If you want to run this app on your phone, you need to make sure the plugins listed below are installed (after adding the platform with ionic platform add ios or ionic platform add android). You can list the installed plugins by executing ionic plugin list in your project root directory (where your ionic.project file resides).
- cordova-plugin-admobpro 2.11.1 "AdMob Plugin Pro"
- cordova-plugin-extension 1.2.9 "Cordova Plugin Extension"
- cordova-plugin-inappbrowser 1.2.1 "InAppBrowser"
- cordova-plugin-splashscreen 3.2.0 "Splashscreen"
- cordova-plugin-statusbar 2.1.1 "StatusBar"
- cordova-plugin-whitelist 1.2.1 "Whitelist"
- ionic-plugin-keyboard 1.0.8 "Keyboard"
To install the missing plugins, here's a copy/paste installation shortcut (execute this in your Command prompt/Terminal once in the root of your project):
- Cordova plugin add cordova-plugin-admobpro
- Cordova plugin add cordova-plugin-extension
- Cordova plugin add cordova-plugin-inappbrowser
- Cordova plugin add cordova-plugin-splashscreen
- Cordova plugin add cordova-plugin-statusbar
- Cordova plugin add cordova-plugin-whitelist
- Cordova plugin add ionic-plugin-keyboard
You can also take a look at this project with theIonic View application by entering the code: 4f055b6d. Or you can download it from the App Store, Play Store, or even try it out in your browser.
How Does It Work?
As I mentioned in the design section above, I used an awesome Ionic Material template as a basis for this project. If you've never cloned a Github repository, there are a number of resources for you.
I used demo folder for the basis of my project. Once you're in the demo folder, if you run `ionic serve --lab’, you'll get the following screen:
Starting Point
From this point on, I will give you the Github link to the exact file/function that I'm referring to and will only show those lines of code necessary to explain what's happening.
From my experience, when trying to understand some Ionic framework code, I always go to app.js file first and check out the config() function to see how the routes are set up. Looking at our example, we can see that the first screen that shows up is at route /app/login:
$urlRouterProvider.otherwise('/app/login');
We can now check the definition of this state and see that it looks like this:
.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
},
'fabContent': {
template: ''
}
}
})
From here we can conclude several things:
- The login state is app.login and we can reference it by that string.
- The login URL is /login and that's what you would see in your URL if you ran it in your browser.
- The login has two views: menuContent and fabContent.
- The HTML of the menuContent view is defined in the templates/login.html file.
- fabContent view doesn’t have a template associated with it.
Note: the name "fab" comes from the Floating Action Button in Material design documentation.
Firebase
In this project, Firebase is used as the app's backend, including data storage and user authentication. It features a real-time database and it can also do static hosting. You can learn more about Firebase here.
Next Steps
Continue on to my next guide, Building an App with Ionic Firebase, where we'll dive into each of the screens that will be available in our finished app.
