intégration de quelques plugins

1. IONIC et l’accès aux
fonctionnalités natif
Fait par: Fatima Zahra Fagroud
Encadré par: El Habib Benlahmar

2. Plan
 Introduction
 Templates prédéfinis
 Plateformes
 Plugins
 ngCordova
 Exemple 1:intégration de la géolocalisation dans une application ionic
 Exemple 2:intégration de l’API Google Maps dans une application ionic
 Exemple 3: une application ionic avec une base de données SQLite et Web sql
 Exemple 4:intégration camera dans une application ionic

3. Introduction
 framework de développement qui permet de créer des applications hybrides en
HTML5, CSS, Javascript
 basé sur des frameworks/technologies qui ont fait leurs preuves telles que
AngularJS et Apache Cordova
 Derniére version: Ionic 2

4. Templates prédéfinis
Blank
création d’une application vide
Commande : ionic start monProjet blank
sideMenu
création d’une application avec un menu latéral intégré
Commande : ionic start monProjet sideMenu
tabs
création d’une application avec des onglets
Commande : ionic start monProjet tabs

5. Plateformes
 il est possible de cibler les plateformes que l’on souhaite viser
 Android
Configuration : ionic platform add android
Déploiement: ionic run android
 IOS
Configuration : ionic platform add ios
Déploiement: ionic run ios
 Web
Déploiement: ionic serve

6. Plugins
 Permettent accès aux fonctionnalités natif de l’appareil
 Liste de plugin installé:
• cordova plugin ls
• ionic plugin
 Installation d’un plugin dans le projet:
 Déplacement à la racine du projet
 Commande: cordova plugin add cordova-plugin-camera

7. ngCordova
 Librairie qui offre plus que 70 plugins
 Installation:
• Commande: bower install ngCordova
• Téléchargement de la librairie
 Site officiel:
http://ngcordova.com/
 Exemples de plugins:
• Caméra ,Géolocalisation ,SMS, SQLite

8. Exemple 1: intégration de la géolocalisation
dans une application ionic
 Ajout du plugin:
cordova plugin add cordova-plugin-geolocation
 Vérification de l’ajout:
cordova plugin ls
 Méthodes :
 getCurrentPosition(options)
 watchPosition(options)
 clearwatch(options)

9. Exemple 1: intégration de la géolocalisation
dans une application ionic
 index.html
 app.js

10. Exemple 1: intégration de la géolocalisation
dans une application ionic
 controllers.js

11. Exemple 1: intégration de la géolocalisation
dans une application ionic
 Résultat:

12. Exemple 2:intégration de l’API Google Maps
dans une application ionic
 Ajout du plugin:
cordova plugin add cordova-plugin-geolocation
 Vérification de l’ajout:
cordova plugin ls

13. Exemple 2:intégration de l’API Google Maps
dans une application ionic
 index.html

14. Exemple 2:intégration de l’API Google Maps
dans une application ionic
 app.js

15. Exemple 2:intégration de l’API Google Maps
dans une application ionic
 Résultat:

16. Exemple 3: une application ionic avec une base
de données SQLite et Web SQL
 Ajout du plugin:
cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git
 Vérification de l’ajout:
cordova plugin ls
 Méthodes:
 execute(requête)
 openBD(options):pour SQLite
 openDatabase(options):pour Web sql

17. Exemple 3: une application ionic avec une base
de données SQLite et Web SQL
 index.html
 app.js

18. Exemple 3: une application ionic avec une base
de données SQLite et Web SQL
 services.js

19. Exemple 3: une application ionic avec une base
de données SQLite et Web SQL
 controllers.js

20. Exemple 3: une application ionic avec une base
de données SQLite et Web SQL
 tab-dash

21. Exemple 3: une application ionic avec une base
de données SQLite et Web SQL

22. Exemple 4:intégration camera dans une
application ionic
 Ajout du plugin:
cordova plugin add cordova-plugin-camera
 Vérification de l’ajout:
cordova plugin ls
 Méthode:
 getPicture(options)

23. Exemple 4:intégration camera dans une
application ionic
 index.html

24. Exemple 4:intégration camera dans une
application ionic
 app.js