johannbr / ionic-2-meetup

Présentation de Ionic 2 - Meetup SQLI du 23 juin 2016

Ionic 2

Une application mobile en un rien de temps

Johann Brancourt

https://github.com/Johannbr

Présentation

Ionic 2

• Version 2.0.0 beta 9

• UI Composants, icônes, thèmes

• Stack

  • Angular 2

  • TypeScript (aussi ES5 ou ES6)

  • Cordova

TypeScript

• Développé par Microsoft

• Sur-ensemble de JavaScript

• Typage, création de classes, import de modules, décorateurs (@)

Figure 1. TypeScript

Angular 2

• Compatible avec Typescript (ou Dart ou ES5)

• Version 2.0.0 beta sortie le 15/12/2015

• Première RC sortie le 02/05/2016

• Basé sur les composants

Cordova

• Framework JS permettant d’encapsuler du code JS, HTLM et CSS dans un conteneur natif

• Code exécuté et rendu par l’intermédiaire d’une webview

Les outils

• Un langage (TS ou ES6)

• Deux Frameworks

  • Angular 2

  • Cordova

• Mais encore:

  • Node.js pour NPM (Node Package Manager)

  • Gulp: Task runner

  • Sass: Sur ensemble de css

  • TSC: TypeScript Compiler

  • Browserify

  • Android SDK

  • ADB pour le debug

Créer une application

Installation

• Installer node.js pour avoir npm

Installer Ionic 2

npm install –g ionic@beta

Créer un projet

ionic start my_project --v2 --ts

Structure du projet

Figure 2. Structure du projet

Rendu du projet

Dans un navigateur

ionic serve

Via Ionic lab

ionic serve --lab

Génération

Générer une nouvelle page

ionic generate page camera –ts

Crée camera.ts, camera.scss, camera.html dans le dossier app\pages\camera

D’autres générations sont possibles: http://ionicframework.com/docs/v2/cli/generate/

UI Components

Large liste de composants http://ionicframework.com/docs/v2/components/

Plugins

Installer un plugin

ionic plugin add cordova-plugin-camera --save

Installe le plugin et l’ajoute en tant que dépendance dans package.json

Infos: http://ionicframework.com/docs/v2/native/camera/ et https://github.com/apache/cordova-plugin-camera

Liste des plugins: http://ionicframework.com/docs/v2/