Ionic Framework

Ionic Project Structure
Config.xml
This contains configurations like the app name, and the package name, that will be used to install our app into an actual device.
Hooks
Ionic.config.json
Node_modules
Contains the npm packages listed in the package.json file. These are packages necessary for building the ionic app.
Package.json
Platforms
This is where platform specific builds, build tools and packages/libraries are stored. You will find a folder for the platform your are building on. To add a platform, android for example, simply run ionic platform add android, and this will add the folder android folder to this folder.
Plugins
This is where cordova plugins will be stored when they are installed. Cordova plugins enables your app to have native functionality in the mobile device, e.g accessing the media storage of the device, or even the bluetooth API.
Resources
This also contains platform specific resources, such as icons and splash screens
Src
Most of the time we will be working in here
Index.html
is the entry point for the app, its called the root component of the app
Service Workers enable offline capabilities for web and progressive web apps
src/app/app.component.ts
is the root component of our app. It is loaded/declared in the src/app/app.module.ts
src/app/app.module.ts
which simply represents our whole app as a module, which is the loaded in the app/main.dev.ts or app/main.prod.ts, depending on which build you do
we need to declare before hand all the components, providers, directives or pipes that our application uses
src/app/app.html
the root view for our application. In this case it holds a side menu
Pages
An Ionic 2 app is usually divided into page components which are contained in the src/pages directory. You could think of them as what page is viewable on the screen at a particular given time (An Activity for Android Developers). The concept is actually interesting, because pages in ionic 2 are put in a stack, one on top of each other, and navigation back is as simple as removing the top most page in the stack (Last In First Out).
Themes
contains sass files that help in theming the application

Tsconfig.json
Tslint.json
www

Random User API
https://randomuser.me/

Development

Create project

Ionic Templates
Ionic start NAME tabs
Ionic start NAME sidemenu
Ionic start NAME blank
Ionic start NAME super

Pages

Ionic g page PAGENAME

Providers

Services in Angular1 is now called Providers
A Provider is a source of data for an application

Creating a provider:
Ionic g provider PROVIDERNAME

@Injectable
Can be used by other pages

Observables is the new type of promises

is responsible for the navigation bar or we could say the navigation component.

is a built in directive, the icon-only directive enables the button to be an icon only

menuToggle is a built in directive to help toggle the side menu

displays the title of the page
holds the content of the page, the padding directive provided a little padding to the contents

ionViewDidLoad() method is an ionic lifecycle hook. Its fired once an ionic view has load

App.components.ts has a property called pages, this is what composes the sidenav menu view as seen in the app.html file

Root property is bound to rootPage

Observable - stream of data we can subscribe to

In the view, adding ? (eg: user?) to a property, just means that this property might be null, which would avoid an undefined error

Common Errors

Error: No provider for Http!
To resolve “No provider for Http!” Error in ionic to, add the HttpModule to your app.module.ts file.import { HttpModule } from ‘@angular/http’; // Add “HttpModule” inside imports imports: [ BrowserModule, HttpModule, // Add this IonicModule.forRoot(MyApp),

Make sure to add a new component to app.modules.ts in declarations and entryComponents

Components

ActionSheetController

Actionsheet creates a popup with some options
https://ionicframework.com/docs/api/components/action-sheet/ActionSheetController/

AlertController

Creates a popup warning window

App

Instance Members

getActiveNav()
getActiveNavContainers()
getRootNav()
getRootNavById()
getRootNavs()
getRootNavs()
setTitle(val)

Observables

viewDidEnter
viewDidLeave
viewWillEnter
viewWillLeave
viewWillUnload

Avatar

Creates a circular image of an item
ion-avatar

Badge

Simple components containing numbers or text.
ion-badge

Button

Scroll
Examples
https://codepen.io/calendee/pen/nzeCy

Native

https://ionicframework.com/docs/native/

Custom NPM Modules

https://github.com/ionic-team/ionic-module-template
https://ionicframework.com/docs/developer-resources/third-party-libs/

Map example:
https://www.npmjs.com/package/ng2-map
https://github.com/ng2-ui/map

Yeoman
https://www.npmjs.com/package/generator-angular2-library

PWA

http://blog.ionic.io/navigating-the-world-of-progressive-web-apps-with-ionic-2/

Leaftet

https://stackoverflow.com/questions/39976098/usage-of-leaflet-with-ionic2-typescript
https://github.com/SBejga/ionic2-map-leaflet/blob/master/src/pages/map/map.html

https://github.com/dreamhouseapp/dreamhouse-mobile-ionic

Install:

Build
ionic cordova build android
ionic cordova build ios
ionic cordova run android –device –live-reload
ionic cordova run android -l

CI
https://www.youtube.com/watch?v=l6MFlGhtr2Q
https://taco.visualstudio.com/en-us/docs/tutorial-team-build-readme/
https://github.com/Microsoft/vsts-cordova-tasks

Real-time Development

Voice P2P

WebRTC

https://www.pubnub.com/blog/2014-10-21-building-a-webrtc-video-and-voice-chat-application/
https://www.sitepoint.com/creating-an-audio-calling-app-with-ionic-and-phonertc/
http://blog.mgechev.com/2014/12/26/multi-user-video-conference-webrtc-angularjs-yeoman/
http://web-engineering.info/node/57

PeerJS

http://peerjs.com/

https://github.com/matiastucci/socket-chat-client

Socket-io

https://github.com/socketio/socket.io-p2p
https://socket.io/blog/socket-io-p2p/
https://www.npmjs.com/package/socket.io-p2p-server
https://www.thepolyglotdeveloper.com/2016/01/creating-a-real-time-chat-application-with-ionic-2-and-socket-io/

https://github.com/matiastucci/socket-chat-client

Tutorials

http://ionicframework.com/docs//intro/tutorial/
https://angular.io/docs/ts/latest/guide/
https://scotch.io/tutorials/build-a-mobile-app-with-angular-2-and-ionic-2
https://www.lynda.com/Web-Development-tutorials/Learning-Ionic/562925-2.html
https://taco.visualstudio.com/en-us/docs/tutorial-ionic2/

Mastering the Ionic Framework: Learn to Build & Deploy Native Speed HTML5 Based Apps

The Ionic Framework Cheatsheet

References

Cordova - https://cordova.apache.org/
https://creator.ionic.io/app/dashboard/projects
Angular - https://angular.io/
Ionic - http://ionicframework.com/
Github API - https://api.github.com/
https://github.com/firebase/angularfire
http://blog.ionic.io/what-is-a-progressive-web-app/
https://developers.google.com/web/progressive-web-apps/?hl=en

Requirements
https://nodejs.org/

Command Line Tools

To install Ionic:
npm install ionic -g

To install Cordova:
npm install cordova -g

Update Cordova
npm update cordova -g

To create a new project:
using command prompt, go to directory
then:

ionic start APPNAME blank
or
ionic start APPNAME tabs
or
ionic start APPNAME sidemenu
or
ionic start APPNAME maps

Most important file is www

Testing the app

Local server
ionic serve

Android app
ionic platform add android
Issues
Cordova cannot add Android failed with exit code ENOENT
Solution
Make sure C:\Windows\System32 is in PATH variable

ionic build android

Environment setup
Install JAVA SDK (JDK)
After installing type “java” in Command Prompt, if nothing returns.
PATH should point to jdl bin folder
C:\Program Files\Java\jdk1.8.0_65\bin

JAVA_HOME
C:\Program Files\Java\jdk1.8.0_65

Install Android SDK
http://developer.android.com/sdk/index.html#Other

Setup Android PATH
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

PATH
D:\ANDROID\SDK\sdk_r24.4.1\tools
D:\ANDROID\SDK\sdk_r24.4.1\platform-tools

Type “android” in CMD, should bring up the SDK manager

Watch this video
http://learn.ionicframework.com/videos/windows-android/

Install Ant

Tutorials
https://www.youtube.com/watch?time_continue=214&v=LBSuQdkQbXA

Icons
http://ionicons.com/

http://ionicframework.com/docs/components/#block-buttons

http://play.ionic.io/

Serve panel;
ionic r - Restart
ionic c - Enable/Disable Console logs
ionic s - Enable/Disable Server logs
ionic g - Go to url
ionic q - Quit
ionic help
ionic serve –lab

Technology

Introduction to Ionic