
Sadržaj:
2025 Autor: John Day | [email protected]. Zadnja izmjena: 2025-01-23 14:37

Dobro došli u 1. DIO mog vodiča za node.js web aplikaciju. Prvi dio će proći kroz potreban softver koji se koristi za razvoj aplikacije node.js, kako koristiti prosljeđivanje portova, kako izgraditi aplikaciju pomoću Expressa i kako pokrenuti vašu aplikaciju. Drugi dio ovog vodiča će se baviti cijelim kodom i strukturom moje potpune web aplikacije. Ako ste za to spremni, posjetite ga ovdje.
Dakle, dok sam stvarao svoju ličnu početnu stranicu, bilo mi je jako teško da se izvučem iz korova. Na internetu postoji više nego što ću ja ikada razumjeti o izradi web stranice.
Ovo je šetnja o tome kako koristiti Node.js, Express i Mongodb. za kreiranje web stranice.
Kôd za sve ovo je ovdje.
Moja web stranica se zove Internet. Posjetite ako želite interaktivniji pogled na ličnu web stranicu.
Započeo sam ovu stranicu kako bih imao lično prisustvo na internetu sa projektima koje sam radio, sa vezama do mojih projekata za više detalja.
Ova stranica je hostirana u mom domu na pi nula W.
Korak 1: Stvari koje trebate

1. Vrijeme. Ne mogu naglasiti da je razvoj web stranice i istinsko razumijevanje unutrašnjeg rada dugotrajan proces. Imam diplomu elektrotehnike sa fokusom na mikro elektroniku i ljubav prema kodiranju, a za to su mi bili potrebni mjeseci.
Ovaj će vodič biti dobar gradivni blok, ali pročitajte više dokumentacije na internetu kako biste razumjeli svaki dio.
2. Malina pi - bilo koji model će odgovarati. Takođe će poslužiti bilo koji računar sa Linux -om. Zapravo, bilo koji računar će raditi, samo idem u više detalja o tome kako ga pokrenuti na pi.
3. Internet veza - ako ovo planirate ugostiti svijetu. Za konfiguriranje prosljeđivanja portova potreban je usmjerivač ili mrežni prekidač.
4. Softver - Svaka platforma za kodiranje će raditi, Sublime, Webstorm, Notepadd ++, Visual Studios ili bilo što drugo. Uglavnom sam koristio Webstorm ili Sublime.
Korak 2: Prosljeđivanje portova na vašem Raspberry Pi


Dakle, pretpostavit ću da ste već postavili svoj malinovi pi. Ako ne, pogledajte ovaj jednostavan vodič ovdje.
Moj pi pokreće Jessie lite i sav je terminal. Prednost ovoga je što nemam mnogo procesa u pozadini koji bi mogli usporiti rad mog poslužitelja s velikim prometom. Dopustite mi da sada kažem da je ovaj vodič za web stranice s malim prometom. Svaka stranica s velikim prometom bit će spora na pi i mogla bi uzrokovati rušenje vašeg poslužitelja.
Prosljeđivanje portova
Kad je vaš pi postavljen, morat ćete omogućiti prosljeđivanje portova na usmjerivaču ili prekidaču. Da biste to učinili, u usmjerivaču pronađite postavke prosljeđivanja portova. Svaki usmjerivač je drugačiji, ovdje pokazujem svoj Linksys Velop GUI.
Moja web lokacija je konfigurirana na port 3000, to se može promijeniti u izvornom kodu u datoteci app.js ili www.
Takođe imam port 22 postavljen za prosljeđivanje kako bih mogao SSH u svoj pi, to se može postaviti u postavkama pi. SSH je način korištenja terminala na vašem pi -u dok niste na istoj mreži, a i dok ne koristite izlaz za prikaz sa pi -a. To mi omogućava da ažuriram svoju web stranicu s drugog računara i prebacim promjene na svoj pi.
Slijedite slike za postavljanje prosljeđivanja portova.
DNS usluga
Trebat će vam usluga koja povezuje vašu IP adresu s imenom web adrese. Moći ćete unijeti globalnu ip adresu usmjerivača nakon koje slijedi broj porta za pristup vašoj web lokaciji. To je, međutim, teško, posebno ako se vaš globalni IP promijeni. Ono što DNS usluga radi je praćenje i ažuriranje ovih promjena tako da su vaše web ime i ip povezani. Odlučujem se koristiti besplatnu uslugu putem no-ip-a. Možete platiti sve što želite. Ovo je samo besplatan način za koji ja znam.
www.noip.com/
Korak 3: Instaliranje potrebnog softvera na Pi




Ako ste preuzeli moj GitHub kod, nećete morati ništa učiniti osim pokretanja jednostavne naredbe npm start da biste pokrenuli web lokaciju. Međutim, budući da je ovo dubinski vodič, objasnit ću kako instalirati sav potreban softver i pakete.
Dok ste na svom pi ili linux računaru (postoje različite komande za korišćenje prozora), pokrenite sledeće komande.
Raščlanio sam ih na pojedinačne korake kako bih ih lakše slijedio.
1. Instalirajte node.js i npm
Node.js je u osnovi java skripta koja kreira poslužitelj. NPM je upravitelj paketa čvorova i obrađuje svu srednju opremu potrebnu s node.js.
Pokrenite sljedeće naredbe na linux ili mac mašini za instalaciju.
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash sudo apt -get install -y nodejs
Za preuzimanje na Windows, upotrijebite exe koji se nalazi ovdje.
Ova veza je za linux pomoć ako nije na maline pi.
2. Instalirajte MongoDB
MongoDB je upravo to, baza podataka. Koristim ovo za dio svoje web stranice za prijavu i brojač prometa.
Pokrenite sljedeće naredbe na linux ili mac mašini za instalaciju.
sudo apt-key adv --keyserver hkp: //keyserver.ubuntu.com: 80 --recv 0C49F3730359A14518585931BC711F9BA15703C6
echo "deb https://repo.mongodb.org/apt/debian jessie/mongodb-org/3.4 main" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
sudo apt-get update
sudo apt-get install -y mongodb-org
Za preuzimanje na Windows, upotrijebite exe koji se nalazi ovdje.
Ova veza je za linux pomoć ako nije na maline pi.
3. Instalirajte Grunt
Grunt je poput npm -a, jer ga možete koristiti zajedno s drugim dodacima. Ne koristim je za svoju aplikaciju, no vrlo je korisna pri automatizaciji zadataka. Ovaj korak možete potpuno preskočiti da bi vaša aplikacija funkcionirala.
Za Windows, Mac ili Linux koristite sljedeću naredbu.
npm install -g grunt -cli
4. Instalirajte Express
Express je jednostavan način korištenja node js okvira. Ugradit ćemo ekspresni generator. Ovo stvara okvir za web aplikaciju koji se lako koristi.
Za Windows, Mac ili Linux koristite sljedeću naredbu.
npm install express -generator -g
Korak 4: Kreirajte Express Node.js aplikaciju


Idite na lokaciju mape u kojoj planirate imati svoju aplikaciju. Ovdje će sve buduće instalacije biti unutar ove mape.
Pokrenite sljedeće naredbe na linux ili mac stroju za promjenu direktorija.
sudo cd/home/pi/myapp
Za Windows:
cd C: / Users / pi / Desktop / myapp
Upotrijebite ekspresni generator za stvaranje potrebnog node js okvira.
ekspresno ime aplikacije
Ovo će stvoriti goli izraziti node.js projekt, možete urediti njegove značajke tijekom ovog koraka pronalaženjem različitih naredbi kao što je dolje prikazano pomoću naredbe -h. Ili možete ručno urediti generirani predložak, poput mene. O ovome ću detaljnije govoriti u drugom dijelu. Možete dodati druge varijable ovom kodu za promjenu postavki u vašoj aplikaciji, kao što je upotreba html -a, upravljača, jadea i drugih. Za ovo pokrenite naredbu:
express -h
Nastavite s postavljanjem vaše node.js web aplikacije pokretanjem sljedećih naredbi:
cd nameofmyapp
npm install
Ovo instalira sve potrebne pakete koje će vaša aplikacija node.js morati pokrenuti i više dostupnih za upotrebu.
U ovom primjeru putanja datoteke za aplikaciju bila bi:
/home/pi/myapp/nameofmyapp
To je zato što ekspres generator stvara datoteku na osnovu niza koji postavite nakon nje. Ako ste već u željenom direktoriju, samo koristite express.
Korak 5: Pokrenite svoju web aplikaciju


Da biste pokrenuli svoju node.js web aplikaciju, pokrenite naredbu:
npm start
Kako bismo učinili učinkovitijim tijekom kodiranja, tako da se naša aplikacija automatski ažurira nakon što unesemo promjene, instalirat ćemo nodemon.
npm install -g nodemon
Evo gdje bi vam većina vodiča rekla da se zabavite u izgradnji i ostavila vas da shvatite naporan rad na nogama. U sljedećim koracima ću vas provesti kako sam izgradio svoju aplikaciju.
Korak 6: Kredit
To zapravo nije korak, ali želim navesti svoje izvore i inspiraciju za ovaj vodič.
Ovaj Github ReadMe je napisao dobar prijatelj dok je radio na našem višem dizajnerskom projektu i poslužio je za mnogo inspiracije za kreiranje moje web stranice.
github.com/SDP-DT04/Web-Application/blob/m…
Ovaj vodič je bio koristan alat u procesu izrade web aplikacije.
kroltech.com/2013/12/29/boilerplate-web-app…
Za više informacija o node.js web stranici posjetite moj dio 2.
Preporučuje se:
Kako napraviti osnovnu web stranicu pomoću bilježnice: 4 koraka

Kako napraviti osnovnu web stranicu pomoću bilježnice: Je li se itko pitao "kako mogu napraviti web stranicu od osnovnog programa za pisanje?" Pa, očito, ne posebno … U svakom slučaju, ovdje ću vam pokazati kako napraviti OSNOVNE web stranica koristi samo bilježnicu
Kako ugraditi Google karte na web stranicu: 4 koraka

Kako ugraditi Google karte na web stranicu: Glasajte za mene u izazovu Maps! Nedavno sam stvorio web stranicu koja koristi Google Maps. Ugraditi Google karte na moju web stranicu bilo je prilično jednostavno i nije tako teško učiniti. U ovom Instructables -u pokazat ću vam kako je lako ugraditi Googl
Kako stvoriti jednostavnu web stranicu pomoću zagrada za početnike: 14 koraka

Kako stvoriti jednostavnu web stranicu pomoću zagrada za početnike: Uvod Sljedeća uputstva pružaju korak po korak smjernice za izradu web stranice pomoću zagrada. Zagrade su uređivač izvornog koda s primarnim fokusom na web razvoj. Kreirao ga je Adobe Systems, besplatan je softver otvorenog koda licenciran
Kako izgraditi vlastitu web stranicu: 16 koraka

Kako izgraditi vlastitu web stranicu: Potpuno pokriven vodič za besplatni prelazak s papira na web, ako želite, posebno ako vam ljubazni webmasteri duguju nekoliko usluga, ali čak i s malo iskustva i znanja možete izgraditi web stranicu i dobiti je na web ovako:
Kako izgraditi kutiju za zvučnike na gitari ili izgraditi dvije za svoj stereo .: 17 koraka (sa slikama)

Kako izgraditi kutiju za zvučnike na gitari ili izgraditi dvije za svoj stereo uređaj. Htio sam novi zvučnik za gitaru uz cijevno pojačalo koje gradim. Zvučnik će ostati vani u mojoj radnji pa ne mora biti ništa posebno. Tolex prekrivač se može previše lako oštetiti pa sam samo poprskao vanjsku crnu boju nakon laganog pijeska