Untuk tutorial ini, saya akan menunjukkan cara membangun aplikasi marketplace menggunakan Next.js, Cosmic, dan Stripe. Setelah kami selesai, Anda akan dilengkapi dengan fondasi untuk membangun proyek Anda sendiri menggunakan alat canggih ini. Mari kita mulai.
Fitur bonus termasuk penyebaran ke vercel, mode gelap dan terang dan menggunakan Lighthouse untuk mengukur kinerja situs web metrik vital web inti, yang secara dramatis meningkatkan pengalaman pengguna dan visibilitas situs web dalam hasil pencarian SEO (skor Lighthouse aplikasi ini ditampilkan di bawah).
Teman-teman, jika Anda suka, silakan upvote in berburu produk.
- Next.js โ terukur dan berkinerja tinggi React.js kerangka kerja untuk pengembangan web modern. Menyediakan serangkaian besar fitur, seperti rendering hibrid, pra-pengambilan rute, pengoptimalan gambar otomatis, dan internasionalisasi, di luar kotak.
- Kosmik โ cepat, terkelola sepenuhnya CMS tanpa kepala yang memungkinkan kami dengan cepat mengelola dan membuat konten situs web termasuk UGC (konten yang dibuat pengguna).
- Garis โ infrastruktur pembayaran yang menyediakan alat API untuk menerima pembayaran satu kali dan berlangganan.
TL; DR
Lihat kodenya
Lihat demo langsung
Instal template aplikasi
Pertama, kita perlu menyediakan arsitektur dan desain
Merancang pada dasarnya adalah tentang memisahkan sesuatu, sedemikian rupa sehingga dapat disatukan kembali. Memisahkan hal-hal menjadi hal-hal yang dapat dikomposisi itulah desainnya. โ Cupang Kaya.
MVC singkatan dari model-view-controller software design pattern
Berikut arti dari masing-masing komponen tersebut:
- Model: Backend yang berisi semua logika data. Kosmik Tipe Objek (Banyak atau Tunggal) membantu kami membuat struktur data yang dinamis dan dapat diskalakan, dan esensi transformasinya tidak bergantung pada dunia luar.
- Lihat (UI): Frontend atau antarmuka pengguna grafis (GUI). Untuk itu, kami menggunakan React, yang digambarkan sebagai โVโ lapisan di MVC.
- pengawas: Otak aplikasi mengontrol bagaimana data ditampilkan. Kami menggunakan React's Context API untuk memisahkan status dari presentasi View dan memfasilitasi penggunaan kembali logika bisnis.
Pola MVC digunakan untuk aplikasi web modern karena memungkinkan aplikasi dapat diskalakan, dapat dipelihara, dan mudah diperluas.
Menyiapkan proyek dengan Next.js
Next.js menetapkan untuk meningkatkan dua hal: pengalaman pengembang dan pengguna dan merupakan toolkit lengkap untuk membangun aplikasi React yang sangat cepat. Next.js menawarkan abstraksi yang menyelesaikan tugas paling umum, biasa, dan kompleks seperti perutean, internalisasi, dan pengoptimalan gambar. Secara default, Next.js melakukan pra-render setiap halaman. Ini berarti bahwa Next.js menghasilkan HTML untuk setiap halaman terlebih dahulu, alih-alih menyelesaikan semuanya dengan JavaScript sisi klien. Pra-rendering dapat menghasilkan kinerja yang lebih baik dan SEO.
Next.js memiliki dua bentuk: pra-rendering: Generasi Statis (SSG) dan Render sisi server (RSK).
- Generasi Statis adalah metode pra-rendering yang menghasilkan HTML di waktu membangun. HTML yang telah dirender sebelumnya adalah digunakan kembali pada setiap permintaan.
- Render sisi server adalah metode pra-rendering yang menghasilkan HTML pada setiap permintaan.
Dalam proyek kami, kami menggunakan Render sisi server untuk data dinamis dan halaman pra-render yang akan selalu up-to-date.
Untuk memulai, kami akan membuat Next.js aplikasi yang mencakup perkakas dan konfigurasi. Untuk tutorial ini, Anda memerlukan Node.js 12.22.0 atau versi yang lebih baru. Buka terminal, tempel atau ketik
npx create-next-app@latest unft-marketplace
# or
yarn create next-app unft-marketplace
Ubah ke direktori baru dan instal dependensi menggunakan manajer paket seperti npm
, yarn
, atau pnpm
dan kemudian mulai aplikasi dalam mode pengembangan:
cd unft-marketplace
npm install cosmicjs stripe @stripe/stripe-js sass npm run dev
# or
yarn dev
Untuk menggunakan UI template, Anda perlu mengkloningnya GitHub. Buka terminal, tempel atau ketik kode ini untuk menginstal semua dependensi, dan jalankan.
git clone https://github.com/cosmicjs/unft-marketplace
cd unft-marketplace yarn install
yarn dev
Open http://localhost:3000 di browser Anda untuk melihat halaman rumah petapa.
Mengelola kunci/rahasia API dengan Next.js
Saat bekerja dengan kunci dan rahasia API, kita perlu memastikan bahwa kita merahasiakannya dan di luar kendali versi, sambil dengan mudah membuatnya tersedia sebagai .env
variabel. Anda harus membuat file .env di root proyek. Masuk ke Kosmik dan dari Bucket Settings > API Access
mengambil nilai-nilai berikut:
NEXT_PUBLIC_COSMIC_BUCKET_SLUG=your_cosmic_slug
NEXT_PUBLIC_COSMIC_READ_KEY=your_cosmic_read_key
COSMIC_WRITE_KEY=your_cosmic_write_key NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
STRIPE_SECRET_KEY=your_stripe_secret_key
Grafik NEXT_PUBLIC_
prefix secara otomatis mengekspos variabel ini ke browser. Next.js akan memasukkan nilai ini ke dalam kode sumber yang dapat dilihat publik pada waktu pembuatan/perenderan. Karena itu pastikan untuk tidak menggunakan awalan ini untuk nilai rahasia! Cara yang sama masuk ke Garis dan untuk pengembang bagian mengambil kunci Anda.
Rute API Next.js
Next.js Rute API untuk membuat titik akhir API di dalam aplikasi Next.js. Mereka akan ditempatkan sebagai Fungsi Tanpa Server (Juga dikenal sebagai lambda). Dalam kasus kami, untuk memfilter konten Cosmic berdasarkan parameter, kami akan membuat file bernama filter.js
in pages/api
direktori yang memiliki format sebagai berikut:
import Cosmic from 'cosmicjs'; const bucket = Cosmic().bucket({ slug: '', read_key: '',
} ) export default async function filterHandler(req, res) { const { query: {min, max, color, category, search} } = req; let queryParam = {}; if(typeof min !== 'undefined' || typeof max !== 'undefined') { queryParam = { ...queryParam, "metadata.price": {"$gte": typeof min !== 'undefined' ? Number(min) : 1, "$lte": typeof max !== 'undefined' ? Number(max) : 1000000000 },} } if(typeof color !== 'undefined') { queryParam = { ...queryParam, "metadata.color": color,} } if(typeof category !== 'undefined') { queryParam = { ...queryParam, "metadata.categories": category,} } if(typeof search !== 'undefined') { queryParam = { ...queryParam, "title": { "$regex": search, "$options": "i" },} } const params = { query: { ...queryParam, type: 'products', }, props: 'title,slug,metadata,created_at', } try { const data = await bucket.getObjects(params); res.status(200).json(data); } catch (error) { res.status(404).json(error); }
}
Perhatikan bahwa:
Ikhtisar dan integrasi fitur kosmik
Kosmik adalah CMS tanpa kepala yang memungkinkan kami untuk membuat model, mengelola, dan menyimpan konten dan media kami di dasbor yang dihosting dengan nyaman, lalu mengambil konten kami menggunakan alat API yang tersedia. API menyediakan kemampuan pencarian dan pemfilteran di luar kotak yang membuat pembuatan fitur pencarian dan filter di aplikasi kami menjadi mudah. Cosmic menyediakan fungsionalitas dan fitur modern lengkap untuk membuat situs web interaktif, independen, dan dinamis.
API yang dapat disesuaikan โ Bangun skema, model, dan pengontrol untuk API dari dasbor admin. Cosmic menawarkan keduanya REST dan GraphQL API untuk kenyamanan kami.
Webhooks โ Hubungi kembali di mana pun Anda membutuhkan, untuk mendapatkan fungsionalitas yang Anda inginkan, di luar kotak.
Pertanyaan โ memungkinkan Anda menemukan aset yang benar dengan data Anda dengan mencari, memfilter, dan menyortir. Anda dapat menggunakan beberapa pertanyaan lanjutan untuk membuat kemampuan pencarian yang lebih terperinci.i
Tambahkan Media dan Objek โ Anda dapat mengaktifkan konten yang dibuat pengguna di aplikasi Anda menggunakan Cosmic API. Pengguna dapat mengunggah dan membuat konten interaktif dalam model data yang Anda tentukan. Cosmic bukan hanya sistem manajemen konten yang dikelola sepenuhnya, tetapi API juga dapat digunakan untuk membuat pengalaman konten yang dibuat pengguna.
Memulai dengan Cosmic
Langkah pertama adalah membuat akun kosmik gratis ke Dasbor Kosmik dan Proyek baru. Mari kita pilih opsi "Mulai dari awal".
Kosmik Tipe Objek (Banyak atau Tunggal) membantu kami membuat struktur data yang dinamis, skalabel, dan dapat digunakan kembali serta model konten kami. Membuat bagian model, mudah dari awal, mendefinisikan "Metafields" di "Content Model". Untuk model yang dapat digunakan kembali yang digunakan di beberapa Objek, pilih Beberapa Jenis Objek. Untuk proyek kami, kami akan membuat yang dapat digunakan kembali Produk Tipe Objek model menggunakan kelipatan Hubungan Obyek dengan Kategori. Ini akan memungkinkan kami untuk menambah atau menghapus Produk untuk Kategori dan aktifkan pencarian, dan pemfilteran menurut kategori.
Setelah membuat model konten untuk Produk kami, Anda dapat mulai menambahkan Produk dari dasbor seperti ini:
Anda dapat menentukan model konten lain dengan membuat Tipe Objek mengikuti desain skema ini:
- Singleton untuk model yang unik,
- Beberapa untuk model yang dapat digunakan kembali.
Menggunakan Kosmik query, Anda dapat dengan cepat menemukan konten spesifik sesuai dengan mencari, memfilter, dan menyortir kriteria.
Konten yang dibuat pengguna
Menggunakan kemampuan Cosmic untuk Tambahkan Media dan Objek, pengguna yang masuk dapat mengunggah dan membuat konten yang dikirimkan melalui formulir mereka sendiri. Untuk kasus penggunaan kami, pengguna dapat membuat yang baru Produk untuk menambah pasar untuk dijual.
Mengunggah file dan konten dinamis ke Next.js memerlukan Rute API karena kita perlu menyimpan kunci rahasia dengan aman di variabel lingkungan sisi server. Berikut adalah ikhtisar singkat tentang cara mengunggah file dengan React dan Rute API Next.js menggunakan formidable
, fs
, Dan Kosmik bucket.addMedia
Metode.
import Cosmic from 'cosmicjs';
import formidable from 'formidable';
import fs from "fs"; const bucket = Cosmic().bucket({ slug: process.env.NEXT_PUBLIC_COSMIC_BUCKET_SLUG, read_key: process.env.NEXT_PUBLIC_COSMIC_READ_KEY, write_key: process.env.COSMIC_WRITE_KEY,
}); export const config = { api: { bodyParser: false, },
}; export default async function uploadHandler( req,res ) { const form = new formidable.IncomingForm({ multiple: false }); try { form.parse( req, async ( err, fields, files ) => { if (err) return reject(err); const cosmicRes = await saveFile(files.file); res.status( 200 ).json(cosmicRes); } ); } catch (error) { res.status(404).json(error.message) }
} const saveFile = async ( file ) => { const filedata = fs.readFileSync( file?.filepath ); const media_object = { originalname: file.originalFilename, buffer: filedata }; try { const cosmic_res = await bucket.addMedia({ media: media_object } ); await fs.unlinkSync(file?.filepath); return cosmic_res; } catch (error) { console.log(error); return; }
};
Ikhtisar dan integrasi garis
Garis menyediakan cara untuk menangkap pembayaran dalam aplikasi Anda. Sama seperti Cosmic telah melakukan semua pekerjaan berat untuk infrastruktur konten, Stripe menyediakan infrastruktur dan alat e-niaga untuk membangun pengalaman pembayaran yang menyenangkan bagi pelanggan Anda, terlepas dari layanan atau produk yang dijual.
Disebabkan oleh Persyaratan kepatuhan PCI, perpustakaan Stripe.js harus dimuat dari server Stripe. Ini menciptakan tantangan saat bekerja dengan aplikasi yang dirender sisi server, karena objek jendela tidak tersedia di server. Untuk membantu kami mengelola kerumitan itu, Stripe menyediakan memuat pembungkus yang memungkinkan mengimpor Stripe.js seperti modul ES:
import { loadStripe } from '@stripe/stripe-js'; let stripePromise; const getStripe = () => { if(!stripePromise) { stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY); } return stripePromise;
} export default getStripe;
Stripe.js dimuat sebagai efek samping dari import '@stripe/stripe-js'
pernyataan.
Buat sesi checkout Stripe
Tambahkan titik akhir di server Anda yang membuat Sesi Checkout. Sesi Checkout mengontrol apa yang dilihat pelanggan Anda di laman pembayaran seperti item baris, jumlah dan mata uang pesanan, serta metode pembayaran yang dapat diterima. Anda juga dapat mengaktifkan atau menonaktifkan metode pembayaran langsung di Dasbor Garis.
import Stripe from 'stripe'; const stripe = new Stripe( process.env.STRIPE_SECRET_KEY ); export default async function handler(req, res) { if (req.method === 'POST') { try { const params = { submit_type: 'pay', mode: 'payment', payment_method_types: ['card'], billing_address_collection: 'auto', shipping_options: [ { shipping_rate: 'shr_1L4pafH6oGDppJjV9MrYC7z0' }, { shipping_rate: 'shr_1L4pn4H6oGDppJjVBL7vPTk1' }, ], line_items: req.body.map((item) => { const img = item.metadata.image.imgix_url; return { price_data: { currency: 'usd', product_data: { name: item.title, images: [img], }, unit_amount: item.metadata.price * 100, }, adjustable_quantity: { enabled:true, minimum: 1, }, quantity: item.quantity } }), success_url: `${req.headers.origin}/`, cancel_url: `${req.headers.origin}/`, } const session = await stripe.checkout.sessions.create(params); res.status(200).json(session); } catch (err) { res.status(err.statusCode || 500).json(err.message); } } else { res.setHeader('Allow', 'POST'); res.status(405).end('Method Not Allowed'); }
}
Langkah berikutnya
Meskipun aplikasi pasar ini terutama merupakan bukti konsep untuk mempelajari solusi modern ini, ini adalah awal yang baik untuk dikembangkan. Ada potensi untuk menambahkan fitur baru seperti:
- Halaman akun pengguna untuk menampilkan pesanan
- Halaman profil pengguna untuk memamerkan jpeg yang dibeli
- Sistem komentar untuk menangkap ulasan dan percakapan
- Opsi Bitcoin / Lightning untuk melakukan pembelian
Kesimpulan
Saya harap Anda menikmati tutorial ini yang mengeksplorasi cara menggunakan alat API-first yang kuat untuk membangun aplikasi pasar berfitur lengkap. Pasar uNFT yang dinamis, fungsional, dapat disesuaikan, dan terintegrasi penuh ini, didukung oleh selanjutnya.js, Kosmik, dan Garis dapat disesuaikan untuk jenis bisnis lain juga. Silahkan garpu kodenya, dan gunakan sesuka Anda!
- Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
- Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
- Sumber: https://www.codementor.io/nairage/build-an-unft-marketplace-with-next-js-cosmic-and-stripe-integration-1v892i89x2
- a
- Tentang Kami
- diterima
- Menurut
- Akun
- di seluruh
- admin
- Setelah
- Semua
- memungkinkan
- selalu
- jumlah
- dan
- di manapun
- selain
- api
- aplikasi
- Aplikasi
- aplikasi
- aplikasi
- arsitektur
- aset
- mobil
- secara otomatis
- secara otomatis
- tersedia
- kembali
- Backend
- karena
- makhluk
- di bawah
- Lebih baik
- TERIK
- tubuh
- Kotak
- Browser
- membangun
- Bangunan
- bisnis
- bisnis
- membeli
- panggilan
- kemampuan
- menangkap
- kartu
- kasus
- kategori
- Kategori
- CD
- menantang
- Pembayaran
- Pilih
- cm
- kode
- warna
- Umum
- lengkap
- kompleks
- kompleksitas
- pemenuhan
- komponen
- tersusun
- konsep
- kesimpulan
- mengandung
- Konten
- konteks
- kontrol
- kontrol
- kenyamanan
- Mudah
- membuat
- menciptakan
- membuat
- kriteria
- Currency
- pelanggan
- pelanggan
- disesuaikan
- gelap
- dasbor
- data
- Default
- Mendefinisikan
- menyenangkan
- dikerahkan
- penggelaran
- dijelaskan
- Mendesain
- dev
- Pengembangan
- langsung
- Display
- secara dramatis
- dinamis
- setiap
- e-commerce
- efek
- aktif
- memungkinkan
- Titik akhir
- Lingkungan Hidup
- lengkap
- kesalahan
- esensi
- Lihat lebih lanjut
- pengalaman
- Pengalaman
- Menjelajahi
- memudahkan
- FAST
- Fitur
- Fields
- File
- File
- menyaring
- penyaringan
- Menemukan
- Pertama
- berikut
- bentuk
- format
- hebat
- bentuk
- Prinsip Dasar
- Kerangka
- Gratis
- dari
- Frontend
- FS
- penuh
- sepenuhnya
- fungsionil
- fungsi
- secara fundamental
- dihasilkan
- menghasilkan
- mendapatkan
- mendapatkan
- gif
- baik
- besar
- memiliki
- header
- membantu
- di sini
- kinerja tinggi
- Beranda
- berharap
- host
- Seterpercayaapakah Olymp Trade? Kesimpulan
- How To
- HTML
- HTTPS
- Hibrida
- gambar
- pengimporan
- memperbaiki
- in
- memasukkan
- termasuk
- Termasuk
- Meningkatkan
- independen
- Infrastruktur
- install
- sebagai gantinya
- terpadu
- integrasi
- interaktif
- Antarmuka
- tidak peduli
- IT
- item
- JavaScript
- Menjaga
- kunci-kunci
- dikenal
- besar
- lapisan
- BELAJAR
- Perpustakaan
- pengangkatan
- cahaya
- petir
- baris
- hidup
- Dapat dipelihara
- membuat
- MEMBUAT
- Membuat
- mengelola
- berhasil
- pengelolaan
- manajer
- pelaksana
- pasar
- max
- cara
- mengukur
- Media
- pesan
- Metadata
- metode
- metode
- mode
- model
- model
- modern
- modul
- lebih
- paling
- beberapa
- Perlu
- New
- Fitur Baru
- berikutnya
- Next.js
- obyek
- objek
- Penawaran
- Buka
- optimasi
- pilihan
- urutan
- Lainnya
- ikhtisar
- sendiri
- paket
- parameter
- pola
- Membayar
- pembayaran
- metode pembayaran
- pembayaran
- prestasi
- plato
- Kecerdasan Data Plato
- Data Plato
- silahkan
- Pos
- potensi
- didukung
- kuat
- presentasi
- harga pompa cor beton mini
- proses
- Produk
- Produk
- Profil
- proyek
- memprojeksikan
- bukti
- bukti konsep
- memberikan
- menyediakan
- di depan umum
- dibeli
- menempatkan
- kuantitas
- segera
- Bereaksi
- menerima
- Hubungan
- menghapus
- render
- permintaan
- membutuhkan
- mengakibatkan
- Hasil
- dapat digunakan kembali
- Review
- akar
- Rute
- rute
- Run
- penjualan
- sama
- Kelancangan
- terukur
- Pencarian
- mencari
- Rahasia
- Bagian
- bagian
- aman
- melihat
- SEO
- memisahkan
- layanan
- Sidang
- sesi
- set
- set
- pengaturan
- pengaturan
- Menunjukkan
- Perangkat lunak
- terjual
- Solusi
- Memecahkan
- beberapa
- sumber
- kode sumber
- tertentu
- berdiri
- awal
- mulai
- Negara
- Pernyataan
- Langkah
- menyimpan
- garis
- berlangganan
- seperti itu
- sistem
- Mengambil
- Dibutuhkan
- pengambilan
- tugas
- Template
- terminal
- Grafik
- Negara
- mereka
- karena itu
- hal
- waktu
- Judul
- untuk
- bersama
- toolkit
- alat
- transformasi
- tutorial
- jenis
- ui
- unik
- mutakhir
- us
- USD
- menggunakan
- gunakan case
- Pengguna
- User Interface
- Pengguna
- nilai
- Nilai - Nilai
- versi
- jaringan
- aplikasi web
- pengembangan web
- Situs Web
- Apa
- yang
- sementara
- Wikipedia
- akan
- dalam
- kerja
- dunia
- Anda
- zephyrnet.dll