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

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

 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

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

 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é.

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

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

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

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.

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

 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>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" formControlName="pw" placehold
er="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

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

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);

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

 // 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

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

<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';

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

@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) { }

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

 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>
<div class="form-group">
<label for="userName">Username:</label>
<input type="text" class="form-control" id="userName" formControlNam
e="userName" placeholder="Enter Username" name="userName" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="uname">Firstname:</label>
<input type="text" class="form-control" id="firstName" formControlNam
e="firstName" placeholder="Enter Firstname" name="firstName" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="lastName">Lastname:</label>
<input type="text" class="form-control" id="lastname" formControlNam
e="lastName" placeholder="Enter Lastname" name="lastName" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="mobile">Mobile:</label>
<input type="number" class="form-control" id="mobile" formControlNam
e="mobile" placeholder="Mobile" name="mobile" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>

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

 <div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" formControlNam
e="email" placeholder="Enter Email" name="email" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" formControlNam
e="password" placeholder="Enter password" name="password" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<!-- <button (click)="deleteUser(userForm.get('userName').value)" class="bt
n btn-danger">Delete user</button> -->
<!-- <button (click)="deleteUser('familyzoner')" class="btn btn-
danger">Delete user</button> -->

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

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

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

Rédigé par : AMOU’OU BIWOLE Samson LIONEL
 Suppression de l’utilisateur

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

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