Intégration

RAPPORT D’INTEGRATION DU CLIENT ANGULAR
SOUS ALFRESCO
Rédigé par : AMOU’OU BIWOLE Samson LIONEL

I- PREREQUIS
Les outils suivants sont nécessaires pour l’implémentation de la solution suivante :
1. Téléchargez node.js sur le lien https://nodejs.org/en/download/ puis installez-le

2. Ouvrez le terminal et et collez ceci :
npm install npm@latest -g
3. Téléchargez via le lien https://www.getpostman.com/downloads/ et installez postman

4. Installez alfresco
5. Installez visual studio code
II- IDENTIFICATION DES SERVICES REST A UTILISER
Après avoir installé alfresco, ouvrez-le dans votre navigateur préféré. Mettez les identifiants
que vous avez définis lors de l’installation. Etant déjà connecté, rendez-vous à l’adresse :
localhost:8080/aflresco/
1. Cliquez sur le lien Alfresco WebScripts Home (admin only)
2. Puis sur Browse by Web Script URI. Ici nous avons la liste complete des URL des services rest de
alfresco.
3. Identifiez les services qui vous intéressent. Dans notre cas, nous choisissons
/alfresco/s/api/login dans un premier temps. Puis nous utiliserons /afresco/s/api/people
pour ajouter et supprimer un utilisateur.
III- TEST SUR POSTMAN

Nous testons les url suivantes pour voir dans un premier temps la bonne syntaxe des url et
dans un second pour voir le type de données retournées. Allons dans le vif du sujet :
A- Récupération de la clé pour la communication entre alfresco et Postman
1. Ouvrez Postman
2. Syntax : http://localhost:8080/alfresco/s/api/login?u=admin&pw=MotDePasseDeAdminIci. En
vert, nous avons le paramètre pour le nom d’utilisateur et en jaune le mot de passe de votre
instance alfresco.
3. Coller l’url http://localhost:8080/alfresco/s/api/login?u=admin&pw=MotDePasseDeAdminIci
4. Choisir la méthode GET puis cliquez sur Send

B- CREATION D’UN UTILISATEUR.
1. Entre l’url
http://localhost:8080/alfresco/s/api/people?
alf_ticket=TICKET_6836eca823625f60605e7f9079432fd84f2f616a
En bleu nous avons l’adresse du serveur local. En vert nous avons l’api rest de alfresco
permettant d’afficher tous les utilisateurs au format JSON.
Pour Créer ou ajouter un nouvel utilisateur,
a. Epurez le fichier JSON généré pour récupérer les champs qui vous intéressent

Pour accéder sur la zone de travail, Cliquez en premier lieu sur body puis sur row. Choisissez le
format JSON parmi tant d’autre afin d’avoir la coloration syntaxique appropriée.
Voilà le fichier JSON est épuré. Choisissez la Méthode POST et puis cliquez sur le bouton
Send.
Pour vérifier que vos informations ont été enregistrées, reconnectez-vous à alfresco en tant que
Admin. Cliquez sur Admin Tools>Users.
Nous constatons bel et bien que l’utilisateur Familyzoner a été ajouté. Maintenant nous
allons nous connecter en tant que Familyzoner à alfresco
C- SUPPRESSION D’UN UTILISATEUR
NB : Vous devez encore générer le ticket pour effectuer ces opérations tel qu’il a été décrit sur la
partie de la connexion
1. Syntax: localhost :8080/alfresco/s/api/people/{utilisateur} ?alf_ticket=ticketGénéré
En vert c’est le nom d’utilisateur et en jaune c’est le numéro du ticket généré.

Ici nous voulons supprimer l’utilisateur Familyzoner
 Choisissez la méthode DELETE
 Saisissez l’url http://localhost:8080/alfresco/s/api/people/Familyzoner?
alf_ticket=TICKET_2ec93a1f770b202a22324bf2752ae45064d8ce95
2. Essayons à nouveau de nous connecter en tant que Familyzoner

Nous constatons que nous avons plus d’utilisateur du nom de Familyzoner
IV- IMPLEMENTATION AVEC LE FRAMEWORK ANGULAR

A- INSTALLATION DE ANGULAR
1. Prérequis
Vous devez être connecté pour télécharger toutes les dépendances dont vous avez besoin pour
nécessaire pour le bon fonctionnement du framework
2. Ouvrez la ligne de commande. Appuyez simultanément sur les touches windows + R
et saisissez cmd et puis validez.
3. Sur la console, npm install -g @angular/cli
B- CREATION DU PROJET
1. Prérequis
Vous devez être connecté pour télécharger toutes les dépendances dont vous avez
besoin pour coder sur angular.
2. ng new prototypes.
La commande ci-dessus nous permet de créer un projet angular.
a) Syntax : ng new est la commande permettant de créer le projet. prototypes est le nom du
projet. Nous aurions pu le renommez comme bon vous semble.
3. Placez-vous dans le projet : cd prototypes
NB : Par défaut, les projets angular sont stockés dans le répertoire : C:\Users\Username
4. Lancez le projet : ng serve --o
ng serve permet de lancer le projet et –o permet de l’ouvrir dans votre navigateur préféré
directement après le lancement.
5. Ouvrez le projet dans votre éditeur visual studio code
C- CREATION D’UN UTILISATEUR

1. PREREQUIS
Il faut se loguer en tant qu’administrateur.

a. Création de l’interface de login
 ng g c login
Allez dans la console et collez la ligne de commande ci-dessus
Elle permet de créer un composant pour gérer le login
 ng g s login
Cette commande nous permet de créer le service qui va communiquer avec alfresco.
Placez-vous sur le fichier login.component.html
<form class="needs-validation" [formGroup]="loginForm" (submit)="onsubmit()" novalidate>
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" formControlName="u" placeholde
r="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" formControlName="pw" placehold
er="Enter password" name="pswd" required>
</div>
<div class="form-group form-check">
<label class="form-check-label">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

Placez-vous sur le fichier login.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { LoginService } from '../services/login.service';
// import {xml2js} from "xml2js";
import * as xml2js from 'xml2js';
import { parseString } from 'xml2js';
import { promise } from 'protractor';
import { Parser } from '@angular/compiler/src/ml_parser/parser';
// import { resolve } from 'url';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
public token: any;
constructor(private fb: FormBuilder, private loginservice: LoginService) {

this.loginForm = this.fb.group({
u: [""],
pw: [""]
});
onsubmit() {
console.log(this.loginForm.value);
this.loginservice.login(this.loginForm.get("u").value, this.loginForm.get(
"pw").value).subscribe(data => {
// var parseString = require('xml2js');
// var parser = require('xml2js');

// var json = parser.toJson(data);
// console.log("to json -> %s", json);

// var x2js = new xml2js(data);
// var aftCnv = x2js.xml2js();

// console.log(aftCnv);
// if(data!=null){
// console.log(data);
// }
// else{
// console.log('Empty');
// }
// parseString(data, (err, result) => {
// this.loginservice.user(this.token)
// .subscribe(
// () => {
// console.log('Enregistrement terminé !');
// },
// (error) => {
// console.log('Erreur ! : ' + error);
// }
// );
// });
console.log(data);
});
}
ngOnInit() {
}
}
Placez-vous dans app.component.html

<app-login></app-login>
Placez-vous dans app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LoginComponent } from './login/login.component';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HttpHeaders } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { LoginService } from './services/login.service';
import { UploadFileComponent } from './upload-file/upload-file.component';
import { UsersComponent } from './users/users.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
UploadFileComponent,
UsersComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
],
providers: [LoginService],
bootstrap: [AppComponent]
})
export class AppModule { }
placez-vous dans login.service.ts

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { type } from 'os';

@Injectable({
providedIn: 'root'
})
export class LoginService {
user:any;
host="http://localhost:8080/alfresco/s/api/login";
constructor(private http:HttpClient) { }
login(user,pw){
console.log(user,pw);
return this.http.get(this.host+'?u='+ user+'&pw='+pw,{
headers: new HttpHeaders()
.set('Content-Type', 'text/xml'),
responseType: 'text'
});
}
}
2. Création de l’utilisateur
3. ng g c users
Ce composant va nous permettre de créer le formulaire permettant de récupérer les données
pour les stocker dans alfresco.
4. ng g s users
Pour la création du service
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UsersService {
hostdel="http://localhost:8080/alfresco/s/api/people/";
host="http://localhost:8080/alfresco/s/api/people?
alf_ticket=TICKET_eebf6f24c8737b7efae6ab8e74d59fdf7feb1809";
constructor(private http:HttpClient) { }

saveUser(user){
console.log(user);
return this.http.post(this.host,user);
}
deleteUser(user){
//console.log(userName);
return this.http.delete(this.hostdel+user+"?
alf_ticket=TICKET_eebf6f24c8737b7efae6ab8e74d59fdf7feb1809");
}
}
Placez vous sur le fichier users.component.html
<form class="needs-validation" [formGroup]="userForm" (submit)="onsubmit()" no

validate>
<label for="userName">Username:</label>
<input type="text" class="form-control" id="userName" formControlNam
e="userName" placeholder="Enter Username" name="userName" required>
</div>
<label for="uname">Firstname:</label>
<input type="text" class="form-control" id="firstName" formControlNam
e="firstName" placeholder="Enter Firstname" name="firstName" required>
</div>
<label for="lastName">Lastname:</label>
<input type="text" class="form-control" id="lastname" formControlNam
e="lastName" placeholder="Enter Lastname" name="lastName" required>
</div>
<label for="mobile">Mobile:</label>
<input type="number" class="form-control" id="mobile" formControlNam
e="mobile" placeholder="Mobile" name="mobile" required>
</div>

<label for="email">Email:</label>
<input type="email" class="form-control" id="email" formControlNam
e="email" placeholder="Enter Email" name="email" required>
</div>
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" formControlNam
e="password" placeholder="Enter password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>


<button class="btn btn-danger"><a (click

)="deleteUser(userForm.get('userName').value)">Delete User</a></button>

Suppression de l’utilisateur

Intégration

Transféré par

Droits d'auteur :

Formats disponibles

Intégration

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Intégration

Transféré par

Droits d'auteur :

Formats disponibles

RAPPORT D’INTEGRATION DU CLIENT ANGULAR

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

1. Téléchargez node.js sur le lien https://nodejs.org/en/download/ puis installez-le

npm install npm@latest -g

3. Téléchargez via le lien https://www.getpostman.com/downloads/ et installez postman

II- IDENTIFICATION DES SERVICES REST A UTILISER

III- TEST SUR POSTMAN

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

C- SUPPRESSION D’UN UTILISATEUR

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

2. Essayons à nouveau de nous connecter en tant que Familyzoner

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

IV- IMPLEMENTATION AVEC LE FRAMEWORK ANGULAR

La commande ci-dessus nous permet de créer un projet angular.

4. Lancez le projet : ng serve --o

5. Ouvrez le projet dans votre éditeur visual studio code

C- CREATION D’UN UTILISATEUR

Il faut se loguer en tant qu’administrateur.

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

<form class="needs-validation" [formGroup]="loginForm" (submit)="onsubmit()" novalidate>

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

export class LoginComponent implements OnInit {

constructor(private fb: FormBuilder, private loginservice: LoginService) {

// var parser = require('xml2js');

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

// var aftCnv = x2js.xml2js();

Placez-vous dans app.component.html

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

Placez-vous dans app.module.ts

import { LoginComponent } from './login/login.component';

placez-vous dans login.service.ts

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

Placez vous sur le fichier users.component.html

<form class="needs-validation" [formGroup]="userForm" (submit)="onsubmit()" no

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

<button class="btn btn-danger"><a (click

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

Rédigé par : AMOU’OU BIWOLE Samson LIONEL

Vous aimerez peut-être aussi

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.