Ustvarite svojo prvo testno spletno aplikacijo z orodji za razvijalce Chrome

V tej vadnici se boš naučil, kako ustvariti preprosto testno spletno aplikacijo, da se naučiš osnov uporabe orodij za razvijalce v brskalniku Chrome. Pregledali bomo postopek namestitve projekta ter izvedbo aplikacije, da boš lahko izkoristil močne funkcije razvijalskih orodij. Ne glede na to, ali že imaš izkušnje ali si popolni začetnik, je ta korak za korakom vodnik idealen zate.

Najpomembnejši uvidi

• Node.js in NPM sta potrebna za namestitev projekta.
• Ustvarjanje novega projekta je enostavno in hitro mogoče.
• Uporaba orodij za razvijalce v brskalniku Chrome omogoča natančno odpravljanje napak v tvoji aplikaciji.

Korak za korakom vodnik

Za ustvarjanje tvoje testne spletne aplikacije sledi tem preprostim korakom:

Korak 1: Namestitev Node.js in NPM

Preden lahko ustvariš projekt, se prepričaj, da imaš nameščena Node.js in NPM (Node Package Manager). Obišči spletno stran nodejs.org ter prenesi namestitveno verzijo, ki je primerna za tvoj operacijski sistem. Po namestitvi lahko z ukazom npm -v preveriš NPM v terminalu.

Korak 2: Odpiranje terminala in ustvarjanje mape

Odpreš terminal ali ukazno vrstico, da ustvariš svojo testno aplikacijo. Izberi mapo, v kateri želiš ustvariti aplikacijo. Premakni se v izbrano mapo ter vnesi naslednji ukaz, da ustvariš podmapo za projekt.

Korak 3: Ustvarjanje projekta z NPM

Za ustvarjanje novega projekta uporabiš ukaz npm create. Pri tem lahko izbereš ime za svoj projekt. V našem primeru bomo uporabili "Def Tools Test". Preprosto vpiši ukaz npm create def-tools-test ter pritisni Enter. Morda te bo vprašal, ali želiš namestiti paket; to preprosto potrdi.

Korak 4: Izbor okvira (framework)

Po ustvarjanju projekta te bo vprašal, kateri okvir želiš uporabiti. Lahko izbiraš med možnostmi, kot so Vue.js, React ali preprosto Vanilla JavaScript. Za to vadnico bomo izbrali Vanilla, da bomo delali z navadnim JavaScriptom.

Korak 5: Izbor med TypeScriptom in JavaScriptom

Imaš tudi možnost izbire med TypeScriptom in JavaScriptom. Za to vadnico bomo uporabili JavaScript, da bodo osnove lažje razumljive.

Korak 6: Namestitev odvisnosti

Sedaj je čas, da namestiš potrebne odvisnosti. V terminal vpiši ukaz npm install, da preneseš in namestiš potrebne module v projekt.

Korak 7: Preverjanje mape projekta

Po namestitvi lahko preveriš novo ustvarjeno mapo projekta. Uporabi ukaz ls, da prikažeš vse datoteke, ki so bile nameščene.

Korak 8: Zagon razvojnega strežnika

Za zagon spletne aplikacije moraš zagnati razvojni strežnik. Vpiši ukaz npm run dev. Na ta način bo zagnan lokalni strežnik, ki bo ponudil tvojo aplikacijo.

Korak 9: Odpiranje aplikacije v brskalniku

Po zagonu strežnika boš v konzoli našel URL (običajno http://localhost:3000). Če že uporabljaš Chrome kot svoj privzeti brskalnik, lahko preprosto klikneš na povezavo. Drugače lahko naslov skopiraš ter ga prilepiš v vrstico za naslov v Chromeu.

Korak 10: Raziščite testno spletno aplikacijo

Ko je aplikacija odprta, boš videl uporabniški vmesnik, ki je večinoma sestavljen iz enostavnega "Hello V" in gumba za štetje. Ko klikneš na gumb, se števec poveča. To ti omogoča preprosto, a funkcionalno testno aplikacijo, da raziščeš razvijalna orodja.

Korak 11: Uporaba orodij Chrome Developer Tools

Sedaj je čas, da odpreš orodja Chrome Developer Tools. Orodja DevTools lahko odpreš bodisi preko menija ali z desnim klikom in izbiro "Preglej". Med navigacijo po svoji testni spletni aplikaciji lahko preiskuješ različne elemente, odpravljaš težave v kodi in analiziraš uspešnost svoje aplikacije.

Povzetek

V tej vadnici si se naučil, kako ustvariti preprosto testno spletno aplikacijo, da izkoristiš prednosti orodij Chrome Developer Tools. Od namestitve Node.js in NPM ter ustvarjanja projekta do uporabe razvojnih orodij zdaj imaš znanje, da lahko razvijaš in odpravljaš težave svoje lastne aplikacije.