Делаем клон сервиса по доставке еды используя Nuxt.js, GraphQL, Strapi и Stripe. Часть 1/7

Приготовьтесь написать клон сервиса по доставке еды deliveroo.co.uk используя современные технологии: Nuxt.js, GraphQL, Strapi и Stripe!

От входа до оформления заказа, мы дадим пользователям возможность открывать для себя новые рестораны, блюда и выбирать свою любимую еду.

Финальное демо ниже должно заставить вас проголодаться 🙂

Вступление

Nuxt.js — это фреймворк для создания приложений с использованием Vue.js. Спроектированный для разработки готовых к запуску приложений, он предоставляет хорошую структуру проекта с использованием webpack и babel.

Vue.js — один из самых популярных фронтенд-фреймворков, с более чем 100K звезд на GitHub. Созданный Эваном Ю в 2014 году, Vue.js быстро стал одним из лидеров среди javascript фреймворков благодаря трем главным преимуществам: простому API, небольшим размером библиотеки и отличной производительностью.

REST используют 99% всех существующих API. Благодаря SOAP, REST быстро стал стандартом де-факто из-за его простоты.

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

Strapi — это headless CMS с открытым исходным кодом, она позволяет сэкономить время которое тратится на разработку API.

С расширяемой системой плагинов Strapi предоставляет ряд встроенных возможностей: панель администратора, аутентификацию и управление доступами, управление контентом, генерацию API и т.д.

Strapi на 100% проект с открытым исходным кодом (взгляните на GitHub), что означает:

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

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

Уже хотите приступить к разработке? Давайте начнем!

Примечание: исходный код для всей серии статей доступен здесь.

Устанавливаем Nuxt

Прежде всего нам нужно создать Nuxt.js проект с помощью vue cli, давайте поставим @vue/cli если она не была установлена ранее:

yarn global add @vue/cli   # или npm install -g @vue/cli  

Создаем директорию deliveroo-clone-tutorial:

mkdir deliveroo-clone-tutorial

Затем переходим в неё:

cd deliveroo-clone-tutorial

Далее создаем Nuxt.js проект, который назовем frontend:

yarn create nuxt-app frontend   # или npx create-nuxt-app frontend   # или npm init nuxt-app frontend

После запуска команды выше, вы можете ответить на вопросы, однако в нашем случае можно ответить только на один, выбрав yarn в качестве пакетного менеджера:

? Choose the package manager: Yarn

На остальные просто жмем enter.

Выполним также:

cd frontend && yarn dev 

Отлично! Давайте откроем localhost:3000 чтобы убедится что приложение корректно запустилось.

Устанавливаем UIkit

UIkit это модульный, легковесный css фреймворк для разработки быстрых и функциональных веб-интерфейсов.

Мы будем использовать данный фреймворк в этом туториале.

Установим uikit в директории frontend:

yarn add uikit 

Теперь нам нужно добавить uikit в Nuxt приложение, мы сделаем это с помощью плагина.

Создаем файл /frontend/plugins/uikit.js и копируем в него следующий код:

import Vue from 'vue'  import UIkit from 'uikit/dist/js/uikit-core'   import Icons from 'uikit/dist/js/uikit-icons'  UIkit.use(Icons)   UIkit.container = '#__nuxt'  Vue.prototype.$uikit = UIkit 

Плагины и css файлы должны быть подключены в nuxt.config.js поэтому открываем его и добавляем следующее:

... css: [     "uikit/dist/css/uikit.min.css",   "uikit/dist/css/uikit.css", ],  /* ** Плагины для загрузки перед монтированием приложения */ plugins: [     { src: '~/plugins/uikit.js', ssr: false } ], ...

Отлично! UIkit готов!

Теперь давайте создадим первый компонент.

Создаем компонент Header

Компонент Header.vue будет использоваться на каждой странице нашего приложения.

Создадим Header.vue файл в директории с компонентами /frontend/components/

<template>     <client-only>     <nav class="uk-navbar-container" uk-navbar>         <div class="uk-navbar-left">             <ul class="uk-navbar-nav">               <li class="uk-active">                 <router-link tag="a" class="navbar-brand" to="/" exact>Deliveroo clone</router-link>               </li>               <li>                 <router-link tag="a" class="navbar-brand" to="/restaurants" exact>Restaurants</router-link>               </li>             </ul>         </div>     </nav>   </client-only> </template> 

Компонент layouts/default.vue это корень всех ваших страниц. Внутри него лежит наше <nuxt /> приложение. (страницы для которого мы создаем в этом туториале)

Далее, для использования компонента Header.vue вам нужно импортировать его и удалить ненужные css стили, а также определить контейнер в котором будет находится наше приложение.

Скопируйте и замените следующим кодом тот что находится в /frontend/layouts/default.vue:

<template>     <div>     <Header />     <div class="uk-section uk-section-default">       <div class="uk-container uk-container-large">         <nuxt />       </div>     </div>   </div> </template>  <script>   import Header from '~/components/Header.vue'   export default {     components: {     Header   } } </script> 

Теперь давайте изменим нашу главную страницу в файле /frontend/pages/index.vue, удалим контент и стили, заменив следующим кодом:

<template>     <div>     <img src="https://media.giphy.com/media/zBL9j9oiR3VM4/giphy.gif" class="uk-position-center" alt="">   </div> </template>   

Сейчас мы можем попасть на главную страницу (index.vue), которая подключается в layouts/default.vue и где также импортируется компонент Header.vue

• Перезагрузите страницу чтобы увидеть изменения на localhost:3000
• Запустите yarn dev или npm run dev если вы останавливали команду ранее

Strapi

Когда есть фронтенд — это хорошо, но наше приложение очевидно нуждается в бекенде чтобы управлять пользователями, ресторанами, блюдами и заказами.

Чтобы эта магия случилась — давайте для управления контента создадим проект со Strapi.

Устанавливаем Strapi

Убедитесь что используете Node.js 10 или выше, а также что на вашей машине установлена и запущена одна из баз данных: MongoDB, Postgres или MySQL.

Strapi может использоваться с разными базами данных. Вы можете с помощью опции --quickstart легко установить Strapi с базой SQLite. Данный вариант рекомендуется для прототипирования и разработки со Strapi. (Если не используется MongoDB)

Устанавливаем Strapi и генерируем проект который назовем backend в директории deliveroo-clone-tutorial

yarn create strapi-app backend --quickstart   # или npx create-strapi-app backend --quickstart  

Ждем несколько секунд пока проект запускается. Ваш браузер должен автоматически открыться, если же нет то откройте localhost:1337/admin/ самостоятельно для следующего шага.

Примечание: Вот так можно снова запустить Strapi сервер если вы его остановите:

strapi develop 

Создаем администратора

Добавьте администратора на странице регистрации.

Отличная работа, мы успешно установили проекты с Nuxt.js и Strapi!

---

Примечания переводчика:

На перевод получено разрешение у автора.

Данная статья является первой из серии, в дальнейшем я планирую постепенно перевести их все.

Надеюсь данный материал был вам полезен!