🏗️ Настройка (часть 1/7)

Приготовьтесь разработать клон Deliveroo, используя удивительные технологии: Nuxt (Vuejs), GraphQL, Stripe и Strapi! От регистрации до заказа вы дадите пользователям возможность открывать для себя рестораны, блюда и выбирать подходящие блюда.

Демонстрация окончательного результата должна вас проголодать:

Примечание: исходный код доступен на GitHub: https://github.com/strapi/strapi-examples/tree/master/nuxt-strapi- Delitroo-clone-tutorial .

Nuxt

Nuxt.js - прекрасная платформа для создания приложений с Vue.js. Разработанный для создания готовых к производству приложений, он обеспечивает прочную структуру проекта, построенную с помощью Webpack и Babel.

Vue.js - один из самых известных интерфейсных фреймворков с более чем 100 000 звезд (🙈) на GitHub. Созданный в 2014 году Evan You, он быстро стал эталоном благодаря трем основным преимуществам: чрезвычайно простой, но мощный API, небольшой размер библиотеки и отличная производительность. .

GraphQL

REST - это соглашение, по которому работает 99% действующих API. После перехода на протокол SOAP он быстро стал фактическим соглашением из-за своей простоты.

В 2015 году Facebook опубликовал GraphQL: мощный язык запросов для запросов API. С момента публикации он продолжал расти и был принят такими гигантами, как GitHub, Twitter и Yelp.

Страпи

Strapi - это самая продвинутая платформа управления контентом API Node.js. На полпути между Node.js Framework и Headless CMS он экономит недели времени на разработку API.

Благодаря расширяемой системе плагинов, он предоставляет большой набор встроенных функций: панель администратора, аутентификация и управление разрешениями, управление контентом, генератор API и т. Д. В отличие от онлайн-CMS, Strapi на 100% имеет открытый исходный код (взгляните на репозиторий GitHub), что означает:

  • Strapi полностью бесплатен.
  • Вы можете разместить его на своих серверах, чтобы данные принадлежали вам.
  • Он полностью настраиваемый и расширяемый благодаря системе плагинов.

Полоса

Stripe - это процессор онлайн-платежей, который значительно упрощает жизнь разработчикам при работе с платежами. В этом уроке мы будем использовать его для обработки заказов.

Ждем, чтобы приготовить это приложение? Давайте приступим!

Оглавление

🏗️ Настройка

Nuxt

Прежде всего, вы собираетесь настроить проект Nuxt. Для этого установите Vue CLI:

npm install -g vue-cli

Создайте каталог с именем deliveroo-clone-tutorial:

mkdir deliveroo-clone-tutorial

Затем в этой новой папке сгенерируйте новый проект Nuxt:

cd deliveroo-clone-tutorial
vue init nuxt-community/starter-template client

Нажимайте вводить для каждого вопроса.

Установите модули узла:

cd client npm install

На этом этапе вы должны увидеть список сгенерированных файлов в новой папке client. Чтобы узнать больше об этой структуре, взгляните на Документацию по структуре каталогов Nuxt.

Наконец, запустите приложение из каталога client:

npm run dev

Держи! Откройте http: // localhost: 3000, чтобы открыть для себя новое приложение.

Добавление Bootstrap

Чтобы улучшить дизайн, мы добавим Bootstrap. Для этого обновите установленные зависимости:

npm i bootstrap-vue

Добавьте bootstrap-vue / nuxt в раздел модулей nuxt.config.js:

Путь: nuxt.config.js

Создание компонента заголовка

В то же время мы собираемся создать наш первый компонент, который мы будем повторно использовать в проекте.

Путь: components/Header.vue

Используйте его в макете по умолчанию, удалите его стиль:

Путь: layouts/default.vue

Очистите содержимое домашней страницы и удалите его стиль:

Путь: pages/index.vue

Перезагрузите сервер, чтобы увидеть изменения, по адресу http: // localhost: 3000.

Страпи

Иметь интерфейс - это хорошо, но вашему приложению явно нужен бэкэнд для управления пользователями, ресторанами, блюдами и заказами. Чтобы волшебство произошло, давайте создадим Strapi API.

Установить Strapi

Требования: убедитесь, что вы используете Node 9 (или более) и на вашем компьютере установлены и работают MongoDB, Postgres или MySQL.

Установите Strapi с помощью npm:

npm i strapi@alpha -g

Примечание. Strapi v3 все еще является альфа-версией, но она подойдет для этого руководства.

Создать проект Strapi

Создайте свой API внутри deliveroo-clone-tutorial с помощью единой командной строки:

cd deliveroo-clone-tutorial
strapi new server

Интерфейс командной строки попросит вас выбрать базу данных: выберите MongoDB, Postgres или MySQL. Затем введите информацию о базе данных. Значения по умолчанию должны работать, если вы правильно установили систему базы данных на своем компьютере.

Запустить сервер

Запустите сервер Node.js:

cd server strapi start

С этого момента вы сможете посетить админ-панель вашего проекта: http: // localhost: 1337 / admin.

Создайте своего первого пользователя

Добавьте своего первого пользователя со страницы регистрации.

Молодцы, вы успешно настроили проекты Nuxt и Strapi! 🎉

🏠 В следующем разделе вы узнаете, как отобразить список ресторанов: https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js -graphql-strapi-and-stripe-Restaurants-list-part-2-7 .

Первоначально опубликовано на сайте blog.strapi.io 3 июля 2018 г.