Giter VIP home page Giter VIP logo

space-y's Introduction

SpaceY

В задании будем делать серверную часть и клиенсткие запросы для приложения SpaceY. Приложение представляет собой SPA (Single Page Application), которое умеет работать без перезагрузки страниц браузером.

В SPA серверу достаточно возвращать единственную html страницу, на которой подключаются скрипты и стили приложения.

Эти скрипты определят, какой контент нужно показать пользователю, сделают запросы к серверу, получат данные и сформируют страницу "на лету".

Все запросы на сервер приложение будет посылать через файл client.mjs.

Код приложения лежит в папке spa, собранная версия уже лежит в папке spa/build. Для выполнения задания трогать код приложения не потребуется, но если захочешь что-то поменять, не забудь установить зависимости (npm install в папке spa) и собрать новую версию приложения (npm run build).

  1. Поставь зависимости и запусти сервер.
  • Для этого перейди в директорию задачи и выполни команду npm install.
  • После установки зависимостей, выполни команду npm run start.
  • После запуска, перейди по адресу localhost:3000
  1. Сделай так, чтобы сервер смог отдавать статические файлы из директории spa/build. В express для этого есть middleware express.static. Подробнее можно прочитать здесь

  2. Сделай так, чтобы при заходе на любой неизвестный адрес, сервер возвращал файл spa/build/index.html. В этом помогут специальные символы в путях

  3. Сделай так, чтобы наш сайт работал по https. В этом поможет этот небольшой пост. Сертификат уже сгенерирован и лежит в папке /certs.

Обрати внимание, что придётся разрешить Chrome работать с само-подписанными сертификатами для localhost. Это можно сделать включив флаг chrome://flags/#allow-insecure-localhost.

  1. Изучи файл client.mjs. В нём лежит заготовка клиента, который будет делать запросы на сервер.

Сделай так, чтобы работали методы, работы с пользователем (.getUser(), .loginUser(), .logoutUser()). На этом этапе имя пользователя можно хранить на сервере.

Все адреса, по которым этот клиент будет слать запросы лучше начинать с /api/..., чтобы показать, что они являются частью API, к которому делают AJAX запросы.

Если в методе .loginUser() будешь посылать имя пользователя в теле запроса, то не забудь подключить express.json middleware или body-parser middleware.

Отправлять ответ можно с помощью res.json.

  1. Сохрани имя пользователя в cookie (не забудь подключить cookie-parser middleware).

Сделай так, чтобы методы .getUser(), .loginUser(), .logoutUser() работали с cookie

  1. Сделай так, чтобы cookie с именем пользователя была HttpOnly, Secure, и имела SameSite политику Strict. В этом помогут дополнительные опции res.cookie.

  2. Сделай так, чтобы при заходе на любой роут приложения, кроме api, статики и /login без cookie происходил редирект на страницу /login.

Для этого придётся написать middleware и проверять наличие cookie в запросе. Как написать узнай здесь.

Сделай так, чтобы middleware применялось только для путей, которые непосредственно отдают index.html

  1. Оживи остальные страницы кроме /sendToMars. А именно About, History, Rockets, Roadster.

В качестве источника данных используй публичное API. Методы в нём названы похожим образом.

Посылать с сервера запросы к публичному API можно с помощью https.request или, как в браузере, с помощью fetch. Так этот это браузерный стандарт, его нет в стандартной библиотеке node.js, но существует реализация node-fetch, которая уже подключена в качестве зависимости в package.json.

По возможности, не запрашивай лишних данных из API и не возвращай лишних данных на клиент.

Формат данных, который ожидает клиент описан в файле client.mjs в формате JSDoc.

  1. * Оживи страницу /sendToMars. Объект каждого предмета посылай в теле запроса в формате json. Для того, чтобы прочитать и распарсить тело запроса придётся подключить express.json middleware. Храни данные в памяти на сервере, придумай как гарантировать уникальность полей id для каждого предмета.

space-y's People

Contributors

aminopyridin avatar nulladdict avatar disturm avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.