Crearea unui site web de comerț electronic bazat pe React și GraphQL folosind Pickbazar

Există o mulțime de șabloane de cumpărături disponibile pe mai multe piețe. Dar alegerea corectă este foarte dificilă. Astăzi vom vorbi despre un șablon de cumpărături sau comerț electronic numit „PickBazar” dezvoltat de RedQ Inc. Este un șablon nou publicat pe piața Envato.

Ce este React și de ce ar trebui să-l folosim?

React este o bibliotecă JavaScript bazată pe componente pentru generarea de interfețe cu utilizatorul și este introdusă de Facebook. Ne permite să creăm componente încapsulate care să le gestioneze starea și apoi să le compunem pentru a crea interfețe de utilizare complexe. ReactJS este una dintre bibliotecile UI utilizate pe scară largă, care ajută la crearea de aplicații web frumoase care necesită efort și codare minime.

Ce este GraphQL și de ce îl implementăm?

GraphQL a fost dezvoltat în 2012, intern de Facebook, înainte de a fi lansat public în 2015. GraphQL este un limbaj de interogare și manipulare a datelor open-source pentru API-uri și un timp de execuție pentru îndeplinirea interogărilor cu datele existente. GraphQL acceptă citirea, scrierea și abonarea la modificări ale datelor (actualizări în timp real – cel mai frecvent implementate folosind WebHooks). Serverele GraphQL sunt disponibile pentru mai multe limbi. Permite clienților să definească structura de date necesară, iar aceeași structură de date este returnată de la server, de aceea împiedicând returnarea unor cantități excesiv de mari de date.

Cine ar fi beneficiat de șablonul PickBazar?

În zilele noastre, afacerile cu produse alimentare, farmacie, electronice, telefoane mobile tind să fie pe deplin operabile printr-o prezență online. Dacă un antreprenor dorește să opereze o nouă afacere prin prezență online, prima lui cerință ar fi un site bine conceput pentru a funcționa fără probleme. În acest moment, PickBazar este aici pentru a oferi o soluție completă pentru ca proprietarul unui magazin să-și conducă afacerea fără obstacole. La început, trebuie să cumpere acest șablon de pe piața Envato. Discutăm despre implementarea de bază reală a acestui șablon. Deci, haideți să începem în acest articol.

Domenii de beneficii

Băcănie

Produsele alimentare se încadrează în mod natural în nevoile zilnice. Așadar, clienții care vin să cumpere orice de la magazinul tău alimentar online vor avea la dispoziție un sistem complet de gestionare a stocurilor. Ar trebui să i se ofere cunoștințe cuprinzătoare despre produsul epuizat sau disponibil. PickBazar este aici pentru a menține sistemul de gestionare a stocurilor site-ului dvs.

Farmacie

Produsele de farmacie sunt în mod natural esențiale în zilele noastre, în această situație de COVID19. Proprietarul unui magazin de farmacie va avea cu siguranță nevoie de un sistem de management al categoriei pentru a demonstra diferite tipuri de medicamente, produse pentru bebeluși și articole esențiale pentru femei, astfel încât un potențial client să-și poată găsi rapid produsul. Dacă utilizați PickBazar pentru magazinul dvs. de farmacie online, puteți eradica această problemă.

Livrare de mancare

Livrarea alimentelor este o afacere profitabilă dacă ați putea să o mențineți printr-o prezență online îndrăzneață; PickBazar este aici pentru a vă ajuta cu acest aspect. PickBazar are un sistem excelent de gestionare a livrărilor și de gestionare a urmăririi comenzilor. Astfel, vă puteți conduce afacerea cu livrare de alimente de la zero cu implementarea șablonului PickBazar.

Librărie

Librăria este un loc în care oamenii merg să cumpere cărți, dar trebuie să piardă mult timp găsind cartea fizic, sau este greu să înveți despre autorul oricărei cărți înainte de a cumpăra. Deci, dacă utilizați PickBazar pentru Librăria dvs. pentru a-i oferi o prezență online, PickBazar vă va ajuta cu siguranță să captați potențialii clienți. Cu gestionarea autorului, fiecare carte are șansa de a expune detalii despre autor, plus managementul categoriei vă va ajuta să vă clasificați cărțile disponibile în funcție de genul lor.

Unele caracteristici Generalize

Sistemul de gestionare a plății este o caracteristică de la PickBazar pentru orice tip de magazin online. Cu această funcție, atât clienții, cât și proprietarii de magazine pot menține o conexiune de afaceri. Adică adresa de livrare, plata și urmărirea comenzii, toate acestea sunt posibile prin sistemul de gestionare a comenzii.

PickBazar Dashboard este o caracteristică excelentă oferită de șablon. Este o caracteristică obligatorie pentru proprietarul unui magazin online. Venitul total, Comanda totală, Client nou, Livrare totală, Vânzări din rețelele sociale, Istoricul vânzărilor, Calculul profitului și pierderilor, Țintele săptămânale și lunare, toate aceste opțiuni sunt vizibile și gestionabile prin PickBazar Dashboard.

Creați-vă propriul site de comerț electronic cu șablonul React PickBazar

Cel mai rapid șablon de comerț electronic construit cu React, NextJS, TypeScript, GraphQL, Type-GraphQL și Styled-Components. Este ușor de utilizat, iar dezvoltatorii au folosit GraphQL și type-GraphQL, vă puteți construi schema foarte ușor. GraphQL Playground își realizează propria documentație, iar echipa dvs. de front-end îi va plăcea să o folosească. Crearea unui magazin online ar fi mai ușor ca niciodată.

Dacă implementați acest șablon, atunci vă puteți crește vânzările cu siguranță. Pentru o funcționare fără probleme și gestionarea unui volum mare de date de vânzare și urmărirea comenzilor „PickBazar” ar fi cea mai importantă alegere.

Vedeți demonstrația

De ce să folosiți șablonul de cumpărături React PickBazar?

Dezvoltat cu tehnologia Bleeding Edge pentru proiectul extrem de scalabil.

Vitrina

• În continuare sunt folosite JS, React Apollo și GraphQL.
• Toate componentele sunt scrise în TypeScript.
• Monorepo acceptat cu configurația Lerna.
• Suport SSR pentru construirea de aplicații extrem de scalabile.

Tabloul de bord al magazinului

• Sunt utilizate Create React App (CRA), React Apollo și GraphQL.
• Componentele sunt scrise în TypeScript și Base Web React UI Framework.
• Creați cu ușurință produse în backend.
• Formular React Hooks pentru manipularea formularelor.

Creați următoarea aplicație de comerț electronic cu Pickbazar.

Creați o experiență comercială frumoasă folosind cadrul universal Next.js redat de server. Este foarte ușor de utilizat, RedQ Inc. a folosit GraphQL și type-GraphQL.

Integrare simplă a plăților cu Stripe!

Stripe este cea mai bună platformă software pentru derularea unei afaceri pe internet. Stripe construiește cele mai puternice și flexibile instrumente pentru comerțul pe internet. RedQ Inc. integrează Stripe cu șablonul său PickBazar.

Caracteristicile șablonului React PickBazar

Tehnologia Bleeding Edge

Next JS, React Apollo și GraphQL sunt folosite pentru a construi un proiect de comerț electronic super-rapid.

Reacționează Apollo

React Apollo vă permite să preluați date de pe serverul dvs. GraphQL și să le utilizați în construirea de interfețe de utilizare complexe și reactive.

Performanță rapidă

Optimizat pentru dimensiuni mai mici ale versiunii, compilare mai rapidă a dezvoltatorilor și zeci de alte îmbunătățiri.

Componente încorporate

Componentele sunt scrise în TypeScript și Base Web React UI Framework. Componentele sunt ușor de înțeles.

Gata pentru implementare

Dezvoltatorul RedQ Inc. a făcut procesul de implementare curat și simplu. Puteți implementa șablonul cu Now.sh.

Asistență pentru autori de elită

RedQ Inc. vă poate asigura asistența adecvată Elite Author și un răspuns mai rapid pentru produsele lor.

Noțiuni introductive și instalare

Pentru a începe cu șablonul, trebuie să urmați procedura de mai jos. Mai întâi, navigați la PickBazar

director. Apoi rulați comanda de mai jos pentru a începe cu o parte specifică.

// pe firele directorului pickbazar

Admin

Pentru pornirea părții tabloului de bord administrativ cu datele API corespunzătoare, rulați sub comenzile.

// pentru modul dev rulați sub comanda yarn dev:admin

// pentru modul de producție, rulați sub comanda yarn build: admin

Magazin

Configurați cheia API Stripe în /packages/shop/next.config.js. În secțiunea env, setați STRIPE_PUBLIC_KEY la cheia publică stripe.

Pentru a porni partea magazinului cu API-ul corespunzător, rulați comenzile de mai jos.

// pentru modul dev rulați sub comanda yarn dev:shop

// pentru modul de producție, rulați sub comanda yarn build:shop

Dacă doriți să testați administratorul de producție sau să faceți cumpărături în mediul local, atunci rulați comenzile de mai jos.

Admin

// build admin pentru producție yarn build: admin

// rulați API-ul magazin, care este necesar pentru testarea locală a firului dev:API-admin

// începe admin în producție yarn serve:admin

Magazin

// build shop for production yarn build:shop

// rulați API-ul magazin, care este necesar pentru testarea locală a firelor dev:api-shop

// începe magazinul în producție yarn serve:shop

Structura și personalizarea folderelor

/packages/admin: În această porțiune, toate codurile și funcțiile legate de tabloul de bord admin.

/pachete/magazin: Toate codurile și funcțiile legate de magazin.

/packages/api : cod legat de API atât pentru secțiunea de administrare, cât și pentru magazin.

codurile API legate de admin sunt în folderul admin.

codurile legate de magazin sunt în folderul magazinului.

Configurare și implementare

acum.sh

Dacă doriți să găzduiți șablonul în now.sh, urmați comanda de mai jos.

API

• Navigați la pachete/API
• Acum rulați sub comanda

acum

Admin

• După implementarea API-ului, veți obține adresa URL a punctului final API. Puneți acea adresă URL în pachetele/admin/.env

REACT_APP_API_URL={put_your_api_url_here}/admin/graphql;

• Navigați la pachete/admin
• Acum rulați sub comanda

acum

Magazin

• După implementarea API-ului, veți obține adresa URL a punctului final API. Pune acea adresă URL în

  pachete/shop/next.config.js

env: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',

API_URL: „{put_your_api_url_here.}/shop/graphql”, },

• Navigați la pachete/magazin

• Acum rulați sub comanda

acum

Concluzie

Acum am ajuns la punctul final al acestui articol. Sperăm că aveți o idee despre șablonul de cumpărături de comerț electronic PickBazar react GraphQL. Fără nicio ezitare, puteți utiliza acest șablon de cumpărături pentru magazinul dvs. de comerț electronic. Vă mulțumesc foarte mult că ați citit acest articol. Dacă vă place foarte mult acest articol, atunci vă rugăm să lăsați un comentariu în secțiunea de comentarii sau să ne acordați o evaluare bună. Asta e tot pentru azi. Sa aveti o zi frumoasa!

Cumpărați șablon

Citiți mai multe: 10 cel mai bun tablou de bord de administrare React Redux 2020