##PHASE 1 - prepareing work environment##
-
Have Chrome installed from here
-
Instal node
$ sudo apt-get install nodejs- Make symbolic link if node is not defined (if writing node -v does not show you the version)
$ sudo ln -s /usr/bin/nodejs /usr/bin/node - Install npm
$ sudo apt-get install npm- Install Ionic framework
$ sudo npm install -g ionic- Install Cordova
$ sudo npm install -g cordova##PHASE 2 - Install Android development environment##
- remove standard java sdk (if java not installed)
sudo apt-get purge openjdk-\*- install java sdk
sudo apt-get install default-jdk- instal 32bit libraries
sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0- install ant
sudo apt-get install ant-
get Android SDK, here
-
unpack
$ cd ~/Downloadsunzip adt-bundle-linux-x86_64-20140702.zip -d ~/Documents/Android
- add android to path:
$ nano ~/.bashrc- copy at the end
#AndroidDev variables
export PATH=${PATH}:~/Documents/Android/adt-bundle-linux-x86_64-20140702/sdk/tools
export PATH=${PATH}:~/Documents/Android/adt-bundle-linux-x86_64-20140702/sdk/platform-tools
- save, exit restart terminal
-
start android
$ androidand install Android 4.4.2 (API 19) and Android 4.3.1 (API 18) -
create emulator
$ android avd
##PHASE 3 - creating a new project ##
- Navigate to work folder
$ cd [work_folder]- Create an ionic blank project
$ ionic start myAwesomeApp- Navigate to app folder
$ cd myAwesomeApp- Start the ionic server
$ ionic serve-
Open Chrome and folow http://localhost:8100 to view your app
-
Explore project structure
├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── hooks // custom cordova hooks to execute on specific commands
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc.
├── css
│ └── style.css // main style file for app
├── img // app image assets
├── js // scripts folder - will contain controllers, services, partial views etc.
│ └── app.js // angular init file
├── lib // lybraries placeholder folder
└── index.html // application entry point- Create the following structure in the '''js''' folder
└── js
├── controllers
├── partials // app image assets
├── resources // scripts folder - will contain controllers, services, partial views etc.
└── services // application entry point
##PHASE 4 - Growcery list app v1.0 - List view##
###USEFUL LINKS###
- In
index.html:
a. empty<body>tag
b. create an<ion-pane>element with an<ion-header-bar>and<ion-content>inside c. in the content tag, create<ion-list>with the following components:- an input field and a button to add entries (in the same item element)
- a title for a list (as an item-divider) that will also contain the number of items in the list
- the next elements are
<ion-item>'s as grocery list entries
- Create a controller for the grocery list that contains an array of items and methods to add and remove as well as empty the list; add it as a
ng-controllerfor the<ion-pane> - in
index.htmlremove the statically created entries and replace it with one<ion-item>that usesng-repeatto generate the list - inside the
<ion-item>add an<ion-option-button>that will delete the respective item list entry - add a button in the
<ion-header-bar>that will empty the list
##PHASE 5 - Growcery list app v2.0 - Master detail##
###USEFUL LINKS###
- In
index.html:
a. copy the html inside the<ion-pane>into a new partial html (main list partial) b. place an<ion-nav-view >in the pane - In
app.js
- create 3 states for
$stateProvider: main list, grocery type list, grocery details list
- Create 3 partials (root element is
<ion-view>):
- main list
- header with "add item" button
- list with added grocery items
- every item should have a delete button and a batge with number of times an item has been addded to the list
- a footer displaying total price of grocery list
- grocery types
- header with "back" and "add new" buttons
- list for grocery types displayng the names; click on list item adds it to main list
- an
<ion-option-button>button for each list item
- grocery type detail
- header with "back" button
- 3 input fields for name, description and price
- save button
- navigation between the partials:
MAIN LIST <--- (add item || clickitem/back) ---> GROCERY TYPES <--- (add/edit type || save type/back ) ---> GROCERY TYPE DETAIL
- Create a Grocery service that serves a list of grocery types to be added to grocery list
- the grocery item has the following structure:
name : string,
description : string,
price : number,
id : integer, autoincrement
}```
* add methods to get full grocery type list, a single item (by id) and to add a new item
5. Create controllers fo the partials:
* root controller
* contains the main grocery list, and method to add a new item
* main list
* methods to delete and calculate total cost
* click handler for add new item, change the state to grocery type view
* grocery types
* get grocerie types list from service
* methods to add to main list, edit type and make a new type (by going to grocery type state, and passing the selected id, if it is the case)
* grocery type detail
* get grocery type details (if id is present in ```$stateParams```)
* save details and go back to type list
##PHASE 6 - Growcery list app v3.0 - Firebase connection##
1. create firebase account [here](https://www.firebase.com/signup/)
2. create firebase app from [dashboard](https://www.firebase.com/account/) (name it wbdv-your_full_name)
3. import json file in the resources folder in version 3 of the app
4. instal angularfire: ```bower install firebase angularfire```
5. inject firebase service: ```var app = angular.module('GroceryListApp', ['ionic',"firebase"])```
6. inject it in GroceryService
7. create a new reference for firebase app ```var ref = new Firebase("https://wbdv-andrei.firebaseio.com/");```
8. create a sync conection ```var sync = $firebase(ref);```
9. get your data ```sync.$asArray();```
10. update the edit and add methods:
* ```$add```
* ```.set()```
##PHASE 7 - Publish App on Android emulator ##
1. go to app directory
2. add android platform
```bash
ionic platform add adnroid
- build android project
ionic build android
- run on emulator (emulator must be started)
ionic run android