Hozd létre az első weboldalad!
Ez a bevezető poszt arról szól, hogyan működik a web, aztán összeállítunk egy alap html oldalt és lokális fájl szervert NodeJS-sel, ami elérhetővé teszi. Csak ingyenes weben elérhető eszközöket fogok használni.
1. Hogyan működik a web
Mivel ezen az oldalon főleg gyakorlati szemléletű oktató anyagokat fogok posztolni, ezért igyekszem a legrövidebben megfogalmazni, hogyan is működik a web.Amikor a böngészőbe beírsz egy URL-t a címsorba (pl google.com) akkor ez egy HTTP kérést küld a gépedről (kliens) a hálózaton keresztül, hogy egy távoli számítógép (server) erőforrását (általában valamilyen fájl) elérje. A válasz a leggyakrabban HTML (Hyper Text Markup Language) formátumban érkezik, amelyekhez egyéb forrásfájlok pl Javascript (JS) és stílus-lapok (CSS - Cascaded Style Sheets). Ezeket a fájlformátumokat a legtöbb böngésző értelmezni tudja, és kijelzi a küldött tartalmat (rendereli). A Javascript egy programozási nyelv, amit arra találtak ki, hogy a kijelzet elemeket (pl beviteli mezők, gombok) manipulálni lehessen, de később aztán sok más dologra is elkezdték használni.
Ezek alapján ahhoz, hogy egy saját weblapod legyen 2 dologra lesz szükség
- Egy HTML fájlra
- Egy szerverre, ahol elérhetővé teszed a fájlt
2. Szerezzük be az eszközöket!
Kód szerkesztő
Ahhoz, hogy HTML, JS és CSS fájlokat hozzunk létre tulajdonképpen egy jegyzettömb alkalmazás is megtenné, de hogy ne nőjjön ki a szakállunk (elnézést attól, akinek már mostanra is kinőtt) mire sikerül egy weboldalt megírni, szükségünk lesz egy profi környezetre.Én ehhez a Visual Studio Code-ot (továbbiakban VS Code) javaslom, mert ingyenes, és van néhány nagyon király plugin benne, ami megkönnyíti a dolgunkat.
https://code.visualstudio.com/
Töltsük le és installáljuk.
Browser
Kell egy böngésző is, amiben megjelenítjük az oldalt. (Chrome, Firefox, Edge)3. Hozzuk létre az oldalt
Főoldal létrehozása
- A gépen hozz létre egy mappát ahova dolgozni fogsz
- Nyisd meg a VS Code-ot
- Nyisd meg a mappádat: File->Open folder (Ctrl + K, Ctrl + O): A bal oldalon megjelenik majd a könyvtárad neve, és a benne található fájlok (jelenleg ugye nincs benne egy sem)
- Hozz létre egy fájlt index.html névvel, úgy hogy az alábbi ábrán látható "New File" gombra kattintasz. A későbbiekben is ezzel kell a fájlokat lértrehozni, hogy ebbe a könyvtárba kerüljenek.
- Írd be hogy "html" és várd meg amíg a szerkesztő feldobja, hogy "html:5", majd válaszd ki és üss entert
- A környezet legenerált egy csomó kódot. Ugye milyen jó? Képzeld ha mindezt be kellett volna pötyögni.
- Megjegyzés: Ha zavar, hogy a fájljaid 2-szer jelennek meg, egyszer a mappában, egyszer meg az "open editors" alatt, akkor jobb gomb az exploreren, és vedd ki a pipát az open editors-ról, úgy hogy ráklikkelsz.
Alap HTML tag-ek
A HTML dokumentumod elemekből épül fel, minden elemnek van egy nyitó (e.g <body>) és egy záró tag-je (</body>).
DOCTYPE - dokumentum típusát jelöli (most HTML)
head - olyan információkat tartalmaz, amelyek nem jelennek meg közvetlenül az oldalon (kivéve a title-t lsd. később) Ide fogjuk majd később beszúrni a JS és CSS fájl hivatkozásokat.
body - Ez a dokumentum azon része, ami megjelenik
title - A böngésző tabjának fejlécén jelenik meg.
További infókat magáról a HTML nyelvről itt olvashatsz (angolul, bár a chrome már le tudja fordítani az oldalakat, igaz magyarul kicsit fájdalmas)
https://www.w3schools.com/html/
- Nyisd meg a fájlt a böngészőben
Az oldalad címe jelenleg "Document" és nem jelenik meg semmi, mivel a <body></body> üres.
Szerkesszük meg az oldalt
- Cseréljük le a "Document"-et "My first page"-re
- Írjuk be, hogy "<h1>Welcome!</h1>" a <body> </body> tagek közé.
- A kész kódodnak így kellene kinéznie
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first page</title>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
- Mentsd el a fájlt (Ctrl + S)
- Válts át a böngészőre és nyomd meg az Ctrl + F5 -öt (A böngésző cacheli a lapokat, ezért nem elég egy sima frissítést. Ezt ki tudod kapcsolni lásd a Tippek/trükkök fejezetet.
- A fejléc megváltozott, és az oldalon látható egy első szintű címsor (h1) Welcome szöveggel
4. Állítsunk fel egy localhost-ot fájl kiszolgálásra
Telepítsd a Node.js-t
Eddig minden remekül ment. A Következő lépés, hogy felállítsunk egy lokális fájl szervert, ami kiszolgálja majd a kéréseket a 8080-as porton (A port nem más, mint egy csatlakozási pont a gépedhez). . Ehhez a Node.js nevű keretrendszert fogjuk használni. Ez egy olyan futtató környezet, ami lehetővé teszi, hogy hozzáférjünk az operációs rendszer fájljaihoz, és hálózati szolgáltatásokhoz javascript kóddal. Töltsük le a legutóbbi STABIL (latest STABLE) verziót, és telepítsükhttps://nodejs.org/en/
Indítsuk újra a VS Code-ot. Majd nyissunk egy új terminál-t (Terminal->New terminal) és üsük be a következőket ellenőrzésként.
node --version
npm --version
Ezek ki kell, hogy jelezzék a node, és npm verziókat.
Ahhoz, hogy létrehozzunk egy szervert, először szükségünk lesz néhány javascript package-re. (Ezek olyan kódok, amiket már mások megírtak helyettünk). Egyelőre a node-static, child-process és http package-re lesz szükségünk. Ezeket a require kulcszóval tudjuk majd behivatkozni a futtatandó JS fájlba. NPM (Node package manager) segít majd ezeket beszerzni. Ha részletesebben érdekel az NPM az alábbi linket javaslom.
https://www.sitepoint.com/beginners-guide-node-package-manager/
Hozzunk létre egy projektet
Az npm az installált package-eket egy package.json nevű fájlban fogja gyűjteni, ehhez létre kell hoznunk egy projektet. Üssük be a következő parancsokat a terminálba.- Létrehozza a package.json fájlt ami majd tárolja a referenciákat a package-ekre, továbbá egy package-lock.json fájlt amivel most egyelőre ne törődjünk.
npm init -y
- Installáljuk a következő package-eket
npm i node-static --save-dev
npm i child-process --save-dev
npm i http --save-dev
- A package.json scripts bejegyzésnél írjuk át a test-el kezdődő sort erre
"start": "node start.js"
- Hozzunk létre egy fájlt a munkakönyvtárunkba (pl part1 - a jobb oldali oldalsávban a new file ikonnal), amit majd futtatunk a szerver indításához: start.js
- Hozzunk létre egy public mappát amiben a bárki számára elérhető fájlok lesznek, és helyezzük át ide az index.html-t
- A start.js fájlba írjuk a következőket (a chrome-hoz azt az útvonalat add meg ahova te telepítetted, vagy esetleg más böngésző .exe-t)
var static = require('node-static');
var http = require('http');
var exec = require('child_process').execFile;
var chrome = "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe";
var file = new (static.Server)('./public');
var portNumber = 8080;
http.createServer(function (req, res) {
file.serve(req, res);
}).listen(portNumber);
console.log("server listening at port " + portNumber);
exec(chrome, ["http://localhost:" + portNumber]);
 |
| Ide kell hozzáadni a start script-et |
 |
| Végeleges könyvtár struktúra |
Indítsuk el a lokális fájl szerverünket
Ez úgy tehetjük meg, hogy az alábbi parancsot beírjuk a terminal-banpm start
- Ez parancs futtatni fogja a start parancsot a package.json scripts részében
- Ez szól a node-nak hogy futtassa a start.js fájlt
- Ami elindítja a fájl szervert a 8080-as porton, ami pedig kiszolgálja a kéréseket az index.html fájlal.
- A további sorok arra szolgálnak, hogy elindítanak egy chrome-ot és beírják a címsorba, hogy http://localhost:8080 (ez csak ilyen kényelmi szempont)
5. Tippek trükkök
- A VS Code-ban rengeteg gyorsbillentyű van. Testre is szabhatod őket CTRL + K, CTRL + S
- Az első gyakorlat anyagához a kész kód elérhető itt:
https://github.com/czimerk/web-part1 - Böngésző cache-elés kikapcsolása -> F12 -> Network panel -> disable cache mellől vedd ki a pipát
letöltés után futtasd a "npm i" parancsot, hogy letöltse a szükséges package-eket.
Kérlek, ha van pár perced segítsd a blog működését azzal, hogy névtelen visszajelzést adsz
