Get best of the week

Kami membuat klon dari layanan pengiriman makanan menggunakan Nuxt.js, GraphQL, Strapi dan Stripe. Bagian 1/7

gambar

Dapatkan siap untuk menulis tiruan dari layanan pengiriman makanan deliveroo.co.uk menggunakan teknologi modern: Nuxt.js , GraphQL , Strapi dan Stripe !

Dari pintu masuk ke kasir, kami akan memberi pengguna kesempatan untuk menemukan restoran, hidangan baru, dan memilih makanan favorit mereka.

Demo terakhir di bawah ini akan membuat Anda lapar :)

gambar

pengantar


Nuxt.js adalah kerangka kerja untuk membangun aplikasi menggunakan Vue.js. Dirancang untuk mengembangkan aplikasi yang siap diluncurkan, ia menyediakan struktur proyek yang baik menggunakan webpack dan babel.

Vue.js adalah salah satu kerangka front-end paling populer, dengan lebih dari 100 ribu bintang di GitHub. Diciptakan oleh Evan Yu pada tahun 2014, Vue.js dengan cepat menjadi salah satu pemimpin di antara kerangka kerja javascript berkat tiga keunggulan utama: API sederhana, ukuran perpustakaan kecil, dan kinerja luar biasa.

REST menggunakan 99% dari semua API yang ada. Berkat SOAP, REST dengan cepat menjadi standar de facto karena kesederhanaannya.

Pada 2015, Facebook menerbitkan GraphQL- Bahasa kueri yang digunakan untuk menerima data dari API, terus tumbuh dan telah diadopsi oleh perusahaan seperti GitHub, Twitter, dan Yelp.

Strapi adalah open source tanpa kepala CMS yang menghemat waktu untuk mengembangkan API.

Dengan sistem plugin yang diperluas, Strapi menyediakan sejumlah fitur bawaan: panel admin, otentikasi dan kontrol akses, manajemen konten, pembuatan API, dll.

Strapi adalah proyek sumber terbuka 100% (lihat GitHub ), yang berarti:

  • Strapi adalah proyek yang sepenuhnya gratis.
  • Anda dapat menginstal Strapi di server Anda, sehingga tanpa kehilangan kontrol data.
  • Sepenuhnya disesuaikan dan diperluas berkat sistem plugin.

Stripe adalah sistem pembayaran online yang membuat kehidupan pengembang lebih mudah ketika bekerja dengan pembayaran. Dalam tutorial ini kita akan menggunakannya untuk melakukan pemesanan.

Sudah mau memulai pengembangan? Ayo mulai!

Catatan: Kode sumber untuk seluruh seri artikel tersedia di sini .

Instal Nuxt


Pertama-tama, kita perlu membuat proyek Nuxt.js menggunakan vue cli, mari kita letakkan @ vue / cli jika belum diinstal sebelumnya:

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

Buat direktori deliveroo-clone-tutorial:

mkdir deliveroo-clone-tutorial

Lalu pergi ke sana:

cd deliveroo-clone-tutorial

Selanjutnya, buat proyek Nuxt.js, yang akan kami sebut frontend:

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

Setelah menjalankan perintah di atas, Anda dapat menjawab pertanyaan, namun, dalam kasus kami, Anda hanya dapat menjawab satu dengan memilih benang sebagai manajer paket:

? Choose the package manager: Yarn

Untuk sisanya, cukup tekan enter.

Kami juga melakukan:

cd frontend && yarn dev

Baik! Mari kita buka localhost: 3000 untuk memastikan aplikasi dimulai dengan benar.

Instal UIkit


UIkit adalah kerangka kerja modular css yang ringan untuk mengembangkan antarmuka web yang cepat dan fungsional.

Kami akan menggunakan kerangka kerja ini dalam tutorial ini.

Instal uikit di direktori frontend:

yarn add uikit

Sekarang kita perlu menambahkan uikit ke aplikasi Nuxt, kita akan melakukan ini menggunakan plugin.

Buat file /frontend/plugins/uikit.jsdan salin kode berikut ke dalamnya:

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

Plugin dan file css harus terhubung nuxt.config.jsagar dapat membukanya dan tambahkan yang berikut:

...
css: [  
  "uikit/dist/css/uikit.min.css",
  "uikit/dist/css/uikit.css",
],

/*
**      
*/
plugins: [  
  { src: '~/plugins/uikit.js', ssr: false }
],
...


Baik! UIkit sudah siap!

Sekarang mari kita buat komponen pertama.

Buat Komponen Tajuk


Komponen Header.vueakan digunakan pada setiap halaman aplikasi kita.

Buat Header.vuefile di direktori komponen/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>

Komponen layouts/default.vueadalah akar dari semua halaman Anda. Di dalamnya terdapat aplikasi <nuxt /> kita. (halaman yang kami buat dalam tutorial ini)

Berikutnya, untuk menggunakan komponen yang Header.vueAnda butuhkan untuk mengimpornya dan menghapus gaya css yang tidak perlu, dan juga menentukan wadah di mana aplikasi kita akan berada.

Salin dan ganti dengan kode berikut yang terletak di /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>

Sekarang mari kita ubah halaman utama kita dalam file /frontend/pages/index.vue, hapus konten dan gaya, ganti dengan kode berikut:

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

Sekarang kita bisa masuk ke halaman utama (index.vue), yang terhubung ke layouts/default.vuedan di mana komponen juga diimporHeader.vue

  • Reload halaman ini untuk melihat perubahan di localhost: 3000
  • Jalankan thread dev atau npm run dev jika Anda menghentikan perintah sebelumnya


gambar

Strapi


Ketika ada frontend, ini bagus, tetapi aplikasi kita jelas membutuhkan backend untuk mengelola pengguna, restoran, hidangan, dan pesanan.

Untuk mewujudkan keajaiban ini, mari buat proyek dengan Strapi untuk mengelola konten.

Instal Strapi


Pastikan Anda menggunakan Node.js 10 atau lebih tinggi, dan juga bahwa salah satu database diinstal dan dijalankan pada mesin Anda: MongoDB, Postgres, atau MySQL.

Strapi dapat digunakan dengan database yang berbeda. Anda dapat --quickstart dengan mudah menginstal Strapi dengan database SQLite menggunakan opsi . Opsi ini direkomendasikan untuk pembuatan prototipe dan pengembangan dengan Strapi. (Jika MongoDB tidak digunakan)

Instal Strapi dan hasilkan proyek yang akan kami beri nama backenddi direktorideliveroo-clone-tutorial

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

Kami menunggu beberapa detik hingga proyek dimulai. Browser Anda harus terbuka secara otomatis, jika tidak, buka localhost: 1337 / admin / diri sendiri untuk langkah selanjutnya.

Catatan: Ini adalah bagaimana Anda dapat memulai server Strapi lagi jika Anda menghentikannya:

strapi develop

Buat administrator


Tambahkan administrator di halaman pendaftaran .

gambar

Kerja bagus, kami telah berhasil menginstal proyek dengan Nuxt.js dan Strapi!


Catatan Penerjemah:

Penulis mendapat izin untuk menerjemahkan.

Artikel ini adalah yang pertama dari seri, di masa depan saya berencana untuk menerjemahkan semuanya secara bertahap.

Saya harap materi ini bermanfaat bagi Anda!

More articles:


All Articles