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

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
 
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
 
gestion de magasin vente matériels informatique
gestion de magasin vente matériels informatiquegestion de magasin vente matériels informatique
gestion de magasin vente matériels informatiqueOussama Yoshiki
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école Mehdi Hamime
 
diagramme de séquence UML
diagramme de séquence UMLdiagramme de séquence UML
diagramme de séquence UMLAmir Souissi
 
Rapport Projet de Fin d'Etudes
Rapport Projet de Fin d'EtudesRapport Projet de Fin d'Etudes
Rapport Projet de Fin d'EtudesHosni Mansour
 
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...Symphorien Niyonzima
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile Raoua Bennasr
 
Conception et réalisation d’un Système d’information des étudiants du départe...
Conception et réalisation d’un Système d’information des étudiants du départe...Conception et réalisation d’un Système d’information des étudiants du départe...
Conception et réalisation d’un Système d’information des étudiants du départe...Ilyas CHAOUA
 
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 Projet de fin d'etude sur le parc informatique
Rapport Projet  de fin d'etude sur le parc informatiqueRapport Projet  de fin d'etude sur le parc informatique
Rapport Projet de fin d'etude sur le parc informatiqueHicham Ben
 
Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2Ben Abdelwahed Slim
 
rapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFErapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFEDonia Hammami
 
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 gestion de stock.pdf
Rapport gestion de stock.pdfRapport gestion de stock.pdf
Rapport gestion de stock.pdfAchrafAntri2
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-CorrectionLilia Sfaxi
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITLina Meddeb
 
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
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...Mehdi Hamime
 

Tendances (20)

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...
 
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
 
gestion de magasin vente matériels informatique
gestion de magasin vente matériels informatiquegestion de magasin vente matériels informatique
gestion de magasin vente matériels informatique
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école
 
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
 
diagramme de séquence UML
diagramme de séquence UMLdiagramme de séquence UML
diagramme de séquence UML
 
Rapport Projet de Fin d'Etudes
Rapport Projet de Fin d'EtudesRapport Projet de Fin d'Etudes
Rapport Projet de Fin d'Etudes
 
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
 
Conception et réalisation d’un Système d’information des étudiants du départe...
Conception et réalisation d’un Système d’information des étudiants du départe...Conception et réalisation d’un Système d’information des étudiants du départe...
Conception et réalisation d’un Système d’information des étudiants du départe...
 
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 Projet de fin d'etude sur le parc informatique
Rapport Projet  de fin d'etude sur le parc informatiqueRapport Projet  de fin d'etude sur le parc informatique
Rapport Projet de fin d'etude sur le parc informatique
 
Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2Rapport Pfe Application Web e-commerce Symfony2
Rapport Pfe Application Web e-commerce Symfony2
 
rapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFErapport de projet de fin d'étude_PFE
rapport de projet de fin d'étude_PFE
 
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 gestion de stock.pdf
Rapport gestion de stock.pdfRapport gestion de stock.pdf
Rapport gestion de stock.pdf
 
TP2-UML-Correction
TP2-UML-CorrectionTP2-UML-Correction
TP2-UML-Correction
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRIT
 
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
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
 

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

Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"ArchivesdeLyon
 
Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseTxaruka
 
Cours-Sur-l'-IP-Multiprotocol-Label-SwitchingMPLS
Cours-Sur-l'-IP-Multiprotocol-Label-SwitchingMPLSCours-Sur-l'-IP-Multiprotocol-Label-SwitchingMPLS
Cours-Sur-l'-IP-Multiprotocol-Label-SwitchingMPLSdocteurgyneco1
 
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdfPowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdfDafWafia
 
Webinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctionsWebinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctionsTechnologia Formation
 
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024frizzole
 
Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbainesSocratis Vasiopoulos
 
Quitter la nuit. pptx
Quitter          la        nuit.    pptxQuitter          la        nuit.    pptx
Quitter la nuit. pptxTxaruka
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptxTxaruka
 
Bonnes pratiques biomédicales en établissement de soins : Guide
Bonnes pratiques biomédicales en établissement de soins  : GuideBonnes pratiques biomédicales en établissement de soins  : Guide
Bonnes pratiques biomédicales en établissement de soins : Guidebemorad
 
rapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfrapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfOssamaLachheb
 
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...Pedago Lu
 

Dernier (12)

Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"
 
Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre française
 
Cours-Sur-l'-IP-Multiprotocol-Label-SwitchingMPLS
Cours-Sur-l'-IP-Multiprotocol-Label-SwitchingMPLSCours-Sur-l'-IP-Multiprotocol-Label-SwitchingMPLS
Cours-Sur-l'-IP-Multiprotocol-Label-SwitchingMPLS
 
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdfPowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
 
Webinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctionsWebinaire Technologia | DAX : nouvelles fonctions
Webinaire Technologia | DAX : nouvelles fonctions
 
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
 
Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbaines
 
Quitter la nuit. pptx
Quitter          la        nuit.    pptxQuitter          la        nuit.    pptx
Quitter la nuit. pptx
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptx
 
Bonnes pratiques biomédicales en établissement de soins : Guide
Bonnes pratiques biomédicales en établissement de soins  : GuideBonnes pratiques biomédicales en établissement de soins  : Guide
Bonnes pratiques biomédicales en établissement de soins : Guide
 
rapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfrapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdf
 
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
Fiche - Accompagnement du travail coopératif au sein d’une équipe d’enseignan...
 

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