Proiectarea și implementarea unui sistem de blogging [304599]

[anonimizat] a Moldovei

Facultatea Calculatoare Informatică și Microelectronică

Departamentul Ingineria Software și Automatică

Practica tehnologică

Tema: Proiectarea și implementarea unui sistem de blogging

Chișinău 2020

CUPRINS

Introducere 3

1. Conținutul lucrării 4

1. Analiza domeniului de studiu 4

2. Modelarea sistemului informatic 7

2. Realizarea sistemului 10

2.1. Tehnologiile folosite 10

2.2. Limbajele de programare utilizate 14

2.3. Mediile de programare utilizate 15

2.4. Implementarea 16

3. Documentarea produsului realizat 26

3.1. Rularea aplicației local 26

3.2. Folosirea produsului 26

Concluzii 35

Bibliografia 36

Anexe 37

[anonimizat] o [anonimizat] a domeniilor de aplicație. [anonimizat]. [anonimizat]. [anonimizat], [anonimizat], și o sete acută spre informare.

[anonimizat], [anonimizat], cunoștințele, descoperirile și gândurile. Definiția unui blog ca o publicație cronologică și frecventă a [anonimizat], [anonimizat], acesta devine un adevărat instrument de predare și învățare.

[anonimizat], [anonimizat]. În fiecare zi apar aproximativ 75.000 [anonimizat], iar 43 de milioane au fost lansate la nivel mondial.

Cunoștințele, descoperirile, reflecțiile și feedbackul care circulă în spațiul blog încurajează un consistent rafinament al ideilor de cercetare. [anonimizat]-și articuleze ideile bine și succint pentru cititori. [4]

În decursul perioadei de practică s-au dezvoltat abilitățile cognitive prin modelarea și efectuarea unui proiect. Tema acestui proiect a fost aleasă următoarea: „Proiectarea și implementarea unui sistem de blogging”, și anume o [anonimizat].

1. Conținutul lucrării

1. Analiza domeniului de studiu

Termenul de informatică este introdus pentru prima dată în 1962, [anonimizat] o abreviere a frazei franceze information automatique ([anonimizat]). [anonimizat].

Prezența ei este puternic amplificată de impactul pe care îl are astăzi Internetul. [anonimizat], [anonimizat]. Procesul dezvoltării și implementării mijloacelor și tehnologiilor informaționale în practică este numit informatizare.

Există diverse formulări ale noțiunii informatica, dar considerăm că analiza minuțioasă a multor încercări de abordare a acestei probleme a arătat că cea mai obiectivă definiție este acea dată de V. M. Glușcov: „Informatica este un domeniu al științei, care are drept scop cercetarea și satisfacerea necesităților informaționale ale activităților societății umane civilizate, iar tehnica de calcul este un mijloc instrumental efectiv pentru accelerarea deservirii acestor necesități”. Conceptul de informatică determină următoarele noțiuni fundamentale: – calculatorul; – informația (structura informației); – prelucrarea informației.

Informația are o anumită formă: articol, mesaj, comunicare, film, pictură, desen tehnic, cântec, model matematic, semnal electronic, undă electromagnetică etc. Prin date înțelegem materia primă, utilizată pentru construirea, păstrarea, prezentarea, prelucrarea și transmiterea informației.

Datele pot fi prezentate în următoarele forme: textuală (litere, cifre, semne de punctuație etc.), grafică, video, sonoră etc. Pentru a deveni informații, datele privitoare la obiectul de activitate respectiv trebuie prelucrate în concordanță cu cerințele informaționale.

Cu alte cuvinte, informațiile reprezintă niște date cu sens. Informațiile devin cunoștințe atunci când persoana care le folosește le înțelege și conștientizează cum pot fi folosite în cel mai bun mod pentru o activitate specifică a utilizatorului.

Informația permanent se găsește în circulație și trece prin următoarele etape:

Transmiterea informației;

Perceperea informației;

Prelucrarea informației;

Prezentarea informației.

Tehnologia (engleză Technology) este ansamblul metodelor, proceselor, operațiilor făcute sau aplicate asupra materiilor prime, materialelor și datelor pentru realizarea unui anumit produs industrial sau comercial. Importanța tehnologiei pentru dezvoltarea economică este larg recunoscută, având în vedere impactul pe care îl poate avea tehnologia asupra succesului.

Un loc din ce în ce mai important revine tehnologiei informaționale, utilizată pentru a realiza procese de transmitere-receptare, prelucrare, stocare a informației etc.

În literatura de specialitate sunt scoase în relief diverse accepțiuni ale noțiunii de tehnologie informațională.

Spre exemplu, James O'Brien, profesor de Finanțe și Management Information Systems de la Universitatea Washington de Est, înțelege prin tehnologie informațională sistemele informaționale bazate pe calculatoare; Laudon&Laudon consideră calculatoarele și echipamentele periferice baza sistemelor informaționale moderne, iar Van Cuilenburg susține că tehnologia calculatoarelor și a telecomunicațiilor luate împreună formează tehnologia informațională. [1]

Disciplina dată (tehnologia informatiei) pune la dispoziția studentului un șir de subiecte, soluții și indicații pentru utilizarea avansată a tehnologiilor informaționale de comunicare întro societate modernă. În mod special sunt menționate posibilitățile utilizării tehnologiilor informaționale de comunicare în domeniul legat de viitoarea activitate profesională a studentului. Conform acestui curriculum, ciclul de lecții este axat pe aspecte teoretice și practice importante ale disciplinei, clasificate în șase compartimente: Sisteme de Operare, Procesoare de Text, Platforme eLearning, Prezentări Electronice, Servicii Internet, Soluții soft pentru domeniul de activitate.

Un blog (scurtarea „weblog”) este un jurnal online sau un site web informațional care afișează informații în ordine cronologică inversă, cu cele mai recente postări apărute în primul rând. Este o platformă în care un scriitor sau chiar un grup de scriitori își împărtășesc opiniile asupra unui subiect individual. [2]

De regula, actualizarea blogului constă in adăugarea de text nou, similar unui jurnal personal, toate noile completări sau articole noi sunt afișate pe blog în ordine inversă din punct de vedere cronologic permițând în acest mod vizitatorului să citească practic noutățile.

Termenul de „blog” a apărut în anul 1997, când John Berger și-a denumit website-ul „weblog”.

În faza inițială blog-urile erau actualizate manual, însă cu timpul au apărut programe și metode ce pot automatiza aceste procese. Utilizarea unui astfel de program ce se bazeaza pe browserele de Internet, reprezintă un aspect obișnuit al blogging-ului.

Scopul blog-urilor este unul foarte variat, începând cu jurnale personale și până la „arme” publicitare pentru campanii politice, ale programelor media sau diverse companii comerciale ce au ca scop vânzarea de produse sau servicii. Scopul blog-urilor poate varia și în funcție de autorul acestuia – de la unul singur la o întreagă comunitate.

Încă un aspect foarte important al blog-urilor este că pot constitui și o sursă semnificativă de venituri pentru cei care publică articole sau le administrează.

Majoritatea blog-urilor permit vizitatorilor să răspundă prin comentarii publice, creând astfel o comunitate de cititori concentrată în jurul blog-ului; pe când alte blog-uri nu sunt interactive și au doar scop de informare. [3]

De la această idee s-a început dezvoltarea acestui proiect, și anume crearea propriului sistem de blogging, fără dependențe terțe. Acesta fiind scopul proiectului, care face parte din domeniul informației, deoarece cel care posedă informația care trebuie, are puterea.

Este important să menționăm că bloggingul crește cu fiecare zi care trece! Prin urmare, pentru a răspunde la întrebarea „de ce blogging” trebuie să analizăm factorii din spatele creșterii sale.

În primele etape, blogurile au devenit mainstream, deoarece serviciile de știri au început să le folosească ca instrumente de informare și de formare a opiniei. A devenit o nouă sursă de informații.

Întreprinderile au văzut o modalitate bună de a îmbunătăți nivelul de satisfacție al clientului. Prin blogging, companiile țin clienții și clienții la zi. Cu cât mai mulți oameni îți vizitează blogul, cu atât mai multă expunere și încredere are brandul tău.

Bloggerii au văzut potențialul de a ajunge la mai multe persoane interesate de subiecte specifice. Printr-un blog, vizitatorii pot să comenteze și să interacționeze autorul, care vă ajuta la crearea unei rețele de urmăritori fideli.

Odată ce blogul primește suficientă atenție și fani, se poate de analizat modalități de monetizare a blogului. Prin intermediul blogului, se pot oferi servicii și vinde produse. [2]

Din cele exprimate mai sus, se poate de convins despre importanța unui blog, cât și impactul acestuia asupra societății din mediul on-line.

Sistemul care urmează a fi dezvoltat va fi sub formă de pagină web și care va avea funcționalul de baza a unui blog, și anume de postare a informației, cât și păstrarea acesteia într-o bază de date. Odată îndeplinită această sarcină, se poate de lucrat la îmbunătățiri cum ar fi un sistem de utilizatori, sistem de administrare a blog-ului etc. Pentru început ne v-om ghida după sistemele deja prezente pe internet, cum ar fi platforma WordPress, Tumbl, Medium, Wix, Blogger… Iar toate acestea au în comun cel mai important, postarea informației.

2. Modelarea sistemului informatic

În acest capitol se demonstrează fiecare pas de proiectare al sistemului utilizînd diagramele UML. Unified Modeling Language (UML) este un limbaj pentru scop general de dezvoltare, limbaj de modelare în domeniul ingineriei software, care este destinat să furnizeze o modalitate standard de a vizualiza proiectarea unui sistem. UML a fost proiectata inițial de dorința de a standardiza sistemul de notație disparate și abordările de proiectare a software-ului. Unified Modeling Language (UML) oferă o modalitate de a vizualiza planurile de arhitectură a unui sistem într-o diagramă, inclusiv elemente cum ar fi:

orice activitate (locuri de muncă);

componentele individuale ale sistemului și modul în care acestea pot interacționa cu alte componente software;

cum sistemul va rula;

cum entitățile vor interacționa cu celelalte (componente și interfețe);

interfață de utilizator extern

Pentru explicarea detaliată a proiectării aplicației software vor fi folosite diagrame UML standarte așa cum sînt: diagramele use cas, diagamele de activitate, de clase, diagramele de plasare, de secvențe și colaborare.

Scopul utilizării acestor diagrame este creșterea universalității și creearea unei viziuni clare asupra sistemlui și modul acestuia de funcționare, precum și componente și interacțiunea acestora între ele și cu sistemele exterioare. Putem menționa că aceasta reprezintă etapa ce stă la baza funcționării corecte a sistemului, deoarece orice este foarte ușoară detectarea erorilor și efectuarea modificărilor la nivel de structură a aplicație. Aceaste schimbări nu vor fi foarte costisitoare, la fel ca schimbările efectuate deja șa faza de dezvoltare sau chiar la cea de funcționare.

În figura 2.1 putem observa structura generală al aplicației, și cele două componente de bază ale acesteia. Prima componentă este clientul care reprezintă partea de frond-end al aplicației web și care prin relație de dependență aceasta depinde de componenta server, ce reprezintă partea de back-end al aplicației.

Figura 2.1 – Diagrama generală a componentelor

În figura 2.2 este ilustrata sub formă de diagramă de componente, compoziția blocului de server, care face parte din:

server.js – fișierul de bază al aplicației server, care răspunde de pornirea acestuia, de rutarea cererilor și de conexiunea cu baza de date

SocketManager – obiect care are scop de a defini fiecare rută al cererilor disponibile, cât și manipularea socket-urilor

BlogPost, Comment, User etc – modelele folosite pentru manipularea cu baza de date MongoDB

Relația dintre server.js și SocketManager este de dependență, deoarece rutarea link-urilor depinde de acest obiect, iar între SocketManager și BlogPost, Comment, User etc. este de asociere deoarece acestea se folosesc pentru a scrie, citi din baza de date.

Figura 2.2 – Diagrama generală a componentei server

În figura 2.3 se identifică diagrama de componente pentru compoziția blocului de client, care consistă din următoarele părți:

App – fișierul de bază al aplicației în care se face conexiunea cu partea server al aplicației și care se ocupă de afișarea paginilor

Route – sistemul de rutare

MainPage, BlogPage, PortfolioPage, GoodiesPage etc – fișierele responsabile de rendarea paginilor selectate, și de logica acestora

Relația dintre App și Route este de dependență deoarece aplicația are nevoie de rute pentru a afișa diferite pagini. Între Route și MainPage, BlogPage, PortfolioPage, GoodiesPage etc. este o relație de generalizare deoacere doar un singur obiect poate să se folosească în Route, în dependență de ruta aleasă de utilizator, respectiv și pagina respectivă se va afișa.

Figura 2.3 – Diagrama generală a componentei client

2. Realizarea sistemului

2.1. Tehnologiile folosite

React.js este o bibliotecă JavaScript cu sursă deschisă, care este utilizată pentru construirea interfețelor de utilizator special pentru aplicații cu o singură pagină. Este folosit pentru gestionarea stratului de vizualizare pentru aplicații web și mobile. React ne permite, de asemenea, să creăm componente UI reutilizabile. React a fost creat pentru prima dată de Jordan Walke, un inginer software care lucrează pentru Facebook. React pentru prima dată apare pe newsfeed-ul Facebook în 2011 și pe Instagram în 2012.

Figura 2.1.1 – Logo-ul tehnologiei React [14]

React permite dezvoltatorilor să creeze aplicații web mari care pot schimba date, fără a reîncărca pagina. Scopul principal al React este de a fi rapid, scalabil și simplu. Funcționează numai pe interfețele utilizatorului din aplicație. Aceasta corespunde vizualizării în șablonul MVC. Poate fi utilizat cu o combinație de alte biblioteci JavaScript sau cadre, cum ar fi Angular JS în MVC.

React JS este, de asemenea, numit simplu React sau React.js.

Punctele forte ale React sunt:

Simplitatea – ReactJS este doar mai simplu de înțeles imediat. Abordarea bazată pe componente, ciclul de viață bine definit și utilizarea JavaScript doar simplu fac React foarte simplu de învățat, construiți un web profesionist (și aplicații mobile) și susțineți-l. React utilizează o sintaxă specială numită JSX, care vă permite să amestecați HTML cu JavaScript. Aceasta nu este o cerință; Dezvoltatorul poate scrie în continuare în JavaScript simplu, dar JSX este mult mai ușor de utilizat.

Ușor de învățat – oricine are cunoștințe anterioare de bază în programare poate înțelege cu ușurință Reacția în timp ce Angular și Ember sunt denumiți „limbaj specific domeniului”, ceea ce presupune că este dificil să le învețe. Pentru a reacționa, ai nevoie doar de cunoștințe de bază despre CSS și HTML.

Abordare nativă – React poate fi utilizat pentru a crea aplicații mobile (React Native). Și React este un fan al reutilizării, ceea ce înseamnă că reutilizarea extensivă a codurilor este acceptată. În același timp, putem realiza aplicații IOS, Android și Web.

Legarea datelor – React folosește legarea de date unidirecțională și o arhitectură de aplicație numită Flux controlează fluxul de date către componente printr-un singur punct de control – dispecerul. Este mai ușor să depanați componente independente ale aplicațiilor ReactJS mari.

Performanță – React nu oferă niciun concept de container încorporat pentru dependență. Puteți utiliza module Browserify, Solicitați JS, EcmaScript 6 pe care le putem utiliza prin Babel, ReactJS-di pentru a injecta dependențe automat.

Testabilitate – aplicațiile ReactJS sunt super ușor de testat. Vizualizările reacționate pot fi tratate ca funcții ale statului, deci putem manipula cu starea pe care o trecem la vizualizarea ReactJS și aruncăm o privire la ieșire și acțiuni, evenimente, funcții declanșate etc. [5]

WebSockets este condus de evenimente: atât serverul, cât și clientul pot reacționa la evenimente și mesaje. Putem asculta un eveniment de conectare, să aprindem o funcție atunci când un utilizator nou se conectează la server, să emităm un mesaj (practic un eveniment) peste o priză și multe altele.

WebSockets au deschis o întreagă lume de oportunități pentru dezvoltatorii web. Pentru a implementa această tehnologie fantastică în aplicațiile Node.js, răspunsul este Socket.IO, unul dintre cele mai populare motoare în timp real pentru Node.js.

Figura 2.1.2 – Logo-ul tehnologiei SocketIO [15]

Un lucru de reținut este faptul că Socket.IO nu este o implementare WebSocket. Autorii afirmă că „Socket.IO folosește într-adevăr WebSocket ca transport atunci când este posibil, dar un client WebSocket nu se va putea conecta la un server Socket.IO, iar un client Socket.IO nu se va putea conecta la un server WebSocket “.

Cu această înțelegere de bază a protocolului Websocket, este timpul să uităm de griji. [6]

Express.js, sau pur și simplu Express, este un framework de aplicații web pentru Node.js, lansat ca software gratuit și open-source sub Licența MIT. Este proiectat pentru crearea de aplicații web și API. A fost numit cadrul de server standard de facto pentru Node.js.

Figura 2.1.3 – Logo-ul tehnologiei Express [16]

Autorul original, TJ Holowaychuk, a descris-o ca pe un server inspirat de Sinatra, ceea ce înseamnă că este relativ minim cu multe funcții disponibile sub formă de plugin-uri. Express este componenta de bază a stivei MEAN, împreună cu software-ul bazei de date MongoDB și AngularJS front-end framework. [7]

Mongoose este o bibliotecă ODM (Object Data Modeling) pentru MongoDB și Node.js. Gestionează relațiile dintre date, furnizează validarea schemelor și este utilizat pentru a traduce între obiecte din cod și reprezentarea acelor obiecte din MongoDB.

Figura 2.1.4 – Logo-ul tehnologiei Mongoose [17]

MongoDB este o bază de date de documente NoSQL. Înseamnă că putem stoca documente JSON în el, iar structura acestor documente poate varia, deoarece nu este aplicată ca baze de date SQL. Acesta este unul dintre avantajele utilizării NoSQL, deoarece accelerează dezvoltarea aplicațiilor și reduce complexitatea implementărilor. [8]

Sass (sau syntactically awesome style sheets) este un limbaj al foilor de stil (CSS) conceput inițial de Hampton Catlin și dezvoltat de Natalie Weizenbaum. După versiunile sale inițiale, Weizenbaum și Chris Eppstein au continuat să extindă Sass cu SassScript, un limbaj de script folosit în fișierele Sass.

Figura 2.1.5 – Logo-ul tehnologiei Sass [18]

Sass este un limbaj de script preprocesor care este interpretat sau compilat în fișiere de stil în cascadă (CSS). SassScript este limbajul de script propriu-zis. Sass este format din două sintaxe. Sintaxa originală, numită "sintaxa indentată", folosește o sintaxă similară cu Haml. Folosește indentarea pentru a separa blocurile de cod și caracterele newline pentru a separa regulile. Cea mai nouă sintaxă, „SCSS” (Sassy CSS), folosește formatarea blocurilor precum cea a CSS. Folosește bretele pentru a indica blocuri de cod și punct și virgulă pentru a separa regulile dintr-un bloc. În mod tradițional, fișierelor sintaxă indentificată și SCSS sunt date extensiile .sass și respectiv .scss.

CSS3 constă dintr-o serie de selectori și pseudo-selectori care grupează reguli care li se aplică. Sass (în contextul mai larg al ambelor sintaxe) extinde CSS, oferind mai multe mecanisme disponibile în limbaje de programare mai tradiționale, în special limbaje orientate spre obiect, dar care nu sunt disponibile CSS3 în sine. Când SassScript este interpretat, creează blocuri de reguli CSS pentru diverși selectori, astfel cum sunt definiți de fișierul Sass. Interpretul Sass traduce SassScript în CSS. În mod alternativ, Sass poate monitoriza fișierul .sass sau .scss și îl poate traduce într-un fișier .css de ieșire ori de câte ori fișierul .sass sau .scss este salvat.

Sintaxa indentată este o limbă metalică. SCSS este un metalanguage cuibărit, deoarece CSS valid este SCSS valid cu aceeași semantică.

SassScript oferă următoarele mecanisme: variabile, cuibărire, mixinuri și moștenire a selectorului. [9]

Figura 2.1.6 – Imaginea reprezentativă al tehnologiei Webpack [19]

Webpack este un popular sistem de pachete de module construit pe partea de sus a Node.js. Se poate ocupa nu numai de combinarea și micșorarea fișierelor JavaScript și CSS, dar și a altora, cum ar fi fișierele imagini (spriting) prin utilizarea de plugin-uri. Webpack este soluția recomandată de pachet și ar trebui să fie preferată față de Cassette sau ASP.NET Bundling.

Proiectul va grupa propria sa copie al react și react-dom cu webpack, iar ReactJS.NET va fi utilizat doar pentru redarea serverului.

La baza sa, webpack este un pachet de module statice pentru aplicații JavaScript moderne. Când pachetul web procesează aplicația, creează intern un grafic de dependență care mapează fiecare modul de care proiectul are nevoie și generează unul sau mai multe pachete. [10]

2.2. Limbajele de programare utilizate

Figura 2.2.1 – Imaginea reprezentativă al limbajului JS [20]

JavaScript adesea prescurtat ca JS, este un limbaj de programare care se conformează specificației ECMAScript. JavaScript este un nivel înalt, adesea compilat doar la timp și multi-paradigmă. Are sintaxa cu paranteză cretă, dactilografiere dinamică, orientare obiect pe bază de prototip și funcții de primă clasă.

Alături de HTML și CSS, JavaScript este una dintre tehnologiile de bază ale World Wide Web. JavaScript activează paginile web interactive și este o parte esențială a aplicațiilor web. Marea majoritate a site-urilor web îl utilizează pentru comportamentul paginilor din partea clientului și toate browserele web importante au un motor JavaScript dedicat pentru a-l executa.

Ca limbaj multi-paradigmă, JavaScript acceptă stiluri de programare bazate pe evenimente, funcționale și imperative. Are interfețe de programare a aplicațiilor (API) pentru lucrul cu textul, datele, expresiile obișnuite, structurile de date standard și modelul de obiect document (DOM). Cu toate acestea, limba în sine nu include nicio intrare/ieșire (I/O), cum ar fi facilități de rețea, stocare sau grafică, deoarece mediul gazdă (de obicei un browser web) furnizează aceste API.

Motoarele JavaScript au fost utilizate inițial doar în browserele web, dar acum sunt încorporate în unele servere, de obicei prin Node.js. De asemenea, sunt încorporate într-o varietate de aplicații create cu cadre precum Electron și Cordova.

Deși există asemănări între JavaScript și Java, inclusiv numele limbii, sintaxa și bibliotecile standard respective, cele două limbi sunt distincte și diferă foarte mult în ceea ce privește designul. [11]

2.3. Mediile de programare utilizate

Visual Studio Code este un editor de coduri sursă gratuit realizat de Microsoft pentru Windows, Linux și macOS. Caracteristicile includ suportul pentru depanare, evidențierea sintaxei, completarea inteligentă a codului, fragmente, refactorizarea codului și Git încorporat. Utilizatorii pot schimba tema, comenzile rapide de la tastatură, preferințele și pot instala extensii care adaugă funcționalitate suplimentară.

Figura 2.3.1 – Mediul de programare Visual Studio Code

Codul sursă al Visual Studio Code provine de la proiectul VSCode de software gratuit și open-source Microsoft lansat sub Licența MIT permisivă, dar binarele compilate sunt freeware pentru orice utilizare.

În studiul pentru dezvoltatori Stack Overflow 2019, Visual Studio Code a fost clasat cel mai popular instrument de mediu pentru dezvoltatori, 50,7% din 87.317 respondenți au susținut că îl folosesc.

Visual Studio Code a fost anunțat pe 29 aprilie 2015 de către Microsoft în cadrul conferinței Build 2015. O previzualizare a fost lansată la scurt timp după aceea.

Pe 18 noiembrie 2015, Visual Studio Code a fost lansat sub licența MIT și codul sursă a acestuia a fost postat pe GitHub. De asemenea, a fost anunțat sprijinul pentru extindere.

Pe 14 aprilie 2016, Visual Studio Code a absolvit etapa de previzualizare publică și a fost lansat pe web.

Visual Studio Code este un editor de cod sursă care poate fi utilizat cu o varietate de limbaje de programare, inclusiv Java, JavaScript, Go, Node.js și C ++. Se bazează pe cadrul Electron, care este utilizat pentru a dezvolta aplicații web Node.js care rulează pe motorul de layout Blink. Visual Studio Code folosește aceeași componentă de editor (denumită în nume „Monaco”) folosită în Azure DevOps (numită anterior Visual Studio Online și Visual Studio Team Service).

În loc de un sistem de proiect, permite utilizatorilor să deschidă unul sau mai multe directoare, care pot fi apoi salvate în spațiile de lucru pentru reutilizarea viitoare. Acest lucru îi permite să funcționeze ca editor de coduri agnostice pentru orice limbă. Acceptă o serie de limbaje de programare și un set de caracteristici care diferă pentru fiecare limbă. Fișierele și folderele nedorite pot fi excluse din arborele de proiect prin setări. Multe funcții ale Codului Visual Studio nu sunt expuse prin meniuri sau interfața de utilizator, dar pot fi accesate prin intermediul paletei de comenzi.

Codul Visual Studio poate fi extins prin extensii, disponibile printr-un depozit central. Aceasta include completări la editor și asistență lingvistică. O caracteristică notabilă este capacitatea de a crea extensii care să adauge suport pentru limbi, teme și depanatoare noi, să efectueze analize de coduri statice și să adauge linteruri de cod utilizând Limbajul Protocol Server.

Visual Studio Code include mai multe extensii pentru FTP, permițând utilizarea software-ului ca alternativă gratuită pentru dezvoltarea web. Codul poate fi sincronizat între editor și server, fără a descărca niciun software suplimentar.

Visual Studio Code permite utilizatorilor să stabilească pagina de cod în care este salvat documentul activ, caracterul newline și limbajul de programare al documentului activ. Acest lucru îi permite să fie utilizat pe orice platformă, în orice locale, și pentru orice limbaj de programare dat. [12]

2.4. Implementarea

Proiectul nu a fost conceput de la 0, însă s-a folosit un boilerplate deja gata făcut. Un boilerplate este un șablon pe care îl putem clona și reutiliza pentru fiecare proiect, având funcționalul de bază la o simplă aplicație. Ecosistemul modular Javascript simplifică dezvoltarea aplicațiilor prin diferite biblioteci, cadre și instrumente. Boilerplate-urile pot fi descurajante dacă nu se înțeleg elementele fundamentale ale componentelor de bază.

Aplicația se va constitui din 2 părți, clientul, adică partea de front-end, de care se va ocupa React js, și serverul, partea de back-end, de care se va ocupa Express.

După care s-a dorit o sincronizare totală pentru toți utilizatorii conectați, astfel acest boilerplate a fost modificat un pic pentru a suporta SocketIO, o tehnologie foarte utilă în cazul un astfel tip de aplicație, astfel în mare parte s-a adăugat următoarele bucăți de cod pe partea de server (back-end) al aplicației:

const http = require('http');

const httpServer = http.createServer(app);

const io = require('socket.io')(httpServer);

const SocketManager = require('./socket/SocketManager');

io.on('connection', (socket) => SocketManager(socket, io));

Iar acest SocketManager se va ocupa cu recepționarea, cât și transmiterea mesajelor prin socket.

Odată ce a fost stabilită o conexiune între sockete s-a trecut pe partea de implementare a designului, iar datorită faptului că acest proiect a fost o continuare a unui proiect din anul anterior la universitate, am decis să îi urmez stilul de design. În linie generală migrația de design și modificări este ilustrată în figura de mai jos:

Figura 2.4.1 – Imaginea reprezentativă al migrației design-ului aplicației

Am decis să mă axez pe acest tip de design deoarece mai mulți cunoscuți l-au apreciat. Astfel, un design bun îmbunătățește experiența utilizatorului și satisfacția clienților care ajută la creșterea numărului de utilizatori ai aplicației specifice.

Deoarece proiectul se reface din nou, și din cauza că anterior acesta nu avea nume, s-a ajuns la numele final de ”Infuse”. Iar orice marcă are și logotipul său, și datorită uneltelor precum Adobe Illustrator și Adobe Photoshop, s-a creat imaginea din figura următoare:

Figura 2.4.2 – Reprezentarea grafică al logotipului

Pentru a face aplicația mai unicată s-a decis împărțirea acesteia în trei mari caracteristici:

Blog – o serie de articole interesante, scrise de echipă (reprezentată în figura de mai jos și în anexa A1)

Figura 2.4.3 – Reprezentarea paginii cu postările prezente pe pagină

Portofoliu – întruchiparea abilităților pe care le posedă un utilizator; aici echipa și-ar expune munca din diferite domenii, cum ar fi grafică, manipulări, editări etc. echipă (reprezentată în figura de mai jos și în anexa A2)

Figura 2.4.4 – Reprezentarea paginii cu portofoliile prezente pe pagină

Bunătăți – echipa va posta diferite articole pentru a prezenta iteme de pe diverse piețe, sau se va posta chiar și creații personale, cu sursă descărcabilă (reprezentată în figura de mai jos și în anexa A3)

Figura 2.4.5 – Reprezentarea paginii cu bunățile prezente pe pagină

Dacă s-a ajuns la numărul trei s-a gândit la sistemă de culori, care schimba culoarea accentuată a paginii în dependență pe care pagină de afli, acesta se face la nivel de aplicație, iar setările sunt salvate în baza de date. Un administrator, are mereu posibilitatea de a schimba aceste culori din panoul de administrare. În următoarea secvența de cod se executa logica pentru definirea culorii în dependență de locația în aplicație:

render(){

const {colors, socket} = this.props;

return(

<>

<style>

::selection {`{

color: ${colors._active.text};

background: ${colors._active.accent};

}`}

a:hover {`{

color: ${colors._active.accent};

}`}

</style>

<Header

navLinks = {this.props.navLinks}

colors = {this.props.colors}

activeTab = {this.props.activeTab}

user = {this.props.user}

socket = {socket}

/>

<main>

{this.props.children}

</main>

<Footer

navLinks = {this.props.navLinks}

socialLinks = {this.props.socialLinks}

socket = {socket}

/>

</>

);

}

De aici se poate de observat că aceste culori sunt transmise către componentă, unde deja se creează un stil CSS pentru a schimba culoarea. În cazul aplicației, unde există mai multe componente, câmpul cu culoari se transmit componentelor datorită la proprietăți, iar în dependență de locație, se aplică culoarea respectivă.

În cazul acestui sistem avem nevoie de un sistem de logare, și de păstrare a sesiunilor. Pentru acest caz o să folosim anume id-ul și cheia utilizatorului pentru păstrarea sesiunii, în cazul nostru, aceasta va persista atâta timp cât utilizatorul nu iese din sistem.

În timpul înregistrării utilizatorului se trimite cu ajutorul socket-ului către SocketManager comanda ”client > server registerAccount”:

formSubmitted = (e) => {

e.preventDefault();

this.resetErrors();

const parent = $('form[name="register"]');

let data = {};

let whatToFetch = ['displayName', 'username', 'email', 'password', 'repassword'];

for(let it in whatToFetch){

data[whatToFetch[it]] = parent.find(`input[name="${whatToFetch[it]}"]`).val();

}

data.policyTerms = false;

if(parent.find('.checkbox[data-checked=true]').length) data.policyTerms = true;

const {socket} = this.props;

socket.emit('client > server registerAccount', data, this.serverAnswer);

}

După care în SocketManager se face validarea câmpurilor, iar în caz că datele utilizatorului sunt valide se încearcă crearea acestuia, și returnarea unui obiect care va conține id-ul și cheia utilizatorului, care urmează a fi utilizate pentru logarea acestuia.

Logarea utilizatorului are loc în componenta pentru logare unde se introduce numele de utilizator și parola, odată introduse, aplicația client va trimite prin socket către SocketManager o comandă pentru verificarea datelor introduse, descris în codul de mai jos:

socket.on('client > server loginAccount', (data, cb) => {

User.findOne({username : new RegExp(data.username, "i")}, (err, user) => {

if(err){

cb(2, `there was a problem with the server! try again later!`);

console.log(err);

return;

}

if(!user){

cb(2, `no account found matching the username and password you entered!`);

return;

}

if(user.validPassword(data.password)){

cb(0, {userId: user._id, userKey: user.userKey});

}else{

cb(2, `no account found matching the username and password you entered!`);

}

});

});

Această validare de parolă se petrece la nivel de schemă, un avantaj la folosirea bibliotecii Mongoose. Pentru criptarea parolelor s-a folosit o altă librărie cu numele bcrypt, care permite generarea parolelor unice și oferă comoditate la compararea acestora.

UserSchema.methods.generateHash = function(password){

return bcrypt.hashSync(password, bcrypt.genSaltSync(8), null);

};

UserSchema.methods.validPassword = function(password){

return bcrypt.compareSync(password, this.password);

};

În caz ca acestea sunt valide, obiectul ce se va returna, format din id si cheia utilizatorului, vor fi salvate în stocarea locala (Local Storage), o metodă eficientă pentru salvarea datelor în browser.

serverAnswer = (err, data) => {

switch(err){

case 0:

localStorage.setItem("userId", data.userId);

localStorage.setItem("userKey", data.userKey);

this.props.user.initData();

break;

case 1:

this.updateErrors(data);

break;

case 2:

this.props.addWarnMessage(data);

break;

default:

this.props.addWarnMessage(`unknown error!`);

}

}

Pentru afișarea datelor sub forma unei componente, avem nevoie de lista cu obiecte, spre exemplu în cazul de mai jos, afisăm o listă cu postări din blog sub forma componentei BlogPost:

(posts.length)?(

<>

{

posts.map( (post, i) => {

return(

<BlogPost

key = {post._id}

index = {i}

post = {post}

colors = {colors}

user = {user}

socket = {socket}

pageId = {pageId}

updateLikes = {this.updateLikes}

updateViews = {this.updateViews}

/>

);

})

}

</>

):(

<div className="tabPageNoPostsFound">

no posts matching your criteria

</div>

)

3. Documentarea produsului realizat

3.1. Rularea aplicației local

Pentru rularea aplicației pe mașina locală tot de ce este nevoie este însuși codul sursă al aplicației. Și ca orice aplicație React, primul lucru care este necesar de făcut este de a rula comanda următoare:

npm install

Pentru a se conecta la baza de date MongoDB, avem nevoie de a crea în folderul config, un fișier cu numele ”config.js”, unde vom introduce datele de conexiune la baza, un exemplu ar fi:

module.exports = {

db: "<date de conexiune>",

db_dev: "<date de conexiune>",

};

Pasul următor ar fi rularea aplicației în sine cu ajutorul comenzii

npm run start

După care vom putea deschide aplicația web pe link-ul http://localhost:8080

3.2. Folosirea produsului

La accesarea paginii web, avem pagina principală, cu următoarele indicații:

Figura 3.2.1 – Pagina principală al paginii web

Unde avem

Butonul care duce la pagina principală

Direcționarea utilizatorului către blog-ul paginii web

Pagina cu portofoliile postate de către utilizatori

Pagina cu toate bunătățile postate

Logotip sub formă de buton care redirecționează spre pagina principală

Buton pentru afișarea meniul utilizatorului

Butoanele care redirecționează către postările recomandate

Butoanele pentru navigare prin componentele aplicației

Butoane sub formă de link către paginile sociale indicate de administratori

Buton pentru a contacta administratorii paginii web

Buton pentru a raporta o problema legată de pagina web sau în legătură cu bunătățile

Buton pentru afișarea jurnalului cu schimbările efectuate pe pagina web

Buton pentru afișarea termenii de utilizare

Buton pentru afișarea politicii de confidențialitate

Figura 3.2.2 – Meniului utilizatorului vizitator/autentificat

Astfel în dependență de starea utilizatorului la moment, meniul utilizatorului va arăta în dependență de aceasta. Vom avea:

Indicarea statului utilizatorului și anume de vizitator

Buton de redirecționare către pagina de autentificare

Buton de redirecționare către pagina de înregistrare

Indicarea numelui de utilizator

Buton de redirecționare către pagina de profil al utilizatorului

Buton de redirecționare către pagina de setări a profilului

Buton de redirecționare către pagina de raportări ale utilizatorului

Buton de redirecționare către pagina de administrare, în caz ca utilizatorul face parte din grupul de personal

Butonul de ieșire din sistem și revenirea la modul de vizitator al paginii web

Pentru vizitatori, pentru a se autentifica sau înregistra se vor accesa paginile respective, descrise în meniul utilizatorului, mai sus.

Figura 3.2.3 – Pagina de autentificare/înregistrare al utilizatorului

Dacă utilizatorul este abonat la o categorie anumită sau este administrator, cel mai probabil va avea parte de notificări din partea sistemului, cu informație descriptivă și cu link către sursa notificării.

Figura 3.2.4 – Notificările unui utilizator

În dependență de grupul din care faceți parte, sunt și unele permisiuni, cum ar fi, crearea postărilor, adăugarea comentarilor, editarea acestora, modificarea avatarului și multe altele. Pentru a crea spre exemplu o postare este nevoie de a accesa blogul paginii web, după care ne vom întâlni cu următoarea pagină:

Figura 3.2.5 – Pagina de blog

Unde avem următoarele:

Descrierea categoriei de blog

Butonul de abonare sau dezabonare de la ultimele acțiuni la blog

Toate categoriile disponibile

Butonul pentru crearea unei noi postări, va fi prezent în dependență de permisiuni

Butonul pentru ascunderea postărilor recomandate

Caseta cu o mică informație despre postare

Dacă utilizatorul face parte din personalul site-ului web, atunci va avea disponibil instrumentele precum: Ștergere, Plasare ca recomandată, Ascundere, Editare

Pentru adăugarea unei noi postări, vom face click pe butonul cu numărul 4, din figura anterioară, după care va apărea pagina respectivă:

Figura 3.2.6 – Pagina de adăugare a unei noi postări

Unde avem următoarele butoane și câmpuri:

Câmpul pentru introducerea titlului

Câmp pentru introducerea sub-titlului

Meniu de tip drop-down pentru alegerea categoriei din care va face parte postarea

Adăugarea unei imagini reprezentative din calculator sau prin url

Adăugarea unei imagini de tip cover din calculator sau prin url

Câmp pentru introducerea conținutului postării

Câmp pentru adăugarea tag-urilor

Câmp pentru indicarea manuală al numărului de aprecieri

Câmp pentru indicarea manuală al numărului de vizualizări

Câmp pentru modificarea datei de postare

Buton cu menirea de a face postarea recomandată

Buton pentru vizibilitatea postării

Buton pentru permiterea postării comentariilor

Buton cu menirea de a ascunde autorul postării

Butonul care va crea postarea cu datele introduse

Buton pentru anularea postării

O aplicație web, și anume blog, nu poate să existe fără pagina de profil al utilizatorului, pentru ai oferi posibilități precum schimbarea parolei, imaginii de profil, preferințe etc. În figura următoare se va analiza pagina de profil:

Figura 3.2.7 – Pagina de profil al utilizatorului

De unde avem:

Avatarul utilizatorului

Numele utilizatorului

Buton pentru schimbarea imaginii de fundal

Tab-ul pentru informația generală despre utilizator

Tab-ul pentru preferințele utilizatorului

Tab-ul pentru raporturile create de utilizator

Tab-ul pentru schimbarea parolei

Numele de afișare al utilizatorului

Email-ul utilizatorului

Data de înregistrare al utilizatorului

Pentru administratori care au acces la panoul de administrare, vom întâmpina următoarea pagină:

Figura 3.2.8 – Panoul de administrare

Cu următoarele opțiuni:

Tab-ul pentru setările paginii web

Tab-ul pentru păginile principale (Blog, Portfolio, Goodies)

Tab-ul pentru link-urile din bara de navigare,

Tab-ul pentru modificarea link-urilor sociale

Tab-ul pentru modificarea grupurilor

Tab-ul cu lista tuturor utilizatorilor

Tab-ul pentru postările care se vor afișa pe pagina principală (cele mai bune)

Tab-ul pentru raportări

Tab-ul pentru modificarea, adăugarea schimbărilor de pe pagina web

Butonul care răspunde de mentenanța paginii web

Avatarul implicit pentru utilizatorii noi înregistrați

Imaginile de fundal implicite din care utilizatorii pot să aleagă

Culorile ce definesc fiecare pagină (Acasă, Blog, Portfolio, Goodies)

Butonul pentru salvarea modificărilor efectuate

Concluzii

În urma efectuării acestui proiect am demonstrat schematic structura proiectului, și anume a unui sistem de blogging, cît și toate posibilitățile de care dispune, dar și modul de funcționare.

Prin descrierea sistemului s-a încercat redarea schematica a interacțiunilor dintre componentele aplicației și întelegerea mai vasta a acestora.

S-a explicat amănunțit scopul, motivul creării acestui tip de proiect, și anume pentru a avea venit nu doar proprietarul acestei pagini web, dar și utilizatorii care se folosesc de acest sistem, și anume să aibă o experiență plăcută la folosirea acestuia, să fie plăcut surprind de design, încât revenirea pe el să fie obligatorie. Pentru aceasta s-a făcut comparație cu mai multe sisteme deja existente pe piață și într-un final s-a ales cel mai bune caracteristici care urmează să fie implementate.

La elaborarea sistemului s-au urmat niște trepte care au ajutat la sporirea productivității, cât și a plăcerii de a lucra. Acesta fiind schițarea fiecărui pas unei sarcini concrete, și focusarea totală asupra ei.

Lucrarea respectivă, are un rol important în instruirea profesională, deoarece aceasta reprezintă o experiență destul de importantă, deoarece s-a realizat un sistem întreg și funcționabil, care are toate posibilitățile de a se extinde pe viitor. Munca intensivă, ambiția, ideile dar și plăcerea de a lucra au jucat un rol foarte important în dezvoltarea acestei aplicații, întrucât s-au dezvoltat abilitățile profesionale de a lucra la proiecte mari și importante.

În concluzie pot afirma că practica tehnologică m-a ajutat să învăț noi tehnologii, să-mi îmbunătățesc abilitățile de programator, și că nimic nu este imposibil când dorințele sunt mari.

Bibliografia

TEHNOLOGII INFORMAȚIONALE ȘI COMUNICAȚIONALE. [online] [accesat 30.06.2020]. Disponibil: http://dspace.usarb.md:8080/jspui/bitstream/123456789/3734/1/Popov_TIC.pdf

What is a Blog? – The Definition of Blog, Blogging, and Blogger [online] [accesat 30.06.2020]. Disponibil: https://firstsiteguide.com/what-is-blog/

Ce este un blog si la ce foloseste? [online] [accesat 30.06.2020]. Disponibil: https://sarghydesign.ro/ce-este-un-blog-si-la-ce-foloseste/

UTILIZAREA BLOG-URILOR ÎN EDUCAȚIE [online] [accesat 30.06.2020]. Disponibil: https://www.armyacademy.ro/buletin/articole/bul2ro_2007/a11.pdf

What and Why React.js [online] [accesat 30.06.2020]. Disponibil: https://www.c-sharpcorner.com/article/what-and-why-reactjs/

Socket.IO, React and Node.js: Going Real-Time [online] [accesat 30.06.2020]. Disponibil: https://www.valentinog.com/blog/socket-react/

Express.js [online] [accesat 30.06.2020]. Disponibil: https://en.wikipedia.org/wiki/Express.js

Introduction to Mongoose for MongoDB [online] [accesat 30.06.2020]. Disponibil: https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/

Sass (stylesheet language) [online] [accesat 30.06.2020]. Disponibil: https://en.wikipedia.org/wiki/Sass_(stylesheet_language)

Webpack [online] [accesat 30.06.2020]. Disponibil: https://reactjs.net/bundling/webpack.html

JavaScript [online] [accesat 30.06.2020]. Disponibil: https://en.wikipedia.org/wiki/JavaScript

Visual Studio Code [online] [accesat 30.06.2020]. Disponibil: https://en.wikipedia.org/wiki/Visual_Studio_Code

What is a Blog? – The Definition of Blog, Blogging, and Blogger [online] [accesat 30.06.2020]. Disponibil: https://firstsiteguide.com/what-is-blog/

React logo [online] [accesat 30.06.2020]. Disponibil: https://lh3.googleusercontent.com/proxy/f7Z8sxtk5q2mPLfHjxdEavT0E67UO6bHyPanKLMronvojz157qngEhn0UNAtCq7uVDkFuR_rYP2PouxT6hT6DZqBX1cXl2Omnwoz3bvaY6yY0jb64NVUWgvGZlp-BhBTr2jwss7foZqpVOghoIlr7B6Ayw

SocketIO logo [online] [accesat 30.06.2020]. Disponibil: https://www.programwitherik.com/content/images/2017/01/socket-e1434850599985.png

Express logo [online] [accesat 30.06.2020]. Disponibil: https://expressjs.com/images/express-facebook-share.png

Mongoose logo [online] [accesat 30.06.2020]. Disponibil: https://miro.medium.com/max/648/1*iDvsmUwzZQxJSKdL0xzwIA.png

Sass logo [online] [accesat 30.06.2020]. Disponibil: https://en.wikipedia.org/wiki/Sass_(stylesheet_language)#/media/File:Sass_Logo_Color.svg

Webpack logo [online] [accesat 30.06.2020]. Disponibil: https://raw.githubusercontent.com/webpack/media/master/logo/logo-on-white-bg.png

JavaScript logo [online] [accesat 30.06.2020]. Disponibil: https://ncoughlin.com/wp-content/uploads/2018/10/js.png

Anexe

Anexa A

Imagini din aplicație

Figura A1 – Reprezentarea paginiilor cu conținutul și editarea unei postări

Figura A2 – Reprezentarea paginilor cu conținutul și editarea unui portofoliu

Figura A3 – Reprezentarea paginilor cu conținutul și editarea unei bunătăți