Налаштування додатку в Node

Створимо нову папку для цієї програми. Це буде гарною практикою почати з нуля, щоб ми могли звикнути до створення Node-додатків. рядок і почніть Node-додаток за допомогою команди:

<code>$npm init

Заповніть своєю інформацією до смаку, після чого ми встановимо необхідні пакети.

>

<code>$npm install express ejs instagram-node--save

Будуть встановлені три пакети в папку node_modules/і додані до розділу залежностей package.json.

server.js

Тепер ми починаємо роботу з нашим файлом server.js. Основні речі, які ми маємо в ньому зробити:

• включити необхідні пакети (Express, EJS, instagram-node);
• налаштувати ці пакети;
  • встановити ключ Instagram API;
  • встановити EJS як шаблонизатор;
  • встановити папку ресурсів Express (для CSS);
• створити маршрут для головної сторінки;
  • взяти популярні зображення Instagram;
  • передати їх у нашу виставу;
• запустити сервер.

<code data-language="javascript">//НЕОБХІДНІ ПАКЕТИ І ЗМІННІ //==================================================var express=require('express'); var app=express(); var ig=require('instagram-node').instagram(); //КОНФІГУРАЦІЯ ДОДАТКИ //==================================================//повідомляємо Node де лежать ресурси сайту app.use(express.static(__dirname + '/public')); //встановлюємо двигун EJS для представлення app.set('view engine', 'ejs'); //налаштування програми instagram за допомогою ідентифікатора клієнта //ми скоро це додамо //ВСТАНОВЛЕННЯ МАРШРУТІВ //==================================================//головна сторінка — популярні зображення app.get('/', function(req, res) { //використовуємо пакет instagram для отримання популярних картинок //відображаємо головну сторінку та виводимо популярні зображення res.render('pages/index'); }); //ЗАПУСК СЕРВЕРУ //==================================================app.listen(8080); console.log('Додаток запущено! Дивіться на http://localhost:8080');

Ми вставили наші пакети, встановили потрібні налаштування, створили маршрут для головної сторінки та запустили сервер. У Node це можна зробити швидко, оскільки у нашому розпорядженні можливості app.use() та app.set() для Express-програми.

Ці установки можна знайти на сторінках пакетів Express і EJS і, як правило, пакети надають дуже чітку інструкцію на сторінках сховища GitHub або npm.

Раніше ми застосовували res.sendfile(), EJS пропонує функцію res.render(). За замовчуванням, Express і EJS заглядають у папку views/, тому нам не потрібно писати views/pages/index, достатньо вказати pages/index.

Ми також створюємо об'єкт ig використовуючи require('instagram-node').instagram(). Ви можете знайти інформацію про instagram-node на сторінці npm.

Файли представлення

Перед тим як ми зможемо перевірити сервер і переконатися, що все працює, нам для показу знадобиться файл представлення! Ми збираємося швидко пройтись по цих файлах, оскільки вони не є основною увагою нашого Node-програми.

views/partials/head.ejs

<code data-language="html"><meta charset="UTF-8">
<title>Моя перша Node-додаток!</title> <!--CSS--> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.2/cosmo/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css">

Ми вставляємо Bootstrap з CDN для швидкої стилізації.

Ми вибрали один із файлів Bootstrap з розділу Bootswatch, щоб відійти від теми Bootstrap за замовчуванням.

Ми також завантажуємо таблицю стилів css/style.css. Вона знаходиться в нашій папці public/css/, і оскільки ми вже встановили express.static() в server.js, наша програма отримуватиме ресурси з папки public/.

>

views/partials/header.ejs

<code data-language="html"><nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a href="/" class="navbar-brand"> <span class="glyphicon glyphicon-picture"></span> Популярні фотографії Instagram
</a>
</div>
</div>
</nav>

Нічого божевільного тут немає. Просто navbar з Bootstrap зі зворотним посиланням на головну сторінку. <span> є одним із іконок Bootstrap.

views/partials/footer.ejs

<code data-language="html"><p class=" text-center text-muted"> Copyright &copy; 1800-2050 &middot; Найкращий додаток у світі
</p>

Старий добрий копірайт всього шляху з 1800 року в майбутнє!

views/pages/index.ejs

<code data-language="html"><!DOCTYPE html> <html lang="ru">
<head> <% include ../partials/head %>
</head> <body class="container"> <header> <% include ../partials/header %>
</header> <main> тут будуть фотографії
</main> <footer> <% include ../partials/footer %>
</footer>
</body>
</html>

Ми використовуємо include, щоб вставити різні частини. Це допомагає нашому додатку взяти файли EJS. В EJS теги <% та %> відображатимуть інформацію.

public/css/style.css

body { padding-top:50px; } 
footer { padding:50px; }

Це все, що ми додамо для стилізації прямо зараз. Стилізацію зображень ми зробимо після їх отримання в нашому додатку.

З усім цим давайте запустимо наш сервер і подивимося на те, що ми створили у браузері:

<code>$ nodemon server. js

Ми можемо побачити сайт у браузері за адресою http://localhost:8080.

Далі ми будемо використовувати пакет instagram-node для отримання популярних фотографій та демонстрації їх у нашому додатку.