Rapport app mobile ionic3 my gallery
- 1. 1 Master Systèmes d’Information Distribuées Année Universitaire 2017-2018 Rapport : Application Mobile avec IONIC 3 Gestion des galléries Réalisé par : MOURADI Mohammed
- 2. 2 Application • Créer une application mobile qui permet de : o Gérer une gallérie de places (Restaurant, Monument, etc..) : - Chaque place est définie par son titre, sa ville, son pays, l’instant de sa création, ses mots clés, ses coordonnées géographiques (latitude et longitude), une liste de photos - L’application permet de : - Saisir et ajouter des places dans un local Storage du mobile - Afficher et chercher la liste des places. - Sélectionner et supprimer des places. - Afficher et géo localiser (Google Map) une place sélectionnée. - Prendre des photos d’une place données en utilisant la caméra ou la librairie locale. o Recherche et afficher des images exposées par l’API REST (Pixabay) Installer Node JS
- 3. 3 Installer Androïde SDK SDK Manager • Mettre à jour les API de SDK Android Installation de IONIC et cordova npm install -g ionic cordova Crée un nouveau projet, on saisit la commande :
- 4. 4 npm start AppMyGallery sidemenu Pour générer une application androïde, on saisit la commande : ionic cordova platform add android J’utilise IDE professionnels peuvent être utilisé pour éditer le code : Architecture
- 6. 6
- 7. 7
- 9. 9 On peut créer 7 nouveaux pages gallery, places, detail-place, new place, meteo, detail-place, my-locations ionic g page gallery ionic g page places ionic g page detail-place ionic g page new-place ionic g page meteo ionic g page detail-image ionic g page my-locations Création du Modèle • Dans notre application, nous allons gérer des places. Nous aurons donc besoin de créer une classe nommée Place. • Cette classe et déclarée dans fichier TypeScript place.model.ts du dossier model.
- 10. 10 Création du service de l’application • Dans notre application, nous allons créer deux services : ➢ Service de gestion des places dans une base de données local du smartphone : Local Storage (IndexDB ou SQLite) : o Ajouter une place. o Consulter toutes les places. o Mettre à jour les places o Chercher des places ➢ Service de recherche des images en faisant appel à l’API RST exposée sur http://pixabay.com/api/ o Recherche une liste d’image en envoyant les paramètres suivants : - Key : la clé que vous pouvez récupérer en créant un compte sur le site pixabay. - Q : représente le mot clé de la requête - Per-page : le nombre d’enregistrement par page à récupérer pour chaque requête - Page : le numéro de la page de données à récupérer • Ces deux services sont créés dans le dossier services gallery.service.ts
- 11. 11 places.service.ts Dépendances à installer • Dans cette application, nous aurons besoin d’installer les dépendances suivantes : o Local Storage : pour accéder aux services de stockage local des smartphones : - First, if you’d like to use SQLite, install the Cordova- SQLite-storage plugin: ✓ $ Ionic cordova plugin add cordova-sqlite-storage - Next, install the package ✓ $ npm install –save @ionic/storage
- 12. 12 o Camera : pour prendre des photos en utilisant la caméra du smartphone et la gallérie des images du smartphone : ✓ $ ionic cordova plugin add cordova-plugin-camera ✓ $ npm install –save @ionic-native/camera o Le composant Google Maps pour Angular 2 ✓ $ npm install @agm/core –save o Le composant IONIC Long Press pour sélectionner les éléments de la liste en appuyant longuement sur un élément de la liste. ✓ $ npm install –save ionic-long-press Déclaration des composants de l’application dans le module principale : app/app.module.ts
- 13. 13 Root Component : app/app.component.ts
- 14. 14 Root Component : app/app.html Root Component : app/app.scss Le Composant home (home page) : page/home/home.ts
- 15. 15 Le Composant home (home page) : page/home/home.html Le Composant my-locations (my-locations page) : page/my- locations/my-locations.ts
- 16. 16 Le Composant my-locations (my-locations page) : page/my- locations/my-locations.html
- 17. 17 Le Composant new-place (new-place page) : page /new- place/new-place.ts Le Composant new-place (new-place page) : page /new- place/new-place.html
- 18. 18 Le Composant places (places page) : page/places/places.ts Le Composant places (places page) : page/places/places.html
- 19. 19 Le Composant gallery (gallery page) : page/gallery/gallery.ts
- 20. 20 Le Composant gallery (gallery page) : page/gallery/gallery.html
- 21. 21 Le Composant detail-image (detail-image page) : page/detail- image/detail-image.ts Le Composant detail-image (detail-image page) : page/detail- image/detail-image.html Météo Page Cette partie de l’application permet de saisir une ville et afficher les données météo de cette ville en faisant appel à l’API openweathermap.org.
- 22. 22 Le Composant meteo (meteo page) : page/meteo/meteo.ts Le Composant meteo (meteo page) : page/meteo/meteo.html
- 23. 23 Le Composant detail-place (detail-place page) : page/detail- place/detail-place.ts
- 24. 24 Le Composant detail-place (detail-place page) : page/detail- place/detail-place.html
- 25. 25 Le Composant detail-place (detail-place page) : page/detail- place/detail-place.scss Un dossier images app/assets/imgs
- 26. 26 Construire l’application Android : APK Pour construire l’application on utilise la commande : Ionic cordova build android