Ce rapport décrit la création d'une application mobile de gestion de galeriiess utilisant Ionic 3, permettant d'ajouter, chercher, supprimer et afficher des lieux avec des photos et informations géographiques. L'application intègre des services pour le stockage local et la recherche d'images via l'API de Pixabay, ainsi qu'une fonctionnalité météo utilisant l'API openweathermap.org. Les instructions comprennent l'installation des dépendances nécessaires et la structure du projet avec plusieurs pages et composants.

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

5. 5
Ecrans de l’applications

6. 6

7. 7

8. 8
Structure du projet
Index.html

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