Ionic, ce n’est pas que de l’UI
@loicknuchel
Loïc Knuchel
Développeur web full-stack
● Fan de depuis l’alpha ;)
● 2 startup lancées grâces à Ionic
● Organisateur des W...
@loicknuchel
Ionic toolset
Ionic CLI
Cordova CLI wrapper
+
A lot of nice features !
@loicknuchel
Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ...
Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ...
Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ...
Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ...
$ ionic serve --lab
@loicknuchel
Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ...
Icon & Splashscreen
$ ionic resources
@loicknuchel
Icon & Splashscreen
Icon : 192x192 min (512x512 recommandé)
Splashscreen : 2208x2208
.png .psd .ai !!!
@loicknuchel
Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ...
Livereload
● Navigateur
$ ionic serve [--lab]
● Téléphone
$ ionic run -l [-c -s]
@loicknuchel
Crosswalk
$ ionic browser add crosswalk
@loicknuchel
Et quelques tricks
● Port dynamique pour ionic serve
● Log des erreurs SASS (pas d’exit !)
● Management des plugins cordov...
Ionic View
ionicview
@loicknuchel
Ionic View
$ ionic login
$ ionic upload
$ ionic share
$ ionic link
@loicknuchel
ngCordova
@loicknuchel
ngCordova
AdMob
App Avaiability
App Rate
ActionSheet
App Version
Badge
Background Geolocation
Battery Status
Barcode Scann...
Ionic Playground
@loicknuchel
“Gadgets”
$ ionic docs collection-repeat
● Ionic creator
● Ionic box
@loicknuchel
Soon...
@loicknuchel
Ionic package
$ ionic package release ios
[debug|release] [android|ios]
@loicknuchel
Ionic deploy
“The Ionic deploy service makes it possible to
ship new updates to your app without going
through the app sto...
Ionic Marketplace
@loicknuchel
Et beaucoup d’autres services...
● Analytics
● A/B tests
● ...
@loicknuchel
Ce que j’attends...
Mock des plugins dans le navigateur
Industrialisation (cf tarifa)
● environnements de build : app pack...
Questions ?
http://loic.knuchel.org/ - @loicknuchel
Prochain SlideShare
Chargement dans…5
×

Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015

987 vues

Publié le

Ionic framework est un outil qui commence à être très commun dans le monde du développement mobile hybride. Ils permettent de créer des application mobiles hybrides de qualité en utilisant cordova et angularjs de manière très simple .
Mais Ionic, c'est aussi bien plus que ça. C'est un ensemble d'outils facilitant le développement cordova au quotidien, que ce soit avec angularjs et ionic ou pas !

Les outils Ionic c'est avant tout une CLI permettant de faciliter et d'automatiser de nombreuses tâches :
- intégration de sass
- affichage des différents rendus de l'application (iOS et Android)
- live reload, dans le navigateur mais aussi sur le device !!!!
- génération automatique des icônes et écrans de lancement
- intégration simplifiée de crosswalk
- et beaucoup d'autres subtilités utiles tous les jours...

Avec ça, ils proposent aussi tout un tas de services en mode sass :
- Ionic View qui permet de partager son app *très* facilement, sur Android comme sur iOS \o/
- Ionic Playground qui est un codepen à la Ionic
- Ionic créator, une interface drag & drop pour créer l'UI de son application Ionic
- Ionic push pour simplifier l'utilisation de notifications push
- Ionic package pour compiler son application dans le cloud (très utiles pour les applications iOS quand on a pas de mac !!!)

Beaucoup d'autres services sont en préparation et, personnellement, j'ai hâte de pouvoir les essayer ! Bref, ils sont clairement en train de construire le meilleur environnement de développement pour les applications hybrides et ainsi de leur donner une vraie légitimité !!! On en reparle dans 6 mois :D

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
987
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015

  1. 1. Ionic, ce n’est pas que de l’UI @loicknuchel
  2. 2. Loïc Knuchel Développeur web full-stack ● Fan de depuis l’alpha ;) ● 2 startup lancées grâces à Ionic ● Organisateur des Workshop Ionic Me contacter : loicknuchel@gmail.com http://loic.knuchel.org/ @loicknuchel
  3. 3. @loicknuchel
  4. 4. Ionic toolset
  5. 5. Ionic CLI Cordova CLI wrapper + A lot of nice features ! @loicknuchel
  6. 6. Workflow $ ionic start myApp blank --sass $ cd myApp $ ionic serve --lab $ ionic platform add android $ ionic resources $ ionic run -l @loicknuchel
  7. 7. Workflow $ ionic start myApp blank --sass $ cd myApp $ ionic serve --lab $ ionic platform add android $ ionic resources $ ionic run -l @loicknuchel ● blank ● tabs ● sidemenu ● maps
  8. 8. Workflow $ ionic start myApp blank --sass $ cd myApp $ ionic serve --lab $ ionic platform add android $ ionic resources $ ionic run -l @loicknuchel
  9. 9. Workflow $ ionic start myApp blank --sass $ cd myApp $ ionic serve --lab $ ionic platform add android $ ionic resources $ ionic run -l @loicknuchel
  10. 10. $ ionic serve --lab @loicknuchel
  11. 11. Workflow $ ionic start myApp blank --sass $ cd myApp $ ionic serve --lab $ ionic platform add android $ ionic resources $ ionic run -l @loicknuchel
  12. 12. Icon & Splashscreen $ ionic resources @loicknuchel
  13. 13. Icon & Splashscreen Icon : 192x192 min (512x512 recommandé) Splashscreen : 2208x2208 .png .psd .ai !!! @loicknuchel
  14. 14. Workflow $ ionic start myApp blank --sass $ cd myApp $ ionic serve --lab $ ionic platform add android $ ionic resources $ ionic run -l @loicknuchel
  15. 15. Livereload ● Navigateur $ ionic serve [--lab] ● Téléphone $ ionic run -l [-c -s] @loicknuchel
  16. 16. Crosswalk $ ionic browser add crosswalk @loicknuchel
  17. 17. Et quelques tricks ● Port dynamique pour ionic serve ● Log des erreurs SASS (pas d’exit !) ● Management des plugins cordova dans le package.json ● Serveur proxy pour les CORS @loicknuchel
  18. 18. Ionic View ionicview @loicknuchel
  19. 19. Ionic View $ ionic login $ ionic upload $ ionic share $ ionic link @loicknuchel
  20. 20. ngCordova @loicknuchel
  21. 21. ngCordova AdMob App Avaiability App Rate ActionSheet App Version Badge Background Geolocation Battery Status Barcode Scanner Calendar Camera Capture Clipboard Contacts Date picker Device Device Motion Device Orientation Dialogs Email Composer Facebook File File Transfer FileOpener2 SQLite Splashscreen Social Sharing Vibration SMS Push Notifications Progress Indicator Printer Preferences Pin Dialog OAuth Network Native Audio Media Local Notification Keychain Keyboard In App Browser Image Picker Health Kit Google Analytics Globalization Geolocation Flashlight @loicknuchel
  22. 22. Ionic Playground @loicknuchel
  23. 23. “Gadgets” $ ionic docs collection-repeat ● Ionic creator ● Ionic box @loicknuchel
  24. 24. Soon...
  25. 25. @loicknuchel
  26. 26. Ionic package $ ionic package release ios [debug|release] [android|ios] @loicknuchel
  27. 27. Ionic deploy “The Ionic deploy service makes it possible to ship new updates to your app without going through the app store resubmission process.” @loicknuchel
  28. 28. Ionic Marketplace @loicknuchel
  29. 29. Et beaucoup d’autres services... ● Analytics ● A/B tests ● ... @loicknuchel
  30. 30. Ce que j’attends... Mock des plugins dans le navigateur Industrialisation (cf tarifa) ● environnements de build : app package, icon & variables Material design (cf ionicmaterial.com) @loicknuchel
  31. 31. Questions ? http://loic.knuchel.org/ - @loicknuchel

×