SlideShare une entreprise Scribd logo
1  sur  30
Télécharger pour lire hors ligne
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
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
Partie Back-end
Créer un projet Spring Boot
4
Ajouter les dépendances
5
Structure du projet
Classe Article.java dans le package entities
6
Interface ArticleRepository.java dans le package dao
Application properties
Classe ArticleRestService.java dans le package web
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
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
Index.html
main.ts
App.component.ts
App.component.html
10
App.module.ts
Je configure ce fichier tslint.json pour
Composant articles
ng g c articles
articles.component.ts
11
-On peut créer un modèle de contact
Model.article.ts
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
Composant new-article
ng g c new-article
new-article.component.ts
.
new-article.component.html
14
15
Composant nouveau-article
ng g c nouveau-article
nouveau-article.component.ts
nouveau-article.component.html
16
Composant edit-article
ng g c edit-article
edit-article.component.ts
17
edit-article.component.html
Dans app on peut créer un fichier css
Styles.css
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
BDD
Partie Front-end Mobile (IONIC 3)
Structure du projet
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
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
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
Page articles
ng g page articles
App.module.ts
25
App.component.ts
App.html
Main.ts
26
Page home
Home.ts
Home.html
27
Home.css
Page edit-article
ng g page edit-article
edit-article.ts
28
edit-article.html
29
Page new-article
ng g page new-article
new-article.ts
new-article.html
30

Contenu connexe

Tendances

Application web de gestion de recrutement- Recruitement managment system
Application web de gestion de recrutement- Recruitement managment systemApplication web de gestion de recrutement- Recruitement managment system
Application web de gestion de recrutement- Recruitement managment systemSarra ERRREGUI
 
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_webRapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_webSalma Gouia
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Riadh K.
 
Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...Ahmed Makni
 
Conception et Réalisation d’une Plateforme Web de Gestion des achats
Conception et Réalisation d’une Plateforme Web de Gestion des achats Conception et Réalisation d’une Plateforme Web de Gestion des achats
Conception et Réalisation d’une Plateforme Web de Gestion des achats Ayed CHOKRI
 
Rapport gestion de stock.pdf
Rapport gestion de stock.pdfRapport gestion de stock.pdf
Rapport gestion de stock.pdfAchrafAntri2
 
Rapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileRapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileNader Somrani
 
PFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignementPFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignementNassim Bahri
 
Rapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaRapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaNazih Heni
 
CONCEPTION ET REALISATION D ’ UNE APPLICATION WEB POUR GESTION DE P ROJETS DE...
CONCEPTION ET REALISATION D ’ UNE APPLICATION WEB POUR GESTION DE P ROJETS DE...CONCEPTION ET REALISATION D ’ UNE APPLICATION WEB POUR GESTION DE P ROJETS DE...
CONCEPTION ET REALISATION D ’ UNE APPLICATION WEB POUR GESTION DE P ROJETS DE...Madjid Meddah
 
Presentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicauxPresentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicauxFehmi Arbi
 
Rapport de projet de conception et de développement
Rapport de projet de conception et de développementRapport de projet de conception et de développement
Rapport de projet de conception et de développementDonia Hammami
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Sofien Benrhouma
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation webMOHAMMED MOURADI
 
Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Ben Ahmed Zohra
 
Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique ayoub daoudi
 
Rapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaRapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaIlef Ben Slima
 
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Ayoub Mkharbach
 

Tendances (20)

Application web de gestion de recrutement- Recruitement managment system
Application web de gestion de recrutement- Recruitement managment systemApplication web de gestion de recrutement- Recruitement managment system
Application web de gestion de recrutement- Recruitement managment system
 
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_webRapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
Rapport final pfe_systeme_de_gestion _de_cabinet_de_formation_mobile_web
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
 
Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...Pfe conception et réalisation d'une application de gestion des processus d'ac...
Pfe conception et réalisation d'une application de gestion des processus d'ac...
 
Conception et Réalisation d’une Plateforme Web de Gestion des achats
Conception et Réalisation d’une Plateforme Web de Gestion des achats Conception et Réalisation d’une Plateforme Web de Gestion des achats
Conception et Réalisation d’une Plateforme Web de Gestion des achats
 
Rapport gestion de stock.pdf
Rapport gestion de stock.pdfRapport gestion de stock.pdf
Rapport gestion de stock.pdf
 
Rapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobileRapport PFE Développent d'une application bancaire mobile
Rapport PFE Développent d'une application bancaire mobile
 
PFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignementPFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignement
 
Rapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédiaRapport de projet de fin d'étude licence informatique et multimédia
Rapport de projet de fin d'étude licence informatique et multimédia
 
Rapport de stage du fin d'étude
Rapport de stage du fin d'étudeRapport de stage du fin d'étude
Rapport de stage du fin d'étude
 
CONCEPTION ET REALISATION D ’ UNE APPLICATION WEB POUR GESTION DE P ROJETS DE...
CONCEPTION ET REALISATION D ’ UNE APPLICATION WEB POUR GESTION DE P ROJETS DE...CONCEPTION ET REALISATION D ’ UNE APPLICATION WEB POUR GESTION DE P ROJETS DE...
CONCEPTION ET REALISATION D ’ UNE APPLICATION WEB POUR GESTION DE P ROJETS DE...
 
Presentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicauxPresentation pfe Système de gestion des rendez-vous médicaux
Presentation pfe Système de gestion des rendez-vous médicaux
 
Rapport de projet de conception et de développement
Rapport de projet de conception et de développementRapport de projet de conception et de développement
Rapport de projet de conception et de développement
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...
 
pfe book 2023 2024.pdf
pfe book 2023 2024.pdfpfe book 2023 2024.pdf
pfe book 2023 2024.pdf
 
Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique
 
Rapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben SlimaRapport PFE Ilef Ben Slima
Rapport PFE Ilef Ben Slima
 
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...
 

Similaire à Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des articles

Android - TPBonus - web services
Android - TPBonus - web servicesAndroid - TPBonus - web services
Android - TPBonus - web servicesLilia Sfaxi
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Nazih Heni
 
Rapport app mobile ionic3 my gallery
Rapport app mobile ionic3 my galleryRapport app mobile ionic3 my gallery
Rapport app mobile ionic3 my galleryMOHAMMED MOURADI
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: AngularHabib Ayad
 
Ateliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceAteliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceKorteby Farouk
 
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp012014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01MongoDB
 
Projet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMProjet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMAbdelmonem NAAMANE
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de JhipsterKokou Gaglo
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfBoubakerMedanas
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSRenaud Dumont
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebDekeltv1
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptxIdrissaDembl
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniterAtsé François-Xavier KOBON
 

Similaire à Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des articles (20)

Android - TPBonus - web services
Android - TPBonus - web servicesAndroid - TPBonus - web services
Android - TPBonus - web services
 
Angular 11
Angular 11Angular 11
Angular 11
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"
 
Rapport app mobile ionic3 my gallery
Rapport app mobile ionic3 my galleryRapport app mobile ionic3 my gallery
Rapport app mobile ionic3 my gallery
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
Ateliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceAteliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open source
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp012014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
2014 03-26-appdevseries-session3-interactingwiththedatabase-fr-phpapp01
 
Projet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMMProjet fin annee 2011 master min ISAMM
Projet fin annee 2011 master min ISAMM
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Prise en main de Jhipster
Prise en main de JhipsterPrise en main de Jhipster
Prise en main de Jhipster
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Technologies sur angular.pptx
Technologies sur angular.pptxTechnologies sur angular.pptx
Technologies sur angular.pptx
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 

Dernier

Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFEAhmam Abderrahmane
 
Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxMartin M Flynn
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementM2i Formation
 
Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2JeanLucHusson
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionslaetitiachassagne
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024frizzole
 
La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniquessuser4dbdf2
 

Dernier (7)

Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFE
 
Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptx
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changement
 
Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositions
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024
 
La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin technique
 

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
  • 3. 3 Partie Back-end Créer un projet Spring Boot
  • 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
  • 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
  • 27. 27 Home.css Page edit-article ng g page edit-article edit-article.ts
  • 29. 29 Page new-article ng g page new-article new-article.ts new-article.html
  • 30. 30