Conception et Réalisation d'une application mobile de gestion des galléries

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