Экран приложения 1 (пользовательский интерфейс + интеграция с серверной частью)
Ссылка на приложение feelGood: http://app.clint.hasura.me/
Примечание. Это может быть не всегда доступно, так как приложение работает на моем компьютере через туннель ngrok. Свяжитесь со мной для демонстрации :)
Проверьте репозиторий git: https://github.com/clintjohnsn/hasura-online-shopping-website
Я собираюсь построить серверную часть на nodejs, а внешний интерфейс — на Bootstrap и jQuery.
Настройка сервера
Экспресс: Среда nodejs, которую я буду использовать.
ejs: Встроенный Javascript, используемый для шаблонизации на стороне сервера
request: Для выполнения почтовых запросов с сервера (API данных Hasura)
express-fileupload: загрузка файлов, таких как изображения
Все эти пакеты nodejs легко устанавливаются с помощью установки npm.
Эйс
Ejs — это простой язык шаблонов, который позволяет создавать HTML-разметку с помощью простого JavaScript.
После того, как вы настроите ejs, вы можете поместить свои файлы ejs в папку представлений.
Здесь навигация является общей для всех экранов, поэтому мы включим ее как частичную для всех представлений, которые ее используют. Таким образом мы уменьшаем повторяющийся код.
Вы даже можете передавать объекты JSON в представление перед его рендерингом, и к этому объекту можно получить доступ и вставить его на стороне сервера во время рендеринга представления. Вы также можете манипулировать этими объектами с помощью кода js, написанного в представлении, которое запускается во время рендеринга на стороне сервера представления.
ПО промежуточного слоя
Мы используем app.use для настройки промежуточного программного обеспечения. Мы будем использовать промежуточное ПО express-fileupload для анализа загруженных изображений. Мы также используем специальное промежуточное ПО для обслуживания всех статических ресурсов, таких как файлы css и js в /public/assets.
Теперь сервер готов. Вы можете отправить это на локальную платформу Hasura или запустить сервер локально, используя app.listen(‹portnumber›);
Первый экран
Первый экран, с которого вы начнете, в идеале должен быть самым простым. Я начал с экрана /viewItem , страницы, которая загружается, когда вы нажимаете на один из товаров в продаже на странице /shop. Наряду с подробной информацией об элементе, он также показывает средние оценки предмета и отзывы других людей. Вы также можете добавить или обновить свой рейтинг и отзывы. Пользователю разрешается только один отзыв на элемент.
Ниже приведены несколько скриншотов экрана в действии:
После входа в систему появляется пункт «Добавить в корзину»
После входа в систему ваш токен сеанса сохраняется браузером в файле cookie. Этот токен сеанса требуется для любых запросов API, которые вы отправляете на платформу Hasura. Убедитесь, что ваш браузер отправляет эти учетные данные с каждым почтовым запросом, настроив ajax следующим образом:
Если вы собираетесь выполнять вызовы API из своего приложения nodejs, вы можете получить роли и идентификатор пользователя, делающего запросы, из заголовков запроса, например:-
request.headers['X-Hasura -Allowed-Roles']
request.headers['X-Hasura-User-Id']
Детали элемента извлекаются из базы данных и отображаются на стороне сервера с помощью ejs, а рейтинги и обзоры извлекаются с помощью запросов ajax со стороны клиента.
Вот как вы могли бы написать код ejs для рендеринга /viewItem на стороне сервера
Средняя оценка элемента и общее количество пользователей, оценивших этот элемент, представляют собой сводные данные, доступ к которым можно получить, создав представления. Любое представление, которое вы создаете и добавляете на платформу Hasura, будет иметь свои собственные API данных, как и создаваемые вами таблицы.
