Всичко, което трябва да знаете от настройването на вашата работна среда за разработка до стартирането на вашия Node сървър.

Това е втората част от тази поредица. Щракнете тук, за да прочетете част 1.

В първата част от тази поредица представих целта на написването на тази статия и нейния обхват. Също така определих какво ще изграждаме, както и потребителската история, която удовлетворява нашите потребители. Ако сте пропуснали това, моля, щракнете върху тук. Това е първата част.

И така, като приключим с това, нека започнем с настройването на нашата среда за разработка. Ето инструментите, с които се очаква да работите:

  1. Текстов редактор: избирам да работя с VSCode, но по всякакъв начин използвайте това, което ви е удобно. Най-популярните са VSCode, Atom и Sublime Text. Текстовият редактор е мястото, където ще въвеждате всичките си кодове.
  2. Git: Git ви помага да проследявате промените във вашите кодове. Имам статия, която ще ви помогне да започнете, ако не сте запознати с git, щракнете върху Don’t Get Stuck With Git. Ако не сте инсталирали git, моля, направете го, като щракнете върху тук.
  3. NodeJS: Node е среда за изпълнение на JavaScript, изградена на Chrome V8 JavaScript двигател. Node ви позволява да пишете JavaScript за сървър. За да изтеглите Node на вашия компютър, моля, щракнете тук. Node също идва със своя мениджър на пакети (NPM). Ще обсъдим това по-късно.
  4. Postman: Postman е страхотен инструмент за тестване на нашите HTTP методи. Какви са HTTP методите, които питате? Просто, вижте тук. За да изтеглите Postman, моля, щракнете тук.

Вярвам, че не съм загубил нашите първокласници, почти изтеглете и инсталирайте всички инструменти по-горе, ако все още не ги имате. Може да искате да прочетете повече за всеки инструмент, като действително отворите вградените връзки. Като приключим с това, нека да видим някои кодове.

О, да, трябва да спомена, че има такова нещо като работен процес. Ако възнамерявате да работите с екип, надявам се, че работите, или допринасяте за проекти с отворен код, трябва да разберете с какъв работен процес работят членовете на проекта. Най-разпространеният е работният процес на gitflow, за да прочетете повече, моля, щракнете тук. Ще използваме работния процес на gitflow в този проект, това означава, че ще създаваме конкретни клонове за специфични функции и ще обединим клоновете в клон за разработка, когато приключим.

Вероятно съм забравил да спомена, че ще ви е необходим акаунт в GitHub. Ако нямате такъв, не се притеснявайте, създаването е лесно. Просто щракнете върху „тук“, за да го заобиколите. Добре. Докато сте там, създайте ново хранилище за този проект.

Поздравления за вас, ако сте стигнали дотук. Не бързайте, забележете, че проверих README, падащото меню .gitignore също чете Node и лицензът чете MIT.

Забележете, че по подразбиране вашето git хранилище е настроено на master, но в работния процес на gitflow ние не се ангажираме с master клона, ето „защо“.

След това ще клонираме този проект на нашия локален компютър. Ще направим това с помощта на проста команда git. Кликнете върху клониране и копирайте предоставената връзка. Ще поставим този код в нашия GitBash. Не забравяйте, че това беше вторият инструмент, който изтеглихме.

// 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 .

И така, ето какво направих. Клонирах проекта от Github, преместих се в директорията на проекта и създадох нов клон за разработка от основния клон. Нашият клон за разработка ще бъде нашият активен клон, ние ще обединяваме нови функции към този клон, докато напредваме.

Свършен? страхотно Следва файлът package.json.

Package.json е страхотен начин за управление на нашите локално инсталирани зависимости. Зависимостите са това, от което нашето приложение зависи, за да работи. За да създадем package.json, ние просто инициализираме NPM. NPM е Node Package Manager и на практика ни дава достъп до голям регистър от пакети, които можем просто да включим в нашата кодова база. Прочетете повече тук.

Ето как работи:

npm init

Това инициализира npm, като изисква специфична информация от вас, с която да създадете package.json. Въведете това във вашия git интегриран терминал с помощта на Git Bash или VSCode git интегриран терминал. Още една причина да обичам VSCode. Можете обаче да пропуснете заявката и да приемете настройките по подразбиране с кода по-долу:

npm init --yes

Ако сте направили всичко правилно, трябва да имате вашия файл package.json, което означава, че вече сте готови да инсталирате зависимостите, които ще са ни необходими, за да изградим нашето приложение.

Първо ще инсталираме Express. Express е NPM, който ни позволява да създаваме уеб приложения с лекота. Можете да прочетете малко повече тук.

npm install express --save

Кодът по-горе ще инсталира експресно в нашия списък със зависимости и това идва с папка node_modules, която не искаме да публикуваме онлайн. Въпреки това, ние вече подредихме това с файла .gitignore, който проверихме, когато създадохме това хранилище. Това казва на git да не следи промените, които се случват в тази директория. Ще трябва да извършим тези промени, но първо нека създадем входния файл на нашето приложение.

Нашият входен файл съдържа набор от инструкции, необходими за стартиране на нашето приложение. С това казано, нека настроим нашия входен файл.

touch app.js
start app.js

Първата команда създава файл app.js за нас. Втората команда отваря файла. Кодът start работи за Windows, не съм сигурен за други операционни системи.

// 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!`);
});

Линии 2 и 5 основно се обаждат и настройват нашето експресно приложение. Ред 8 настройва номера на порта. Ред 11–19 определя нашия домашен маршрут. Какво е значението на искане и отговор, което може да попитате? Страхотно, вижте тук. Освен това какво е състояние (200)? Страхотно, вижте тук. Забележете, ние използваме шаблонни литерали на ES6 в ред 18, вместо да използваме конкатенация.

// 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!`);

И накрая, нека стартираме нашия сървър.

node app.js

Сега нашият сървър работи и ние успешно настроихме нашата среда за разработка, сега е време да надградим върху това. Има обаче още няколко неща, които трябва да направим. Първо, трябва да ангажираме нашите файлове. Пуснете кода на вашия терминал.

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

Ще преминем към нашето отдалечено хранилище по-късно, след като инсталираме някои важни зависимости за разработка. Ние ще инсталираме следното:

  1. Eslint: Това е проект с отворен код, който предоставя помощна програма за добавяне на linting за JavaScript за по-чисти кодове. По принцип Eslint ни помага да пишем по-чисти кодове. Прочетете още."
  2. BabelJS: Това е компилатор за писане на JavaScript от следващо поколение. Той отговаря на по-ранни версии на ECMA с ES5. Прочетете още."
  3. Nodemon: Това се използва по време на разработката на базирано на NodeJS приложение чрез наблюдение за всякакви промени в приложението и автоматично рестартиране на сървъра. Прочетете още."

Нека бързо да инсталираме тези:

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

В нашия package.json нека добавим ред код, за да активираме nodemon watch и да нулираме нашето приложение след всяка промяна. Направете това под етикета на скрипта.

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

След това ще създадем .babelrc файл в нашата основна папка, за да настроим babel. Въведете следния код във вашия терминал.

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

Накрая ще конфигурираме eslint. Можете да видите подробности за това тук.

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

Eslint ще поиска да разбере вашето приложение, преди да завърши инициализацията. За този проект избрах следното:

./node_modules/.bin/eslint app.js

С кода по-горе Eslint сега ще прегледа моделите за идентифициране на нашия код с цел да направи нашите кодове по-последователни и да избегне грешки.

Ако сте стигнали дотук, значи сте се справили страхотно добре. Сега можем да надграждаме това, което направихме досега. Нека да завършим това с ангажимент и да изпратим до нашето отдалечено хранилище.

// 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

Следващата статия ще ви помогне да разработите CRUD операции за нашето приложение. За третата статия натиснете тук.