4 августа 2020 г.

Наконец-то прошло 6 недель в программе Flatiron School, и за это время я получил знания и информацию о том, как интерфейс и сервер наконец-то работают вместе!

Первые 3 недели модуля были потрачены на изучение того, как работать с бэкендом на языке Ruby. Благодаря этому первому модулю я смог создать чистый серверный проект, использующий терминал для взаимодействия с приложением Ruby.

Последние 3 недели были комбинацией передних и внутренних технологий. В этом модуле мы, наконец, познакомились с популярным фреймворком Ruby on Rails! Поиграв пару дней с фреймворком Rails, я оценил простоту и удобный интерфейс, который Rails предлагает разработчикам.

Как только мы освоились с Rails, мы сразу же перешли к фронтенд-технологиям: JavaScript, HTML и CSS!

Самой захватывающей частью всего этого была возможность общаться между интерфейсом и сервером. В частности, в этом модуле мы сосредоточились на следующих принципах взаимодействия между ними:

  • Использование шаблона проектирования Model-View-Controller (MVC)
  • Создание API в соответствии с архитектурой RESTful

Вы можете спросить, а для чего в данном случае фронт и бэкенд?

Внешний интерфейс имеет дело с тем, как приложение выглядит/взаимодействует с пользователем/клиентом. К таким примерам относятся UI/UX (стили CSS, платформа Bootstrap, действия JavaScript) и передача/манипулирование данными (через JavaScript).

Что касается серверной части, то в первую очередь он занимается управлением данными, получением/ответом на запрос клиента и настройкой протоколов безопасности (аутентификация, надежные параметры и проверка модели).

Совершенствуя обе стороны вместе, вы получаете полнофункциональное приложение!

ПРОЕКТ МОДУЛЯ 2

Для моего проекта модуля 2 я разработал полнофункциональное веб-приложение под названием RedDoor Media. Ниже показана живая демонстрация моего завершенного проекта.

Технологии, используемые для этого веб-приложения, включают следующее:

  • JavaScript
  • HTML5/CSS3
  • Начальная загрузка
  • Рельсы
  • SQLite3

Вдохновение этим веб-приложением пришло ко мне, поскольку я заядлый читатель новостей. Помимо новых статей, я также люблю смотреть видео на YouTube. Я хотел разработать приложение, которое бы доставляло весь мой любимый медиаконтент под одну крышу!

Внешняя разработка: рендеринг живого мультимедийного контента был получен из трех сторонних источников API. Используя метод «выборки» JavaScript (показан ниже), я смог сгенерировать интерактивные элементы узла, которые будут отображать живой контент.

fetch(newsUrl)
  .then(response => response.json())
  .then(article => {
    for (i = 0; i < 10; i++) {
     const $div = document.createElement("div")
     $div.classList.add("carousel-item")  
     $div.innerHTML = `<a href="${article[i].url}">
     ${article[i].title}</a>`
     $carousel.append($div)
}

Внутренняя разработка: я создал серверную часть API rails, которая позволяет пользователям хранить информацию о своем профиле и сохраненном контенте через веб-сайт.

Используя архитектуру Model-View-Controller, я разработал четыре различных ресурса rails, которые охватывают следующее:

  • Пользователь (has_many: статьи, видео, изображения)
  • Веб-сайт (join_table)
  • Статьи (имеет_много: пользователи, через: веб-сайт)
  • Видео (имеет_много: пользователей, через: веб-сайт)
  • Изображения (имеет_много: пользователи, через: веб-сайт)

В дополнение к настройке этих моделей действия контроллера были определены для включения шаблона RESTful (индексировать, показывать, создавать, обновлять, уничтожать).

После завершения шаблона MVC и RESTful включение надежных параметров и проверки модели были следующими целями:

Проверка модели:

class User < ApplicationRecord
  validates_precense_of :first_name, :last_name, :email, :password
  validates :email, format: { with: URI::MailTo::EMAIL_REGEXP }
  validates :password, uniqueness: true, length: {in: 7..25}
end

Сильные параметры:

def create
  @user = User.create(user_params)
  if @user.valid?
     @user.save
     redirect_to user_path(@user)
  else
     render :new
     @user.errors
  end 
     redirect_to "http://localhost:3001/index.html"
  end
private
def user_params
  params.require(:user).permit(:name, :email, :password)
end

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

  • JWT-аутентификация Rails
  • FAST_JSON_API (сериализатор)

Одной из самых больших проблем для этого приложения была оптимизация передачи данных в циклах запрос/ответ. Большинство проблем было решено путем отладки на вкладке сети в инструментах разработчика и использования console.log при отправке ответов с сервера.

Самый большой вывод из этого проекта — это возможность учиться на собственном опыте проб и ошибок. Для моего проекта модуля 3 (следите за обновлениями) я буду разрабатывать проект, который включает в себя стек технологий MERN:

  • MongoDB
  • Express.js
  • React.js
  • Node.js

Если вы хотите более подробно ознакомиться с моим проектом, щелкните ссылку ниже на мой репозиторий GitHub:

GitHub: https://github.com/hjkmines/RedDoor-Media

Если вы хотите узнать больше о моем опыте и реализованных проектах, просмотрите мой LinkedIn, веб-сайт с портфолио и/или профиль на GitHub:

LinkedIn: https://www.linkedin.com/in/hyung-kim/

Веб-сайт портфолио: https://hjkmines.github.io/my-portfolio-website/

GitHub: https://github.com/hjkmines

Пожалуйста, не стесняйтесь обращаться ко мне с любыми вопросами или запросами по электронной почте: [email protected]