Tot ce trebuie să știți, de la configurarea mediului de lucru pentru dezvoltare până la rularea serverului Node.

Aceasta este a doua parte a acestei serii. Click aici pentru a citi partea 1.

În prima parte a acestei serii, am prezentat scopul scrierii acestui articol și scopul acestuia. De asemenea, am definit ce vom construi, precum și povestea utilizatorului care îi satisface pe utilizatori. Dacă ați ratat-o, vă rugăm să faceți clic pe „aici”. Asta e prima parte.

Așa că, ținând cont de asta, să începem cu configurarea mediului nostru de dezvoltare. Iată instrumentele cu care trebuie să lucrați:

  1. Un editor de text: aleg să lucrez cu VSCode, dar, prin toate mijloacele, folosește oricare cu care ești confortabil. Cele mai populare sunt VSCode, Atom și Sublime Text. Un editor de text este locul în care veți introduce toate codurile.
  2. Git: Git vă ajută să urmăriți modificările din codurile dvs. Am un articol care vă va ajuta să începeți dacă sunteți nou în git, faceți clic pe „Nu vă blocați cu Git”. Dacă nu ați instalat git, vă rugăm să faceți acest lucru făcând clic pe „aici”.
  3. NodeJS: Node este un mediu de rulare JavaScript construit pe motorul JavaScript Chrome V8. Node vă permite să scrieți JavaScript pentru server. Pentru a descărca Node pe computer, faceți clic pe „aici”. Node vine și cu managerul său de pachete (NPM). Vom discuta despre asta mai târziu.
  4. Postman: Postman este un instrument minunat pentru testarea metodelor noastre HTTP. Care sunt metodele HTTP pe care le întrebați? Simplu, vezi aici. Pentru a descărca Postman, faceți clic „aici”.

Am încredere că nu ne-am pierdut primitorii, descarcă și instalez aproape toate instrumentele de mai sus dacă nu le aveți deja. Poate doriți să citiți mai multe despre fiecare instrument, deschizând efectiv linkurile încorporate. Cu acest lucru în afara drumului, să ajungem să vedem câteva coduri.

Da, ar trebui să menționez că există un astfel de lucru ca fluxul de lucru. Dacă intenționați să lucrați cu o echipă, sper că sunteți, sau să contribuiți la proiecte open source, ar trebui să înțelegeți cu ce flux de lucru lucrează membrii proiectului. Cel mai comun este fluxul de lucru gitflow, pentru a citi mai multe, vă rugăm să faceți clic pe aici. Vom folosi fluxul de lucru gitflow în acest proiect, asta înseamnă că vom crea ramuri specifice pentru caracteristici specifice și vom îmbina ramurile cu o ramură de dezvoltare când vom termina.

Probabil că am uitat să menționez, veți avea nevoie de un cont GitHub. Dacă nu aveți unul, nu vă faceți griji, a crea unul este ușor. Pur și simplu faceți clic pe „aici” pentru a rezolva problema. Bun. În timp ce sunteți acolo, creați un nou depozit pentru acest proiect.

Vă felicit dacă ați ajuns în acest punct. Nu vă grăbiți, observați că am verificat README, meniul drop-down .gitignore citește și Node și licența citește MIT.

Observați, în mod implicit, depozitul dvs. git este setat la master, cu toate acestea, în fluxul de lucru gitflow, nu ne angajăm în ramura master, iată „de ce”.

În continuare, vom clona acest proiect pe computerul nostru local. Vom face acest lucru folosind o comandă git simplă. Faceți clic pe clonă și copiați linkul furnizat. Vom lipi acest cod în GitBash. Amintiți-vă, acesta a fost al doilea instrument pe care l-am descărcat.

// Clone the project
git clone https://github.com/blackdevelopa/ProjectSupport.git
// To move into the project’s directory.
cd projectsupport
// To create and checkout to new branch.
git checkout -b develop
// To launch VSCode on local computer.
code .

Deci, iată ce am făcut. Am clonat proiectul din Github, m-am mutat în directorul proiectului și am creat o nouă ramură de dezvoltare din ramura principală. Filiala noastră de dezvoltare va fi filiala noastră activă, vom îmbina funcții noi în această ramură pe măsură ce progresăm.

Terminat? Minunat. Următorul este fișierul package.json.

Package.json este o modalitate minunată de a gestiona dependențele noastre instalate local. Dependențele sunt de care depinde aplicația noastră pentru a funcționa. Pentru a crea pachetul.json, pur și simplu inițializam NPM. NPM este Node Package Manager și practic ne oferă acces la un registru mare de pachete pe care pur și simplu le putem conecta la baza noastră de cod. Citiți mai multe „aici”.

Iată cum funcționează:

npm init

Acest lucru inițializează npm solicitând informații specifice de la dvs. cu care să creați pachetul.json. Introduceți acest lucru în terminalul dvs. integrat git folosind Git Bash sau terminalul integrat git VSCode. Un alt motiv pentru care iubesc VSCode. Cu toate acestea, puteți sări peste cerere și să acceptați setările prestabilite cu codul de mai jos:

npm init --yes

Dacă ați făcut totul corect, ar trebui să aveți fișierul package.json, ceea ce înseamnă că acum sunteți gata să instalați dependențele de care vom avea nevoie pentru a construi aplicația noastră.

Mai întâi, vom instala Express. Express este un NPM care ne permite să construim aplicații web cu ușurință. Puteți citi mai multe „aici”.

npm install express --save

Codul de mai sus se va instala expres în lista noastră de dependențe și acesta vine cu un folder node_modules pe care nu vrem să-l împingem vreodată online. Cu toate acestea, am rezolvat deja acest lucru cu fișierul .gitignore pe care l-am verificat când am creat acest depozit. Acest lucru îi spune lui git să nu monitorizeze orice modificare care se întâmplă în acel director. Va trebui să comităm aceste modificări, dar mai întâi, să creăm fișierul de intrare al aplicației noastre.

Fișierul nostru de intrare conține setul de instrucțiuni necesare pentru a începe aplicația noastră. Acestea fiind spuse, să setăm fișierul nostru de intrare.

touch app.js
start app.js

Prima comandă creează un fișier app.js pentru noi. A doua comandă deschide fișierul. Codul start funcționează pentru Windows, nu sunt sigur despre alt sistem de operare.

// Call in installed dependencies
const express = require('express');
// set up express app
const app = express();
// set up port number
const port = 5035;
// set up home route
app.get('/', (request, respond) => {
  respond.status(200).json({
    message: 'Welcome to Project Support',
  });
});
app.listen(port, (request, respond) => {
  console.log(`Our server is live on ${port}. Yay!`);
});

Linia 2 și 5 în principiu apelează și configurează aplicația noastră expres. Linia 8 stabilește numărul portului. Linia 11–19 stabilește ruta noastră de acasă. Care este sensul solicitării și răspunsului pe care îl puteți întreba? Minunat, vezi „aici”. De asemenea, care este starea (200)? Minunat, vezi „aici”. Observați, folosim literale șablon ES6 în linia 18, în loc să folosim concatenarea.

// This is ES5 concatenation
console.log('Our server is live on' + port. + 'Yay!');
// This is ES6 template literals
console.log(`Our server is live on ${port}. Yay!`);

În sfârșit, să începem serverul nostru.

node app.js

Acum, serverul nostru rulează și ne-am configurat cu succes mediul de dezvoltare, acum este timpul să construim pe acest lucru. Cu toate acestea, mai sunt câteva lucruri pe care trebuie să le facem. În primul rând, ar trebui să ne comităm fișierele. Rulați codul pe terminalul dvs.

// To add all your files
git add .
// To commit all your files to local repository
git commit -m 'initialized and set up our server'

Vom trimite mai târziu la depozitul nostru la distanță, după instalarea unor dependențe de dezvoltare importante. Vom instala următoarele:

  1. Eslint: Acesta este un proiect cu sursă deschisă care oferă un utilitar de listing conectabil pentru JavaScript pentru coduri mai curate. Practic, Eslint ne ajută să scriem coduri mai curate. Citeşte mai mult."
  2. BabelJS: Acesta este un compilator pentru scrierea JavaScript de generație următoare. Este în conformitate cu versiunile anterioare ECMA la ES5. Citeşte mai mult."
  3. Nodemon: Acesta este utilizat în timpul dezvoltării unei aplicații bazate pe NodeJS prin monitorizarea oricăror modificări în aplicație și repornirea automată a serverului. Citeşte mai mult."

Să le instalăm rapid:

npm install eslint babel-cli babel-core babel-preset-env nodemon --save-dev

În pachetul nostru.json, să adăugăm o linie de cod pentru a activa nodemon watch și să ne resetam aplicația după fiecare modificare. Faceți acest lucru sub eticheta de script.

"start:dev": "nodemon app.js --exec babel-node"

Apoi, vom crea un fișier .babelrc în folderul nostru rădăcină pentru a configura babel. Tastați următorul cod în terminalul dvs.

// create a .babelrc
touch .babelrc
// set up babel
{
  "presets": ["env"]
}

În cele din urmă, vom configura eslint. Puteți vedea detaliile pentru a face acest lucru „aici”.

// initialize eslint
./node_modules/.bin/eslint --init

Eslint va solicita să vă înțeleagă cererea înainte de a finaliza inițializarea. Pentru acest proiect am selectat următoarele:

./node_modules/.bin/eslint app.js

Cu codul de mai sus, Eslint va cerceta acum modelele noastre de identificare a codului cu scopul de a face codurile noastre mai consistente și de a evita erorile.

Dacă ai ajuns în acest punct, te-ai descurcat extraordinar de bine. Acum, putem construi pe ceea ce am făcut până acum. Să încheiem acest lucru cu un commit și să trimitem în depozitul nostru la distanță.

// show working tree status
git status
// add all files
git add .
// commit all files to local repository
git commit -m 'refactored our codes'
// push to github
git push origin develop

Următorul articol vă va ajuta să dezvoltați operațiuni CRUD pentru aplicația noastră. Pentru al treilea articol, faceți clic pe „aici”.