Introduction

This is an example starter project used in the Ionic: From Web To Mobile course.

In this starter project we create a meal tracker application.

This application uses parse.com as a backend.

The starter app shows you how to signup and create a new user account with parse.com as well as how to login via parse.com.

We’ll show you how to save data in the parse database as well as showing you how to store images.

We’ll show you how to query parse.com and show your meals in a list view as well as supporting features like infinite scroll and pull to refresh.

A step by step explanation of how to implement this application can be found in the Ionic: From Web To Mobile course (70% off with the link above).

Setup

• Download and unzip into a folder.
• Run the below command to create the project NOTE: We are using the —sass flag which tells ionic to start this project with sass enabled.

ionic start --sass <name-of-your-app> <path-to-local-folder>

• Add the required cordova plugins

ionic plugin add cordova-plugin-media

• Add the required bower packages

bower install ngCordova bower install angular-moment

bower install parse-angular-patch

bower install angular-messages

Setting up Parse

• Create an account on parse.com and once logged in create a parse app.

• Once you create an application on parse it will present to you a number of keys
• In the app.js file find the Parse.initialize line and replace the keys with the keys from your parse.com app.

Parse.initialize(“[APPLICATION-ID]”, “[JAVASCRIPT-ID]”);

Styling

• Edit the ionic.app.scss file under the main scss folder so it contains these variables and @imports.

$royal: #73C8A9;

$positive: #73C8A9;

$dark: #373B44;

$stable: #DEE1B6;

$assertive: #BD5532;

@import url(http://fonts.googleapis.com/css?family=Domine:400,700);

$font-family-base: ‘Domine’, serif;

$ionicons-font-path: “../lib/ionic/fonts” !default;

@import “www/lib/ionic/scss/ionic”;

@import “www/scss/form.scss”;

@import “www/scss/styles.scss”;