Pickbazar Kullanarak React & GraphQL Tabanlı E-Ticaret Web Sitesi Oluşturma

Çeşitli pazaryerlerinde çok sayıda alışveriş şablonu mevcuttur. Ancak doğru olanı seçmek çok zordur. Bugün RedQ Inc tarafından geliştirilen "PickBazar" adlı bir alışveriş veya e-ticaret şablonundan bahsedeceğiz. Envato pazarında yayınlanan yeni bir şablondur.

React nedir ve neden kullanmalıyız?

React, kullanıcı arayüzleri oluşturmak için bileşen tabanlı bir JavaScript kitaplığıdır ve Facebook tarafından tanıtılmıştır. Durumlarını yöneten ve daha sonra karmaşık kullanıcı arayüzleri oluşturmak için bunları oluşturan kapsüllenmiş bileşenler oluşturmamıza olanak tanır. ReactJS, minimum çaba ve kodlama gerektiren güzel web uygulamalarının oluşturulmasına yardımcı olan, yaygın olarak kullanılan UI Kitaplıklarından biridir.

GraphQL nedir ve neden uyguluyoruz?

GraphQL, 2015 yılında kamuya açıklanmadan önce Facebook tarafından dahili olarak 2012 yılında geliştirilmiştir. GraphQL, API'ler için açık kaynaklı bir veri sorgulama ve işleme dili ve mevcut verilerle sorguları gerçekleştirmek için bir çalışma zamanıdır. GraphQL, verilerdeki değişiklikleri okumayı, yazmayı ve bunlara abone olmayı destekler (gerçek zamanlı güncellemeler – en yaygın olarak WebHooks kullanılarak uygulanır). GraphQL sunucuları birden çok dil için mevcuttur. İstemcilerin gerekli veri yapısını tanımlamasına izin verir ve aynı veri yapısı sunucudan döndürülür, bu nedenle aşırı büyük miktarda verinin döndürülmesini önler.

PickBazar şablonundan kimler yararlanabilir?

Günümüzde, bakkal, eczane, elektronik, cep telefonu işletmeleri, çevrimiçi bir varlık aracılığıyla tamamen çalışabilir olma eğilimindedir. Bir girişimci çevrimiçi ortamda yeni bir işletme işletmek istiyorsa, ilk şartı sorunsuz bir şekilde performans gösterecek iyi tasarlanmış bir site olacaktır. Bu noktada PickBazar, bir mağaza sahibinin işini herhangi bir engel olmadan yürütmesi için eksiksiz bir çözüm sunmak için burada. İlk başta, bu şablonu Envato pazarından satın alması gerekiyor. Bu şablonun gerçek temel uygulamasını tartışıyoruz. Öyleyse bu yazıda başlayalım.

Fayda Alanları

Bakkal

Bakkal ürünleri doğal olarak günlük ihtiyaçlar arasına girer. Böylece online marketinizden herhangi bir şey almaya gelen müşterilere eksiksiz bir stok yönetim sistemi sağlanacaktır. Stokta olmayan veya mevcut ürün hakkında kendisine kapsamlı bir bilgi verilmelidir. PickBazar, sitenizin stok yönetim sistemini korumak için burada.

Eczane

Eczane ürünleri, bu COVID19 durumunda günümüzde doğal olarak gereklidir. Bir eczane sahibi, farklı ilaç türlerini, bebek ürünlerini ve kadın temellerini ayrı ayrı göstermek için kesinlikle bir kategori yönetim sistemine ihtiyaç duyacaktır, böylece potansiyel bir müşteri ürününü hızlı bir şekilde bulabilir. Çevrimiçi Eczane mağazanız için PickBazar'ı kullanırsanız, bu sorunu ortadan kaldırabilirsiniz.

Yemek teslimi

Cesur bir çevrimiçi varlık aracılığıyla sürdürebilirseniz, yiyecek teslimatı karlı bir iştir; PickBazar bu konuda size yardımcı olmak için burada. PickBazar, mükemmel bir teslimat yönetim sistemine ve sipariş takip yönetimine sahiptir. Böylece PickBazar şablonunun uygulanmasıyla gıda dağıtım işinizi sıfırdan yürütebilirsiniz.

Kitapçı

Kitapçı, insanların kitap satın almak için gittikleri, ancak kitabı fiziksel olarak bulmak için çok fazla zaman harcamak zorunda kaldıkları bir yerdir veya satın almadan önce herhangi bir kitabın yazarını öğrenmek zordur. Bu nedenle, Kitap Mağazanız için çevrimiçi bir varlık sağlamak için PickBazar'ı kullanırsanız, PickBazar kesinlikle potansiyel müşterileri yakalamanıza yardımcı olacaktır. Yazar yönetimi ile her kitabın yazarla ilgili ayrıntıları sergileme şansı vardır ve kategori yönetimi mevcut kitaplarınızı türlerine göre kategorilere ayırmanıza yardımcı olur.

Bazı Genelleştirme özellikleri

Ödeme yönetim sistemi, her tür çevrimiçi mağaza için PickBazar'ın bir özelliğidir. Bu özellik sayesinde hem müşteriler hem de mağaza sahipleri bir iş bağlantısı kurabilir. Yani teslimat adresi, ödeme ve sipariş takibi tüm bunlar kasa yönetim sistemi ile mümkün.

PickBazar Dashboard, şablon tarafından sunulan harika bir özelliktir. Bir çevrimiçi mağaza sahibi için olmazsa olmaz bir özelliktir. Toplam Gelir, Toplam Sipariş, Yeni Müşteri, Toplam Teslimat, Sosyal Medyadan Satışlar, Satış Geçmişi, Kar & Zarar hesaplama, Haftalık & Aylık hedefler, bu seçeneklerin tümü PickBazar Dashboard üzerinden görülebilir ve yönetilebilir.

React PickBazar Şablonu ile Kendi E-Ticaret Web Sitenizi Yapın

React, NextJS, TypeScript, GraphQL, Type-GraphQL ve Styled-Components ile oluşturulmuş en hızlı e-ticaret şablonu. Kullanımı zahmetsizdir ve geliştiriciler GraphQL ve type-GraphQL kullandılar, şemanızı çok kolay bir şekilde oluşturabilirsiniz. GraphQL Playground kendi belgelerini oluşturur ve ön uç ekibiniz bunu kullanmayı sevecektir. Bir çevrimiçi mağaza oluşturmak her zamankinden daha kolay olurdu.

Bu şablonu uygularsanız, satışlarınızı kesinlikle artırabilirsiniz. Sorunsuz çalışma ve büyük hacimli satış verilerinin işlenmesi ve siparişlerin takibi için "PickBazar" en önemli seçim olacaktır.

Demoyu Görüntüle

Neden React PickBazar Alışveriş Şablonunu Kullanmalı?

Yüksek düzeyde ölçeklenebilir proje için Bleeding Edge Teknolojisi ile geliştirilmiştir.

Dükkan Önü

• Sonraki JS, React Apollo ve GraphQL kullanılır.
• Tüm bileşenler TypeScript'te yazılmıştır.
• Lerna Konfigürasyonu ile Desteklenen Monorepo.
• Yüksek düzeyde ölçeklenebilir uygulamalar oluşturmak için SSR desteği.

Mağaza Panosu

• Create React App (CRA), React Apollo ve GraphQL kullanılır.
• Bileşenler TypeScript ve Base Web React UI Framework ile yazılmıştır.
• Arka uçta kolayca ürünler oluşturun.
• Form işleme için React Hooks Formu.

Pickbazar ile Sonraki E-Ticaret Uygulamanızı oluşturun.

Evrensel sunucu tarafından oluşturulmuş Next.js çerçevesini kullanarak güzel bir ticaret deneyimi yaratın. Kullanımı çok kolay, RedQ Inc. GraphQL ve type-GraphQL kullandı.

Stripe ile kolay ödeme entegrasyonu!

Stripe, bir internet işini yürütmek için en iyi yazılım platformudur. Stripe, internet ticareti için en güçlü ve esnek araçları oluşturur. RedQ Inc., Stripe'ı PickBazar şablonuyla bütünleştirir.

React PickBazar Şablon Özellikleri

Kanayan Kenar Teknolojisi

Sonraki JS, React Apollo ve GraphQL, süper hızlı bir e-ticaret projesi oluşturmak için kullanılıyor.

Tepki Apollo

React Apollo, GraphQL sunucunuzdan veri almanıza ve bunları karmaşık ve reaktif UI'ler oluşturmada kullanmanıza olanak tanır.

Hızlı Performans

Daha küçük yapı boyutu, daha hızlı geliştirme derlemesi ve düzinelerce başka iyileştirme için optimize edilmiştir.

Dahili Bileşenler

Bileşenler TypeScript ve Base Web React UI Framework ile yazılmıştır. Bileşenlerin anlaşılması kolaydır.

Dağıtıma Hazır

Geliştirici RedQ Inc., dağıtım sürecini temiz ve basit hale getirdi. Şablonu Now.sh ile dağıtabilirsiniz.

Elit Yazar Desteği

RedQ Inc., ürünleri için uygun Elite Yazar desteğini ve daha hızlı yanıt vermesini sağlayabilir.

Başlarken ve Kurulum

Şablona başlamak için aşağıdaki prosedürü izlemelisiniz. İlk önce PickBazar'a gidin

dizin. Ardından, belirli bir parçaya başlamak için aşağıdaki komutu çalıştırın.

// pickbazar dizini ipliğinde

yönetici

Yönetici panosu bölümünü ilgili API verileriyle başlatmak için aşağıdaki komutları çalıştırın.

// dev modu için aşağıdaki komutu çalıştırın thread dev:admin

// üretim modu için aşağıdaki komutu çalıştırın thread build: admin

Mağaza

/packages/shop/next.config.js içindeki Stripe API anahtarını yapılandırın. env bölümünde, STRIPE_PUBLIC_KEY'i şerit ortak anahtarınıza ayarlayın.

Mağaza bölümünü ilgili API ile başlatmak için aşağıdaki komutları çalıştırın.

// dev modu için thread dev:shop komutunun altında çalıştırın

// üretim modu için aşağıdaki komutu çalıştırın thread build:shop

Üretim oluşturma yöneticinizi test etmek veya yerel ortamda alışveriş yapmak istiyorsanız aşağıdaki komutları çalıştırın.

yönetici

// üretim ipliği için yönetici oluştur: yönetici

// yerel test ipliği için gerekli olan mağaza API'sini çalıştırın dev:API-admin

// üretim iplik hizmetinde admin başlat:admin

Mağaza

// üretim için mağaza oluştur iplik build:shop

// yerel iplik testi için gerekli olan shop API'yi çalıştırın dev:api-shop

// üretimde mağazaya başla hizmet ver:mağaza

Klasör Yapısı ve Özelleştirme

/packages/admin: Bu kısımda admin paneli ile ilgili tüm kodlama ve fonksiyonlar yer almaktadır.

/packages/shop: Mağazayla ilgili tüm kodlama ve işlevler.

/packages/api : Hem yönetici hem de mağaza bölümü için API ile ilgili kod.

admin ile ilgili API kodları admin klasöründedir.

mağazayla ilgili kodlar mağaza klasöründedir.

Yapılandırma ve Dağıtım

şimdi.sh

Şablonu now.sh içinde barındırmak istiyorsanız aşağıdaki komutu izleyin.

API

• Paketlere/API'ye gidin
• Şimdi aşağıdaki komutu çalıştırın

şimdi

yönetici

• API'yi dağıttıktan sonra API bitiş noktası URL'sini alacaksınız. Bu URL'yi package/admin/.env dizinine yerleştirin

REACT_APP_API_URL={put_your_api_url_here}/admin/graphql;

• Paketlere/yöneticiye gidin
• Şimdi aşağıdaki komutu çalıştırın

şimdi

Mağaza

• API'yi dağıttıktan sonra API bitiş noktası URL'sini alacaksınız. Bu URL'yi

  paketler/shop/next.config.js

env: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',

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

• Paketlere/mağazaya gidin

• Şimdi aşağıdaki komutu çalıştırın

şimdi

Çözüm

Şimdi bu yazının son noktasına geldik. PickBazar tepki GraphQL e-Ticaret alışveriş şablonu hakkında bir fikriniz olduğunu umuyoruz. Hiç tereddüt etmeden bu alışveriş şablonunu e-ticaret mağazanız için kullanabilirsiniz. Bu makaleyi okuduğunuz için çok teşekkür ederim. Bu makaleyi gerçekten beğendiyseniz, lütfen yorum bölümüne bir yorum bırakın veya bize iyi bir puan verin. Bugünlük bu kadar. İyi günler dilerim!

Şablon Satın Al

Devamını Okuyun: 10 En İyi React Redux Admin Dashboard 2020