Transcription
В сегодняшнем видео мы будем создавать полноценное приложение для доставки. Представьте себе что-то вроде Uber Eats или Glovo. В процессе мы будем использовать набор проверенных инструментов, которые нам помогут. Конечным результатом будет настоящее мобильное приложение, которое мы сможем использовать и распространять. Теперь, прежде чем мы начнем, давайте быстро поговорим об инструментах, которые мы будем использовать на протяжении всей этой сборки. Первый инструмент и наш основной инструмент — Codeex, который будет нашим выбранным ИИ-агентом. Я уже некоторое время использую Codeex и написал почти миллион строк кода, создавая всевозможные приложения. Следующим инструментом, который мы собираемся использовать, будет Google Stitch. Это будет наш выбранный инструмент для дизайна, который мы будем использовать для создания красивых макетов и дизайнов для нашего приложения. И последнее, но определенно не менее важное, мы будем использовать Superbase, который, по сути, не нуждается в представлении. Это современный проверенный бэкенд на основе Postgress SQL, который используется миллионами приложений и является супер надежным выбором для этого приложения. Я использовал Superbase для создания всевозможных приложений, и он будет абсолютно идеальным для этого конкретного приложения. И мы также будем использовать различные инструменты с открытым исходным кодом, которые помогут нам создавать это полное приложение по мере продвижения.
Теперь, прежде чем мы напишем хотя бы одну строку кода, мы хотим убедиться, что мы правильно определили тип стека, который мы будем использовать для создания этого приложения. Многие сборки приложений идут не так, потому что инструменты выбираются слишком быстро. Поэтому мы попросим Codeex сначала сравнить реалистичные варианты. Для этого проекта нам нужно настоящее мобильное приложение, которое может работать локально в симуляторе iOS, но мы не хотим сложностей нативной iOS.
Теперь я нахожусь в Codex, и прежде чем мы сможем начать создавать наше приложение, нам нужно сначала создать проект. И поэтому я наклику здесь и начну проект с нуля. И я просто назову его приложение для доставки. Нажмите "Сохранить". И теперь у нас есть этот проект, определенный здесь. И здесь мы можем создавать новые чаты, которые будут назначены только этому проекту. И таким образом они получат контекст всего приложения, включая файлы, которые мы собираемся написать, все настройки среды, и они смогут легко понять, что делать. И следующее, что мы хотим сделать, это начать новый разговор, чтобы мы могли начать создавать приложение.
Теперь первое, что я хочу сделать, это попросить Codeex предложить стек. Итак, подсказка, которую я собираюсь использовать, будет примерно такой: Я хочу создать полное учебное пособие по созданию мобильного приложения для доставки, ориентированного на клиента. Так что помогите мне выбрать лучший стек, прежде чем мы начнем кодировать. Теперь здесь я обычно выбираю полный доступ. Я понял, что это работает для меня очень, очень хорошо. И здесь вы можете выбрать модель. Я обычно остаюсь на последней модели, которая на момент записи этого видео — GPT 5.5. И я обычно оставляю ее на высоком уровне интеллекта, если у меня нет другой причины выбирать другой режим.
Еще одна важная вещь, которую вы хотите сделать, это убедиться, что вы используете режим планирования. Так что, если вы нажмете здесь, вы можете выбрать этот переключатель, чтобы включить режим планирования. Но гораздо более простой способ — нажать Shift Tab. Итак, мы собираемся выполнить эту подсказку. И посмотрим, что нам скажут. Хорошо. И вот что мы получили. Он говорит здесь: Я выбираю Expo, React Native, Typescript и Superbase. Так что ваши текущие предпочтения правильные для этого учебного пособия, потому что они лучше всего соответствуют цели. Настоящее мобильное приложение, которое может работать в симуляторе iOS, использует нативные мобильные шаблоны, остается дружелюбным к новичкам и по-прежнему имеет чистый путь к производству.
Хорошо, это рекомендуемый стек: приложение, маршрутизация, бэкенд, локальное состояние, доступ к данным и среда выполнения. Теперь, быстро взглянув на эту сравнительную таблицу, вы можете увидеть различные стеки и степень их соответствия тому, что мы пытались сделать. Здесь у нас React Nex.js JS, который является веб-приложением, и соответствие здесь среднее, и это быстрое создание, простая интеграция Superbase, но это учит веб-приложение для доставки PWA, а не настоящее мобильное приложение, и это абсолютно верно, потому что мы на самом деле не будем создавать настоящее мобильное приложение. Здесь у нас Flutterflow без кода, также среднее соответствие, хорошо для быстрого визуального создания и настройки Superbase, но слабее для учебного пособия по кодированию и отладке, ориентированного на Codeex, и я знаю по опыту, что вы определенно можете создать приложение, используя Flutterflow. Но в этом видео я, очевидно, хочу создать что-то, используя настоящий код, используя настоящий агентский рабочий процесс ИИ. Если вы посмотрите на эту последнюю строку, у нас есть Expo React Native, и это самое высокое соответствие: нативное мобильное ощущение, быстрая итерация, поддержка симулятора iOS, TypeScript, сильная совместимость с Superbase и меньшая нагрузка на настройку, чем у чистого React Native. И этот стек на самом деле используется практически всеми, кто хочет действительно простой, без лишних хлопот стек, без необходимости разбираться со всеми примитивами и всеми мелкими деталями и тому подобным. И поэтому, с моей точки зрения, это лучший подход, если вы хотите создать настоящее нативное мобильное приложение. И здесь он говорит нам, почему Expo выигрывает. Expo дает нам идеальное место для обучения. В собственных документах React Native говорится, что большинство новых приложений React Native выигрывают от использования фреймворка, такого как Expo, потому что он предоставляет библиотеки маршрутизации и готовые к производству инструменты, не заставляя вас сразу же управлять нативными файлами. И это отличный, отличный подход.
Хорошо, теперь, когда стек ясен, я хотел бы иметь визуальную архитектуру или визуальное представление приложения, прежде чем я продолжу и начну его создавать. Это будет изображать поток экранов и модель данных, и мы сможем увидеть, совпадают ли они правильно, чтобы у каждого экрана была четкая причина для существования. Создайте визуальную архитектуру и архитектуру сущностей для дружелюбного к новичкам учебного пособия по мобильному приложению для доставки Expo. Включите все эти вспомогательные системы, минимальную версию 1, сущности, ограничения. Правильно? Исключите все это. Нам ничего из этого не нужно. И я также хочу предварительно отметить, что он использует эту генерацию изображений. Мы все еще в режиме планирования. Мы собираемся запустить это. Здесь мы хотим создать два обучающих растровых изображения с помощью встроенного изображения и рабочего процесса. У нас есть визуальная архитектура и архитектура сущностей. Итак, мы хотим показать поток клиентского приложения как связанные узлы экрана. Очень, очень важно. А для архитектуры сущностей мы хотим показать различные сущности, верно? Так что, знаете ли, пользователи, профили, карты, элементы корзины, рестораны, элементы меню, все это, что будет использоваться в процессе сборки. Здесь у нас есть план тестирования. Так что я собираюсь отправить это. И мы должны увидеть некоторые макеты, показывающие нам визуальную архитектуру, а также архитектуру сущностей.
Хорошо. Итак, он создал эти два макета. Хорошо. Это наша визуальная архитектура, и, как вы можете видеть, она включает рабочий процесс Codeex, передачу Google Stitch, приложение Expo React Native с различными элементами, а затем у нас есть поток экранов клиентского приложения. Так что это основной поток экранов. Я обычно не включаю это. Просто в этом учебном пособии я хотел показать вам различные аспекты приложения. И если мы нажмем здесь, мы можем увидеть, что здесь у нас приложение для доставки еды Expo React Native. Это архитектура сущностей. Хорошо. И это различные сущности, которые будут представлять различные концепции в приложении. Правильно? Так что профиль пользователя, знаете ли, ресторан, элемент меню, модификатор меню, корзина, элемент корзины, заказ, элемент заказа, событие статуса заказа, все различные вещи, а также их отношения. Так что, как вы можете видеть, есть куча линий, куча стрелок, которые используются для представления различных отношений. И, как вы можете видеть, один и n, это означает отношение один ко многим, верно, потому что ресторан может иметь несколько элементов меню в своем меню, по сути, а элемент меню может иметь модификатор меню, а также, знаете ли, пользователь может иметь несколько местоположений, корзина может иметь несколько элементов корзины и тому подобное, и есть также некоторые межсвязи, так что ресторан может иметь несколько элементов меню, но элемент меню также связан с элементом корзины, верно, потому что вы можете иметь один элемент меню, представленный как несколько элементов корзины здесь. И здесь у нас также есть различные заказы. И он проделал действительно хорошую работу, потому что он не только отображает все различные сущности, но и группирует их вместе с разными цветами. Так что у нас есть светло-голубой, своего рода светло-зеленый, у нас также есть этот красноватый. И поэтому, посмотрев на эти два диаграммы, я сразу же получил гораздо лучшее понимание того, какое приложение мы создаем, особенно эта диаграмма здесь. Я хочу видеть поток. Я хочу видеть объем приложения. Я хочу понять номер один, что строится в этом приложении, версия 1. И самое главное, даже более важное, что не строится. Правильно? Так что, как вы можете видеть, исключено из версии 1. У нас есть куча вещей, таких как обмен сообщениями, возможно, куча других вещей, но я хочу видеть, что на самом деле включено, верно? Так что, просмотр ресторанов, поиск, фильтр, детали ресторана, элементы меню, все это. И это супер, супер важно, потому что многие люди просто хотят впихнуть как можно больше функций в эту первую версию. И это определенно не то, что вы хотите делать, особенно когда вы используете агентское кодирование ИИ, верно? Вы хотите начать с простого. Вы хотите начать поэтапно.
На данном этапе у нас есть общее представление о том, какое приложение мы хотим создать. У нас есть правильный стек. У нас также есть модель данных. И поэтому нам нужно, чтобы Codex проверил фактический проект и превратил это в поэтапный план реализации. Правильно? Ключ в том, чтобы избежать создания всего приложения за один большой проход. Мы будем определять наименьший полезный вертикальный срез. Решать, как будет использоваться каждый этап. Решать, как будет тестироваться каждый этап, и видеть, есть ли какие-либо возможные проблемы, прежде чем они превратятся в проблемы отладки. Итак, что мы хотим сделать, это проверить этот проект и предложить дружелюбный к новичкам план реализации для полного приложения для доставки Expo React Native. Приложение должно включать просмотр ресторанов, поиск, все эти вещи. Мы хотим использовать Superbase для базы данных O и персистентности, и мы настроим это позже. И мы будем использовать симулятор iOS в качестве основной цели проверки.
Хорошо, так что на данном этапе мы не хотим ничего редактировать. Хорошо, я собираюсь перейти в режим планирования. Итак, он вернулся с этим планом: дружелюбный к новичкам план реализации приложения для доставки Expo. Это текущая структура проекта. Она пуста, и она также не отслеживается git. И это еще одна вещь, которую нам определенно нужно убедиться, что мы будем использовать. Нет файлов приложения, ничего. Так что вероятные точки входа после скаффолдинга будут такими. Мы будем использовать Expo Router, потому что текущий скаффолд Expo поддерживает маршрутизацию на основе файлов с TypeScript и напрямую интегрирует рабочие процессы симулятора iOS Expo. И это наш существующий стек, который мы уже решили ранее. И поэтому здесь у нас самые безопасные этапы реализации: скаффолдинг плюс базовый симулятор, Superbase O, все это. И поэтому теперь нам нужен настоящий мобильный проект. Нам нужно что-то, что просто работает, чтобы мы могли убедиться, что все, что мы построили поверх этого, будет работать. И поэтому мы будем скаффолдить чистый проект Expo с TypeScript и Expo Router. Так что у приложения есть простая основа, верно? Эта часть не броская. Это ничего особенного, но это важно. Это очень важно. Как только структура проекта и команды запуска будут известны, каждая последующая функция будет иметь стабильное место для размещения. Настройте проект Expo React Native для приложения доставки. Хорошо. Сначала проверьте текущую папку. Если нет подходящего скаффолда проекта Expo, скаффолдите один с TypeScript и Expo Router, и я также добавлю шаг, чтобы он создал репозиторий git, и я добавил это внизу здесь. Хорошо. И поэтому мы собираемся остаться в режиме планирования, но на этот раз мы собираемся выполнить это.
Хорошо. Итак, вот план, и быстро просмотрев сводку. Папка пуста, и это не репозиторий git. Пока нет подходящего проекта Expo, и это нормально. Я прокручу вниз и быстро просмотрю критерии приемки. Проект содержит все это, и я хочу убедиться, что мы не будем делать никаких дальнейших шагов здесь. Никакого Superbase, ничего подобного. Я хочу убедиться, что он не создает, не добавляйте Superbase. Отлично. Потому что это то, что мы сделаем позже. И поэтому это выглядит хорошо. Давайте реализуем это.
Хорошо. Итак, он закончил, и он говорит здесь: реализован скаффолд Expo и первоначальная проверка. Создано свежее приложение Expo React Native TypeScript с использованием официального шаблона вкладок Expo Router. Здесь основные точки входа находятся здесь. Теперь он говорит, что симулятор iOS доступен, и Expo Go установлен на iPhone 17, но основной симулятор истек. Хорошо. И он фактически запускает симулятор прямо здесь. И поэтому, если мы нажмем здесь, и неясно, загружается ли приложение. И поэтому это происходит все время. И поэтому мы выйдем из симулятора и скажем ему запустить его снова. Перезапустите симулятор и запустите скаффолд-приложение. И посмотрим, сможет ли он это сделать.
Хорошо. Итак, теперь он смотрит на снимок экрана симулятора и пытается выяснить, установлено ли приложение, работает ли оно должным образом. И это важный шаг, потому что если мы сможем заставить это работать, то ничего не будет работать с этого момента, верно? Любые будущие шаги практически бессмысленны. Итак, у него все еще были некоторые проблемы с запуском этого приложения. И поэтому он сообщает нам, что проблема, похоже, специфична для запуска приложения основного симулятора на этой загруженной среде выполнения iPhone 17. И поэтому он попробует другое новое устройство симулятора. И теперь он сообщает нам, что второе новое устройство симулятора показывает тот же тайм-аут после установки Expo Go. И, как вы можете видеть, если мы нажмем здесь, на самом деле это работает. Это теперь работает на новом устройстве. Так что посмотрим, сможет ли он это увидеть. Так что я остановлю это здесь и скажу ему, что приложение загружается.
Хорошо. Итак, он признал то, что я ему сказал, и говорит, что, знаете ли, поскольку сам Expo Go открывается нормально, мы избежим другого пути и сделаем что-то другое, и это важно, потому что, знаете ли, на протяжении всей разработки вы будете сталкиваться с этими маленькими, знаете ли, причудами, этими маленькими ухабами, если хотите, и вам придется время от времени брать на себя управление, делать что-то, говорить ему, что это сработало, и тогда он это усвоит и продолжит. Итак, в нашем симуляторе мы можем нажать на Expo Go, и у нас есть этот сервер развертывания, и это то же самое. Локальный хост — это 127.0.0.1. Это то же самое. И поэтому, если мы нажмем здесь, мы должны увидеть все, но мы получаем здесь еще одну ошибку. Он говорит здесь: не удалось подключиться к серверу разработки. Так что позвольте мне проверить, что это такое. Скопирую это и вставлю. Так что этот красный экран означает, что Expo Go открыл сервер, открыл URL проекта, но Metro недоступен из симулятора по этому хосту:порту. Я проверяю, жив ли еще сервер разработки. Посмотрим. И это незначительная проблема. Это не серьезная проблема. Это в основном сетевая проблема, которая будет решена относительно легко. И поэтому теперь, когда мы запустим это и нажмем на наше приложение для доставки, оно откроет проект. Теперь нет никаких проблем, нет ошибок, ничего подобного. И у нас есть даже две вкладки. У нас есть вкладка 1 и вкладка 2. Итак, на данном этапе мы знаем, что по мере продолжения разработки мы не будем иметь дело с проблемами стека, инфраструктурными проблемами, потому что это наш дымовой тест. И вы определенно хотите убедиться, что вы сделаете это рано, верно? Не позже, потому что позже у вас могут быть другие проблемы. И поэтому теперь, когда пустое скаффолд-приложение работает, мы можем продолжить, создавая наши UI-макеты.
Хорошо. Codeex может превратить наш объем приложения, карту экранов, модель сущностей и мобильные ограничения в точный запрос для Google Stitch. И это дает Stitch правильный контекст, прежде чем мы начнем генерировать экраны. Запрос должен описывать полный путь клиента, ключевые состояния приложения, визуальное направление и границы, а также все, что включено в первую версию приложения. Вот наш запрос на создание другого запроса на создание запроса для Google Stitch, потому что мы хотим, чтобы Codeex создал этот запрос. Мы не хотим переходить в Google Stitch и начинать набирать запрос по памяти или, что еще хуже, набирать что-то очень, очень простое. Создайте готовый к Google Stitch запрос для клиентского мобильного приложения для доставки еды. Хорошо. Используйте этот объем продукта и т. д. и т. д. Так что я перейду в режим планирования на случай, если он захочет что-то спросить у меня, и я отправлю это.
Хорошо. Теперь взгляните на этот запрос здесь. Это монстр запроса. Посмотрите, какой он длинный. Разработайте отполированное клиентское мобильное приложение для доставки еды для iPhone. Теперь взгляните на этот запрос. Он состоит из пяти частей: визуальный стиль, направление компонентов, ограничения. Не разрабатывайте приложение для водителя, вывод. А затем у нас есть контрольный список вариаций. Хорошо. Четко ли он охватывает просмотр? Чувствуется ли, что это для нас? И поэтому мы собираемся скопировать это. И теперь мы перейдем в Google Stitch и разработаем здесь фактические UI/UX экраны.
Итак, я здесь с загруженным Google Stitch. И это наш главный экран. И если вы никогда не использовали Google Stitch раньше, у меня на самом деле есть видео, которое вы увидите прямо там. Но, по сути, это система ИИ, которая генерирует UI, UX, экраны, макеты и тому подобное. И есть различные способы ее использования. Вы можете создать свой собственный запрос и ввести его здесь, но я бы не рекомендовал это. Вы хотите создать очень, очень конкретный запрос, который говорит Google Stitch, какие вещи вы хотите видеть, как вы хотите их видеть, и какие вещи вы не хотите видеть. Вы хотите иметь ограничения, ограничения, очень, очень конкретные, очень, очень важные. Итак, мы вставим этот запрос сюда. У нас здесь выбрано приложение. Мы также можем включить загрузку файлов, URL веб-сайта. Мы можем улучшить запрос. Нам на самом деле не нужно улучшать этот запрос, потому что это запрос, который мы не генерировали. Это что-то, что сгенерировала наша система. Так что вы не хотите изменять этот запрос. Это надежный запрос. Теперь здесь вы также можете выбрать некоторые предустановки. И здесь у нас есть модель. Так что три вспышки, размышления, редизайн или идеи. Хорошо. Теперь вы хотите начать с трех вспышек. Вы также можете использовать размышления. Я доволен просто тремя вспышками. И мы собираемся выполнить это и посмотреть, что получится.
Итак, это цветовая схема, которую он выбрал для наших макетов, которую он будет использовать. Так что, на мой взгляд, это нормально. Хорошо. Итак, он все еще генерирует экраны, но один из них уже сгенерирован. И это наш экран меню, где мы можем посмотреть фактическое блюдо. И он выглядит довольно хорошо. Классический чизбургер, цена, вы можете выбрать, какой чизбургер. И теперь мы можем увидеть остальные экраны. И, как вы можете видеть, все они следуют этой цветовой схеме. Этот красновато-черный. Эти цвета здесь сероватые. Это контур. Это кнопки, метки. Вот как будет выглядеть поиск. Текстовое поле, насколько я понимаю, выглядит довольно прилично. У нас здесь экран статуса, подтверждение заказа, статус доставки, главный экран с доставкой по адресу. Итак, это окончательный список экранов. У нас есть домашняя страница, просмотр, детали ресторана, оформление заказа, настройка элемента и отслеживание заказа. И это хорошее начало для нашего приложения. Первоначальные, так сказать, необходимые экраны, которые должны быть у приложения, прежде чем мы добавим больше и больше экранов по мере добавления большего количества функций.
Теперь Stitch имеет множество функций. Вы можете делать много вещей. Например, вы можете выбрать это, нажать здесь, вы можете сделать мгновенный прототип, вы можете сделать вариации, вы можете перегенерировать тепловую карту, изменять всевозможные вещи, но я вполне доволен, на мой нетренированный взгляд, это выглядит довольно хорошо. И поэтому на данном этапе я хочу, чтобы Codeex импортировал дизайны или чтобы Stitch экспортировал дизайны в Codeex. Хорошо. И как это сделать? Ну, вы просто нажимаете "Экспорт" здесь, и вы можете выбрать, вы хотите сначала выбрать все свои экраны. Command A. И теперь вы можете экспортировать его несколькими способами. AI Studio Figma MCP в виде ZIP-архива, копировать в буфер обмена, краткое описание проекта или создать приложение Stitch React. Теперь мы хотим выбрать MCP. В первый раз вам придется настроить MCP. Так что, если вы нажмете здесь, он расскажет вам, как настроить MCP. Вы хотите выбрать своего клиента. Мы выберем Codeex. И теперь он дает вам инструкции. Но самое главное, вы получаете этот API-ключ. Теперь мой Codeex уже настроен, верно? Так что, если я нажму Command, запятая, и перейду в серверы MCP здесь, у меня уже есть Stitch где-то здесь. И поэтому он не включен, и это нормально. Но даже если у вас его нет, вы можете просто вернуться и сказать Codeex, чтобы он настроил его. Очень легко. Вернитесь в Stitch. И что вы можете сделать, это просто скопировать это, вставить это и сказать: "Эй, настройте этот сервер MCP". Так что в первый раз, когда вы это сделаете, он настроит его. Но для меня он должен сказать: "Эй, у вас уже есть". И поэтому он проверит, установлен ли ключ, все настроено правильно. Так что давайте сделаем это. И это, безусловно, самый простой способ настроить серверы MCP. И поэтому он говорит мне, что сервер MCP Stitch уже присутствует, но он отключен. Так что мы собираемся включить его. И он включил существующий сервер MCP Stitch здесь. Так что, если мы снова нажмем Command, запятая, перейдем в серверы MCP, у нас есть он здесь. Он все еще отключен. И это потому, что, ну, теперь он включен. Так что вы можете захотеть сделать это на всякий случай. И поэтому, как только мы это сделаем, следующее, что нам нужно сделать, это получить Codeex для импорта всех наших дизайнов из Stitch. И к счастью, Stitch может предоставить нам действительно хорошие инструкции для этого. И здесь мы были в разделе настройки MCP. Что вы хотите сделать, это выйти и нажать "Копировать запрос". Вы скопируете этот запрос и вернетесь в Codeex и вставите его. Итак, у вас есть эти инструкции Stitch: Получите изображения и код для следующего экрана проекта Stitch. Хорошо, это проект и все эти экраны. Так что я перейду в режим планирования. Я собираюсь запустить это. И на самом деле, это тип запроса, который вам не нужно делать в режиме планирования, но просто по привычке я обычно люблю переходить в режим планирования на случай, если он захочет что-то спросить, подтвердить что-то, и даже если ему нечего спрашивать, это не тратит много времени. Это просто дает мне дополнительное спокойствие. Хорошо. И поэтому здесь план. Мы будем скачивать артефакты Stitch. Теперь, прежде чем я нажму "Отправить", я хочу добавить еще один запрос, который сделает что-то полезное с этими артефактами. Так что я нажму Escape. Я не буду запускать это. И я буду использовать следующий запрос, чтобы получить эти артефакты. Хорошо. Итак, проверьте этот экспорт проекта приложения для доставки и артефакты передачи Google Stitch перед редактированием файлов. Передача Stitch может включать все эти задачи. Определите, где должны находиться эти артефакты дизайна в настройке проекта или документируйте ограничения. Не редактируйте файлы приложения пока. Не добавляйте Superbase. И это правильно импортирует дизайны, которые у нас есть в Stitch, и объединит их с тем, что у нас есть в нашем приложении. Так что я собираюсь запустить это.
Теперь он знает о вещах Stitch, потому что это был предыдущий запрос. И поэтому, когда мы объединим оба этих запроса, он действительно сделает что-то полезное с артефактами Stitch, с макетами Stitch. Итак, артефакты дизайна имеют четкое место под Stitch, прежде чем они будут использованы для реализации. Соединение MCP задокументировано. Руководство по реализации, план артефактов дизайна, все. Так что давайте запустим этот запрос.
Итак, он закончил работу, реализовал передачу Stitch плюс первый срез UI Expo Delivery с макетами данных. Так что это первый UI UI-кусок. Так что он добавил эти исходные файлы передачи Stitch, заменил стартовые вкладки Expo, добавил мои экраны потока клиента. Так что это момент истины. Давайте запустим это приложение. И прямо здесь нет приложения. Приложения не работают. Так что нам нужно запустить наш сервер. Так что давайте запустим сервер Expo. И теперь, как вы можете видеть, приложение работает на этом сервере разработки. Так что мы собираемся открыть этот проект. И это наше приложение. Хорошо. Это главная страница. У нас есть экран просмотра. У нас есть разные вещи, которые мы можем выбрать. Мы можем прокручивать лучшие рейтинги. И пока ничего не работает. Мы можем изменить адрес, знаете ли, мы можем искать. Это просто макеты. Выглядит очень хорошо. У нас здесь экран заказа, подготовка. Давайте перейдем к просмотру. И давайте сравним это с макетами, которые мы изначально сгенерировали в Stitch. Итак, вот мы в Stitch. И цель состояла в том, чтобы создать очень близкие макеты. И они выглядят очень близко ко мне. Они выглядят хорошо. Я имею в виду, они выглядят, я не знаю, 90%. Они выглядят 95%. Они выглядят очень похоже. Я имею в виду, да, эта вещь здесь имеет значки, и мы можем исправить это позже. Популярные. Теперь у нас нет недавно просмотренных ресторанов поблизости. У нас нет этого вида корзины. Ну, мы увидим это позже, когда сможем. У нас есть этот поток. Можно добавить в корзину. О да. У нас есть. Посмотрите на это. Кроме того, это 17,99 доллара. Должно быть 14,50 доллара. Хорошо. Так что это просто случайные данные, знаете ли. Если я добавлю это снова, два элемента, но это должно быть 14,50 доллара. Так что это должно быть, что? 29 баксов. И по какой-то причине он показывает 32. Хорошо, мы исправим это позже. Давайте добавим это. Хорошо, я нажму здесь. И здесь не указана цена. Мы можем удалить это. Да, это работает. Ах, из-за платы за доставку и сервисного сбора. Вот почему цена отличается. Так что, если мы добавим 14,50. Да, из-за всех сборов. Так что, если мы нажмем здесь, 1,99 доллара, 150. Так что даже это есть. Я имею в виду, выглядит довольно хорошо. И это макет данных меню. Бэкенд Superbase появится позже. И поэтому я хочу сделать сейчас, это закончить все страницы. Вставить все доступные макеты, потому что сейчас у нас только два. И если мы перейдем в Sketch, у нас есть просмотр, заказ, профиль. И поэтому мы хотим убедиться, что он включает все макеты. Продолжайте включать все макеты. Просто простая инструкция здесь, потому что у нас уже был более сложный запрос раньше. Так что он должен точно знать, что делать. Так что, когда вы говорите, что приложение должно отображать все макеты Stitch, в каком направлении вы хотите для этого прохода? Не галерея макетов, а мы хотим заменить экраны приложений. Мы хотим перестроить UI, чтобы он соответствовал. Вот что мы хотим. Пять макетов Stitch в виде реальных экранов Expo React Native, а не в виде образцов скриншотов. Это именно то, что мы хотим.
Хорошо. Итак, он закончил и реализовал проход UI Expo React Native, соответствующий макетам Stitch. Хорошо. Так что он обновил все это. И поэтому теперь, если мы откроем наш симулятор и нажмем здесь, мы, надеюсь, увидим это приложение работающим. Так что мы можем нажать здесь. Это приведет к загрузке проекта. Вот что мы видим. Теперь это называется "Главная". И мы все еще не видим всех вкладок, верно? Потому что, если мы вернемся к нашему Stitch, у нас есть просмотр, заказ, профиль. Хорошо, у нас есть что-то внизу. Скопируйте это. На главной странице навигационная панель должна включать следующие вкладки. Ссылки на другие экраны. В нашем приложении есть только "Главная" и "Заказы". Убедитесь, что отображаются все вкладки, и они ссылаются на соответствующие экраны. Давайте запустим это.
Итак, здесь ему нужно обновить панель вкладок. Так что это не должно занять много времени. Это должно быть быстрое изменение. Хорошо. Реализована четырехвкладочная нижняя навигация в стиле Stitch. Давайте посмотрим. И вот она. Просмотр, заказы, профиль. Посмотрите на это. Выглядит очень красиво.
Хорошо. Итак, теперь, когда наше приложение работает, следующий шаг — подключить наш бэкенд. И нашим бэкендом будет Superbase, который является очень проверенным бэкендом, который используется тысячами, сотнями тысяч и даже миллионами приложений по всему миру. Теперь мы не будем полностью настраивать Superbase. Мы попросим Codeex сделать это за нас, но нам все еще нужно сделать пару вещей в нашей панели управления Superbase. Итак, я здесь, в своей панели управления Superbase. И, как вы можете видеть, у меня есть куча проектов здесь, которые представляют различные приложения, которые я создал за все время. И поэтому нам нужно сделать, это создать здесь новый проект. И мы просто назовем этот проект "Приложение для доставки". Codex Приложение для доставки. Просто введу здесь пароль. Сгенерирую что-нибудь. На самом деле не имеет значения. И мы собираемся создать этот проект. Итак, этот проект создается прямо сейчас, как вы можете видеть. Теперь мы еще не закончили, потому что мы хотим, чтобы Codeex настроил весь наш Superbase и сконфигурировал все, без того, чтобы нам приходилось делать практически ничего. И для этого нам нужно перейти в настройки учетной записи, предпочтения учетной записи, и нам нужно нажать на токены доступа, и нам нужно создать новый токен. Так что я собираюсь назвать его Codex Приложение для доставки. Сгенерирую этот токен. И теперь у нас есть этот сгенерированный токен. Я собираюсь скопировать его. Далее я спрошу Codex, какую конфигурацию мне нужно настроить для нашего сервера MCP для этого недавно созданного проекта. Это зависит от различных настроек MCP. Некоторые требуют этих значений, другие требуют этих параметров. И поэтому мне нужно знать, что им нужно. Я знаю, что, вероятно, потребуется наш идентификатор проекта, а также токен доступа. И поэтому давайте подождем, пока Codeex найдет его и точно скажет нам, что нам нужно для официального сервера MCP Superbase. Вам в основном нужен URL-адрес сервера MCP. У нас есть это, идентификатор проекта. Это то, что нам нужно предоставить, режим доступа, а не только чтение, группы функций. Мы пропустим все это, аутентификация, токен доступа Superbase. И это практически все. И поэтому я дам ему наш токен доступа. Токен доступа — это это. И я собираюсь получить идентификатор проекта. И на самом деле, вы можете просто скопировать все это. Этот URL проекта здесь. Скопируйте все это. И он выяснит все это. Я вставлю это. И я просто скажу URL проекта здесь. Настройте сервер MCP. Опять же, вы никогда не хотите вставлять конфиденциальные токены или ключи в свой чат. Это не хорошая практика, но мы делаем демонстрационное приложение, и я скоро отключу этот токен доступа, и поэтому я в порядке, делая это.
Итак, теперь мы настроили сервер MCP Superbase в моей локальной конфигурации Codeex. Это текущая настройка: включено — истина, все в порядке. И даже если мы нажмем Command, запятая, и перейдем в серверы MCP и выберем это, вы можете увидеть, что это полностью настроено. У нас есть токен здесь, и у нас есть идентификатор проекта здесь. Так что теперь я на 100% уверен, что это работает. Но всегда хорошая идея протестировать, чтобы убедиться, что он может подключиться, и мы подключаемся к правильному проекту. И поэтому я собираюсь сказать: используя сервер MCP Superbase, перечислите наши таблицы. И если мы перейдем в нашу панель управления Superbase здесь и перейдем в наш редактор таблиц, вы можете увидеть, что у нас нет таблиц, верно? Это совершенно новый проект Superbase. И поэтому мы хотим, чтобы Codeex нам это сказал. Мы не хотим, чтобы Codeex говорил нам: "Эй, я не могу получить доступ к вашей базе данных" или перечислял кучу таблиц. И он говорит здесь: я не могу перечислить таблицы из Superbase, но MC не загружены в этой сессии. Хорошо. Так что давайте вернемся сюда. Сервер MCP. Давайте включим, отключим и перезапустим. И посмотрим, сработает ли это. Теперь он больше не выдает нам сообщение об ошибке. Он говорит, что Superbase MCP подключен. Текущие общедоступные схемы таблиц: нет. И это именно то, что вы хотите видеть. Вы хотите убедиться, что мы подключены, прежде чем мы начнем, знаете ли, создавать суперсложную схему, потому что вы не хотите, чтобы произошло, это настроить какой-то другой проект, возможно, предыдущий проект, который вы использовали для другого приложения, а затем сложить всю эту новую схему в тот старый проект и создать большой беспорядок. Хорошо, теперь мы знаем, что все работает, и мы готовы перейти к следующему шагу.
Теперь, когда у Codeex есть детали проекта Superbase, которые ему нужны, мы можем правильно определить бэкенд. Здесь приложение получает реальные таблицы или политики и даже начальные данные вместо только локальных макетов. И вот запрос: Помогите мне настроить Superbase для приложения доставки Expo. Сначала проверьте текущий проект и предложите и реализуйте только минимальную настройку Superbase, необходимую для потока учебного пособия. Правильно, мы будем использовать аутентификацию по электронной почте и паролю, все эти таблицы, общедоступное чтение, таблицы, принадлежащие пользователю, базовые политики RLS, начальные данные и кучу других вещей. Так что я перейду в режим планирования на случай, если он захочет что-то уточнить и проверить что-то со мной для учебных пособий. Электронная почта и пароль или какое поведение локальной разработки должен использовать план? Нет подтверждения по электронной почте, более быстрый поток для новичков, пользователи регистрируются и могут использовать или подтверждать по электронной почте. Давайте просто сделаем без подтверждения по электронной почте. Это нормально. Очевидно, для производственного приложения у вас могут быть другие требования, и это может включать подтверждение по электронной почте. Но здесь я обычно не делаю подтверждение по электронной почте. Я хочу что-то быстрое и простое, чтобы мы могли, знаете ли, начать и очень, очень быстро приступить к работе. Хорошо. Итак, у нас есть эта минимальная минимальная настройка Superbase для учебного пособия по доставке Expo. Но мы собираемся расширить это. Все выглядит хорошо. План тестирования, примечания к реализации, ключевые изменения, сводка, конфигурация, настройка Superbase только для потока учебного пособия. Все это. Так что мы скажем "да".
Хорошо. Итак, он реализовал минимальную настройку Superbase. Что изменилось? Добавлены зависимости Superbase. Все эти миграции применены, начальные данные для ресторанов. Четыре элемента меню. 11 модификаторов меню. Если мы перейдем в наш Superbase и обновим это, мы должны увидеть здесь созданные таблицы. Хорошо. И вот таблицы: адреса, элементы корзины, корзины, элементы меню, модификаторы меню, элементы заказа, все эти вещи, профили. У нас есть профиль здесь, и он связан с пользователем. И поэтому, если мы перейдем в O и перейдем в пользователей здесь, у нас должен быть пользователь. Хорошо. Хорошо. Итак, здесь у нас есть этот пользователь для учебного пособия по доставке, и этот идентификатор связан с этим профилем, потому что эта таблица пользователей доступна только для чтения. Вы не можете изменять, только создавать пользователей, а затем связывать их с другой таблицей в вашей общедоступной схеме. И поэтому теперь, когда Superbase готов, мы можем подключить наше приложение Expo к нему самым безопасным способом. Первая веха — это не весь каталог. Это проверка среды клиента, переменных среды и всех сессий, все работает. Перейдите в режим планирования. И мне очень, очень нравится режим планирования для этих запросов. Всякий раз, когда я делаю что-то новое, такое как настройка Superbase, или я делаю Stitch, я делаю дизайн UI. Другими словами, если я меняю направление, если я делаю другую часть приложения, я определенно хочу быть в режиме планирования, потому что мы делаем что-то новое. Мы не продолжаем. Если я продолжаю, и Codeex понимает, что я пытаюсь сделать, есть, знаете ли, меньшая потребность в режиме планирования. Но если я меняю направление, я пробую что-то новое, я добавляю совершенно новую функцию, я работаю с API, я работаю с конфигурацией, я работаю с чем-то еще. Режим планирования имеет первостепенное значение, верно? Итак, подключите приложение доставки Expo к Superbase и добавьте базовую или оболочку. Добавьте настройку клиента Superbase, добавьте регистрацию, вход, выход, все эти вещи.
Итак, он правильно говорит нам, что клиент и пакеты Superbase уже присутствуют. Я проверяю документацию README, и у него нет вопросов к нам, потому что он как бы в курсе, верно? Он все равно сделает много вещей. Добавьте контекст провайдера O, который оборачивает приложение вместе с провайдером корзины. Введите базовый слой O Superbase вокруг существующего приложения доставки Expo, сохраняя при этом просмотр ресторанов, оформление заказа в корзине и отслеживание заказов на основе макетов пока. Мы собираемся отправить это. Он реализовал оболочку Superbase O без замены макета потока доставки. Нам все еще нужно заменить это. Мы сделаем это позже. Один шаг в панели управления все еще имеет значение. Отключите подтверждение по электронной почте в настройках O Superbase для плавного потока регистрации в симуляторе.
Итак, мы вернемся в Superbase. Мы перейдем в аутентификацию. Мы перейдем в поставщики входа и нам нужно убедиться, что мы отключим это подтверждение по электронной почте. Мы сделаем это, и это сделает весь поток намного плавнее. Итак, теперь наше приложение запущено здесь. Мы собираемся открыть, мы собираемся открыть симулятор. Обновим наше приложение. Нажмем это. И вот наше приложение работает. Нажмем на приложение. Теперь давайте попробуем наш поток входа. Итак, давайте спросим Codeex. Дайте мне имя пользователя. Используйте эту тестовую учетную запись. Я скопирую это. Перейду обратно в приложение. Вставлю это. И скопирую пароль. Укушу это. Войти. И вот мы вошли. Это наша сессия Superbase. Да, мы можем сохранить ее. Я думаю, авторы подключили макеты заказов, все это так, что поток работает. Это просто много из этого просто макет, верно, как начальные заказы, и это нормально, это обычно так, как я создаю приложения, я заполняю их данными, чтобы я мог видеть, как они отображаются. Теперь, если мы перейдем в наш Superbase и перейдем в наш, давайте посмотрим, аутентификация, обновим это, у нас есть этот пользователь byte-tutorial, который мы использовали, и поэтому теперь приложение начинает переходить от макетов к реальным данным. Каталог ресторанов — это первая веха бэкенда, потому что она очень заметна, ее легко тестировать и она центральна для остальной части приложения. Мы начинаем с основного экрана обнаружения, карточек ресторанов, полезных деталей, поиска по названию или кухне, состояний загрузки, пустоты и ошибок, и приложение должно начать ощущаться как настоящее приложение для доставки в этот момент. И это подсказка, которую мы хотим использовать: реализуйте веху поиска и просмотра ресторанов в бэкенде Superbase для приложения доставки Expo. И у нас есть наши ограничения, верно? Потому что мы хотим идти поэтапно, заменять только список данных, все эти рестораны Superbase из Superbase, верно? Вместо просто макетов данных, которые жестко закодированы или что-то в этом роде, мы хотим показать реальные данные. Ручные проверки симулятора. Хорошо. Поиск суши, бургеров, итальянской кухни, видимые результаты. Хорошо, мы проверим это.
Здесь мы реализовали веху поиска и просмотра ресторанов в бэкенде Superbase. И если вы развернете это, вы увидите, что он фактически тестирует симулятор, верно? Так что, если вы посмотрите сюда, у вас есть снимок экрана симулятора. Так что он фактически тестирует его, делает снимок экрана и убеждается, что он выглядит правильно, что все работает, что на самом деле довольно круто. И поэтому теперь давайте протестируем его сами, верно? Давайте откроем это. Давайте перезапустим его. Перезапустим приложение. Запустим это снова. Вот приложение работает. И вот оно. Хорошо. Итак, давайте, давайте. Итак, у нас здесь суши. И это должно исходить из Superbase. И если я введу суши, все еще не работает. Но я думаю, это этот фильтр. Нет, этот фильтр тоже не работает. Так что, куча вещей, которые нам нужно сделать. Это не работает. Так что многое не работает. Позвольте мне, давайте посмотрим, каковы были планы. Поиск суши, фильтры, видимые, ручной просмотр, загрузка ресторанов Superbase. Давайте сначала проверим, действительно ли они поступают из таблиц Superbase "рестораны". И у нас есть суши-дзен, японская морепродукты. Перейдем к нашим сумкам, здесь написано "японские морепродукты, роллы и свежие сашими", рейтинг 4.9, 20-35 минут, 1,99 доллара за доставку, это правильно, кроме того, что поиск не работает. Если мы подойдем сюда, нажатие Enter ничего не делает, и эти фильтры не работают. Давайте перейдем к просмотру. Давайте введем суши. На самом деле это работает. Японские суши премиум. Просмотр работает. Пицца, средиземноморская, здоровая. Хорошо, это работает. Суши. Да. Так что это фильтрует это и это. Так что, если я выберу японскую кухню, да, это работает. И это больше фильтров. Категории, время доставки. Хорошо. Так что эта часть работает. Главная страница не работает. Исправим позже.
Теперь на данном этапе мы хотим добавить категории, фильтры, избранное и недавно просмотренные, потому что приложение для доставки кажется скудным, если экран просмотра — это просто список. Так что этот проход добавляет функции обнаружения, которые делают приложение более плотным, не создавая новой продуктовой области. Правильно? Так что мы будем заниматься категориями, фильтрами, избранным и недавно просмотренными ресторанами и всем этим. Сделайте так, чтобы клиентский опыт ощущался более личным и реалистичным, оставаясь при этом в том же потоке обнаружения ресторанов. Добавьте глубину обнаружения в поток просмотра ресторанов, требования. Все это, и у нас есть некоторые ограничения. Перейдите в режим планирования. Как должны работать избранные для этой вехи? Я не хочу делать локальную демонстрацию. Хорошо. Я хочу сделать это реалистичным. Superbase вошел в систему. Как должны сохраняться недавно просмотренные рестораны? Локальное хранилище. Использовать хранилище устройства. Так что недавние переживут перезагрузки приложения без сложности бэкенда или только сессии. Это, вероятно, тоже должно быть Superbase, но давайте просто использовать локальное хранилище. Вот план. Так что он добавит таблицу избранных ресторанов. Это правильный способ сделать это. Вы хотите, чтобы это хранилось в Superbase. Расширьте состояние обнаружения ресторанов в приложении. Выглядит хорошо. Давайте запустим это.
Он реализовал веху глубины обнаружения. Так что это ключевые изменения. Избранное ресторана, расширенный хук обнаружения ресторана с избранным Superbase. Обновлена главная страница и просмотр со всеми категориями, рейтингами. И поэтому, если мы перейдем в наш симулятор, перезапустим наше приложение. Это все еще не работает. Но мы можем нажать на ресторан и добавить его в избранное. Хорошо, этот установлен. Давайте попробуем другой. Давайте перейдем к просмотру. Как насчет этой пасты? Так что я не могу отменить это. И это не работает. Так что мы исправим все это. Два сохраненных места. На самом деле, давайте исправим это сейчас. Просто скопируйте это. Вставьте это. И просто скажите, что нажатие на сердце не отменяет избранное, и кнопка "назад" не работает. Просто запустите это напрямую. Так что это были на самом деле просто статические представления. Они выглядели кликабельными, но не имели обработчиков. Так что идея здесь была в том, что мы собирались исправить это позже, потому что сейчас целью не было сделать их, знаете ли, кликабельными для обработки событий. И поэтому видеть это важно, потому что таким образом я могу сделать еще один проход позже в учебном пособии, где он пройдет через все это и решит, должно ли это быть кликабельным или нажимаемым, или это просто статическое представление. И поэтому это все еще полезно, потому что это дает мне представление о том, как я могу сделать проход позже. И кроме того, поскольку мы сделали это здесь, Codeex поймет, о чем я говорю. Так что, даже если этот шаг мог быть сделан позже, делать это сейчас важно, потому что мы дали Codeex важный контекст, когда мы будем делать этот финальный проход перед развертыванием или проверкой работоспособности после развертывания. Исправлены обе проблемы. Давайте посмотрим. И вот оно. И теперь это работает.
Итак, когда обнаружение работает, мы можем создать часть "детали до корзины". Здесь приложение становится интерактивным, потому что клиент может открыть ресторан, выбрать элементы меню, настроить количество и увидеть обновление итогов. И поэтому для этого
учебное пособие, подход к корзине должен быть простым и объяснимым. Реализуйте меню деталей ресторана и этап корзины для приложения доставки экспорта. Перейдите в режим планирования. Вот план. Реализуйте загрузку деталей ресторана и меню из Superbase, сохраняя текущий локальный подход к корзине. Мы собираемся расширить это, и мы собираемся это отправить. И таким образом, он реализовал этап меню деталей ресторана Superbase и локальной корзины. Он добавил сюда живой хук деталей меню Superbase. Все это. И если вы прокрутите вверх и раскроете это, вы увидите, что он тестировал симулятор. Он делал скриншоты различных страниц деталей вашей карты. Итак, давайте посмотрим, что здесь происходит. Итак, если мы нажмем сюда, у нас есть эта карта. У нас есть это. И теперь, скажем, я перехожу в браузер. Я иду в Pasta Palace. Этот ресторан работает, но нет доступных блюд в меню. Хорошо, давайте выберем другой ресторан. Как насчет Sushi Zen? Там все еще ничего нет. Это работает. Как насчет бургерной? Я думаю, здесь должно быть. Теперь у нас есть бургеры. Я могу нажать на бургер. Я могу выбрать белок, говядину, авокадо. Это обновляется. Я могу взять два бургера, 16 баксов. И у меня есть бургер. Я могу перейти в свою корзину. И я могу переключить это. И это обновляется автоматически. Это не меняет стоимость доставки и сервисный сбор. Это остается прежним. Я также могу удалить его. И его нет. Так что это выглядит очень чисто. Это еще не работает. Мы сделаем это позже. эти селекторы, но он вытягивает это правильно. Суши еще нет, так что есть только бургер. Теперь следующий этап расширит работу заказа и сделает его похожим на настоящее приложение доставки. Итак, здесь клиенты могут ожидать опций товара, проверки корзины, сборов и оценки доставки перед тем, как они оформят заказ. Добавьте реалистичную глубину заказа в поток меню и корзины. Хорошо. Итак, он реализовал этап глубины заказа, верно? Много валидации. Валидационное сообщение действительно для оформления заказа. Обязательные группы модификаторов теперь имеют по одному выбору по умолчанию. Хорошо. Итак, давайте проверим наше приложение. И здесь мы хотим протестировать такие вещи, как настройка товара, проверка корзины, просмотр сборов и оценки доставки, а также подтверждение того, что корзина готова к оформлению заказа. Итак, давайте попробуем наш пример с бургером здесь. И давайте скажем, мы добавим это в корзину. У нас это есть в корзине. И давайте скажем, мы хотим посмотреть нашу корзину. И давайте скажем, мы хотим нажать сюда и хотим настроить. Итак, скажем, бекон, авокадо, 3,5. Это модификаторы, верно? Три 3,50 доллара, два бакса, 1,50 доллара, и это обязательно. Так что это нельзя снять, а это можно полностью снять. Да, это очень, очень типично. Знаете, некоторые вещи обязательны. Вам нужно что-то выбрать, но другие вещи необязательны, такие как столовые приборы и тому подобное, и эти дополнения здесь. Так что это важно. Итак, у нас есть это. Я собираюсь добавить это. Итак, теперь у меня два бургера. Этот и этот. Я могу удвоить это. 25 минут доставка. Два товара. Я только что удалил это. Продолжить оформление заказа. И теперь у нас здесь оформление заказа. Это адрес. Я могу изменить его на свой рабочий адрес. У меня здесь есть инструкции. Это еще не редактируется. О, на самом деле, это так. Оставить у двери. Это там. Сводка заказа. У нас есть наша оплата. Это просто жестко закодировано. Мы не будем заниматься оплатой в этом учебном пособии. Мы можем сделать это позже. Итак, у нас есть демо-карта здесь, а затем мы можем разместить заказ, и тогда у нас будет размещенный заказ. Мы также можем отслеживать заказ и посмотрите на это. У нас весь поток работает. Заказ получен, готовится, в пути, доставлен, примерное время прибытия, 22 минуты от вас. Может быть, мы также отобразим карту. Посмотрим. Но пока этот поток заказов работает очень, очень хорошо. Очень доволен этим пока. Теперь оформление заказа — это момент, когда это становится больше, чем демо-браузинга, или мы все еще используем поддельную оплату, но сам заказ должен быть реальными данными, созданными для вошедшего в систему пользователя. И поэтому поток должен учитывать все это. Вы знаете, подтверждение карты, детали доставки, создание заказа и позиций заказа в Superbase. Обновление корзины с подтверждением состояния. Так что многое из этого уже работало. И поэтому следующий запрос убедится, что нет крайних случаев. В этом полном потоке нет недостающих частей. Реализуйте оформление заказа и создание заказа для приложения доставки Expo. У нас есть эти требования, и у нас есть эти ограничения. Не добавляйте реальные платежи, Stripe или что-то подобное. Перейдите в режим планирования и запустите это. Как это учебное пособие должно создавать записи заказов Superbase? Пример вставки клиента, дружественная для начинающих вставка заказа или RPC базы данных, более надежная транзакционно, но добавляет миграцию SQL-функции и больше концепций бэкенда для изучения. Итак, давайте просто сохраним простоту. Хорошо. И это добавит реальное создание заказов Superbase за существующим мошенническим пользовательским интерфейсом оформления заказа. Оформление заказа остается только с поддельными платежами, требует вошедшего в систему пользователя, записывает все это. Давайте сделаем это. Он реализовал создание заказов Superbase за бэкендом. Я не добавлял платежи, никаких возвратов, промо. Это нормально. Итак, давайте посмотрим, что у нас здесь есть. Итак, мы выйдем и войдем в систему. Это пользователь. Хорошо, вот мы. Это работает. Вернемся сюда и попробуем пройти через поток. Итак, недавно просмотренные есть. Это работает. Загрузить рестораны. У нас есть искрящийся лайм. Добавить в корзину. Посмотреть корзину. Продолжить оформление заказа. Мы можем отправить его домой. Это наш заказ. Без модификаторов. На самом деле, есть ли у нас модификатор? Посмотреть корзину. Нет, нет модификатора. Только специальные инструкции. Добавьте немного льда. Что-то вроде этого. Теперь добавим еще один. Или мы можем удалить этот. Продолжить оформление заказа. Оставить у двери. Разместить заказ. Отследить заказ. У нас есть эта оценка в 25 минут, и давайте вернемся. Нажмите на заказы. Мы почему-то не видим этот заказ здесь. Так что это тоже нужно будет исправить, потому что это был совершенно новый заказ. Это был не бургер. Это был рис с искрящимся лаймом. Может быть, он сгруппировал его с другим заказом. Так что, если я зайду сюда, я все еще не вижу его. Так что это то, что нам придется исправить позже. вверх. Прямо сейчас оформление заказа кажется гораздо более полным, когда клиент может выбрать, куда идет еда. Сохраненные адреса и инструкции по доставке — очень, очень полезные функции для нашего приложения. И это также дает Superbase Off четкую причину для существования, помимо входа в систему. Вошедший в систему пользователь теперь имеет личные данные, которые сохраняются при заказах и делают приложение более постоянным. Добавьте сохраненные адреса и инструкции по доставке в поток оформления заказа. Требования. Это требования. Давайте перейдем в режим планирования. Запустите это. Итак, он реализовал сохраненные адреса и инструкции по доставке при оформлении заказа. Давайте посмотрим, как это работает. Вернемся на главный экран и попробуем пройти через поток. Может быть, создадим сохраненный адрес, добавим инструкции по доставке и разместим заказ, используя этот адрес. Хорошо, давайте попробуем этот бургер здесь. Давайте добавим это в корзину. Посмотреть корзину. Продолжить оформление заказа. И теперь у нас это выбрано. Я могу добавить адрес здесь. Хорошо, посмотрите на это. Итак, скажем, я хочу отправить на это работа. Скажем, 10 Вест-стрит, Нью-Йорк. Нью-Йорк один. Позвоните в дверь. Позвоните в звонок. Четыре, оставьте с привратником. Конечно, у всех есть привратник, верно? Сохранить адрес. И теперь у нас есть этот адрес здесь. Так что я могу добавить несколько адресов. Я могу добавить еще один адрес. Я могу отменить это. Очень хорошо. Или я могу оставить его установленным на дом. Хорошо. Я могу установить это на работу. Оставить с привратником. 25 минут. Разместить заказ. Отследить заказ. И вот заказ. Smokehouse. Да, это бургер барбекю. 25 минут. Выглядит хорошо. Теперь, если мы вернемся и перейдем в заказы, мы все еще не видим его здесь. И это то, что нам нужно исправить, но мы приближаемся. Мы добавляем важную глубину в наше приложение. И поэтому, после того как оформление заказа создает заказы, клиенту нужно где-то их увидеть. И здесь мы настроим область учетной записи или заказов и подключим поток подтверждения к истории заказов. Создайте этап профиля, истории заказов и простого отслеживания для приложения доставки экспорта. Требования. Все это, и у нас есть некоторые ограничения. Не добавляйте инструменты водителя, админ ресторана, карты маршрутизации, живой GPS, по крайней мере, пока. Режим планирования. Мы заменим оставшиеся мошеннические сервисы профиля заказов на учетную запись, историю заказов и данные деталей заказа на основе Superbase. И он реализовал историю заказов профиля и простое отслеживание. И теперь давайте протестируем весь этот поток заказов. И давайте убедимся, что эта ошибка, которая у нас постоянно возникала, наконец-то исправлена. Итак, давайте обновим наше приложение. Перезапустим его. Если мы перейдем в заказы, вот что мы видим. Хорошо, у нас нет этого сообщения. У нас есть Smokehouse Barbecue на искрящемся лайме. Так что это уже исправлено. Хорошо, потому что данные были в Superbase. Эта страница просто продолжала показывать поддельные данные, мошеннические данные. Так что я могу обновить это здесь. Я могу нажать сюда и увидеть, что оставить с привратником демо-отслеживание. Используйте учебное пособие. Так что у нас может быть расширенный статус демо здесь. Так что это выглядит хорошо сейчас. Да. Так что мы можем создать новый заказ. И это должно создать совершенно новый заказ. Классический чизбургер. Добавить в корзину. Посмотреть корзину. Продолжить оформление заказа. Собираюсь отправить его на работу. Разместить заказ. Отследить заказ. И вот наш заказ. Хорошо. Так что теперь, если я вернусь назад и перейду в заказы, он должен быть здесь. Давайте обновим его. И вот он. Классический чизбургер. И я вижу 25 минут отправлено на кухню. Заказ получен. Готовится. Так что у нас есть статус доставки здесь. Говоря о статусе заказа, вы, вероятно, согласитесь со мной, что экран отслеживания становится гораздо более убедительным, когда у заказа есть видимая временная шкала. Нам не нужен живой GPS или приложение для водителя, но нам нужно, чтобы клиент понимал, что происходит после оформления заказа. И поэтому мы хотим сделать его немного более удобным для пользователя, чтобы они точно знали, что происходит с их заказом, потому что это та часть приложения, которую они будут постоянно проверять после размещения заказа. Я знаю, что я делаю это постоянно. Добавьте временную шкалу статуса заказа и обновления статуса демо. Покажите четкую временную шкалу для размещенного, готовящегося, в пути и доставленного. Сохраняйте историю статусов. Не добавляйте аккаунты водителей. Реальные уведомления. Живой GPS. Перейдите в режим планирования. Вероятно, нам не нужен режим планирования, но почему бы не отполировать существующий поток отслеживания до четкой временной шкалы статуса уровня учебного пособия. Итак, он реализовал полировку временной шкалы статуса. Итак, давайте посмотрим, как это выглядит. И посмотрите на это. Это выглядит намного лучше. Размещен, готовится, в пути, доставлен. Это выглядит намного лучше. И давайте посмотрим. Проверим другие заказы. Посмотрите на это, размещен. Готовится. Выглядит потрясающе. В пути сейчас. И теперь доставлен. Так что это способ протестировать заказы, чтобы продвинуть их по этапам. Если мы вернемся к заказу, давайте обновим его. Так что это доставлено. Это готовится. Расширенный статус демо. И теперь он в пути. И теперь он доставлен. Очень хорошо. Обновите это. Так что теперь у нас два доставленных заказа, очень чисто. Теперь на этом следующем этапе мы будем заниматься тестированием и отладкой. Хорошо. И это этап, на котором CodeX окажется очень, очень ценным. Так что вместо добавления новых функций нам нужно проверить реальную реализацию, найти самое слабое звено в потоке и объяснить, что, вероятно, идет не так, и исправить только то, что нужно исправить. И поэтому финальный тест должен охватывать весь путь клиента. Запуск приложения, просмотр ресторанов, избранное, детали, настройка товара, и так далее, и так далее. Все, что мы строили до сих пор. Отладка, просмотр и проверка приложения доставки Expo от начала до конца в симуляторе iOS. Сначала проверьте текущую реализацию. Диагностируйте проблемы перед изменением кода. И у нас даже нет никаких ограничений, верно? потому что мы не добавляем функции. Мы в основном тестируем. Сделайте наименьшее безопасное исправление или полировку, необходимое для стабилизации текущего рабочего процесса. Затем создайте финальный контрольный список тестов симулятора. Так что я перейду в режим планирования для этого. Вот план. Текущая инспекция показывает, что основное приложение структурно исправно. TypeScript и у него есть несколько ключевых исправлений. исправление навигации при оформлении заказа, полировка и множество других исправлений. Хорошо, так что он реализовал план стабилизации, изменил множество вещей. Стрелка назад при оформлении заказа теперь является реальной нажимаемой кнопкой с резервным поведением возврата к корзине. Обновлен текст при оформлении заказа для вошедшего в систему пользователя. Обновлен этот соединитель временной шкалы теперь заполняется только для завершенных шагов. Все эти вещи финальный контрольный список для ручного запуска. Вкладки все открыты. Главная, просмотр, карты открыты, детали. Так что все это открывается. Поиск ведет себя как ожидалось. Так что давайте посмотрим, сработает ли это наконец. Это все еще не работает. Это нужно исправить. Мы это исправим. Это все еще не фильтруется. Поиск на главной вкладке не работает. Фильтрация не работает. Не работает. И тогда я не могу выбрать адрес здесь. Не могу выбрать адрес доставки. Давайте попросим его исправить это. Это основные виды ошибок, которые я вижу сразу. Нам все еще нужно протестировать и посмотреть, есть ли другие ошибки, но это основные, знаете ли, основные проблемы, которые нам нужно исправить. И да, они вызваны дизайном взаимодействия, а не отсутствием данных Superbase. Да, это почти все. Наш бэкенд Superbase полностью исправен. Многие из этих ошибок — это чисто UI, чисто дизайн взаимодействия. Так что он реализовал исправление. Главная теперь переключается в режим четких результатов. как только активны фильтры поиска по категориям или сортировка. Давайте посмотрим. Вот так. Это кажется хорошим. Это тоже должно работать. Бесплатная доставка здесь. Давайте перезагрузим это, чтобы убедиться. Хорошо. Вот наше приложение. Так что теперь, если я нажму сюда, это все еще не работает. Но это должно работать. Так что, если я введу бургер, это работает. Он переключается в режим результатов. Я могу очистить это. Возвращается. Я могу сделать рейтинги, бесплатную доставку. Это кажется работающим. У меня есть мои избранные. Я могу отменить это. Теперь его нет. Я могу очистить все это. Это работает. И я могу сортировать по самой низкой плате, рекомендуемым, самым высоким рейтингам и т. д. Единственное, что не работает, это то, что я не могу выбрать адрес. Так что давайте попросим его исправить это. И это не работает. И нажатие на попытку выбора адреса ничего не делает. Давайте просто исправим эти ошибки. Хорошо. Мы исправили проблему выбора адреса. Вот оно. Это намного лучше. Эта штука не работает. Давайте попросим ее исправить. Нажатие на значок фильтра ничего не делает. Давайте просто исправим это. Хорошо. Так что это исправлено. Значок фильтра на главной теперь является реальной нажимаемой кнопкой. Гораздо лучше. Ну да, это тоже должно исчезнуть. Так что давайте сделаем это. Я не Это никогда не должно быть там. Это не должно отображаться. Просто сделайте значок фильтра другого цвета, когда он выбран, чтобы мы могли видеть изменение состояния. Это уже сделано. Посмотрите. И дальше мы хотим провести финальный прогон симулятора. И мы будем запускать приложение, как настоящий пользователь. Приложение Expo должно запускаться чисто. Среда Superbase должна быть настроена. и полный поток должен работать в симуляторе iOS от просмотра до доставленного заказа. Запустите финальный прогон демо-версии симулятора iOS для приложения доставки Expo. Требования. Не добавляйте новые функции продукта во время финального прогона демо-версии. Давайте запустим это. Давайте перейдем в режим планирования на всякий случай. Вероятно, нам это не понадобится для такого простого запроса, но почему бы и нет. Итак, я запустил безопасные, не изменяющие данные финальные проверки демо-версии. Все подтверждено. Проверки Superbase только для чтения. Все сделано. Так что давайте быстро пройдемся. Позвольте мне перезапустить приложение. Хорошо. Так что мы можем выбрать эту работу. Мы можем выбрать, снять выбор. Мы можем заказать суши. У нас нет товаров для суши. Это нормально. Я знаю, что это работает, потому что мы можем выбрать бургер. Нажмите сюда. Добавить в корзину. Посмотреть корзину. Я могу добавить еще один бургер. Я могу выбрать свою работу, потому что это адрес, который я выбрал на главном экране. Я могу изменить свои инструкции по доставке, разместить заказ, отследить заказ. Это для тестирования. Это на самом деле очень хорошо. Это не то, о чем я просил, я думаю. И поэтому это очень хорошо. В пути. Если мы вернемся и перейдем в заказы, мы должны увидеть этот заказ как находящийся в пути. Этот. И затем мы можем прокрутить вниз и сделать расширенный. Продвинуть статус. И он доставлен. Вернитесь сюда. Обновите это. Доставлен. Четыре заказа Superbase. Два безопасных места. Последний заказ. Мы можем выйти из системы. Это выглядит очень, очень чисто. Теперь, когда демо работает, это также хорошее время для работы над некоторыми улучшениями, некоторыми функциями, которые мы можем выпустить в следующей версии приложения. Создайте или обновите документацию с выбранным бэклог улучшений с высоким влиянием и низкими усилиями для приложения доставки Expo. Ок. Требования, ограничения. Не реализуйте два элемента. Не включайте секреты. Не добавляйте платежи. Ну, платежи — это на самом деле хорошая идея. И на самом деле, я уберу это ограничение. Пусть он включает все, что хочет. И если будет достаточно интереса к этому видео, я также сделаю вторую часть, где я реализую все эти дополнительные функции, которые делают настоящее готовое к производству приложение доставки, такие как платежи, отслеживание доставки, карты, все, что вы можете себе представить, когда вы используете Uber Eats или Glov или что-то подобное. Поставьте лайк этому видео, оставьте комментарий, и если будет достаточно интереса, я обязательно сделаю вторую часть этой серии. Итак, давайте оставим его в режиме планирования. Запустите это и посмотрите, что получится. Приятно, что он будет категоризировать их как проблему, улучшение и проверку. И обычно именно так вы хотите поступить. Либо это проблема, ошибка, либо это улучшение. И тогда у нас также есть этап проверки. Я собираюсь отправить это. Пусть он создаст этот файл для следующего раза. Хорошо. И он создал этот файл. Мы можем нажать сюда. Открыть этот файл. И это наш файл. Этот бэклог — это дружественное для начинающих локальное приложение для доставки еды Expo плюс Superbase. Это быстрые победы с высоким влиянием. Состояние значка фильтра на главной — проблема. Ясность доставки на главной. Ясность выбора адреса доставки. Многое позже или вне сферы идей. Сохранение корзины Superbase, адрес профиля. Так что, как я сказал, если будет достаточно интереса ко второй части, я сделаю очень комплексное учебное пособие по второй части, где у нас будет отслеживание в реальном времени, карты, все, что вы можете себе представить, что вы видели в других приложениях, мы сделаем именно это. Так что обязательно поставьте лайк этому видео, оставьте комментарий, чтобы показать свою признательность. И если вы заинтересованы в доступе ко всем этим запросам, я сделаю весь пакет запросов доступным в нашем замечательном сообществе Patreon. Так что нажмите на первую ссылку, присоединяйтесь к нашему замечательному сообществу Patreon. У нас есть потрясающее, потрясающее сообщество, много, много ценности, много, много дополнительного контента. Плюс, это отличный способ поддержать этот канал и мою работу. Так что, надеюсь, увидимся внутри.