Starter Kits/Farmeron

Uvod

Nikad nije bilo bolje vrijeme za učenje programiranja nego što je to danas slučaj! Uz vrlo malo truda, na internetu možete pronaći sve što vam je potrebno za početak.

Pogledajmo kako započeti sa programiranjem na Microsoft ASP.NET tehnologiji. Cilj ovog kratkog uvoda je ponuditi osnovna zanja o alatima i programskim jezicima koji su vam potrebni za kreiranje jedne jednostavne web aplikacije. Ova web aplikacija je samo podloga na kojoj možete eksperimentirati i nadograđivati vaše znanje. Koristiti ćemo trenutno najnoviju verziju ASP.NET frameworka koja se bazira na .NET Core 1.0.

ASP.NET + .NET Core 1.0

Za razliku od svojih prethodnika, ASP.NET 5 framework je open source tehnologija koja se može izvoditi na sva tri popularna operacijska sustava. Drugim riječima, programski kod možete pisati na MacOS-u, testirati ga na Linux-u i “vrtiti” u produkciji na Windowsima. Ako ste pritom dovoljno dobri, možete kreirati Pull Request na neki od Github repozitorija samog ASP.NET-a te na taj način dati vlastiti doprinos ovoj tehnologiji. S obzirom na činjenicu da je ovo jedan novi pristup, samo ime je promijenjeno tako da sada govorimo o ASP.NET tehnologiji koja se izvodi na .NET Core bazi (u ovom trenutku u verziji 1.0).

Pogledajmo što je potrebno učiniti kako biste svoje računalo pretvorili u ultimativnu mašinu za programiranje :).

Napomena: S obzirom da velika većina radi na Windows OS-u, i sam opisani proces instalacije je napravljen na Windowsima.

Instalirati .NET Version Manager (DNVM)

Kao što mu i samo ime kaže, DNVM će nam omogućiti upravljanje različitim verzijama .NET frameworka koje će se nalaze instalirane na računalu. Za instalaciju, potrebno je izvršiti sljedeću PowerShell naredbu u Command prompt prozoru:

@powershell -NoProfile -ExecutionPolicy unrestricted -Command “&{$Branch=’dev’;iex ((new-object net.webclient).DownloadString(‘https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.ps1‘))}”

Ne moramo se zamarati sa sadržajem ove naredbe. Za one znatiželjnije, ova naredba prvo podesi execution policy na “unrestricted” kako bi mogla bez ograničenja izvršavati sve skripte. Nakon toga, preuzima se “dnvminstall.ps1” skripta koja će preuzeti dodatne skripte sa interneta i podesiti Vaše računalo na prikladan način. U konačnici, moći ćete izvršiti jednostavnu naredbu “dnvm” u Command Promptu.

U slučaju da je izvršavanje skripte prošlo uspješno, trebali biste vidjeti sličnu poruku kakva je prikazana na sljedećoj slici:

Command prompt 10

Instalirati .NET Execution Environment (DNX)

Jednom kada smo napisali kod, potrebno je moći pokrenuti njegovo izvršavanje. Upravo u ovu svrhu koristimo DNX.

Ako ste se kojim slučajem pitali – koje su to verzije kojima ćemo upravljati koristeći DNVM alat, onda će Vam sada biti jasno. ASP.NET 5 framework dolazi u dvije izvedbe:

  • CLR
  • CoreCLR

CLR izvedba predstavlja verziju tradicionalnog .NET frameworka. Ova izvedba sadrži sve ono na što su programeri već godinama navikli. Ipak, nedostatak je taj što se izvodi samo na Windows OS-u.

Nama puno zanimljivija je CoreCLR izvedba .NET frameworka. CoreCLR je u izgrađen u potpunosti kao modularni framework čineći ga znatno fleksibilnijim od tradicionalnog .NET frameworka. Upravo je ovo verzija koju smo predstavili na početku.
Pored ove dvije izvedbe frameworka, lako je moguće da na računalu posjedujete različite verzije CLR-a ili CoreCLR-a. Korištenjem DNVM-a vrlo se lako možete prebaciti na onu verziju koja vama odgovara.

Za instalaciju CoreCLR izvedbe .NET frameworka, potrebno je unijeti sljedeće u Command Prompt prozor:

dnvm upgrade -r coreclr

Primijetite da koristimo prethodno instalirani DNVM za instalaciju DNX-a. Rezultat izvršavanja trebao bi biti nešto poput:

Command prompt 12

Ako sada unesemo sljedeću naredbu:

dnvm list

možemo vidjeti koje su to verzije DNX-a instalirane, kao i koja je trenutno aktivna verzija.

Instalirati .NET Core

Za početak, potrebno je preuzeti i instalirati .NET core službeni MSI instalacijski paket. Ovime ćemo dobiti potrebne alate. Također, sve putanje do alata će biti podešene tako da ćemo ih moći pozvati u Command Prompt prozoru.
Dodatno, potrebno je preuzeti Visual C++ Redistributable for Visual Studio 2015, kao i Visual C++ Redistributable for Visual Studio 2012 Update 4 u slučaju da koristite Windows 7 ili Windows Server 2008.

To je sve što je potrebno učiniti! Da bismo bili sigurni kako je proces instalacije prošao bez problema, testirajmo novoinstalirani alat “dotnet”. Potrebno je u Command Promptu unijeti naziv bez parametara. Rezultat bi trebao biti sljedeći:

Command prompt 09

Sada već možemo vidjeti neke zanimljive naredbe koje će nam trebati za rad – “Common Commands”:

  • new – kreira novi (jako jednostavan) projekt
  • restore – dohvaća sve pakete o kojima ovisi projekt kako bi se isti mogao iskompilirati. Primjerice, kako bi serijalizirali i deserijalizirali JSON podatak, možemo koristiti Json.NET paket.
  • compile – pokreće kompilaciju izvornog koda u izvedivu verziju
  • publish – pakira projekta zajedno sa .NET Core runtime kako bi se mogao izvršavati na npr. produkcijskim mašinama
  • run – kompilira i pokreće aplikaciju
  • repl – omogućava interakciju sa .NET Core okruženjem kako biste bez pokretanja novog projekta izvršili kod koji vas zanima na jednostavan i brz način.
  • pack – Pakira projekt kao NuGet paket. Ovo radimo u slučaju da određenu implementaciju želimo koristiti na više od jednog projekta. Najčešće se radi o generičkim pomoćnim implementacijama koje se ne vežu za specifičnu domenu.

Programski jezik

Trenutno podržani programski jezik u .NET Core 1.0 je C#. Ovo je moderan i jako moćan programski jezik. Ukoliko ste se susreli sa .NET već ranije, možda ćete se zapitati – no što je sa Visual Basicom? U ovom trenutku on nije podržan, no plan je dodati ga u budućnosti.

REPL

Iako ju druge tehnologije posjeduju već godinama, Microsoft je tek sa .NET Core 1.0 verzijom dodao ovu funkcionalnost. Ona nam omogućava izvršavanje naredbi u C# programskom jeziku.

Primjerice, da bismo zbrojili dva broja, potrebno je unijeti jednostavnu naredbu:

Command prompt 04

Sada vidimo kako je zaista jednostavno započeti sa programiranjem.
U slučaju da koristimo neku klasu koja pripada određenom imeniku, ne smijemo je zaboraviti uključiti prije nego što unesemo naziv klase. Npr. Ako želimo ispisati neki tekst koristeći klasu “Console”, prije svega moramo reći u kojem se ona imeniku nalazi koristeći naredbu “using”:

Command prompt 01

Visual Studio Code

Korištenje REPL-a je jako zabavno i na brz način možemo vidjeti koji je rezultat izvršavanja koda. Ipak, za složene projekte, potrebno nam je razvojno okruženje u kojem ćemo dugoročno razvijati kod projekta.

Visual Studio Code je “light” verzija Visual Studio IDE-a. Potpuno je besplatan i moguće ga je pokrenuti na bilo kojem operacijskom sustavu. Ukoliko pak niste ljubitelj “Code” izvedbe i želite moćnije razvojno okruženje, uvijek možete preuzeti punokrvnu (a i dalje besplatnu verziju) Visual Studio Community. No, zapamtite da ona radi samo na Windows OS-u.

Preuzeti posljednju verziju Visual Studio Code razvojnog alata

Preuzmite ga na sljedećoj poveznici – Visual Studio Code. Nakon instalacije, pokrenite Visual Studio Code i primjetiti ćete da ne postoji mogućnost kreiranja novog projekta. Razlog je sljedeći – Visual Studio Code se ne bazira na projektima nego na strukturi datoteka organiziranih u direktorije. Drugim riječima, potrebno je kreirati strukturu datoteka za našu prvu web aplikaciju. Kako to nebismo radili u potpunosti ručno, idemo instalirati još jedan korisni alat – Yeoman generator.

Instalirati Yeoman generator

Iako smo spomenuli kako .NET Core 1.0 posjeduje mogućnost kreiranja novog projekta, on je jako bazičan i ne nudi nam odgovarajuću strukturu koja nam treba za početnu web aplikaciju. Upravo iz tog razloga, posegnuti ćemo za “moćnijim” alato.
Yeoman generator će kreirati strukturu datoteka organiziranih u direktorije kako bismo ih kasnije mogli uređivati kroz Visual Studio.

Za početak preuzmite Node.js sa sljedeće stranice. Instalirajte ga i ponovno pokrenite računalo kao bi se u potpunosti integrirao u Windowse. Zatim u Command Prompt prozor unesite sljedeću naredbu:

npm install -g yo

“npm” je akronim za Node Package Manager. Gotovo svaka tehnologija danas posjeduje vlastiti sustav za upravljanje paketima koji omogućavaju dijeljenje korisnih biblioteka između programera.

Sada kada imamo Yeoman, potrebno je instalirati i generator za ASP.NET web aplikacije sljedećom naredbom:

npm install -g generator-aspnet

Da, to znači da Yeoman generator može generirati inicijalne projekte i za različite druge tehnologije. Spremni smo za generiranje našeg prvog projekta!
U Command Promptu premjestite se u direktorij u koji želite generirati projekt:

Command prompt 02

Unesite sljedeću naredbu:

yo aspnet

Ukoliko je sve prošlo u redu sa instalacijom, trebali biste vidjeti sljedeći ekran:

Command prompt 03

Odaberite “Web Application Basic [without Membership and Authorization]” opciju i dajte Vašoj aplikaciji ime koje želite (naša se zove HappyCows).
Primijetite da Vam Yeoman daje naputke kako pokrenuti Vašu prvi web aplikaciju:

Command prompt 05

No, što je sad “dnu”? “dnu” predstavlja DNX Utility alat. Ovaj alat će nam omogućiti da dohvatimo sve pakete koje smo referencirali u našem projektu. Za sada ne morate previše razmišljati o dohvatu paketa koji nedostaju, jednostavno izvršite naredbu (ne zaboravite se prebaciti u direktorij projekta sa cd):

dnu restore

Zatim pokrenite buildanje vaše web aplikacije sljedećom naredbom:

dnu build

Trebali biste vidjeti poruku “Build succeeded”. Korištenjem DNX-a pokrećemo web aplikaciju:

dnx web

Command prompt 00

Web aplikacija je pokrenuta na lokalnoj adresi: http://localhost:5000. Unesimo ovu adresu u web preglednik po želji i dobiti ćemo sljedeći sadržaj:

ASP.net

I to je to! I bez da smo napisali jednu liniju koda, naša prva web aplikacija je spremna.

Razvoj projekta u Visual Studio Code-u

Naravno, nismo zadovoljni sa predefiniranim predloškom. Stoga ćemo otvoriti projekt u Visual Studio Code i započeti sa pravim programiranjem.

U Visual Studio Code odaberite izbornik File -> Open Folder… i navigirajte do direktorija koji sadržava projekt.

MVC

Microsoft na ASP.NET platformi nudi dvije tehnologije za izradu web aplikacija:

  • Web Forms
  • Model-View-Controller (MVC)

Web Forms tehnologija nudi veliki broj gotovih kontrola, a izrada same aplikacije jako sliči izradi desktop aplikacija. Čini se savršeno, a u određenim slučajevima to i je slučaj.

Ipak, MVC postaje sve popularniji kako vrijeme prolazi. Za razliku od Web Forms tehnologije, MVC je znatno jednostavniji “ispod haube”, što ga čini prirodnijim u web okruženju (prvenstveno zbog protokola na kojem se Web bazira – HTTP).

Struktura projekta

Pogledajmo sada strukturu projekta u Visual Studio Code-u:

Struktura projekta

MVC struktura

Označeno crvenim pravokutnicima, vidimo kako se projekt sastoji od Controller-a i View-ova. No, nedostaju nam Model-i?! Razlog je jednostavan – aplikacija je u ovom trenutku tako jednostavna da nije bilo potrebe dodati niti jedan model. Već prvom prilikom kada je potrebno pristupiti podacima sa diska, baze ili nekog trećeg resursa, postojati će potreba za reprezentiranjem podataka u obliku modela. U tom slučaju, potrebno je dodati direktorij “Models” i smjestiti novi model tamo.

Serverside vs Clientside struktura

Dodatno, primjećujemo da projekt sadrži “wwwroot” direktorij. Ovaj direktorij predstavlja izvorište web aplikacije i sadržava sve datoteke kojima se može pristupiti sa klijentske strane.

Najčešće ćemo u ovaj direktorij dodavati različite statičke resurse (označene zelenim pravokutnikom) koje se izvršavaju u samom web pregledniku korisnika bez bojazni da ćemo ovim putem izložiti podatke (možda konfiguracijske postavke koje sadrže lozinke isl.) čiji pristup želimo kontrolirati.

Sve ostale datoteke dostupne su isključivo na strani servera gdje se izvode pomoću web servera.

Web server

Možda se cijelo vrijeme pitate – na koji način smo pokrenuli web aplikaciju bez da smo konfigurirali web server na kojem se ona izvodi? Za odgovor na ovo pitanje, vratimo se na trenutak na naredbu koju smo prethodno izveli u Command Prompt-u:

dnx web

“web” parametar u naredbi nije slučajno tu. Ako otvorite datoteku “project.json”, vidjet ćete da je ovaj parametar definiran u “commands” sekciji:

Upravo ovaj parametar daje do znanja DNX-u koji web server želimo koristiti pri pokretanju web aplikacije. Ako ne bismo imali ovakvu konfiguraciju na raspolaganju, bili bismo isključivo vezani na jednu vrstu web servera (što je bio slučaj sa starijim verzijama .NET frameworka), a samim time i na jednu vrstu operacijskog sustava.

main()

Na kraju idemo na sam početak izvršavanja web aplikacije. “Startup.cs” datoteka (označena plavim pravokutnikom) predstavlja ishodište izvršavanja web aplikacije.

Execution environment poziva “Main” metodu kako bi pokrenuo web aplikaciju. Ova metoda se pokreće samo jednom što nam daje priliku da podesimo gradivne elemente web aplikacije – npr. odaberemo MVC pattern kao osnovu za izradu komponenata web aplikacije.
Pomoću “Startup.cs” možemo podesiti i rute koje će reći web serveru gdje se za određeni URL nalazi odgovarajući Controller i View.

Zaključak

Sada kada smo podesili osnovnu web aplikaciju, na vama je da se igrate sa njom i naučite kako tehnologija funkcionira. I zapamtite, gotovo sve odgovore na vaša pitanja možete pronaći vrlo jednostavno na internetu. Uživajte!

Dodatne poveznice za učenje

  1. ASP.NET 5 – http://docs.asp.net/en/1.0.0-rc1/index.html
  2. Pristup bazi podataka – https://github.com/aspnet/EntityFramework/wiki/What-is-EF7-all-about
  3. Web serveri – http://docs.asp.net/en/latest/fundamentals/servers.html

Najave događaja

1 komentar na Članak

  1. Jozo Bažant napisao:

    Ne proalzi mi instalacija na win 7, dok na win 10 ide. Da li to znači da ne može win 7. Konkretno odmah zapne na dnvm.

Ostavi Komentar

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *