Ionic

Links

http://ionicframework.com/getting-started/

Siehe auch:

Hybrid Apps Development

Ionic View App: http://view.ionic.io

Generate splash screens and icons with ionic resource http://ionicframework.com/blog/automating-icons-and-splash-screens/

https://www.airpair.com/javascript/posts/a-year-using-ionic-to-build-hybrid-applications

Installation

• Node.js falls nicht installiert (evtl, PATH anpassen)
• im Terminal über npm cordova ionic und gulp installieren

sudo npm install -g cordova ionic gul

Ionic Console - Befehle

Available tasks: (use --help or -h for more info)

   start  ..........  Starts a new Ionic project in the specified PATH
   serve  ..........  Start a local development server for app dev/testing
   platform  .......  Add platform target for building an Ionic app
   run  ............  Run an Ionic project on a connected device
   emulate  ........  Emulate an Ionic project on a simulator or emulator
   build  ..........  Locally build an Ionic project for a given platform
   plugin  .........  Add a Cordova plugin
   resources  ......  Automatically create icon and splash screen resources (beta)
		      Put your images in the ./resources directory, named splash or icon.
		      Accepted file types are .png, .ai, and .psd.
		      Icons should be 192x192 px without rounded corners.
		      Splashscreens should be 2208x2208 px, with the image centered in the middle.

   upload  .........  Upload an app to your Ionic account
   share  ..........  Share an app with a client, co-worker, friend, or customer
   lib  ............  Gets Ionic library version or updates the Ionic library
   setup  ..........  Configure the project with a build tool (beta)
   io  .............  Integrate your app with the ionic.io platform services (alpha)
   security  .......  Store your app's credentials for the Ionic Platform (alpha)
   push  ...........  Upload APNS and GCM credentials to Ionic Push (alpha)
   package  ........  Use Ionic Package to build your app (alpha)
   config  .........  Set configuration variables for your ionic app (alpha)
   browser  ........  Add another browser for a platform (beta)
   service  ........  Add an Ionic service package and install any required plugins
   add  ............  Add an Ion, bower component, or addon to the project
   remove  .........  Remove an Ion, bower component, or addon from the project
   list  ...........  List Ions, bower components, or addons in the project
   ions  ...........  List available ions to add to your project
   templates  ......  List available Ionic starter templates
   info  ...........  List information about the users runtime environment
   help  ...........  Provides help for a certain command
   link  ...........  Sets your Ionic App ID for your project
   hooks  ..........  Manage your Ionic Cordova hooks
   state  ..........  Saves or restores state of your Ionic Application using the package.json file
   docs  ...........  Opens up the documentation for Ionic

Ionic Server Befehle

Selected address: 192.168.178.64
Running live reload server: http://192.168.178.64:35729
Watching: 0=www/**/*, 1=!www/lib/**/*
Running dev server:  http://192.168.178.64:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

Hybrid Apps mit Ionic und PhoneGap Builder

Links

https://www.youtube.com/watch?v=C-UwOWB9Io4&feature=youtu.be

Einleitung

Ionic basiert auf AngularJS, mit diesen Tools erstellen wir die Webapp, die dann mit PhoneGap Builder zu einer Hybrid App gebündelt wird.

AngularJS ist ein Framework zur WebApp Entwicklung mit hoher Performance. Ionic steuert viele Komponenten und in MobileApp übliche Bedienelemente bei.

Schnelle App mit Ionic

1. Install Ionic (s.o.)
2. Create App
3. Build and Test

Create

Verzeichnis erstellen z.B.

/myUserfolder/myApp
ionic start myApp tabs

Build and test

cd myApp
ionic platform add ios
ionic build ios
ionic emulate ios

Projekt anlegen

Es gibt verschiedene Grundtemplates

• leer

$ ionic start myApp blank

• tab navigation

$ ionic start myApp tabs

• side navigation

$ ionic start myApp sidemenu

Quicktips für Projekte

• cd into your project:

 cd firstIonicAppOrAnotherName

• Setup this project to use Sass:

ionic setup sass

• Develop in the browser with live reload:

ionic serve

• Add a platform (ios or Android):

ionic platform add ios [android]

Note: iOS development requires OS X currently See the Android Platform Guide for full Android installation instructions: https://cordova.apache.org/docs/en/edge/guide_platforms_android_index.md.html

• Build your app:

ionic build <PLATFORM>

• Simulate your app:

ionic emulate <PLATFORM>

• Run your app on a device:

ionic run <PLATFORM>

• Package an app using Ionic package service:

ionic package <MODE> <PLATFORM>

• Invite anyone to preview and test your app

ionic share EMAIL

For more help use ionic --help or ionic docs Visit the Ionic docs: http://ionicframework.com/docs

View App http://view.ionic.io

Generate splash screens and icons with ionic resource http://ionicframework.com/blog/automating-icons-and-splash-screens/

E-Mail Einladung zum App testen

Invite anyone to preview and test your app

ionic share EMAIL

Ionic Account

Create an ionic.io account to send Push Notifications and use the Ionic View app? (Y/n):

Ionic Tools

Splash Screen und Icon Generator

http://ionicframework.com/docs/cli/icon-splashscreen.html

http://stackoverflow.com/questions/31557887/phonegap-ionic-app-splash-screen-are-not-shown

Photoshop Template und Icon Template gibt es auf der Generator Seite:

• Plaziere Icon und Splash Dateien im /resource Ordner des Projekts
• Icons: icon.png, icon.psd oder icon.ai Minimum 192px

ionic resources --icon

• Splash-Screen splash.png, splash.psd or splash.ai 2088px Artwork innerhalb 1200px im Zentrum damit es für Landscape und Portrait passt.

ionic resources --splash

http://ionicframework.com/docs/cli/icon-splashscreen.html