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

1. Ionic, ce n’est pas que de l’UI
@loicknuchel

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. @loicknuchel

4. Ionic toolset

5. Ionic CLI
Cordova CLI wrapper
+
A lot of nice features !
@loicknuchel

6. Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ionic run -l
@loicknuchel

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. Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ionic run -l
@loicknuchel

9. Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ionic run -l
@loicknuchel

10. $ ionic serve --lab
@loicknuchel

11. Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ionic run -l
@loicknuchel

12. Icon & Splashscreen
$ ionic resources
@loicknuchel

13. Icon & Splashscreen
Icon : 192x192 min (512x512 recommandé)
Splashscreen : 2208x2208
.png .psd .ai !!!
@loicknuchel

14. Workflow
$ ionic start myApp blank --sass
$ cd myApp
$ ionic serve --lab
$ ionic platform add android
$ ionic resources
$ ionic run -l
@loicknuchel

15. Livereload
● Navigateur
$ ionic serve [--lab]
● Téléphone
$ ionic run -l [-c -s]
@loicknuchel

16. Crosswalk
$ ionic browser add crosswalk
@loicknuchel

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. Ionic View
ionicview
@loicknuchel

19. Ionic View
$ ionic login
$ ionic upload
$ ionic share
$ ionic link
@loicknuchel

20. ngCordova
@loicknuchel

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. Ionic Playground
@loicknuchel

23. “Gadgets”
$ ionic docs collection-repeat
● Ionic creator
● Ionic box
@loicknuchel

24. Soon...

25. @loicknuchel

26. Ionic package
$ ionic package release ios
[debug|release] [android|ios]
@loicknuchel

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. Ionic Marketplace
@loicknuchel

29. Et beaucoup d’autres services...
● Analytics
● A/B tests
● ...
@loicknuchel

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. Questions ?
http://loic.knuchel.org/ - @loicknuchel