UNIVERSITATEA DE STAT DIN MOLDOVA

FACULTATEA „MATEMATICĂ ŞI INFORMATICĂ”

DEPARTAMENTUL “INFORMATICĂ APLICATĂ”

Raport de practica

Șef de departament: Titu Capcelea

Conducător științific: Pașa Tatiana
Autor: Cupcea Petru, grupa IA2001

2022
 Cuprins:
I. Introducere............................................................................................................................ 2

II. Scopuri si obiective................................................................................................................. 3

III. Activitatea in perioada indicata.............................................................................................. 3

IV. Temele studiate si problemele expuse....................................................................................4

V. Concluzie:............................................................................................................................. 12

VI. Bibliografie:.......................................................................................................................... 12
 I. Introducere.

Practica de specialitate este una dintre cele mai importante etape în dezvoltarea unui
student, întrucât îi permite să aplice cunoștințele teoretice căpătate la universitate și nu doar,
și apucă să se simtă sub pielea unui lucrător într-o industrie mondială, chiar dacă pentru o
perioadă limitată de timp. Aceasta este o cale esențială spre devenirea unui specialist în orice
domeniu.

Getik Technology este o companie din România cu filiala in Chisinau care se ocupa
prioritar de aplicatii bancare si alte idei de aplicatii de management a finantelor. Echipa din
Bucuresti este echipa care se ocupa de back-end iar echipa din Chișinau se ocupa de partea
front-end, pe parcursul lucrului persista o comunicare aprinsa intre cele doua echipe pentru
dezvoltarea si gasirea unor solutii mai bune ceea ce tine de dezvoltarea softului. Prioritar ei
promoveaza folosirea tehnologiilor cat mai noi si cat mai sustenabile, folosesc o
infrastructura pe Cloud, Linux și Virtual Box, platformele utilizate sunt Oracle DB, Tomcat,
Apache. Uneltele care le folosesc în munca lor de zi cu zi, care sunt specifice domeniului sunt
Git, Pl/Sql Developer, Docker, Visual Studio Code, WebStorm și Slack pentru o comunicare
permanenta. Limbajele folosite sunt Typescript, Javascript, Sql, Pl/Sql, Apex uneori Swift.
Aceasta companie are un set enorm de beneficii pentru lucratorii ei precum ziua de munca de
6 ore, un mod prin care isi arata cat de importanti sun lucratorii lor pentru ei, care mai tarziu
sustin si implementeaza ideile care dezvolta industria IT locala.

Am ales aceasta companie din motivul ca domeniul web pare unul de perspectiva in
viitorul apropiat, javascript si typescript fiind doua dintre cele mai populare limbaje de
programare la moment. Si curiozitatea trezita fata de frameworkurile web si-a lasat amprenta,
mai ales acum cand tehnologiile de acum iti permit sa faci aproape orice utilizand un limbaj
de nivel relativ inalt care pare a fi simplu si prietenos pentru incepatori.
 II. Scopuri si obiective.
Realizarea unui landing page conform design-ului utilizand doar HTML, CSS si Javascript.

Introducerea in principiile de baza ale Angular si crearea unei aplicatii web.

Cunoasterea cu unealta Git, lucrul cu cererile web.

Introducerea in formularele Angular (Reactive Forms). Implementarea unui pipe de cautare in

cateva campuri. Functia TrackBy.

III. Activitatea in perioada indicata.

Data/perioada
30.05.2022/05.06.2022
06.06.2022/12.06.2022
13.06.2022/19.06.2022
20.06.2022/24.06.2022
Activitatea studentului in Dificultati/Lacune
perioada indicata intampinate, Modalitati/
recomandari de depasire
A fost realizat un landing Nu au fost intampinate
page conform unui design dificultati
pentru a practica si a
reaminti principiile
importante din HTML, CSS
si Javascript
Am fost introdus in Nu au fost intampinate
principiile de baza ale dificultati.
Angular-ului precum
componente, module,
servicii, pipe-uri, interfete,
rutare etc. Am inceput sa
creez proiectul propriu dupa
o structura promovata de
echipa de frontend in
aplicatiile proprii.
Cunoastearea cu unealta Git Complexitatea librariei rxjs
utilizata pentru o dezvoltare si a observables./ La
eficienta si mentinerea unui depasirea blocajelor a ajutat
control asupra schimbarilor mai multe exemple intr-un
care ajung in cod. Lucrul cu proiect real, practicarea lor
requesturile web HTTP si in proiectul propriu.
HTTPS
Introducerea in formularele Nu au fost intampinate
Angular, crearea propriului dificultati.
formular, folosirea
validarilor si functiilor din
FormGroup. Am creat un
algoritm de cautare care
poate cauta un cuvant cheie
sau inceputul lui in cateva
campuri ale unui obiect.
 IV. Temele studiate si problemele expuse.
Au fost studiate urmatoarele teme pe parcursul practicii:
- HTML
- CSS
- Javascript
- Typescript
- Angular (Module, Componente, Servicii, Pipe-uri, Interfete, Rute, LyfeCicle
Hooks etc.)
- SASS, Less, SCSS
- Material UI
Pentru realizarea task-urilor date a fost folosit IDE-ul WebStorm, cu ajutorul Git au
fost incarcate proiectele pe GitHub.
Sarcinile si metode de rezolvare:
Primul task a fost crearea unui landing page utilizand doar HTML, CSS si Javascript.
Ideea din spatele acestui task a fost de a acomoda studentii cu procesul de lucru si amintirea
acestora a metalimbajului HTML si CSS, precum si careva evenimente din Javascript.
Rezultatul sarcinii:
Sarcina numarul 2:
A doua sarcina a avut ca scop cunoasterea cu Angular si punerea in practica pas cu pas a
celor invatate. Pentru a implementa cunostintele acumulate despre acest framwork, a fost
propusa sa aleg un proiect personal in care as putea incerca lucrul cu libraria. Ca tema de
proiect a fost ales crearea unei clone la un magazin online.
 La inceput am fost cunoscut cu structura unui proiect real de la banca OTP si cum ar
fi mai bine de impartit logica paginilor si componentelor pe directorii. De asemenea
importanta modulelor si dependentele componentelor de module. Fiind ajutat de
documentatie a fost setat mediul pentru crearea si pornirea aplicatiei web, pentru a seta acesta
e nevoie de node js si un terminal sau consola.
Dupa ce a am reusit sa pornesc proiectul a fost ales sa creez o structura a proiectului
presupusa de mine pentru dezvoltarea ulterioara a aplicatiei.

Dupa crearea acestei structuri a fost implementat material UI si a fost inceputa tentativa de a
crea prima componenta. Prima componenta a fost un card simplu de la material UI prestilizat.

<div class="body-wrapper">
<mat-card class="no-items-card mat-elevation-z24">
<mat-card-header>
<button mat-icon-button class="change-icon">
<mat-icon>change_circle</mat-icon>
</button>
</mat-card-header>
<mat-card-content>
<p>You have no saved items</p>
<p>Sign in to sync your Saved Items across all your devices.</p>
<button mat-raised-button color="accent" routerLink="../login">Sign
In</button>
</mat-card-content>
<mat-card-footer>
</mat-card-footer>
</mat-card>
</div>
import { Component } from '@angular/core';

@Component({
selector: 'favorite-page',
templateUrl: './favorite-page.component.html',
styleUrls: ['./favorite-page.component.scss']
})
export class FavoritePageComponent {
}

Dupa au fost create cateva pagini cu un minim de date si a fost implementata rutarea in
proiect. De asemenea a fost creat Meniul impreuna cu footerul dupa setarea proiectului pentru
a fi multi-page.
Sarcina numarul 3:
Pentru sarcina data a fost inceput studierea librariei rxjs si a specificului ei. Prioritar a
fost metoda de infaptuire a unei cereri web. Initial a fost cautata o metoda de creare a unui api
fake, adica fals, care mai apoi a fost agreata cu conducatorul de practica. Cu ajutorul acestuia
dupa se pot face cereri web fara a lega aplicatia la o baza de date reala. Au fost studiate
modurile de utilizare a lor, cum de creat un loader la incarcarea datelor, cum de utilizat
directivele de afisare ngFor si ngIf, si cum de facut un subscribe la un observable din rxjs.
Prima parte a fost cautarea datelor pentru obiectele din fisierul db.json, api-ul fake a
fost obtinut prin scrierea unei comenzi in terminal, comanda : npm install -g json-server. La
finalizarea colectarii datelor a fost practicata utilizarea directivelor ngIf si ngFor si a mai mult
aspecte ale lor. Dupa utilizarea directivelor au fost utilizate cateva proprietati Input si Output
precum a fost si dezvoltata o logica a unui carucior de cumparaturi in interiorul componentei.
Dupa dezvoltarea functiilor mentionate mai sus a fost realizat primul request http, si
crearea logicii de afisare fiind impartita pe cazul cand datele au venit, datele se incarca si in
final cand nu exista date.
<div class="body-wrapper">
<mat-spinner *ngIf="requestInProgress" color="accent"></mat-spinner>

<no-items-card *ngIf="!requestInProgress && (cartList.length === 0 ||

cartList === undefined)"></no-items-card>

<div *ngIf="!requestInProgress && cartList?.length > 0" class="items-

container center">

<div class="cart-items">
<mat-card class="cart-items-header mat-elevation-z24">
<mat-card-title><h2>MY BAG</h2></mat-card-title>
</mat-card>
<ng-container *ngFor="let item of cartList">
<cart-item
[cartItem]="item"
(click)="setSubTotal()"
(deleteEvent)="deleteItemById($event)">
</cart-item>
</ng-container>
<mat-card class="cart-footer mat-elevation-z24">
<mat-card-title>
<mat-icon class="shipping-icon">local_shipping</mat-icon>
<h2>FREE* STANDARD DELIVERY</h2>
</mat-card-title>
<mat-card-subtitle>
<p>Faster delivery options available to most countries.</p>
<a>More info</a>
</mat-card-subtitle>
 </mat-card>
</div>

<div class="total-container">
<mat-card>
<mat-card-title>
<h2>TOTAL</h2>
</mat-card-title>
<mat-card-content>
<p>Sub-total: {{totalPrice}}$</p>
<p>Delivery</p>
<mat-icon>info</mat-icon>
<mat-select>
<mat-option [value]="false">Free Delivery</mat-option>
<mat-option [value]="true">Fast Delivery (+23$)</mat-option>
</mat-select>
</mat-card-content>
<mat-card-footer class="total-footer">
<button mat-raised-button color="accent"
(click)="sendToCheckout()">CHECKOUT</button>
</mat-card-footer>
</mat-card>
</div>

</div>

</div>
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { takeUntil } from 'rxjs/operators';

import { CartItemInterface } from "../../structures/cart-item.interface";

import { BaseComponent } from "../../../../../common/core/classes";
import { ActivatedRoute, Router } from "@angular/router";

@Component({
selector: 'cart-page',
templateUrl: './cart-page.component.html',
styleUrls: ['./cart-page.component.scss'],
})
export class CartPageComponent extends BaseComponent implements OnInit {

cartList: Array<CartItemInterface>;
requestInProgress: boolean;
totalPrice: string;

constructor(
private readonly http: HttpClient,
private readonly route: ActivatedRoute,
private readonly router: Router,
) {
super();
this.requestInProgress = false;
this.cartList = undefined;
}

ngOnInit() {
this.setCartList();
 }

setSubTotal() {
let price = 0;
this.cartList.forEach((item) => {
if (item?.price) {
price += item?.price;
}
})

this.totalPrice = price.toFixed(2);
}

deleteItemById(id: string) {
this.cartList.forEach((item,index) => {
if (id === item.id) {
this.cartList.splice(index, 1);
this.setSubTotal();
}
})
}

sendToCheckout() {
this.router.navigate(['../checkout'], {queryParams: {total:
this.totalPrice}})
}

private setCartList() {
this.requestInProgress = true;

this.http.get('api/cartItems').pipe(takeUntil(this.onDestroy)).subscribe((v
alue: any) => {
this.cartList = value;
this.requestInProgress = false;
this.setSubTotal();
});
}

}
Sarcina numarul 4:
Sarcina numarul 4 a constat in cunosterea formularelor din ReactiveForms, crearea unui
formular propriu, si dupa implementarea unui algoritm de cautare (de dorit sa fie utilizat sub
forma de pipe). Dupa implementarea algoritmului de facut cunostinta cu functia TrackBy si
care este scopul de a o utiliza, si cand ea trebuie utilizata.
Initial a fost aleasa ideea a crea un formular de login, au fost utilizate validarile si alte
functii ale formelor Angular. Pentru consistenta a fost decis sa mai creez un formular de
inregistrare care ar fi putin mai complex decat precedentul cu mai multe validari si mai multe
campuri. Partea cu formularele a fost inteleasa usor fiind simpla de implementat in typescript
aceasta librarie de creare a formularelor.
La finisarea formelor de inregistrare si logare a fost inceputa studierea metodelor din
Javascript care ar putea ajuta la scrierea algoritmului. Dupa nenumarate teste si incercari a
fost gasita si implementata o metoda de cautare care primeste ca parametru un array de
campuri ale unui obiect si poate cauta in ambele campuri o data. Pentru implementarea
acestui algoritm complex a fost utilizate functiile lodash. Functia TrackBy este una utilizata
deobicei in momentele cand avem nevoie ca unele componente care detin acelasi id la un
render repetat sa nu se incarce din nou, aceasta functie este folosita in special la functiile de
cautare care a fost implementata de catre mine mai devreme, ajuta foarte mult la optimizarea
paginii si reducerea consumului de resurse.
ngOnInit() {
this.setPageTitle();
this.setProductList();
this.formGroup.get('search').valueChanges
.pipe(takeUntil(this.onDestroy))
.subscribe((value) => {
this.searchValue = value;
})
}

<ng-container *ngFor="let item of productList | searchBy: searchValue:

['name', 'description']">
 <product-item [productItem]="item"></product-item>
</ng-container>

import * as _ from 'lodash';

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'searchBy',
})
export class SearchByPipe implements PipeTransform {

transform(data: Array<any>, searchValue: string, searchIn:

Array<string>): Array<any> {
if (!data || !searchValue || !searchIn) {
return data;
}

return this.filterBySearch(data, searchValue, searchIn);

}

private filterBySearch(data: Array<any>, searchValue: string, searchIn:

Array<string>): Array<any> {
const filteredBySearch = [];
data.forEach((item: any) => {
const findIn = [];

searchIn.forEach((searchItem) => {
findIn.push(_.get(item, searchItem).toLowerCase());
});

findIn.forEach((findItem) => {
if (findItem.indexOf(searchValue.toLowerCase()) >= 0) {
filteredBySearch.push(item);
}
});
});

return filteredBySearch;
}

V. Concluzie:
Practia de specialitate a fost un ajutor enorm in practicarea algoritmilor ceea ce
consider principal in industria noastra IT, la fel am fost cunoscut cu o echipa moderna cu
proiecte interesante si idei care ar trebui sa persiste in fiecare proiect. Am fost cunoscut cu
tehnologiile noi de dezvoltare web care sunt extrem de captivante din planul lucrurilor care
pot fi facute cu ajutorul lor. Cunostinta cu un proiect real mare la care se lucreaza zi de zi
consider a fi o experienta unica, si care ne da o oarecare idee despre consistenta industriei in
care ne aflam.

VI. Bibliografie:
https://www.getik.ro
https://angular.io/docs Docs/Understanding Angular
https://lodash.com
https://rxjs.dev
https://www.w3schools.com