Membangun Situs ECommerce Berbasis React & GraphQL Menggunakan Pickbazar

Ada banyak template belanja yang tersedia di beberapa marketplace. Tetapi memilih yang tepat sangat sulit. Hari ini kita akan berbicara tentang template belanja atau eCommerce bernama "PickBazar" yang dikembangkan oleh RedQ Inc. Ini adalah template baru yang diterbitkan di pasar Envato.

Apa itu React dan mengapa kita harus menggunakannya?

React adalah library JavaScript berbasis komponen untuk menghasilkan antarmuka pengguna dan diperkenalkan oleh Facebook. Ini memungkinkan kita untuk membuat komponen yang dienkapsulasi yang mengelola statusnya dan kemudian menyusunnya untuk membuat UI yang kompleks. ReactJS adalah salah satu Pustaka UI yang banyak digunakan yang membantu pembuatan aplikasi web yang indah yang membutuhkan sedikit usaha dan pengkodean.

Apa itu GraphQL dan mengapa kami mengimplementasikannya?

GraphQL dikembangkan pada tahun 2012, secara internal oleh Facebook sebelum dirilis ke publik pada tahun 2015. GraphQL adalah bahasa permintaan dan manipulasi data open-source untuk API, dan runtime untuk memenuhi kueri dengan data yang ada. GraphQL mendukung membaca, menulis, dan berlangganan perubahan data (pembaruan waktu nyata - paling sering diterapkan menggunakan WebHooks). Server GraphQL tersedia untuk berbagai bahasa. Ini memungkinkan klien untuk menentukan struktur data yang diperlukan, dan struktur data yang sama dikembalikan dari server, itulah sebabnya mencegah pengembalian data dalam jumlah yang terlalu besar.

Siapa yang akan Diuntungkan oleh template PickBazar?

Saat ini, bisnis grosir, apotek, elektronik, ponsel cenderung sepenuhnya dapat dioperasikan melalui kehadiran online. Jika seorang pengusaha ingin menjalankan bisnis baru melalui kehadiran online, persyaratan pertamanya adalah situs yang dirancang dengan baik agar berjalan dengan lancar. Pada titik ini, PickBazar hadir untuk memberikan solusi lengkap bagi pemilik toko untuk menjalankan bisnisnya tanpa hambatan. Pada awalnya, dia harus membeli template ini dari pasar Envato. Kami sedang mendiskusikan implementasi dasar yang sebenarnya dari template ini. Jadi mari kita mulai di artikel ini.

Bidang Manfaat

Kebutuhan sehari-hari

Barang kebutuhan sehari-hari secara alami termasuk dalam kebutuhan sehari-hari. Jadi, pelanggan yang datang untuk membeli sesuatu dari toko grosir online Anda akan diberikan sistem manajemen stok yang lengkap. Pengetahuan yang komprehensif harus diberikan kepadanya tentang produk yang habis atau tersedia. PickBazar hadir untuk memelihara sistem manajemen stok situs Anda.

Farmasi

Produk farmasi secara alami sangat penting saat ini, dalam situasi COVID19 ini. Seorang pemilik apotek pasti akan membutuhkan sistem manajemen kategori untuk mendemonstrasikan berbagai jenis obat, produk bayi, dan kebutuhan wanita secara terpisah, sehingga calon pelanggan dapat menemukan produknya dengan cepat. Jika Anda menggunakan PickBazar untuk toko Apotek online Anda, Anda dapat menghilangkan masalah ini.

Pengantaran makanan

Pengiriman makanan adalah bisnis yang menguntungkan jika Anda dapat mempertahankannya melalui kehadiran online yang berani; PickBazar di sini untuk membantu Anda dengan aspek ini. PickBazar memiliki sistem manajemen pengiriman dan manajemen pelacakan pesanan yang sangat baik. Jadi Anda dapat menjalankan bisnis pengiriman makanan Anda dari awal dengan penerapan template PickBazar.

Toko buku

Toko buku adalah tempat di mana orang pergi untuk membeli buku, tetapi mereka harus membuang banyak waktu untuk menemukan buku secara fisik, atau sulit untuk mempelajari penulis buku mana pun sebelum membeli. Jadi, jika Anda menggunakan PickBazar untuk Toko Buku Anda untuk menghadirkannya secara online, PickBazar pasti akan membantu Anda meraih pelanggan potensial. Dengan manajemen penulis, setiap buku memiliki kesempatan untuk menunjukkan detail tentang penulis plus manajemen kategori akan membantu Anda mengkategorikan buku yang tersedia menurut genrenya.

Beberapa fitur Generalisasi

Sistem manajemen checkout adalah fitur dari PickBazar untuk semua jenis toko online. Dengan fitur ini, pelanggan dan pemilik toko sama-sama dapat menjaga koneksi bisnis. Maksud saya alamat pengiriman, pembayaran, dan pelacakan pesanan semua ini dimungkinkan melalui sistem manajemen checkout.

PickBazar Dashboard adalah fitur hebat yang ditawarkan oleh template. Ini adalah fitur yang harus dimiliki oleh pemilik toko online. Total Pendapatan, Total Pesanan, Pelanggan Baru, Total Pengiriman, Penjualan Dari Media Sosial, Riwayat Penjualan, Perhitungan untung & rugi, Target Mingguan & Bulanan semua opsi ini terlihat dan dapat dikelola melalui Dasbor PickBazar.

Buat Situs Web eCommerce Anda Sendiri dengan React PickBazar Template

Template e-commerce tercepat yang dibuat dengan React, NextJS, TypeScript, GraphQL, Type-GraphQL & Styled-Components. Mudah digunakan, dan pengembang menggunakan GraphQL dan type-GraphQL, Anda dapat membuat skema dengan sangat mudah. GraphQL Playground membuat dokumentasinya sendiri, dan tim front-end Anda akan senang menggunakannya. Membuat toko online akan lebih mudah dari sebelumnya.

Jika Anda menerapkan template ini, maka Anda pasti dapat meningkatkan penjualan Anda. Untuk kelancaran operasi dan penanganan volume besar data penjualan dan pelacakan pesanan "PickBazar" akan menjadi pilihan yang paling signifikan.

Lihat Demo

Mengapa Menggunakan Template Belanja React PickBazar?

Dikembangkan dengan Bleeding Edge Technology untuk proyek yang sangat skalabel.

Depan toko

• Selanjutnya JS, React Apollo dan GraphQL digunakan.
• Semua komponen ditulis dalam TypeScript.
• Monorepo Didukung dengan Konfigurasi Lerna.
• Dukungan SSR untuk membangun aplikasi yang sangat skalabel.

Dasbor Toko

• Create React App (CRA), React Apollo dan GraphQL digunakan.
• Komponen ditulis dalam TypeScript dan Base Web React UI Framework.
• Buat produk di backend dengan mudah.
• Formulir React Hooks untuk penanganan formulir.

Buat Aplikasi E-niaga Berikutnya Anda dengan Pickbazar.

Ciptakan pengalaman perdagangan yang indah menggunakan kerangka kerja Next.js yang dirender oleh server universal. Sangat mudah digunakan, RedQ Inc. menggunakan GraphQL dan type-GraphQL.

Integrasi pembayaran yang mudah dengan Stripe!

Stripe adalah platform software terbaik untuk menjalankan bisnis internet. Stripe membangun alat yang paling kuat dan fleksibel untuk perdagangan internet. RedQ Inc. mengintegrasikan Stripe dengan template PickBazar-nya.

Fitur React PickBazar Template

Teknologi Tepi Berdarah

Selanjutnya JS, React Apollo dan GraphQL digunakan untuk membangun proyek e-commerce super cepat.

Reaksi Apollo

React Apollo memungkinkan Anda untuk mengambil data dari server GraphQL Anda dan menggunakannya dalam membangun UI yang kompleks dan reaktif.

Performa Cepat

Dioptimalkan untuk ukuran build yang lebih kecil, kompilasi dev yang lebih cepat, dan lusinan peningkatan lainnya.

Komponen bawaan

Komponen ditulis dalam TypeScript dan Base Web React UI Framework. Komponen mudah dipahami.

Siap untuk Diterapkan

Pengembang RedQ Inc. telah membuat proses penyebaran bersih dan sederhana. Anda dapat menerapkan template dengan Now.sh.

Dukungan Penulis Elit

RedQ Inc. dapat meyakinkan Anda tentang dukungan Penulis Elit yang tepat dan respons yang lebih cepat untuk produk mereka.

Memulai & Instalasi

Untuk memulai dengan template Anda harus mengikuti prosedur di bawah ini. Pertama, navigasikan ke PickBazar

direktori. Kemudian jalankan perintah di bawah ini untuk memulai dengan bagian tertentu.

// pada direktori pickbazar benang

Admin

Untuk memulai bagian dasbor admin dengan data API yang sesuai, jalankan perintah di bawah ini.

// untuk mode dev jalankan perintah di bawah ini yarn dev:admin

// untuk mode produksi jalankan di bawah perintah yarn build: admin

Toko

Konfigurasikan kunci API Stripe di /packages/shop/next.config.js. Di bagian env setel STRIPE_PUBLIC_KEY ke kunci publik stripe Anda.

Untuk memulai bagian toko dengan API yang sesuai, jalankan perintah di bawah ini.

// untuk mode dev jalankan di bawah perintah yarn dev:shop

// untuk mode produksi jalankan di bawah perintah yarn build:shop

Jika Anda ingin menguji admin atau toko build produksi Anda di lingkungan lokal, jalankan perintah di bawah ini.

Admin

// membangun admin untuk pembuatan benang produksi: admin

// jalankan API toko yang diperlukan untuk pengujian lokal yarn dev:API-admin

// mulai admin di layanan benang produksi: admin

Toko

// membangun toko untuk pembuatan benang produksi: toko

// jalankan API toko yang diperlukan untuk pengujian lokal yarn dev:api-shop

// mulai berbelanja di produksi benang melayani:toko

Struktur & Kustomisasi Folder

/packages/admin: Di bagian ini semua pengkodean dan fungsi terkait dashboard admin.

/packages/shop: Semua pengkodean dan fungsi terkait toko.

/packages/api : Kode terkait API untuk bagian admin dan toko.

kode API terkait admin ada di folder admin.

kode terkait toko ada di folder toko.

Konfigurasi & Penerapan

sekarang.sh

Jika Anda ingin meng-host template di now.sh maka ikuti perintah di bawah ini.

API

• Arahkan ke paket/API
• Sekarang jalankan perintah di bawah ini

sekarang

Admin

• Setelah menerapkan API, Anda akan mendapatkan URL titik akhir API. Masukkan URL itu ke dalam paket/admin/.env

REACT_APP_API_URL={put_your_api_url_here}/admin/graphql;

• Arahkan ke paket/admin
• Sekarang jalankan perintah di bawah ini

sekarang

Toko

• Setelah menerapkan API, Anda akan mendapatkan URL titik akhir API. Masukkan URL itu di

  package/shop/next.config.js

env: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',

API_URL: '{put_your_api_url_here.}/shop/graphql', },

• Arahkan ke paket/toko

• Sekarang jalankan perintah di bawah ini

sekarang

Kesimpulan

Sekarang kita telah sampai pada titik akhir artikel ini. Kami harap Anda memiliki ide tentang template belanja eCommerce PickBazar react GraphQL. Tanpa ragu-ragu, Anda dapat menggunakan template belanja ini untuk toko eCommerce Anda. Terima kasih banyak telah membaca artikel ini. Jika Anda benar-benar menyukai artikel ini, silakan tinggalkan komentar di bagian komentar atau beri kami peringkat yang bagus. Itu saja untuk hari ini. Semoga harimu menyenangkan!

Beli Template

Baca Selengkapnya: 10 Dasbor Admin React Redux Terbaik 2020