Створіть свій перший сайт Node.js. Частина 1

1. Що для цього потрібно
2. Крок 2. Ручне розгортання додатки
3. Крок 3. Управління додатком
4. Крок 4. Редагування додатки
5. висновок
6. Ресурси для скачування

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

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

Залишалася остання надія на IBM Bluemix ™. Отримати приклад ефектів у програмному забезпеченні виявилося легко, але потім довелося продиратися крізь масу незрозумілого коду і встановлювати ще більше всіляких інструментів для розробки додатків - чи потрібно забивати всім цим голову підлітка?

Я поважати Bluemix лише тоді, коли виявила веб-IDE в складі IBM DevOps Services. Додаток можна відредагувати в IDE, опублікувати в Bluemix і запустити - без встановлення ніякого додаткового ПЗ. Звичайно, Bluemix можна використовувати і з локальної середовищем розробки, наприклад, Eclipse, або з інструментом командного рядка для Bluemix. Але для початку і для цілей швидкого ознайомлення web-IDE підходить ідеально.

І все ж я хотіла всього лише створити HTML-сторінку, а в Bluemix Node.js Web Starter не виявилося нічого, що нагадувало б старий добрий HTML. Що стосується роботи з базою даних, то приклад програми ToDo в Bluemix пропонував більше, ніж потрібно.

Приклади з цієї статті досить прості навіть для учнів початкової школи - не зовсім юних новачків (яким краще запропонувати бестекстовие мови, такі як Scratch), а для підлітків, готових зробити наступний крок в програмуванні. Для кожної важливої ​​концепції, що розглядається в цій статті, в проекті DevOps Services є папка worksheets, що містить відповідні картки, виконані згідно з інструкціями CoderDojo Sushi Card .

Це спонукало мене написати цю Статтю з трьох частин, яка починається з самих азів і дозволяє читачеві крок за кроком освоїти процес створення динамічного веб-сайту на базі Node.js - нічого не встановлюючи. Ця перша частина присвячена введенню в сервер Node.js для простої обробки запитів. Я почала з класичний приклад Hello World і додала лічильник на стороні сервера. Ми створимо копію програми для ваших власних потреб, розгорнемо це додаток в Bluemix, а потім внесемо в код деякі зміни і подивимося, що вийде.

Додаток Node.js обробляє запити від різних браузерів і підраховує їх.

В частини 2 ми додамо інфраструктуру Express, форматування HTML-сторінок і передачу даних з сервера Node.js для відображення на HTML-сторінці. В частини 3 показано, як використовувати базу даних Redis для зберігання даних, які відображає веб-сайт.

Що для цього потрібно

Як і було обіцяно, встановлювати нічого не доведеться. Вам знадобляться:

запустити програму отримати код

1. Увійдіть в Bluemix через свій веб-браузер.
2. Увійдіть в DevOps Services з окремою вкладки браузера.
3. Натисніть кнопку Отримати код на початку цієї статті.
4. У DevOps Services натисніть кнопку EDIT CODE і кнопку FORK в меню, щоб створити власну копію робочого коду, і збережіть цей проект під яким-небудь ім'ям.

Крок 2. Ручне розгортання додатки

У процесі розгортання DevOps Services автоматично перевіряє наявність файлу manifest.yml. Якщо вийти з папки проекту верхнього рівня, що містить файл manifest.yml, а потім натиснути кнопку DEPLOY, то ви отримаєте повідомлення про помилку, яке вказує на те, що файл manifest.yml не найден. Так що перед початком розгортання краще вибрати manifest.yml.

Для виконання цього кроку потрібно увійти в Bluemix .

У процесі розгортання в Bluemix служба DevOps Services використовує файл manifest.yml, що містить всі настройки проекту; в цей файл не потрібно вносити ніяких змін. Рядок runtime: node08 manifest.yml наказує процесу розгортання використовувати середу виконання Bluemix Node.js. Значення host :, $ {random-word}, ​​створює унікальний URL-адресу додатка, гарантуючи, що при розгортанні НЕ буде конфліктів з іншими додатками.

DevOps Services надає ручні, так і автоматичні способи розгортання додатків в Bluemix. Ми будемо використовувати ручний процес розгортання.

1. В IDE DevOps Services виберіть файл manifest.yml і натисніть кнопку DEPLOY.
2. Дочекайтеся закінчення процесу розгортання. Коли він завершиться, ви побачите у верхній частині сторінки по електронній пошті посилання на інформацію з ручного розгортання на сторінці кореневої папки.
3. Натисніть на це посилання і знайдіть розділ Manual Deployment.
4. Дочекайтеся оновлення інформації про ручному розгортанні. Жирна зелена точка вказує на те, що розгортання пройшло успішно.
   Якщо при розгортанні виникли проблеми, для їх усунення можна переглянути журнали подій.
5. Натисніть на посилання NodeJS_Simple_1, щоб побачити свій додаток в окремій вкладці браузера. Оновлення сторінку і поспостерігайте за збільшенням лічильника з кожним оновленням.

Крок 3. Управління додатком

Розгорнутими Bluemix-додатками можна управляти з DevOps Services, в тому числі запускаючи і зупиняючи їх.

1. Поверніться до інформації з ручного розгортання на сторінці кореневої папки в DevOps Services. Натисніть на свій додаток, щоб виділити його, і зупиніть, натиснувши на суцільний чорний квадрат.
2. Знову виділіть свій додаток і запустіть його в Bluemix, клацнувши на трикутнику, направленому вправо.
3. Натисніть на посилання NodeJS_Simple_1, щоб відкрити працююче додаток в окремій вкладці браузера. Зверніть увагу, що лічильник скинутий. Він скинув, бо при перезапуску додаток не відновлює свої статки і не зберігає ніяких даних. (Персистентность розглядається в частини 3 ).

Безпосередньо на панелі інтерфейсу Bluemix доступні додаткові засоби управління.

Крок 4. Редагування додатки

1. Поверніться в IDE DevOps і виберіть app.js, щоб відкрити код Node.js додатки.
2. У рядку res.write ( 'Hello from Ruth \ n'); замініть Ruth своїм власним ім'ям.
3. Розгорніть додаток, як на кроці 2 , І відкрийте його в браузері. Зверніть увагу, що тепер сторінка відображає змінений текст.
4. Поверніться в app.js в DevOps Services. Під рядком var userCount = 0 додайте нову змінну userbytwo і Ініціалізуйте її зі значенням 0.
5. Під рядком, де нарощується значення userCount, додайте рядок, в якій до userbytwo додається 2: userbytwo = userbytwo + 2;
6. Скопіюйте та вставте оператор write для userCount і змініть його так, щоб роздруковувати userbytwo. res.write ( 'We can also count by two. We have had' + userbytwo + visits! \ n ');
   Тепер підрозділ коду app.js повинен виглядати наступним чином: var userCount = 0; var userbytwo = 0; / * Додано визначення нової змінної userbytwo * / / ** * Це функція, яка обробляє вхідні запити ** / var serverHandler = function (req, res) {userCount ++; userbytwo = userbytwo + 2; / * Додано приріст значення нової змінної userbytwo на два * / res.write ( 'Hello from yourname \ n'); / * Edit this line to say your name * / res.write ( 'We have had' + userCount + 'visits! \ N'); res.write ( 'We can also count by two. We have had' + userbytwo + 'visits! \ n'); res.end ( 'Good Bye'); };
7. Розгорніть додаток вручну і відкрийте його, скориставшись посиланням в повідомленні з ручного розгортання.
8. Переконайтеся, що значення лічильника збільшується на 2.

висновок

У цій першій частині ми крок за кроком пройшли процес створення сервера Node.js. Тепер ви готові перейти до частини 2 , Де ми додамо веб-інтерфейс зі статичними сторінками і динамічними даними з сервера. частина 3 присвячена збереженню інформації сайту в базі даних.

Ресурси для скачування

Схожі теми

Підпишіть мене на повідомлення до коментарів