Создание приложения для заказа еды Jamstack с помощью Strapi, Gridsome и Snipcart 2/6

· 1379 слов · 7 минут читать
учебник · туториал · все статьи
JAMstack · programming

Эта статья является гостевой серией великого Ekene Eze . Он возглавляет команду опытных разработчиков в Flutterwave и написал это сообщение в блоге через программу Write for the Community.

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

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

Содержание: 1. Часть 1 - Создание приложения Strapi и создание продуктов 2. Часть 2 - Настройка проекта Gridsome 3. Часть 3 - Использование продуктов с помощью Gridsome и GraphQL 4. Часть 4 - Создание отдельных представлений продукта с помощью шаблонов Gridsome 5. Часть 5 - Реализация корзины и оформления заказа с помощью Snipcart 6. Часть 6 - Развертывание приложений

Настройка нового приложения Gridsome.

Прежде чем мы начнем, вот некоторые предварительные условия:

  • Node v8.0 или выше
  • Практическое знание JavaScript и Vue

Установка Gridsome

Установив Node, вы можете установить Gridsome CLI выполнив команду ниже:

yarn global add @gridsome/cli

ИЛИ

npm install --global @gridsome/cli

Установив Gridsome CLI, вы можете использовать его для создания нового проекта Gridsome, выполнив следующую команду:

gridsome create mealzers

Вышеупомянутая команда создаст проект Gridsome с именем mealzers. Перейдите в созданную папку проекта с помощью:

cd mealzers

И запустите сервер разработки проекта с помощью:

gridsome develop

Проект будет доступен для предварительного просмотра в браузере. Перейдите к localhost:8080, чтобы просмотреть приложение.

Итак, у вас есть приложение Gridsome, работающее в браузере за считанные минуты. Затем давайте добавим Vuetify для стилизации.

Настройка Vuetify

Vuetify- это UI-фреймворк, построенный поверх Vue.js. Всякий раз, когда я работаю над проектом Vue, Vuetify по умолчанию является моей структурой пользовательского интерфейса для стилизации. Это самый популярный фреймворк для Vue.js, который поставляется с множеством готовых компонентов.

Помимо всего прочего, он ориентирован прежде всего на мобильные устройства, что гарантирует, что мои приложения работают быстро, независимо от устройства или ориентации. А еще он прост для понимания и использования. Давайте быстро добавим Vuetify в наше приложение Gridsome, выполнив команду установки ниже:

# npm
npm install vuetify --save
#OR
# yarn
yarn add vuetify

Теперь, когда вы установили Vuetify, вам нужно зарегистрировать его как плагин в своем приложении Gridsome. Вам также нужно будет добавить файл Vuetify CSS и ссылку на значки дизайна материалов Google в свое приложение. Для этого скопируйте приведенный ниже фрагмент кода в файл main.js своего проекта и сохраните:

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import DefaultLayout from '~/layouts/Default.vue'

export default function (Vue, { appOptions, head }) {
  head.link.push({
    rel: 'stylesheet',
    href: 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css',
  })

  head.link.push({
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900',
  });
  Vue.use(Vuetify)
  const opts = {}; //opts includes, vuetify themes, icons, etc.
  appOptions.vuetify = new Vuetify(opts);

  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
}

Затем вам нужно внести Vuetify в белый список в Webpack, чтобы ваше приложение могло правильно строиться. Для этого сначала необходимо установить плагин webpack-node-externals с помощью следующей команды:

npm install webpack-node-externals --save-dev

Затем замените файл gridsome.server.js вашего проекта приведенным ниже фрагментом:

const nodeExternals = require('webpack-node-externals')

module.exports = function (api) {
  api.chainWebpack((config, { isServer }) => {
    if (isServer) {
      config.externals([
        nodeExternals({
          allowlist: [/^vuetify/]
        })
      ])
    }
  })

  api.loadSource(store => {
    // Use the Data store API here: https://gridsome.org/docs/data-store-api
  })
}

Замечательно! поэтому мы только что добавили Vuetify в наш проект Gridsome. Но не верьте моим словам. Давайте быстро снова запустим приложение Gridsome и посмотрим, заметим ли мы какие-либо изменения в пользовательском интерфейсе:

И мы делаем. Наличие Vuetify в этом приложении уже повлияло на существующий стиль, поэтому приложение выглядит беспорядочно. Затем давайте создадим макет по умолчанию, который будет соответствовать требованиям приложения Header и Footer . Начнем с нижнего колонтитула.

Создайте файл src / components / Footer.vue и добавьте в него следующий фрагмент:

 <!-- src/components/Footer.vue -->
<template>
  <v-footer absolute padless>
    <v-card flat tile class="orange lighten-1 white--text text-center">
      <v-card-text>
        <v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
          <v-icon size="24px">{{ icon }}</v-icon>
        </v-btn>
      </v-card-text>
      <v-card-text class="white--text pt-0">
        Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
        Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
        accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a
        sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
        lacinia malesuada. Phasellus feugiat arcu sapien, et iaculis ipsum
        elementum sit amet. Mauris cursus commodo interdum. Praesent ut risus
        eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa
        consectetur dignissim a sit amet dui. Duis commodo vitae velit et
        faucibus. Morbi vehicula lacinia malesuada.
      </v-card-text>
      <v-divider></v-divider>
      <v-card-text class="white--text">
        {{ new Date().getFullYear() }} — <strong>Mealsers</strong>
      </v-card-text>
    </v-card>
  </v-footer>
</template>
<script>
export default {
  data: () => ({
    icons: ["mdi-facebook", "mdi-twitter", "mdi-linkedin", "mdi-instagram"],
  }),
};
</script>

Здесь мы определили базовый компонент нижнего колонтитула Vuetify с набором фиктивного текста и значков социальных сетей. Значки доступны по ссылке на значки материального дизайна, которую мы добавили в файл main.js.

Макет по умолчанию

Затем откройте файл src / layouts / Default.vue и обновите его фрагментом кода ниже:

<!-- src/layouts/Default.vue -->
  <template>
    <v-app>
      <div>
        <v-app-bar
          absolute color="orange"
          dark shrink-on-scroll
          scroll-target="#scrolling-techniques-2"
        >
          <v-app-bar-nav-icon class="mt-5" @click="drawer = !drawer">
          </v-app-bar-nav-icon>
          <g-link
            class="mt-7 ml-3"
            style="text-decoration: none; color: inherit"
            to="/"
            >Mealzers</g-link
          >
          <v-spacer></v-spacer>
          <v-btn outlined rounded dense class="mt-5 mr-3">
            <g-link style="text-decoration: none; color: inherit" to="/shop/"
              >Shop</g-link
            >
          </v-btn>
          <v-btn outlined rounded dense class="mt-5 mr-3">
            <g-link style="text-decoration: none; color: inherit" to="/support/"
              >Support</g-link
            >
          </v-btn>
          <v-text-field
            v-model="searchText" @click:clear="searchText = ''"
            placeholder="Search products ..." class="mt-5 mr-4"
            style="max-width: 350px" prepend-inner-icon="mdi-magnify"
            clearable outlined rounded dense hide-details
          />
          <v-btn class="mt-4 mr-4 ml-4 snipcart-checkout" icon>
            <v-icon>mdi-cart</v-icon>
            <span class="snipcart-total-items"></span>
            <span class="snipcart-total-price">{{ this.totalPrice }}</span>
          </v-btn>
        </v-app-bar>
        <v-navigation-drawer v-model="drawer" absolute bottom temporary>
          <v-list nav dense>
            <v-list-item-group
              v-model="group"
              active-class="deep-purple--text text--accent-4"
            >
              <v-list-item>
                <v-list-item-title>
                  <v-btn elevation="0" rounded>
                    <g-link
                      style="text-decoration: none; color: orange"
                      to="/shop/"
                      >Shop</g-link
                    >
                  </v-btn>
                </v-list-item-title>
              </v-list-item>
              <v-list-item>
                <v-list-item-title>
                  <v-btn elevation="0" rounded dense>
                    <g-link
                      style="text-decoration: none; color: orange"
                      to="/support/"
                      >Support</g-link
                    >
                  </v-btn>
                </v-list-item-title>
              </v-list-item>
            </v-list-item-group>
          </v-list>
        </v-navigation-drawer>
        <v-sheet
          id="scrolling-techniques-2"
          class="overflow-y-auto"
          max-height="600"
        >
          <v-container style="height: 120px"></v-container>
        </v-sheet>
        <slot />
      </div>
      <Footer />
    </v-app>
  </template>

В разделе шаблонов выше мы определили базовый заголовок Vuetify, в котором есть панель навигации и несколько кнопок для переключения страниц. Мы используем пользовательский Gridsome тег для обработки навигации между страницами.

На данный момент у нас есть страница shop и страница support , которую мы создадим позже в следующей части этой серии. Так что пока не беспокойтесь о них. Далее, давайте настроим раздел сценария файла макета выше, используя фрагмент кода ниже:

 <!-- src/layouts/Default.vue -->
<script>
import Footer from "@/components/Footer.vue";
export default {
  components: {
    Footer,
  },
  data() {
    const drawer = false;
    const group = null;
    return {
      drawer,
      group
    };
  },
  watch: {
    group() {
      this.drawer = false;
    },
  },

};
</script>
<static-query>
query {
  metadata {
    siteName
  }
}
</static-query>

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

На данный момент кнопки и навигация в приложении ведут на страницу 404. Это потому, что мы еще не создали страницы / shop и / support. В конечном итоге мы доберемся до этого в следующей части этой серии, а пока давайте добавим несколько изображений Hero, чтобы сделать это приложение еще более похожим на приложение для электронной коммерции.

Hero

Дальше, обновите файл src/pages/index.vue приведенным ниже фрагментом:

<template>
  <Layout>
    <template>
      <v-carousel
 *cycle*
 *height*="400"
 *hide-delimiter-background*
        :*show-arrows*="false"
      >
<v-carousel-item *v-for*="(image, i) in images" :*key*="i">
<v-sheet *height*="100%">
<v-row *class*="fill-height" *align*="center" *justify*="center">
<div *class*="display-3">
                <img :*src*="image" />
              </div>
            </v-row>
          </v-sheet>
        </v-carousel-item>
      </v-carousel>
<div *class*="separator"></div>
    </template>
  </Layout>
</template>
<script>
*export*  *default* {
  metaInfo: {
    title: "Mealzers",
  },
 *data*() {
 *return* {
      images: [
        "https://bit.ly/33Ehev5",
        "https://bit.ly/33Ehev5",
        "https://bit.ly/33Ehev5",
        "https://bit.ly/33Ehev5",
      ],
    };
  },
};
</script>

Здесь мы определяем массив из 5 изображений и просматриваем их в цикле для отображения каждого в компоненте пользовательского интерфейса Vuetify v-carousel, который мы указали в шаблоне компонента. Если вы сохраните этот фрагмент и снова заглянете в браузер, вы должны получить обновленное представление, как это:

Вывод

Мы подошли к концу этой части. Прежде чем мы перейдем к следующей части, вот краткий обзор того, что мы сделали. В первой части мы настроили приложение Strapi и создали набор продуктов, которые будем продавать в нашем магазине. В этой части мы просто настроили приложение Gridsome и изменили пользовательский интерфейс, чтобы подготовить его. В следующей части мы подключим это приложение для отображения продуктов, которые мы создали с помощью Strapi, используя слой данных GraphQL Gridsome. Увидимся в следующем!

Поделиться Комментарии

Поделиться новостью

comments powered by Disqus