Передняя часть — проверьте…
Задняя часть — проверьте…
Пришло время создать полнофункциональное приложение :)
Создание полнофункционального приложения за 5 дней было непростой задачей. Делать это в первый раз было несложно, пока мы не поняли, что полностью забыли, как контролировать поток информации через React.js.
Некоторые технические и не очень технические знания на будущее:
- Создайте каркас и нанесите на карту свои маршруты
- Сначала отдайте приоритет аутентификации, без нее вы не сможете реализовать большинство функций.
- Когда вы наткнетесь на стену, продолжайте идти
- Наслаждайтесь волшебством!
Мы решили создать p2p (одноранговую) торговую площадку, похожую на те, которые я и мои товарищи по команде использовали в прошлом для покупки, продажи и обмена предметами одежды. После двух очень успешных дней создания нашего бэкэнда и наших моделей мы приступили к интеграции наших запросов на выборку во внешний интерфейс, в основном используя различные библиотеки React, чтобы воплотить в жизнь наши данные и функции.
Мы не сомневаемся, что мы могли бы/должны/будем объединять все эти компоненты в один или два и использовать запросы GET на выборку и элементы фильтрации приложений для получения данных, содержащихся в каждом компоненте. Мы просто зашли слишком далеко в кроличью нору, и с такими сжатыми сроками нам пришлось придерживаться нашего текущего макета. Оглядываясь назад, это произошло из-за отсутствия планирования, предвидения и слишком большого внимания к серверной части, но вы живете и учитесь!
Одним из ключевых результатов была операция Full-CRUD для одной из наших моделей — мы выбрали предметы одежды, отображаемые на нашем рынке, которые можно создавать (добавлять), читать, обновлять (покупать/продавать) и уничтожать (удалять) — мы знали, что конечные пользователи захотят добавить свои товары на рынок, просмотреть свои товары и купить их (GET), будут совершать транзакции со своими предметами (PATCH owner_id) и, конечно же, они могут удалять их (DELETE). Собрать все это вместе с хорошо организованной серверной частью было очень легко и приятно. Но не все было так просто….
Самым большим препятствием… безусловно… был наш процесс аутентификации, который состоял из различных функций Flask, показанных здесь:
Мы могли успешно зарегистрироваться, но при входе в систему из React мы не смогли сохранить файл cookie. После почти двух дней бесконечно разочаровывающей отладки решение оказалось смехотворно простым… все было в URL-адресе, на который мы загружались.
Мы пытались опубликовать файлы cookie сеанса и получить их с указанного локального хоста: http://127.0.0.1:5555/{check_session, login, logout и т. д.}
По прихоти и в полном отчаянии мы заменили полный маршрут локального хоста и просто использовали вместо него путь к файлу — это выглядит так:
Сработало - слава богу сработало. Это была такая важная часть приложения и огромная возможность обучения при получении данных из API.
После того, как мы решили проблему аутентификации, нам пришлось потрудиться, чтобы завершить наши ключевые функции и собрать пакет CSS, который мы сочли подходящим.
Мы контролировали большую часть авторизации наших функций через хранилище user.id в браузере и использовали различные тернарные операторы для отображения/скрытия кнопок и функций.
Без сомнения, моя группа и я узнали огромное количество информации о планировании и стратегическом отображении нашего более сложного проекта. Было так приятно видеть, как наш бэкэнд, который мы создали с нуля, оживает в React, я очень рад продолжить работу над нашим проектом и создавать другие приложения, используя этот процесс.
