#24 OMDB и первый динамический сайт

#24 OMDB и первый динамический сайт

- 5 mins

И снова здравствуйте. Думали я пропал навсегда, но нет :smile: Куча всевозможных дел и проблем рухнули на голову, плотно придавив к месту, не давая даже двинуть пальцем. А когда все прекратилось, то я уже был полностью выжат и не способен к каким-то образовательным порывам. Когда “надо” я очень стрессоустойчив, но есть некоторые моменты, которые могут мгновенно экстрагировать из меня желание заниматься любой деятельностью буквально за 20 минут.

Не скрою, что некоторое время я просто ленился и не мог найти в себе сил снова начать заниматься в прежнем темпе, а тем более писать в блог, поэтому в какой-то период моего отсутствия я просто предавался мрачным мыслям, выполнял задания на подработке и поигрывал в StarCraft.


Конечно же время от времени все-таки принимался за дело. Например смог написать свой первый динамический сайт (используя NodeJS) о котором говорил в прошлом блоге. Суть очень проста, в строку формы поиска пишем название фильма/мультифильма/аниме и нас перенаправляет на страницу показывающую “карточку” с заполненными данными.

omdb

Запрос делал через OMDB - это такая открытая база данных, из которой можно получить JSON-объект с данными практически любого фильма (по крайней мере тех, что есть на IMDB.com). Создаем функцию, через http.get делаем запрос (предварительно нужно зарегистрироваться на omdbapi.com, иначе у нас не будет APIkey без которого сделать запрос не получится), обрабатываем ошибки, передаем данные в коллбек.

Дальше нужно как-то обработать разные маршруты, их всего четыре:

  1. ”/” - корень, перенаправляет на index.html
  2. Маршруты на .css, .html, .png, .jpg, .js файлы, чтобы после получения HTML и последующих запросах нам было что возвращать, вроде бы все очевидно.
  3. URL с “/search”, на который мы делаем запрос после того как заполняем форму. Здесь нужно вытащить query-параметры из url (т.к это GET запрос).
  4. На все остальные маршруты возвращаем ошибку о том, что страница не найдена.

Для каждого маршрута отдельная функция, чтобы не пачкать основной файл server.js.

Удивительно, но пришлось даже сделать небольшую шаблонизацию: Смотрим как называются свойства у полученного OMDB-объекта, делаем такие же переменные-заполнители в html-шаблоне. Создаем функцию render() - которая читает шаблон и с помощью регулярного выражения и функции .replace() заменяет все переменные. Думаю что примерно так и работают шаблонизаторы вроде Liquid, только естественно посложнее.

template

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

Не обошлось и без менеджемента рабочей директории, функции render и omdb в отдельной папке с названием ‘lib’, в папке ‘public’ - все .css, изображения и подобные общие файлы для статики. А в templates - еще не сгенерированные шаблоны.

Примерно так выглядит неумело настроенное рабочее окружение

Правда вот верстку стырил с CodePen и подогнал под свои нужды, удалив некоторые элементы, изменив цвета и размеры (на это конечно ушло пару часов, но это меньше, чем если бы я верстал все руками). Ну и правильно, судя по последним новостям из мира искусственного интеллекта - “верстканенужна”.

Вот так это работает:

Казалось бы всего ~250 строк кода, но долго же я с этим парился. Да, да, понимаю что все это пока лишь игрушки, но надо же было с чего-то начинать.

Репозиторий проекта, если кому-нибудь будет интересно потыкать код: https://github.com/SayoBye/OMDB


Кажется что я уже достаточно собрался с мыслями, чтобы снова залететь на Hexlet, запастись книгами, придумать себе следующую цель для практики и продолжить обучение. После прочтения “Joel on Software” встал вопрос о поиске новой литературы, на этот раз выбрал книги из серии You Don’t Know JS. Несколько из них я уже прочитал, остались всего две - про Асинхронность и ES6.

workplace

Не знаю когда будет следующий блог, по возможности постараюсь уложиться в каноничные 7 дней, а также залететь на чай в Slack-конфу хекслета, а то давненько не учавствовал в слаконарах и не задавал свои глупые вопросы местным старожилам.

comments powered by Disqus
rss facebook twitter github youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora