1. 1
Master Systèmes d’Information Distribuées
Année Universitaire 2017-2018
Rapport : Application Web et Mobile avec
Angular 4, IONIC 3
Gestion des articles
Réalisé par :
MOURADI Mohammed

2. 2
Application
• Créer une application Web et Mobile qui permet de gérer des
articles (id, titre, description, photo, selected) :
o Saisir et ajouter un article
o Consulter tous les articles
o Chercher des articles par titre
o Éditer et modifier un article
o Supprimer un article
• L’application se compose deux parties :
o La partie BackEnd basée sur un Spring, SpringData, JPA
et Hibernate, Mysql. (API Restful)
o La partie FrontEnd web basée sur Angular 4
o La partie FrontEnd mobile basée sur IONIC 3
Architecture

3. 3
Partie Back-end
Créer un projet Spring Boot

4. 4
Ajouter les dépendances

5. 5
Structure du projet
Classe Article.java dans le package entities

6. 6
Interface ArticleRepository.java dans le package dao
Application properties
Classe ArticleRestService.java dans le package web

7. 7
Classe main BackendArticlesApplication.java
Single Page Application: SPA
Angular permet de créer la partie front end des applications web
de type SPA (Single Page Application)
Partie Front-end Web (Angular 4)
J’utilise IDE professionnels peuvent être utilisé pour éditer le code :

8. 8
On peut créer 4 nouveaux composants articles, edit-article, new-
article et nouveau-article
ng g c articles ng g c new- article
ng g c edit-article ng g c nouveau- article
Application

9. 9
Index.html
main.ts
App.component.ts
App.component.html

10. 10
App.module.ts
Je configure ce fichier tslint.json pour
Composant articles
ng g c articles
articles.component.ts

11. 11
-On peut créer un modèle de contact
Model.article.ts

12. 12
articles.component.html
On peut créer un service contact qui interagissent avec la partie back
end de l’application en envoyant des requêtes HTTP.
articles.service.ts

13. 13
Composant new-article
ng g c new-article
new-article.component.ts
.
new-article.component.html

14. 14

15. 15
Composant nouveau-article
ng g c nouveau-article
nouveau-article.component.ts
nouveau-article.component.html

16. 16
Composant edit-article
ng g c edit-article
edit-article.component.ts

17. 17
edit-article.component.html
Dans app on peut créer un fichier css
Styles.css

18. 18
Installation des outils
• Pour faciliter le développement d’une application Angular, les
outils suivant doivent être installés :
o NodeJS : https://nodejs.org/en/download/
• NodeJS installe l’outil npm (Node Package Manager) qui
permet de télécharger et installer des bibliothèques Java
Script.
o Installer ensuite Angular CLI (Command Line Interface) qui
vous permet de générer, compiler, tester et déployer des
projets angular(https://cli.angular.io/) :
Npm install-g @angular/cli
• Pour cree un projet angular
Ng new nomprojet
• Pour excecuter un projet angular
Ng serve
• Le role de cette commande ng build est compile l'application
dans un répertoire de sortie.
- Les artefacts de build seront stockés dans le répertoire dist
/directory
- Fonctionnalité souhaitée :
➢ Le fichier d'environnement approprié doit être utilisé
pour effectuer des transformations dans les paramètres
d'environnement finaux. Je crois avoir essayé toutes les
variantes et lu toute la documentation.
➢ Parce que nous devons effectuer la transformation au
moment de la construction, ces noms d'environnement
sont partagés avec notre build back-end. Le cas est
important, et "prod" n'est pas nécessaire en raison de la
désignation de nos environnements.

19. 19
BDD
Partie Front-end Mobile (IONIC 3)
Structure du projet

20. 20
On peut créer 2 nouveaux pages articles, edit-article
ionic g page articles ionic g page edit-article
Ecrans de l’applications

21. 21

22. 22
Index.html
Création des pages
• Pour générer la structure d’une page avec IONIC 3 on utilise la
commande :
Ionic generate page nom-page
Dans notre cas, nous aurons besoin de générer les pages suivantes :
Ionic g page articles
Ionic g page edit-article
Ionic g page new-article

23. 23
Création du Modèle
• Dans notre application, nous allons gérer des articles. Nous
aurons donc besoin de créer une classe nommée Article.
• Cette classe et déclarée dans fichier TypeScript
model.article.ts du dossier model.
Création du service de l’application
• Dans notre application, nous allons créer un service :
Service de gestion des articles dans une base de donnée
dbarticles (MySQL) :
o Ajouter un article.
o Consulter tous les articles
o Mettre à jour les articles
o Chercher les articles
Ce service crée dans le dossier services
Articles.service.ts

24. 24
Page articles
ng g page articles
App.module.ts

25. 25
App.component.ts
App.html
Main.ts

26. 26
Page home
Home.ts
Home.html

27. 27
Home.css
Page edit-article
ng g page edit-article
edit-article.ts

28. 28
edit-article.html

29. 29
Page new-article
ng g page new-article
new-article.ts
new-article.html

30. 30