Introducere în Visual Studio Code

În 2015, Microsoft a lansat un editor de cod destinat dezvoltării de

aplicații web numite Visual Studio Code, sau pur și simplu VSCode. Anunțată
în timpul Build, un eveniment dedicat dezvoltatorilor care are loc în Statele Unite
anual, este o unealtă ușoară și multiplatformă care este disponibilă atât
pentru Windows, cât pentru Mac OS și Linux și răspunde unei game enorme de proiecte, nu
doar [Link], cât și [Link]. În plus, editorul are suport pentru sintaxă
de diverse limbaje precum Python, Ruby, C++.
Pe lângă faptul că este complet gratuit, în plus, în a doua jumătate a anului lansării, în timpul
La evenimentul Connect(), editorul a fost anunțat ca fiind open source, având cod disponibil.
pe GitHub, ceea ce permite comunității tehnice să contribuie la dezvoltarea sa și
facilitând crearea de extensii și noi funcționalități.
Vom vedea pe parcursul articolului resursele oferite de acest instrument, abordând
puncte relevante referitoare la utilizarea IntelliSense, refactorizare, depanare de cod,
versionare a codului cu Git, automatizarea sarcinilor cu Gulp, printre altele
resurse. Pentu a înţelege mai bine editorul şi a observa fezabilitatea utilizării sale într-un
medii de dezvoltare multiplatformă, vom lucra cu un exemplu utilizând
[Link] 5, cea mai recentă versiune a framework-ului de dezvoltare web .NET și care este
suportat de asemenea pe Mac OS și Linux, fără dependență de Visual Studio.
La final vom vedea cum să realizăm desfășurarea aplicației în Microsoft Azure, completând tot
un ciclu de bază pentru dezvoltarea unei aplicații web, începând cu crearea acesteia,
configurare, până la implementarea sa pe un server extern.

Instalarea Visual Studio Code

Primul pas pentru a putea folosi Visual Studio Code, sau VS Code pentru
întimiz, este să realizăm instalarea acestuia pe computerul nostru. VS Code este
multiplatformă, putând fi utilizată de pe Windows, Mac sau Linux. În acest articol
vom vedea instalarea VS Code pe Windows.
Pentru a descărca cea mai recentă versiune a VS Code, accesați site-ul oficial al Visual Studio Code și, imediat
Pe ecranul principal, veți găsi un buton de descărcare:
 Figura 1. Site-ul oficial Visual Studio Code
O fereastră nouă va fi deschisă și descărcarea va începe automat:
 F
Figura 2. Descărcarea Visual Studio Code inițiată
Când faceți clic pe fila de descărcare, se poate deschide o fereastră. Trebuie doar să faceți clic pe „Executare”:

Figura 3. Confirmarea securității Windows

Fereastra următoare va solicita să alegeți limba utilizată de installer. Încă nu există
traducerea instalatorului în limba română, așa că o vom menține în engleză. Trebuie doar să faceți clic
em “OK”.

Figura 4. Alegeți limba instalatorului

O fereastră de bun venit va fi prezentată. Trebuie doar să apăsați butonul „Următorul” ca în

orice instalare pe Windows:

F
Figura 5. Bun venit din partea instalatorului

Fereastra următoare ne permite să modificăm locația de instalare a VS Code. Putem lăsa...

directoriu standard făcând clic pe „Următorul” din nou:
 Fi
gura 6. Alegeț i directorul în care va fi instalat VS Code
O instalador dará a opção de alterar o nome do ícone de execução do VS Code. Podemos
lăsați ca „Visual Studio Code” și facem clic pe „Next”:

F
igura 7. Escolha o nome do ícone de execução do Visual Studio Code
Următoarea etapă a procesului de instalare ne va permite să adăugăm VS Code la variabilă
Calea către Windows automat, adăugați-o pe desktop printre alte opțiuni. Putem
marchează toate opțiunile:

Figura 8. Opțiuni de instalare disponibile în Visual Studio Code

Un rezumat al ceea ce va fi instalat va fi afișat. Trebuie doar să faceți clic pe „Următorul”:

Figura 9. Rezumatul procesului de instalare

Instalatorul va prezenta o bară de progres care indică faptul că instalarea se desfășoară.
finalizată. La sfârșitul încărcării, care poate dura câteva secunde, o fereastră va indica
că instalarea a fost un succes și va întreba dacă dorim să rulăm VS Code.
Putem bifa opțiunea și, în cele din urmă, să facem clic pe „Finalizare” pentru a finaliza procesul:

Figura 10. Finalizând instalarea și executând VS Code

Gata! Ai instalat Visual Studio Code și ești pregătit să continui cu articolul.

Primul contact cu editorul

Spre deosebire de ceea ce numele poate sugera la prima vedere, VSCode nu este
o versiune a Visual Studio, în esența sa este un editor de cod similar cu
Sublime Text, Brackets și Atom, cu funcționalități optimizate pentru anumite sarcini.
Instalarea instrumentului este destul de simplă, fiind suficient să descărcați de pe site-ul oficial (vezi
seciunea Linkuri) și executați fișierul [Link]. Pentru alte platforme trebuie să fie
am descărcat un pachet în format zip conținând fișierele necesare pentru executarea sa.

În Figura 1 putem vedea mediul principal al instrumentului, cu unele elemente de

layout-uri deosebite. În stânga avem o bară de instrumente cu opțiunile (de sus
către jos): Explorează, care afișează sau ascunde fișierele deschise; Caută, pentru a efectua căutări
dosarele deschise; Git, care facilitează realizarea de commit-uri pentru depozitul proiectului;
e Debug, unde este posibil să analizăm variabile în timpul execuției. Pe partea dreaptă avem
o pagină de bun venit unde găsim linkuri utile despre VSCode, cum ar fi tutoriale și
extensii.
 Figura 1. Ecranul principal al Visual Studio
title="abrir imagem em nova janela">abrir imagem em nova janela

Proiecte ș i fiș iere

Cu VSCode este posibil să deschizi atât un singur fișier, cât și un dosar complet și poți
utilizați fișierele deschise ca bază pentru a oferi opțiuni în IntelliSense dinamic,
cum este cazul fișierelor JSON de configurare ale proiectelor [Link] 5.
Cu un design simplificat și intuitiv, obiectivul este de a maximiza zona editorului, căutând
lăsați mai mult spațiu pentru navigare și acces complet la contextul dosarului sau al
proiect. Interfața utilizatorului (UI) este împărțită în patru părți principale:
Editor: zona principal pentru editarea fișierelor, unde putem deschide până la trei
editoarele unul lângă altul;

Bară laterală, al cărei conținut variază în funcție de acțiunea care urmează să fie executată (explorare
fișiere, interacționa cu Git, etc.
Bară de status: indică informațiile despre proiectul deschis și fișierele care sunt
editate;
View Bar, unde avem posibilitatea de a alterna între vizualizările proiectului și încă a avea
indicatorii de context, cum ar fi numărul de modificări realizate, în cazul în care Git
să fie habilitat.
O resursă interesantă în editor este că acesta păstrează starea fișierelor, a layout-urilor și
dosarele în momentul în care acesta este închis, ceea ce înseamnă că atunci când editorul va fi
reaberto, toate articolele vor fi restaurate în forma în care erau anterior.
Editori unul lângă altul
Cu posibilitatea de a avea până la trei editoare deschise unul lângă altul, le putem deschide din
următoarele forme:
 Menține apăsată tasta Ctrl și apoi dă clic pe un fișier în Explorer;
Apăsați tastele Ctrl + \, scurtătură care împarte editorul activ în două;
Faceți clic dreapta pe fișier în Explorer și apoi pe
opțiunea Deschis pe Lateral;

Când avem mai mulți editori deschiși, putem alterna rapid între ei,
numai apăsând Ctrl + 1, 2 sau 3.

Explorator
Explorerul este folosit pentru navigare, deschiderea și gestionarea tuturor fișierelor și
pasta proiectului. După deschiderea unei mape în VSCode, conținutul mapei este
afișat în Explorer, unde putem efectua operațiuni de creare, eliminare sau redenumire a
fișiere, precum și mutarea fișierelor și folderelor cu funcția de drag and drop.

Apoi, când facem clic dreapta pe fișierele și folderele din Explorer, avem încă
câteva opțiuni care merită evidențiate, cum ar fi Open in Command Prompt, care deschide
prompt de comenzi Windows în directorul proiectului; Reveal in Explorer, care deschide
fișier în Windows Explorer; și Copy Path, care copiază calea fișierului în clipboard
de transfer
Pentru a naviga între fișiere putem folosi comenzile rapide Ctrl + Tab sau Alt + Săgeți
laterale.
Fiș iere de lucru
Când vizualizăm Explorer-ul, avem bara laterală împărțită în secțiuni, prima fiind
delați la Fișiere de lucru, care conține o listă de fișiere active, adică acelea care au fost
deschise recent în VSCode.
Așa cum putem vedea în Figura 2, la fel ca în alte editore, putem închide
fișiere individualmente (marcare la dreapta) sau toate din secțiune folosind acțiunea Închideți toate
Fișiere(marcație la stânga).

Figura 2. Opțiuni pentru închiderea fișierelor

Para salvar os arquivos, podemos utilizar o atalho Ctrl + S, comum em várias ferramentas,
sau în continuare butonul Salvare Tot, situat lângă Închidere Tot. În plus, de asemenea putem
utilizați opțiunea Salvare automată, cu care modificările efectuate vor fi salvate pe parcursul
proiect fără a fi nevoie să salvăm manual. Pentru a activa sau dezactiva acest lucru
funcționalitate avem două căi. Prima este să deschidem Paleta de Comenzi (începând de la
meniul Vizualizare sau apăsând Ctrl_Shift+P) și tastând „auto”, ceea ce va lista opțiunea Fișiere:
Activează/Dezactivează Salvarea automată, apăsați Enter. A doua metodă este accesând meniul Fișier.
faceți clic pe opțiunea Salvare automată.

Din Explorer este posibil să efectuezi căutări rapide asupra tuturor fișierelor
na pasta actualmente deschisă. Pentru aceasta este suficient să folosim tastele de comandă Ctrl + Shift +
Pentru a accesa opțiunea Căutare din bara laterală pe care o vedem în Figura 1. Și apoi,
trebuie să tastează ceea ce avem nevoie să găsim și să apăsăm Enter. Rezultatele obținute din
cercetările sunt apoi grupate în fișiere conținând termenul de cercetare, cu indicația
de câte ori este termenul conținut în fiecare fișier și locația sa, așa cum vedem
naFigura 3.

F
Figura 3. Rezultatele cercetării în arhive
În plus față de opțiunile simple de căutare, putem utiliza căutarea după cuvinte complete sau
încă folosește expresii regulate, opțiuni care sunt disponibile în bara de introducere a
termo căutat, așa cum se poate vedea în Figura 3.

Paleta de comenzi
Pentru a putea utiliza Paleta de Comenzi, putem apăsa tastele de scurtătură Ctrl
+ Shift + P sau accesând-o prin meniul Vizualizare. Cu paleta de comenzi este posibil să
schimba tema editorului, efectuează configurațiile de depanare, maparea tastaturii,
execuția sarcinilor, printre alte diverse sarcini comune. A figura 4 arată această paletă
aberta și câteva comenzi deja listate.
 F
Figura 4. Paleta de Comenzi

Unele combinații de taste sunt destul de utile pentru a accesa direct anumite funcții
specifice ale paletei de comenzi, dintre care merită să subliniem:
Ctrl + P: oferă opțiunea de a naviga prin orice fișier al proiectului, fiind suficient să tastezi
un termen pe care ne dorim;

F1: ne prezintă comenzile editorului;

Ctrl + Shift + O: ne permite navigarea către un simbol specific (variabilă sau
funcție locală) prezentă într-un fișier.
Ctrl + G: ne permite să navigăm prin linii specifice ale unui fișier.
În plus față de diversele comenzi pe care le-am văzut până acum, putem să tastăm doar simbolul
de interogare (?) în paleta de comenzi și vor fi listate toate comenzile disponibile
pentru a fi executați.
Putem încă folosi paleta de comenzi pentru a vizualiza mesajele de eroare din fișier,
bastând folosind combinația Ctrl + P și apoi tastând simbolul de exclamare (!),
sau pur și simplu folosești Ctrl + Shift + M. A Figura 5 ilustrează această funcționalitate.
 Figura 5. Erori ale fișierului în Paleta de Comandă

Visual Studio Code este un editor destul de complet care oferă suport pentru cele mai variate
sarcnile comune în dezvoltarea aplicațiilor (în special web), aici ne cunosc
câteva dintre principalele. În secțiunile următoare vom vedea în practică cum să utilizăm această
ferramenta para desenvolver um projeto [Link] 5.

Tema interfeț ei
În mod implicit, editorul vine cu tema „întunecată” activată, dar această configurație poate fi
alterată de acord com a preferință fă utilizator. Accesând o
meniu Fișier > Preferințe > Temă de culoare sau tastând Preferințe: Temă de culoare în
paleta de comenzi este posibil să schimbi culorile interfeței. Figura 6 arată câteva dintre
culori disponibile.
 Figura 6. Diferite teme ale interfeței editorului
Configurări de mediu
Cele mai importante setări ale editorului sunt stocate în fișiere JSON care pot fi
ușor modificate de utilizator pentru a se adapta preferințelor sale. Fragmente de cod,
dimensiunea și tipul fontului editorului, scurtăturile de tastatură, printre altele detalii pot fi
accesate și modificate din meniul File > Preferences, care conține diverse opțiuni
secundare, așa cum ilustrează Figura 7.
 Figura 7. Meniu de preferințe al utilizatorului

Când accesăm unul dintre aceste meniuri, vedem un fișier auxiliar unde trebuie să introducem
configurații noi, care se aplică automat. De exemplu, când facem clic
în Setările Workspace suntem duși la fișierul [Link], unde avem
sprijin de la IntelliSense pentru a modifica setările editorului. În Figura 8 putem vedea un
exemplu de modificare a fontului și opțiunile fiind listate automat în timpul
tipar
 Fi
gura 8. Modificând setările editorului

IntelliSense
Cu un VSCode avem la dispoziție un excelent IntelliSense pentru JavaScript,
TypeScript este pentru C#. Pentru a-l putea vizualiza în acțiune, de exemplu, putem
apăsați Ctrl + Spațiu și vor fi listate câteva opțiuni (Figura 9). Această funcționalitate este
foarte asemănătoare cu cea pe care o avem în Visual Studio și include, de asemenea, Code Snippets, care
acționăm ca scurtături pentru a genera blocuri de cod dintr-o expresie simplificată.

Fi
figura 9. Vizualizarea IntelliSense
Când trecem cursorul mouse-ului peste un element, acesta va arăta semnătura funcției sau tipul de
o variabilă, de exemplu. Pentru JavaScript editorul spune care este semnătura funcției sau care sunt
variabilele care sunt disponibile în domeniul selectat, și când lucrăm cu
[Link], sau VSCode oferă un IntelliSense asupra tuturor modulelor sale

Când dorim să utilizăm IntelliSense pentru bibliotecile JavaScript sau chiar pentru
modulele [Link], putem face clic pe becul care apare sub termenul introdus și
adaugă-l la IntelliSense sau chiar descarcă definițiile bibliotecilor,
așa cum arată Figura 10.

Fi
gura 10. Adăugând definiții de tip dintr-o nouă bibliotecă JavaScript
Prin aceasta, VSCode va descărca fișierul de definiție pentru AngularJS și prin
fim îl va adăuga la proiectul său, făcând referire la ei în fișier, astfel vom avea
instantaneu un IntelliSense pentru AngularJS, astfel încât atunci când tastăm orice
termo această bibliotecă, acesta va fi prezentat cu resursa IntelliSense, așa cum arată
Figura 11.

F
Figura 11. IntelliSense cu AngularJS

Referinț e ș i formatarea codului

Pentru a putea găsi toate referințele unei variabile sau funcții date,
un editor ne arată toate locurile unde este folosită când apasăm Shift +
F12, așa cum vedem în Figura 12. Această funcție este destul de utilă atunci când avem nevoie.
de refactorizare, de exemplu, o funcție care este utilizată în mai multe fișiere.
 Figura 12. Localizând toate referințele la o variabilădeschide imaginea într-o fereastră nouă

Schimbând toate ocaziile

Dacă dorim să schimbăm numele unei variabile sau al unei funcții, o acțiune tipică a procesului de
refactorizare, este important să ne asigurăm că toate aparițiile acestui termen vor fi modificate
în proiect, menținând codul fără erori. În VSCode acest lucru poate fi făcut ușor dacă
poziționăm cursorul mouse-ului peste elementul pe care dorim să-l redenumim și
apăsăm Ctrl + F2 (pentru a modifica în același fișier) sau doar F2 (pentru a modifica în
toate fișierele). Toate ocaziile vor fi selectate (Figura 13) și atunci putem
introduceți un nou nume.
 F
Figura 13. Schimbarea mai multor apariții

Formatarea codului
De multe ori trebuie să deschidem fișiere a căror formatare este afectată și să ajustăm fiecare
liniile manual pentru a menține estetica codului. În acest caz, putem utiliza resursa
de formatare automată a VSCode, pur și simplu selecționând blocul de cod,
accesând Paleta de Comenzi și tastând Formatează Cod. În Figura 14 putem vedea un
trecho cu formatare incorectă în stânga și în dreapta același bloc de cod după ce a fost
formatat

Figura 14. Resursa de formatare a codului

Depanare
Una dintre caracteristicile principale ale VSCode este suportul pentru depanare (debug) a
aplicații C# și [Link]. Pentru alte limbaje, totuși, este necesar să adăugați
câteva extensii ale căror instrucțiuni pentru instalare pot fi găsite în
documentația online a editorului, al cărei adresă se află în secțiunea Linkuri.
Când facem clic pe simbolul de depanare din bara de vizualizare, văzut în Figura 1, avem vizualizarea de
toate informațiile pertinente referitoare la această acțiune. Pentru a putea realiza depurarea
în aplicația noastră trebuie inițial să configurăm fișierul de depanare, [Link],
ce poate fi accesat din pictograma cu o roată dințată din bara superioară a secțiunii
de debug, cum arată figura 15.

Figura 15. Configurări de depanare

După ce facem clic pe acest icon, trebuie să selectăm mediul de depanare pentru ca VSCode
generează un fișier [Link]. De asemenea, putem selecta mediul C# Mono, în
între timp, această opțiune de depanare nu este încă disponibilă pentru Windows, funcționând doar
pentru aplicații dezvoltate în Linux sau Mac OS. De asemenea, depanarea pentru [Link] funcționează
în oricare dintre sistemele de operare menționate.
După configurarea corespunzătoare a fișierului [Link], putem rula aplicația
apăsând săgeata verde de sus a secțiunii de depanare sau pur și simplu
apăsând F5, la fel ca în Visual Studio.

Utilizând Breakpoints
Punctele de întrerupere, la fel ca în IDE-ul principal al Microsoft, pot fi adăugate (sau
eliminate) când faceți clic pe marginea stângă a editorului, așa cum putem vedea în Figura 16.
În acest moment, ei sunt listați automat în bara de debugging, cu indicația de
fișierul și linia în care este situat.
 Figura 16. Adicionând breakpoints
Când facem clic dreapta pe unul dintre punctele de întrerupere din bara de
în modul de depanare vedem o listă de opțiuni (Figura 17) în care putem activa, dezactiva sau
elimină punctele de oprire din cod.

Figu
ra 17. Opțiuni de depanare

Încă în partea de sus a barei laterale de debug avem opțiunea Deschide Consola, care poate fi
observată în Figura 15. Consola, care este dispusă automat lateral față de editor
principal, permite depurarea expresiilor care pot fi introduse și interpretate în timpul
execuție.

Versiunea codului
Cu VSCode avem suport pentru versiunea de cod integrată cu Git, care permite
utilizarea celor mai comune comenzi ale acestui instrument. Atunci când facem modificări în
fișierele aplicației, vor fi prezentate indicatori colorați în editor, informând despre
locații în care au fost efectuate modificări. Marcajele roșii indică că liniile
care au fost îndepărtate, în albastru indică linii care au fost modificate și culoarea verde marchează
liniile care au fost adăugate.
Făcând clic pe pictograma Git din bara laterală, este posibil să vezi toate fișierele care au fost
alterate. În acest moment putem să le trimitem de la distanță pentru repository efectuat.
un commit este și adăugarea de mesaje suplimentare despre ce a fost realizat. O
o funcționalitate destul de utilă în ceea ce privește versionarea codului este că atunci când
clicarmos sobre o arquivo na barra do Git, o VSCode nos mostra duas versões do mesmo
cote în cote, prezentând starea ta actuală comparată cu starea anterioară.
Pentru a efectua controlul versiunii, va trebui să inițializăm un repository local pentru al nostru
proiect în dezvoltare (dacă acesta nu a fost deja finalizat) și apoi adăugați
fișiere recent modificate. Pentru a face acest lucru, este suficient să faceți clic pe butonul Initialize Git Repository în vizualizare

la Git, așa cum arată Figura 18.

Figu
ra 18. Buton de inițiere a repository-ului Git
Prin apăsarea acestui buton se va executa comanda git inite toate fișierele vor fi
adăugați automat în repository, așa cum arată Figura 19. Observați în partea de sus,
Așa cum este și despre pictograma Git din bara laterală, un număr indică numărul de fișiere
ce au fost modificate.
 Fi
gura 19. Fișiere adăugate în Git
Observați de asemenea în această figură că atunci când trecem mouse-ul peste fișiere, alături de ele
apare două pictograme (evidențiate în verde) unde putem să anulăm modificările tale
(Curat, în stânga) sau adăugați-le la commit-ul care va fi făcut (Pregătire, în dreapta). Facând clic
em Stageo arquivo é destacado no topo, onde temos ã opção de removê-lo dessa condição
(preconizat), așa cum vedem în Figura 20. În secțiunea SCHIMBĂRI putem efectua Clean și
o Stagepara toate fișierele listate, fiind suficient să treci cu mouse-ul peste acest element și
aceleași icoane vor apărea, acum cu titlurile Clean Alle Stage All.
Opțiunea de stage este importantă atunci când modificăm mai multe fișiere, însă dorim să
doar câțiva dintre ei să fie adăugați la commit, păstrându-i pe ceilalți local în așteptarea că
suntem pregătiți pentru a fi trimise la repositoarul central.
 Figura 20. Adăugarea fișierului în Stage
În partea de sus a barei, lângă titlul GIT avem opțiunea Commit Staged (iconiță cu un)
„verificare”), dacă există fișiere în acest stadiu, sau Commit All, care efectuează commit-ul tuturor
fișierele care au suferit modificări.
Ultimul element de pe vârful barei Git (cu trei puncte) listează câteva dintre comenzile cele mai
utilizate în timpul controlului versiunii, așa cum vedem în Figura 21. Pornind de la el putem
a face sau a anula comituri, a efectua push și pull, printre alte opțiuni utile în viața de zi cu zi
evitând necesitatea de a executa aceste comenzi prin consolă.
 Figura 21. Comenzi suplimentare Git
În cele din urmă, când facem clic pe numele ramurii active în acel moment, aflat în bara de stare
(colțul din stânga jos), putem efectua checkout-ul unei alte ramuri din
paleta de comenzi (Figura 22).

F
Figura 22. Verificare de nouă ramură din paleta de comenzi
Cele mai multe comenzi legate de Git pot fi, de asemenea, executate direct
da Paleta de Comenzi, unde putem scrie Git și vom vedea toate opțiunile disponibile,
conform ilustrației Figura 23.
 Figura 23. Comenzi Git din Paleta de Comenzi

Crearea unei aplicaț ii [Link] 5 cu VSCode

Pentru a dezvolta exemplele din acest articol, va trebui să instalăm pe mașină [Link] și
Git, care va oferi suport pentru unele dintre sarcinile de automatizare și gestionare a pachetelor și
versiuni ale proiectului ulterior. Vom crea aici o aplicație [Link] 5 și vom efectua
seu deploy pe Microsoft Azure, explorând astfel funcționalitățile de control al versiunii
do VSCode, precum și servicii auxiliare ale Microsoft.
Apoi trebuie să instalăm [Link] 5 și DNX (Mediul de Execuție .NET), care este
ambiente de executare .NET. Acest lucru a fost dezvoltat de la zero cu scopul de
oferiți o structură de dezvoltare optimizată pentru aplicațiile implementate
atât în cloud cât și cele executate local. Este alcătuită din componente
modulare cu minimum de supraîncărcare necesar pentru a putea menține
flexibilitate în timpul construcției aplicațiilor noastre.
Pentru acest articol vom folosi sistemul de operare Windows 10 și pentru a realiza
instalarea DNVM (.NET Version Manager), un alt component necesar, vom deschide
prompt de comenzi și vom executa următoarele:
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "&{Branch='dev';iex"
((nou-objecție [Link]).DownloadString('[Link]
Acasă/dev/dnvminstall.ps1'))}
Rezultatul acestei operațiuni este descărcarea scriptului DNVM în directorul de profil al
utilizator, așa cum arată Figura 24. În mediul de exemplu al acestui articol existau deja câțiva dintre
resurse instalate, din acest motiv au fost trimise mai departe (liniile în galben). În cele din urmă, este
este necesar să reporniți Windows pentru ca setările să fie finalizate.
 Figura 24. Instalarea DNVM
După repornirea Windows-ului, putem deschide promptul de comandă pentru a verifica
localizarea DNVM utilizând următoarea comandă:
unde dnvm
Odată ce DNVM este achiziționat, îl vom actualiza și vom instala DNX pentru a putea rula
aplicații. Pentru aceasta, vom folosi următoarea comandă:
dnvm upgrade
Pentru a vedea DNVM-ul și, de asemenea, runtime-ul activ, așa cum arată Figura 25,
putem introduce în prompt următoarea comandă:
dnvm list
 Figura 25. Listarea DNVM actualizată
În această figură vedem o listă care conține mai multe runtime-uri ale DNX, unde putem alege pentru
utilizați cel mai recent. În acest caz, cel mai recent este deja marcat ca implicit.
A partir de acum avem mediul principal de dezvoltare instalat, putem então
utilizați scaffolding-ul pentru a crea o nouă aplicație [Link]. Pentru aceasta vom folosi
managerul de pachete Node (NPM – Manager de Pachete Node) pentru a instala Yeoman,
ce este un instrument de scaffolding pentru aplicații, precum Grunt, care este un
"executador" de sarcini (task runner) JavaScript, și în final Bower, care este managerul de
pacheturi de partea clientului. Pentru aceasta, vom folosi promptul de comandă ca administrator
pentru a crea proiectul [Link], pe care îl vom lăsa în directorul implicit, și vom crea
direcția numită proiectDevMedia în rădăcina unității C:, unde vom instala
Yeoman este un suport de instrumente utilizat pentru aceasta comanda următoare:
npm install -g yo grunt-cli generator-aspnet bower
Apoi vom crea folderele proiectului și aplicația folosind Yeoman cu
comando:
yo aspnet
Prin aceasta, Yeoman va lista o serie de șabloane de aplicație pe care este capabil să le creeze,
trebuie atunci să selectăm modelul de proiect pe care îl vom crea, folosind săgețile pentru
marcați o aplicație web de bază [fără membru și autorizare] și în cele din urmă
apăsând Enter, așa cum arată Figura 26.
 Figura [Link] de aplicație pentru creație cu Yeoman
Când proiectul va fi inițiat, va fi necesar să-i dai un nume, ceea ce în cazul nostru
caso va fi ProiectulBasicDevMedia. Când vom apăsa Enter, Yeoman va crea o
o nou folder cu acest nume și în interiorul său fișierele necesare pentru aplicația noastră.
La finalizarea creării, însuși Yeoman indică ce comenzi trebuie executate în
secvență, așa cum ilustrează Figura 27. Așadar, va trebui să navigăm în interiorul folderului creat
folosind comanda cd ProjetoBasicoDevMedia.

Figura 27. Accesând folderul proiectului creat

Urmând comenzile sugerate, vom instala acum pachetele NuGet necesare pentru a
executarea proiectului pe baza comenzii următoare:
dnu restore
După ce instalarea tuturor pachetelor a fost finalizată, vom deschide VSCode încă din
fă prompt cu comanda următoare:
cod
În câteva momente, VSCode se va deschide conținând toate fișierele pentru execuție.
proiect, așa cum putem vedea în Figura 28.

Smochin
ura 28. Proiect creat cu Yeoman
Acum că avem proiectul creat și configurat, îl vom rula local pentru a-l vedea.
rezultatul. De data aceasta, în Paleta de Comenzi a VSCode vom tasta următoarea comandă
pentru a executa proiectul:
dnx: Rulează comanda

Când tastăm această comandă și apăsăm Enter, următoarea solicitare va fi comanda

para abrir o projeto localmente, como podemos ver naFigura 29. Feito isso, um prompt de
comenzile vor fi prezentate, conținând fișierele care vor fi deschise și adresa
localhost unde va trebui să deschidem proiectul web, așa cum arată Figura 30.

Fi
gura 29. Executând proiectul
 Fi
gura 30. Informații despre aplicația care rulează
Accesând adresa[Link] vom vedea aplicația în execuție cu
conținut standard adăugat la crearea unui nou proiect.

Serviciile de echipă Visual Studio

Git este o platformă de versionare a codului și pentru a funcționa corect necesită

un furnizor de servicii de stocare pentru a găzdui fișierele. Pentru aceasta avem
câteva opțiuni în prezent, între cele plătite și cele gratuite, cum ar fi GitHub, BitBucket și Visual
Servicii pentru echipe de studio. În acest moment, vom examina inițial Serviciul pentru echipele Visual Studio
(VSTS), care permite utilizarea contului gratuit de către maximum cinci dezvoltatori,
în afară de a permite crearea oricărui număr de proiecte, ne oferă și
utilizarea funcțiilor suplimentare ca instrumente de planificare a sprintului, sarcini și
Tablouri Kanban, săli de echipă virtuale, printre alte resurse. În acest articol vom vedea cum
a utiliza VSTS și GitHub, deoarece sunt cele mai utilizate în contextul mediilor de
dezvoltare Microsoft.
Pentru funcționalitățile care vor fi explorate în acest articol, vom folosi în esență VSTS.
un sistem de repositoriu cu suport pentru Git, adică, vom vedea că acest instrument poate
să fie utilizată împreună cu VSCode, satisfăcând două dintre principalele nevoi ale zilei
ziua dezvoltatorului (în special web): editarea și versiunea proiectelor.
Pentru a putea folosi VSTS, trebuie să ne creăm sau să ne activăm contul pe pagina de
Visual Studio (secțiunea Linkuri). Atunci când accedem cu un cont de e-mail Microsoft
(Outlook, Hotmail, etc.) putem crea proiecte noi, care, pe lângă repository-ul de cod,
permite controlarea altor acțiuni pe parcursul întregului ciclu de viață al aplicației. Atunci când creăm
un proiect în VSTS, putem vedea că acesta suportă două sisteme de control al versiunii:
Team Foundation Version Control este un Git. Vom utiliza al doilea.
La finalizarea creării proiectului, trebuie să accesăm profilul nostru și, apoi,
accesați fila de securitate pentru a aplica acreditivele de autentificare alternative.
Acest lucru este necesar din cauza faptului că VSTS utilizează un Live ID pentru autentificare,
spre deosebire de Git care nu folosește această funcție. De aceea, este necesar să definim un nume de
utilizator și parolă care vor fi folosite la trimiterea modificărilor de cod în depozit.
Pentru asta, trebuie să facem clic pe numele nostru care apare în colțul dreapta sus al paginii și
depois em My profile. Em seguida devemos ir até a guia Securitye em Alternate
credencialele de autentificare și definirea datelor, așa cum ilustrează figura 31.
 Figura 31. Înregistrarea credentialelor alternative

După ce această configurație a fost realizată, mai avem încă un ultim pas de executat în
lângă server, unde vom obține URL-ul depozitului la distanță pentru a-l folosi în Git
localmente. Acest procedeu poate fi realizat atunci când accesăm proiectul în VSTS și
dăm clic pe linkul CODE, unde vom copia linkul conținut în câmpul Clone Url, cum
prezentat în Figura 32.
 Figura 32. URL utilizată pentru conexiunea cu Git.
Acum că am creat depozitul la distanță și am definit credentialele, trebuie să configurăm
un repository local pentru a stabili conexiunea cu VSTS prin Git. Primul pas este
adăugați URL-ul pe care tocmai l-am obținut ca punct de origine pentru Git a submite
fișiere. Acest lucru poate fi făcut în linia de comandă Windows, fiind în interiorul dosarului
al proiectului, folosind următoarea comandă:
git remote add origin <URL-ul repositoarului la distanță>

Acum putem reveni la VSCode, efectua commit-ul fișierelor și apoi în consolă să facem
prima împingere (trimiterea fișierelor în depozit) cu comanda următoare:
git push --set-upstream origin master
În acest punct, vor fi solicitate acreditivele pentru autentificare (cele pe care le-am definit în VSTS),
să terminăm aceste informații și să apăsăm Enter. La finalizarea acestei etape ne vom întoarce la VSCode și
vom continua până la icoana Git, pentru ca în bara de sus să putem vedea că cea mai mare parte
doi elementeprezente nu menu vor fi active, permițând a realizare
de push și pull direct din editor.

GitHub
GitHub este în prezent cel mai utilizat sistem de repository de cod în proiecte care
controlul versiunii se face cu Git. Utilizarea sa este gratuită pentru proiecte publice existente
opțiuni plătite pentru a crea proiecte private. Pe GitHub sunt stocate principalele
proiecte open source, iar Microsoft migrează proiectele sale deschise pentru aceasta
platformă.
Dacă nu aveți încă un cont pe GitHub, îl puteți crea rapid prin intermediul
adresa disponibilă în secțiunea Link-uri. În momentul în care contul este creat, putem
creați noi depozite (care va fi cazul aici) sau utilizați unul deja existent.
La finalizarea creării noului depozit, trebuie să copiem linkul prezentat (Figura
33) pentru a realiza clonarea care va fi utilizată pentru inițializarea Git-ului nostru.

Figura 33. Link pentru clonaredeschide imaginea într-o fereastră nouă

Începând de acum, procedura este identică cu cea pe care o realizăm cu depozitul VSTS.
Este responsabilitatea cititorului să definească care este furnizorul cel mai potrivit pentru realitatea sa. Pe GitHub de asemenea

Este posibil să se efectueze anumite sarcini inerente dezvoltării proiectului, cum ar fi înregistrarea de
defecte, funcționalități, atribuirea sarcinilor, documentație, etc. Cu toate acestea, în medii
unde se utilizează pe scară largă tehnologiile Microsoft, VSTS se dovedește a fi o opțiune destul de
viabil, în primul rând prin permiterea accesului echipelor mici la depozite private, în plus
de a dispune de o interfata intuitiva, de a ajuta la sarcini de automatizare a construcțiilor și integrare
continuu, fiind de asemenea ușor integrabil în Visual Studio.
Dezvoltarea aplicaț iei

Cu un Git integrat în aplicația noastră, vom vedea cum să-l utilizăm împreună cu Visual Studio
Code para implementar as tarefas de implantação na nuvem. O VSCode não possui
orice integrare directă cu Microsoft Azure, cu toate acestea, putem face desfășurarea
proiectul nostru în mediul cloud al Microsoft cu un efort minim. Pentru aceasta, trebuie să
în mod inițial, creează un cont pe Azure și accesează portalul său de gestionare, a cărui legătură este
găsește în secțiunea Linkuri.

După ce te-ai conectat la Azure cu un cont activ pe această platformă (care poate fi testat
cu resurse limitate), vom avea acces la portal, care ne prezintă tabloul de bord
după cum arată Figura 34. Dintre opțiunile prezentate, vom face clic pe Nou > Web +
Celular > Aplicație Web.
 Fi
gura 34. Crearea unei noi aplicații web în Azuredeschide imaginea într-o fereastră nouă

La proiectul îi vom spune ProjetoBasicoDevMedia, acest nume trebuie să fie unic, deoarece
va fi, de asemenea, domeniul aplicației și este supus verificării disponibilei. As
Celelalte setări vor fi lăsate cu informațiile deja conținute în câmpuri.
standard. La finalizarea creării proiectului, acesta va fi prezentat în detaliu, cum
în Figura 35, cu un URL deja disponibil pentru a fi accesat pe web.
 F
Figura 35. Detalii despre aplicația creată

Prin default, o aplicație simplă este publicată la URL <numele de>

projeto>.[Link], un domeniu gratuit care poate fi înlocuit ulterior.
Dând clic pe această adresă, vom fi duși la pagina creată, care până acum are doar
o pagină standard.
Activarea desfăș urării prin Git
Pe Microsoft Azure, este posibil să configurezi un site web/aplicație pentru a avea implementarea realizată prin
Git, adică, codul aplicației va fi căutat în depozitul de la distanță și de fiecare dată când se va face
o push pentru ramura principală, aceasta va fi actualizată automat. Pentru a pregăti acest
proces, putem face clic pe Toate setările, opțiune care poate fi văzută în partea
inferior al Figurii 35 și apoi în Implantare continuă. Apoi vom merge la Definire.
configurații necesare și vom selecta Repositoriu Local Git.
Dacă nu avem acreditivele de implementare configurate anterior pentru
publicarea aplicației web, va trebui să facem clic pe Configurare autentificare de bază și pe
vă informăm despre un nou login și parolă pentru utilizarea portalului cu Git și cu FTP,
deoarece acestea nu pot fi autentificate cu acreditivele noastre.
Când ne întoarcem la fila principal a proiectului, putem vedea printre proprietăți
apresentadas, as configurações necessárias para a clonagem do projeto com o Git, como
mostra aFigura 36.
 F
Figura 36. URL pentru implementare cu Git
Acest URL trebuie copiat pentru a putea continua cu configurațiile rămase,
pentru asta, ne vom întoarce la VSCode pentru a publica prima noastră aplicație pe
Azure.

Publicând aplicaț ia în cloud

Pentru a face deploy în cloud, va trebui să configurăm repositoarele locale pentru a trimite
fișiere pentru Azure prin intermediul push-ului. Pentru aceasta, primul pas este să adăugați URL-ul
repositoriu remote creat de Azure în mediul local, similar cu ce am făcut
anterior, cu VSTS și GitHub, dar acum, în loc de origin, vom indica numele
alternativă azure utilizând următoarea comandă:
git remote add azure <URL-ul depozitului Azure>
Acum putem efectua push în repositoarul local, dar de data aceasta indicând numele celui
destinul și ramura care urmează să fie trimisă. Pentru aceasta, folosim comanda următoare:

git push -u azure master

Când va fi realizat acest proces, va fi atunci solicitată parola pe care am creat-o.
anteriormente în Azure, și în continuare vom vedea o serie de mesaje în consolă
indicând stadiul implementării, care ar trebui să se finalizeze indicând că a fost finalizată cu
succes. Finalizând acest proces și având totul în regulă, putem accesa adresa de
aplicația web și vom vedea că acum conținutul a fost actualizat.
Folosind doar un editor de cod simplu (comparativ cu Visual Studio) și promptul
din comanda Windows am reușit să creăm o aplicație [Link] și să realizăm
deploia în medii de cloud, fără a exista dependență de instrumente de
integrarea vizuală. Acest lucru permite ca, plecând de la un mediu de dezvoltare ușor și simplu
de configurare să fie posibil să creați aplicații complexe, gestionând ciclul lor de viață cu
asistență de la platforme consolidate și eficiente, cum ar fi cazul Visual Studio Team
Serviciile sunt despre Git.
Cu toate că atunci când lucrează în sistemul de operare Windows, dezvoltatorii
putem opta pentru IDE-ul complet de la Microsoft, unde întreaga integrare cu Git și VSTS
poate fi realizată din feronerie disponibilă în mod nativ, posibilitatea de a crea aplicații
pe platforma .NET cu un set de unelte gratuite, mai ușoare și multiplatformă
garante mai multă libertate echipelor de dezvoltare și companiilor. În prezent este posibil
configurarea unor medii de dezvoltare similare pe sisteme de operare diferite
pentru a crea aplicații [Link] cu aceleași resurse de care dispuneți atunci când folosiți
Visual Studio pentru asta. Astfel, într-o aceeași echipă, dezvoltatorii pot
a lucra la un proiect folosind Mac OS, Linux și Windows, și în toate folosind Visual
Studio Code și celelalte instrumente prezentate în acest articol, toate gratuite, cu excepția
Azure, care, totuși, poate fi accesat prin programele oferite de Microsoft.

[Link]