Costruire un sito Web di e-commerce basato su React e GraphQL utilizzando Pickbazar

Ci sono molti modelli di acquisto disponibili in diversi mercati. Ma scegliere quello giusto è molto difficile. Oggi parleremo di un template per lo shopping o eCommerce chiamato "PickBazar" sviluppato da RedQ Inc. Si tratta di un nuovo template pubblicato nel marketplace di Envato.

Cos'è React e perché dovremmo usarlo?

React è una libreria JavaScript basata su componenti per la generazione di interfacce utente ed è stata introdotta da Facebook. Ci consente di creare componenti incapsulati che gestiscono il loro stato e quindi li compongono per creare interfacce utente complesse. ReactJS è una delle librerie dell'interfaccia utente ampiamente utilizzate che aiuta nella creazione di bellissime applicazioni Web che richiedono uno sforzo e una codifica minimi.

Che cos'è GraphQL e perché lo implementiamo?

GraphQL è stato sviluppato nel 2012 internamente da Facebook prima di essere rilasciato pubblicamente nel 2015. GraphQL è un linguaggio di manipolazione e query di dati open source per API e un runtime per soddisfare le query con i dati esistenti. GraphQL supporta la lettura, la scrittura e la sottoscrizione di modifiche ai dati (aggiornamenti in tempo reale, più comunemente implementati tramite WebHook). I server GraphQL sono disponibili per più lingue. Consente ai client di definire la struttura dati richiesta e la stessa struttura dati viene restituita dal server, motivo per cui impedisce la restituzione di quantità eccessive di dati.

Chi sarebbe avvantaggiato dal modello PickBazar?

Al giorno d'oggi, le attività di alimentari, farmacie, elettronica e telefoni cellulari tendono a essere pienamente operative attraverso una presenza online. Se un imprenditore vuole gestire una nuova attività attraverso la presenza online, il suo primo requisito sarebbe un sito ben progettato per funzionare senza intoppi. A questo punto, PickBazar è qui per fornire una soluzione completa al proprietario di un negozio per gestire la sua attività senza ostacoli. All'inizio, deve acquistare questo modello dal mercato Envato. Stiamo discutendo l'effettiva implementazione di base di questo modello. Allora iniziamo in questo articolo.

Campi di benefici

Drogheria

I generi alimentari rientrano naturalmente nelle necessità quotidiane. Quindi, i clienti che vengono per acquistare qualsiasi cosa dal tuo negozio di alimentari online riceveranno un sistema completo di gestione delle scorte. Una conoscenza completa dovrebbe essere fornita a lui o lei sul prodotto esaurito o disponibile. PickBazar è qui per mantenere il sistema di gestione delle scorte del tuo sito.

Farmacia

I prodotti della farmacia sono naturalmente essenziali al giorno d'oggi, in questa situazione COVID19. Il proprietario di un negozio di farmacia avrà sicuramente bisogno di un sistema di gestione delle categorie per dimostrare diversi tipi di medicinali, prodotti per l'infanzia e articoli essenziali per le donne separatamente, in modo che un potenziale cliente possa trovare rapidamente il suo prodotto. Se utilizzi PickBazar per il tuo negozio di farmacia online, puoi sradicare questo problema.

Consegna del cibo

La consegna di cibo è un'attività redditizia se riuscissi a mantenerla attraverso una presenza online audace; PickBazar è qui per aiutarti con questo aspetto. PickBazar ha un eccellente sistema di gestione delle consegne e una gestione del tracciamento degli ordini. Così puoi gestire la tua attività di consegna di cibo da zero con l'implementazione del modello PickBazar.

Negozio di libri

Il negozio di libri è un posto dove le persone vanno a comprare libri, ma devono perdere molto tempo a trovare il libro fisicamente, altrimenti è difficile conoscere l'autore di qualsiasi libro prima di acquistarlo. Quindi, se utilizzi PickBazar per il tuo negozio di libri per dargli una presenza online, PickBazar ti aiuterà sicuramente ad attirare i potenziali clienti. Con la gestione dell'autore, ogni libro ha la possibilità di mostrare i dettagli sull'autore e la gestione delle categorie ti aiuterà a classificare i tuoi libri disponibili in base al loro genere.

Alcune funzionalità di generalizzazione

Il sistema di gestione del pagamento è una funzionalità di PickBazar per qualsiasi tipo di negozio online. Con questa funzione, sia i clienti che i proprietari di negozi possono mantenere una connessione commerciale. Intendo l'indirizzo di consegna, il pagamento e il monitoraggio dell'ordine, tutti questi sono possibili tramite il sistema di gestione del pagamento.

PickBazar Dashboard è un'ottima funzionalità offerta dal modello. È una funzionalità indispensabile per il proprietario di un negozio online. Entrate totali, Ordine totale, Nuovo cliente, Consegna totale, Vendite dai social media, Cronologia vendite, Calcolo profitti e perdite, Obiettivi settimanali e mensili, tutte queste opzioni sono visibili e gestibili tramite PickBazar Dashboard.

Crea il tuo sito e-commerce con il modello React PickBazar

Il modello di e-commerce più veloce creato con React, NextJS, TypeScript, GraphQL, Type-GraphQL e Styled-Components. È facile da usare e gli sviluppatori hanno utilizzato GraphQL e type-GraphQL, puoi creare il tuo schema molto facilmente. GraphQL Playground crea la propria documentazione e il tuo team front-end adorerà usarlo. Creare un negozio online sarebbe più facile che mai.

Se implementi questo modello, puoi sicuramente aumentare le tue vendite. Per un funzionamento regolare e la gestione di un grande volume di dati di vendita e di tracciamento degli ordini, "PickBazar" sarebbe la scelta più significativa.

Visualizza la demo

Perché utilizzare il modello di acquisto React PickBazar?

Sviluppato con la tecnologia Bleeding Edge per il progetto altamente scalabile.

Negozio davanti

• Successivamente vengono utilizzati JS, React Apollo e GraphQL.
• Tutti i componenti sono scritti in TypeScript.
• Monorepo Supportato con Configurazione Lerna.
• Supporto SSR per la creazione di app altamente scalabili.

Pannello di controllo del negozio

• Vengono utilizzati Create React App (CRA), React Apollo e GraphQL.
• I componenti sono scritti in TypeScript e Base Web React UI Framework.
• Crea facilmente prodotti nel back-end.
• Modulo React Hooks per la gestione dei moduli.

Crea la tua prossima app di e-commerce con Pickbazar.

Crea una bellissima esperienza di commercio utilizzando il framework Next.js con rendering server universale. È molto facile da usare, RedQ Inc. ha utilizzato GraphQL e type-GraphQL.

Facile integrazione dei pagamenti con Stripe!

Stripe è la migliore piattaforma software per gestire un'attività su Internet. Stripe crea gli strumenti più potenti e flessibili per il commercio su Internet. RedQ Inc. integra Stripe con il suo modello PickBazar.

Reagisci alle caratteristiche del modello PickBazar

Tecnologia Bleeding Edge

Next JS, React Apollo e GraphQL sono usati per costruire un progetto di e-commerce super veloce.

Reagisci Apollo

React Apollo ti consente di recuperare i dati dal tuo server GraphQL e utilizzarli nella creazione di interfacce utente complesse e reattive.

Prestazioni veloci

Ottimizzato per dimensioni di build inferiori, compilazione di sviluppo più rapida e dozzine di altri miglioramenti.

Componenti integrati

I componenti sono scritti in TypeScript e Base Web React UI Framework. I componenti sono facili da capire.

Pronto per la distribuzione

Lo sviluppatore RedQ Inc. ha reso il processo di distribuzione semplice e pulito. Puoi distribuire il modello con Now.sh.

Supporto per autori d'élite

RedQ Inc. può assicurarti il ​​supporto appropriato per gli autori Elite e una risposta più rapida per i loro prodotti.

Guida introduttiva e installazione

Per iniziare con il modello devi seguire la procedura seguente. Per prima cosa, vai al PickBazar

directory. Quindi esegui il comando seguente per iniziare con una parte specifica.

// su filato di directory pickbazar

amministratore

Per avviare la parte del dashboard di amministrazione con i dati API corrispondenti, esegui i comandi seguenti.

// per la modalità dev esegui sotto il comando yarn dev:admin

// per la modalità di produzione esegui sotto il comando yarn build: admin

Negozio

Configura la chiave API Stripe in /packages/shop/next.config.js. Nella sezione env imposta STRIPE_PUBLIC_KEY sulla tua chiave pubblica stripe.

Per avviare la parte del negozio con l'API corrispondente, esegui i comandi seguenti.

// per la modalità dev esegui sotto il comando yarn dev:shop

// per la modalità di produzione esegui sotto il comando yarn build:shop

Se desideri testare l'amministratore della build di produzione o fare acquisti nell'ambiente locale, esegui i comandi seguenti.

amministratore

// build admin per filati di produzione build: admin

// esegui l'API del negozio necessaria per il test locale del filato dev:API-admin

// avvia l'amministratore in produzione filato serve:admin

Negozio

// build shop per filati di produzione build:shop

// esegui l'API del negozio necessaria per testare localmente il filato dev:api-shop

// avvia il negozio in produzione filato serve:shop

Struttura e personalizzazione delle cartelle

/packages/admin: in questa parte tutta la dashboard di amministrazione relativa alla codifica e alle funzioni.

/pacchetti/negozio: tutta la codifica e le funzioni relative al negozio.

/packages/api : codice relativo all'API sia per l'amministratore che per la sezione negozio.

i codici API relativi all'amministratore si trovano nella cartella admin.

i codici relativi al negozio sono nella cartella del negozio.

Configurazione e distribuzione

ora.sh

Se vuoi ospitare il modello in now.sh, segui il comando seguente.

API

• Passa a pacchetti/API
• Ora esegui sotto il comando

adesso

amministratore

• Dopo aver distribuito l'API, otterrai l'URL dell'endpoint API. Inserisci quell'URL in packages/admin/.env

REACT_APP_API_URL={metti_il_tuo_api_url_qui}/admin/graphql;

• Passa a packages/admin
• Ora esegui sotto il comando

adesso

Negozio

• Dopo aver distribuito l'API, otterrai l'URL dell'endpoint API. Inserisci quell'URL nel file

  packages/shop/next.config.js

env: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',

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

• Passa a pacchetti/negozio

• Ora esegui sotto il comando

adesso

Conclusione

Ora siamo arrivati ​​al punto finale di questo articolo. Ci auguriamo che tu abbia un'idea sul modello di shopping eCommerce PickBazar reagire GraphQL. Senza alcuna esitazione, puoi utilizzare questo modello di acquisto per il tuo negozio eCommerce. Grazie mille per aver letto questo articolo. Se ti piace davvero questo articolo, lascia un commento nella sezione commenti o dacci una buona valutazione. Questo é tutto per oggi. Buona giornata!

Acquista modello

Leggi di più: 10 migliori dashboard di amministrazione di React Redux 2020