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

В этом разделе я собираюсь рассказать о внутренней работе сервера и клиента, когда пользователь делает запрос в моем вымышленном приложении под названием CookMe (в данном случае хочет получить список всех своих рецептов) и фактически реализует его. в Go и React. Также просто отказ от ответственности, код предназначен для предоставления контекста, поэтому он не был протестирован на работоспособность и в некоторых случаях может быть «неправильным».

Хорошо, возьмите кофе, пристегните ремни безопасности и держите столики в вертикальном и запертом положении! Если вам не нужно поставить свой кофе вниз. Тогда, я думаю, ты можешь опустить свой поднос.

Запрос сервера

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

Хорошо, давайте пройдемся по этому:

  1. Это два файла для пакета recipes, контроллер и модель, чтобы код оставался красивым и разделенным. Код в контроллере не изменится, изменится только то, что будет возвращено моделью (например, однажды мы сможем вернуть все рецепты и сколько раз пользователь делал этот рецепт, если это было отслеживается).
  2. Существует одна конечная точка, которая будет запросом GET, и путь для конечной точки — «/recipes».
  3. Конечная точка имеет указатель на маршрутизатор. Я использую Ace router, но вариантов там масса.
  4. x-user-id – это HTTP-заголовок, который будет передаваться в каждом запросе в целях аутентификации, поэтому нет необходимости включать его в качестве параметра в API. Мы просто просим это в информации заголовка.
  5. Контроллер просит модель вернуть объект, который может быть либо объектом, содержащим данные, либо ошибкой.
  6. Мы могли бы добавить проверку, которую я намеренно пропустил, чтобы предотвратить панику сервера, если он получит что-то, что он не может обработать.

Затем в модели:

Вот что он делает:

  1. Получает указатель на базу данных PostgreSQL.
  2. SQL-запрос выполняется и возвращает некоторые идентификаторы рецептов.
  3. Для простоты он возвращает имена в ответе, но мы могли бы вернуть весь объект рецепта (с ингредиентами, указаниями, временем приготовления, временем приготовления и т. д.), если бы хотели отобразить дополнительную информацию.

Милая, давайте проверим, работает ли конечная точка. Я использую Google Advanced REST Client для тестирования запросов. Если это сработало, это должно выглядеть так:

Запрос клиента

Как только конечная точка заработает, пора переключиться на клиент. Опять же, давайте предположим, что сервер node.js уже запущен и работает. Нам просто нужен способ вызова конечной точки. К счастью, для этого я создал файл JavaScript, в котором используется синтаксис async await. Вот:

Это можно использовать для любого запроса GET и включает информацию заголовка, которую необходимо сначала сохранить в файлах cookie (помните, нам нужен этот идентификатор пользователя, чтобы сделать запрос к серверу). Теперь все, что нам нужно сделать, это создать файл контроллера, который будет вызывать конечную точку:

БУМ! Теперь клиент и сервер находятся в состоянии разговора. Разве это не мило?

Клиентский рендеринг

Конечно, мы не закончили. Нам нужно настроить компоненты React, которые будут вызывать метод, а затем показывать нам несколько прекрасных карточек с рецептами.

Это будет два компонента — контейнер и представление. Прочтите эту замечательную статью Дэна Абрамова, который работает в команде React. По сути, контейнер будет действовать как модель, получая данные с сервера:

Компонент представления — это объект макета, который на самом деле не «знает», что делать, кроме как отображать то, что ему приказано — в данном случае сетку рецептов:

Итак, на самом деле есть еще два компонента, на которые я ссылаюсь, но я не буду их реализовывать в этом посте. Одним из них является причудливый компонент сетки, который может быть сторонним компонентом, который обрабатывает отображение объектов в макете сетки с учетом набора объектов JavaScript. Другой — RecipeCard, который в основном будет отображать прямоугольник с рецептом в центре. Одна из моих любимых библиотек React — Material-UI, в которой есть компоненты GridList и Paper, которые можно легко использовать здесь.

Как ты себя чувствуешь? У тебя болит голова? Вы забыли опустить поднос и разлили кофе? Надеюсь, что нет.

В пятой части я расскажу об аутентификации пользователей.