devoxx france 2015 - introduction à ionic framework

24
@steffy_29 #Ionic Développer des applications multiplateformes facilement à l'aide de Ionic

Upload: stephanie-moallic

Post on 18-Jul-2015

413 views

Category:

Mobile


0 download

TRANSCRIPT

Page 1: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Développer des applications multiplateformes facilement à l'aide de Ionic

Page 2: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Stéphanie MOALLIC

@steffy_29Passionnée d'informatique mais pas que...

Page 3: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Plan

• Présentation de Ionic et des outils nécessaires

• Démo de génération d'une application et déploiement sur mobile Android

• Les composants CSS de Ionic

• Les composants Javascript de Ionic

• Une application développée à l'aide de Ionic

Page 4: Devoxx France 2015 - Introduction à Ionic framework

Objectifs

Créer votre première application multiplateforme à l'aidede Ionic, Cordova, HTML, CSS, AngularJS...

Page 5: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Ionic c'est quoi ?

• Open source

• Création d'applications mobiles hybrides– HTML5, CSS avec une note d'AngularJS et de Sass

• Pour les différentes plateformes existantes– Android, iOS, windows8, ubuntu...

Page 6: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Pourquoi ce choix ?Eurêka !!

Mon idée :

Page 7: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Pourquoi ce choix ?

Mais :

• Nouvel outil

• Nouveau type

• ...

Page 8: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Pourquoi ce choix ?

Développement natif Android :

• TOUTES les fonctionnalités du téléphone

• Java en majorité et XML

• Nouvelle plateforme : recoder

• Evolutions Android

• C'est long !

Page 9: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Pourquoi ce choix ?

Développement hybride :

• Beaucoup de plateformes disponibles

• HTML5, CSS, AngularJS, Sass

• C'est fun !

• Ajout des bibliothèques

Page 10: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Outils parents

• PhoneGap de la société Adobe– Framework pour créer des applications mobiles en HTML5, CSS et Javascript

• Apache Cordova– Ensemble d'APIs pour accéder au matériel

Page 11: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Showcase

Page 12: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Pré-requis

• Node.js et Java installés

• Installation du SDK Android

• Configuration des variables d'environnement

Spécificités Windows

Page 13: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

> npm install -g cordova ionic

Installation

En cas d'erreur, penser au mode super-user

$ ionic info

Your system information:

OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.2 LTS Node Version: v0.12.0Cordova CLI: 4.3.0Ionic CLI Version: 1.3.17

> npm install -g cordova ionic$ npm install -g cordova ionic

Page 14: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Ionic start templates

$ ionic start -lDownloading Starter Templates - http://code.ionicframework.com/content/starter-templates.json

maps ................. An Ionic starter project using Google Maps and a side menutabs ................. A starting project for Ionic using a simple tabbed interfacesidemenu ............. A starting project for Ionic using a side menu with navigation in the content areablank ................ A blank starter project for Ionicsalesforce ........... A starter project for Ionic and Salesforcetests ................ A test of different kinds of page navigationcomplex-list ......... A complex list starter template

Page 15: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

$ ionic start myapp

$ cd myapp

$ ionic serve

$ ionic platform add android

$ ionic run android

Première application

Page 16: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

IDE

• Intégration dans vos IDE préférés :

– Plugin Eclipse (AppLaud PhoneGap),

– Plugin IntelliJ (Ionic Framework et PhoneGap/Cordova Plugin)

Page 17: Devoxx France 2015 - Introduction à Ionic framework

@YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic

Demo

Page 18: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Composants CSS

• Façon Bootstrap– Header, Content, Footer– Lists, Cards, Forms, Tabs, Grid– Buttons, Checkbox, Toggle, Radio, Range, Select– Colors, Icons, Padding

Page 19: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Composants Javascript

• Extension d'AngularJS

• Loading

• Popup

• Side menus

• Spinner

• ...

Page 20: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Composants CLI

• Génération d'icône

• Génération de « splash screen »

• Configuration de Sass

• Ouverture de la documentation en ligne

• ...

Page 21: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Mon application

• Développement d'une application pour le tricot

Page 22: Devoxx France 2015 - Introduction à Ionic framework

@YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic

Summary

Page 23: Devoxx France 2015 - Introduction à Ionic framework

@steffy_29#Ionic

Liens

• Ionic :● http://ionicframework.com/

• Github :● https://github.com/driftyco/ionic

• Apache Cordova :● http://cordova.apache.org/

• Ionic and Material design :● http://ionicmaterial.com/

Page 24: Devoxx France 2015 - Introduction à Ionic framework

@YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic

Q & A