IONIC

Introduction à IonicFramework

Transcript

1. Introduction à IONIC - 25/11/2014 Stéphanie MOALLIC - @steffy_29
2. Développeuse informatique chez B&B Hôtels Prédilection pour le développement front end, les trucs pour faire joli et les bonnes pratiques. Qui suis-je? Stéphanie Moallic @steffy_29 Passionnée d’informatique mais pas que...
3. IonicFramework 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, WP8, windows8, ubuntu,...
4. IonicFramework c’est qui? • Adam Bradley • Max Lynch • Ben Sperry • Andrew Joslin
5. Pourquoi ce choix? Eurêka !! Mon idée :
6. Pourquoi ce choix? Mais : • nouvel outil • nouveau type • ...
7. 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!
8. Pourquoi ce choix? Développement hybride : - Beaucoup de plateformes disponibles - HTML5, CSS, SASS, AngularJS - C’est fun! - Ajout de bibliothèques
9. Outils parents • PhoneGap de la société Adobe ◦ Framework pour créer des applis mobiles en HTML, CSS et JS • Apache Cordova ◦ ensemble d’API pour accéder au matériel
10. Showcase
11. C’est parti! Installation de ionic • Pré-requis: • Node.js installé, Java installé • Installation du SDK Android • Configuration des variables d’environnement Spécificités windows • Et les choses sérieuses : > npm install -g cordova ionic
12. Première application • > ionic start myapp • > cd myapp • > ionic serve C’est parti!
13. Génération Android Commandes simples pour générer des applis android : • ionic platform add android ◦ ajout de la plateforme android à l’application • ionic build android ◦ génération de l’application android
14. Génération Android Commandes simples pour tester des applis android : • ionic emulate android ◦ lancement de l’application android dans l’émulateur • cordova build --release android ◦ génération du livrable
15. Et la suite... • Intégration dans vos IDE préférés : ◦ plugin Eclipse (AppLaud Phone GAP), ◦ plugin IntelliJ (version 14 Community)
16. Démonstration Un petit exemple ? Allez on y va...
17. Liens • ionicframework : http://ionicframework. com/ • github : https://github.com/driftyco/ionic • apache cordova : http://cordova.apache. org/
18. Questions ?? Merci