Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des articles
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
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
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
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.
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