Pour ce didacticiel, je vais vous montrer comment créer une application de marché à l'aide de Next.js, Cosmic et Stripe. Une fois que nous aurons terminé, vous serez équipé d'une base pour construire vos propres projets à l'aide de ces outils puissants. Commençons.
Les fonctionnalités bonus incluent le déploiement sur Vercel, mode sombre et clair et utilisation Lighthouse pour mesurer la performance du site Web métriques de base Web Vitals, ce qui augmente considérablement l'expérience de l'utilisateur et visibilité du site web dans les résultats de recherche SEO (le score Lighthouse de cette application affiché ci-dessous).
Les gars, si vous l'aimez s'il vous plaît upvote in Product Hunt.
- Next.js – évolutif et performant React.js cadre pour le développement web moderne. Fournit un large éventail de fonctionnalités, telles que le rendu hybride, la prélecture d'itinéraire, l'optimisation automatique des images et l'internationalisation, prêtes à l'emploi.
- Cosmique – rapide, entièrement géré CMS sans tête qui nous permet de gérer et de créer rapidement du contenu de site Web, y compris UGC (contenu généré par l'utilisateur).
- Stripe – infrastructure de paiement qui fournit des outils API pour recevoir des paiements uniques et des abonnements.
TL; DR
Consultez le code
Voir la démo en direct
Installer le modèle d'application
Tout d'abord, nous devons fournir l'architecture et le design
Concevoir, c'est fondamentalement démonter des choses, de telle sorte qu'elles puissent être reconstituées. Séparer les choses en choses qui peuvent être composées, c'est ce qu'est le design. — Suçon riche.
MVC signifie modèle de conception de logiciel modèle-vue-contrôleur
Voici ce que chacun de ces composants signifie :
- Modèle: Le backend qui contient toute la logique de données. Cosmique Type d'objet (Multiple ou Singleton) nous aident à créer des structures de données dynamiques et évolutives et l'essence de leurs transformations est indépendante du monde extérieur.
- Afficher (UI): L'interface utilisateur frontale ou graphique (GUI). Pour cela, nous utilisons React, qui est décrit comme le "V " couche dans le MVC.
- : Le cerveau de l'application contrôle l'affichage des données. Nous utilisons l'API Context de React pour dissocier l'état de la présentation Voir et faciliter la réutilisation de la logique métier.
Le modèle MVC est utilisé pour les applications Web modernes car il permet à l'application d'être évolutive, maintenable et facile à développer.
Configurer un projet avec Next.js
Next.js vise à améliorer deux choses : expériences des développeurs et des utilisateurs et est une boîte à outils complète pour créer des applications React ultra rapides. Next.js propose une abstraction qui résout les tâches les plus courantes, les plus banales et les plus complexes telles que le routage, l'internalisation et l'optimisation des images. Par défaut, Next.js pré-rend chaque page. Cela signifie que Next.js génère du HTML pour chaque page à l'avance, au lieu de tout faire par JavaScript côté client. Le pré-rendu peut améliorer les performances et SEO.
Next.js a deux formes de pré-rendu: Génération statique (SGS) et de Rendu côté serveur (RSS).
- Génération statique est la méthode de pré-rendu qui génère le HTML à temps de construction. Le HTML pré-rendu est ensuite réutilisés à chaque demande.
- Rendu côté serveur est la méthode de pré-rendu qui génère le HTML sur chaque demande.
Dans notre projet, nous utilisons Rendu côté serveur pour les données dynamiques et les pages de pré-rendu qui seront toujours à jour.
Pour commencer, nous allons créer un Next.js application qui inclut l'outillage et les configurations. Pour ce tutoriel, vous aurez besoin Node.js 12.22.0 ou une version ultérieure. Ouvrez le terminal, collez ou tapez
npx create-next-app@latest unft-marketplace
# or
yarn create next-app unft-marketplace
Accédez au nouveau répertoire et installez les dépendances à l'aide d'un gestionnaire de packages tel que npm
, yarn
ou pnpm
puis démarrez l'application en mode développement :
cd unft-marketplace
npm install cosmicjs stripe @stripe/stripe-js sass npm run dev
# or
yarn dev
Pour utiliser le modèle d'interface utilisateur, vous devez le cloner sur GitHub. Ouvrez le terminal, collez ou tapez ce code pour installer toutes les dépendances et exécutez-le.
git clone https://github.com/cosmicjs/unft-marketplace
cd unft-marketplace yarn install
yarn dev
Ouvert http://localhost:3000 dans votre navigateur pour voir la page d'accueil ascétique.
Gestion des clés/secrets API avec Next.js
Lorsque nous travaillons avec des clés et des secrets d'API, nous devons nous assurer de les garder secrets et hors du contrôle de version, tout en les rendant facilement disponibles en tant que .env
variables. Vous devrez créer un fichier .env à la racine du projet. Se connecter à Cosmique et à partir Bucket Settings > API Access
prend les valeurs suivantes :
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
La NEXT_PUBLIC_
préfixe expose automatiquement cette variable au navigateur. Next.js insérera la valeur de ceux-ci dans le code source visible publiquement au moment de la construction/du rendu. Assurez-vous donc de ne pas utiliser ce préfixe pour les valeurs secrètes ! De la même manière, connectez-vous à Stripe et de pour les développeurs section prenez vos clés.
Itinéraires d'API Next.js
Next.js Itinéraires d'API pour créer des points de terminaison d'API dans l'application Next.js. Ils seront déployés comme Fonctions sans serveur (aussi connu sous le nom Lambda). Dans notre cas, pour filtrer le contenu Cosmic par paramètres, nous allons créer un fichier appelé filter.js
in pages/api
répertoire au format suivant :
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); }
}
Noter que:
Présentation et intégration des fonctionnalités de Cosmic
Cosmique est un excellent CMS sans tête qui nous permet de modéliser, gérer et stocker notre contenu et nos médias dans un tableau de bord hébergé pratique, puis de récupérer notre contenu à l'aide des outils API disponibles. L'API fournit des fonctionnalités de recherche et de filtrage prêtes à l'emploi, ce qui facilite la création de fonctionnalités de recherche et de filtrage dans notre application. Cosmic fournit des fonctionnalités et des fonctionnalités modernes complètes pour créer des sites Web interactifs, indépendants et dynamiques.
API personnalisable – Créez le schéma, les modèles et les contrôleurs de l'API à partir du tableau de bord d'administration. Cosmic offre à la fois un REST et GraphQL API pour notre commodité.
Crochets Web - Rappelez partout où vous en avez besoin, pour obtenir les fonctionnalités que vous souhaitez, prêtes à l'emploi.
Requêtes – vous permettre de trouver le bon actif avec vos données en rechercher, filtrer et trier. Vous pouvez utiliser certains requêtes avancées pour créer des capacités de recherche plus granulaires.i
Ajouter un média et un objet - Vous pouvez activer le contenu généré par l'utilisateur dans votre application à l'aide de l'API Cosmic. Les utilisateurs peuvent télécharger et créer du contenu interactif dans vos modèles de données définis. Cosmic n'est pas seulement un système de gestion de contenu entièrement géré, mais l'API peut également être utilisée pour créer des expériences de contenu générées par l'utilisateur.
Démarrer avec Cosmic
La première étape consiste à créer un compte cosmique gratuit développement Tableau de bord cosmique et un nouveau Projet. Choisissons l'option "Commencer à partir de zéro".
Cosmique Type d'objet (Multiple ou Singleton) nous aident à créer des structures de données dynamiques, évolutives et réutilisables et notre modèle de contenu. La création de sections de modèle, facile à partir de zéro, définit les "métachamps" dans le "modèle de contenu". Pour un modèle réutilisable utilisé sur plusieurs objets, choisissez Type d'objet multiple. Pour notre projet, nous allons créer un réutilisable Produits Type d'objet modèle en utilisant Multiple Relations d'objet avec Catégories. Cela nous permettra d'ajouter ou de supprimer Produits à Catégories et activer la recherche et le filtrage par catégorie.
Après avoir créé le modèle de contenu pour nos produits, vous pouvez commencer à ajouter des produits à partir du tableau de bord comme ceci :
Vous pouvez définir d'autres modèles de contenu en créant des types d'objets en suivant cette conception de schéma :
- Singleton pour un modèle unique,
- Multiple pour les modèles réutilisables.
Utilisation de Cosmic requêtes, vous pouvez trouver rapidement le contenu spécifique en fonction de rechercher, filtrer et trier Critères.
Contenu généré par l'utilisateur
Utiliser les capacités cosmiques pour Ajouter des médias et des objets, les utilisateurs connectés peuvent télécharger et créer leur propre contenu soumis par formulaire. Pour notre cas d'utilisation, l'utilisateur peut créer de nouveaux Produits à ajouter au marché pour la vente.
Le téléchargement de fichiers et de contenu dynamique sur Next.js nécessite des routes d'API, car nous devrons stocker les clés secrètes en toute sécurité dans des variables d'environnement côté serveur. Voici un bref aperçu de la façon de télécharger des fichiers avec React et Itinéraires d'API Next.js en utilisant formidable
, fs
ainsi que, Cosmique bucket.addMedia
méthode.
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; }
};
Présentation et intégration de Stripe
Stripe fournit un moyen de saisir les paiements dans votre application. Tout comme Cosmic a fait tout le gros du travail pour l'infrastructure de contenu, Stripe fournit l'infrastructure et les outils de commerce électronique pour créer des expériences de paiement agréables pour vos clients, quel que soit le service ou le produit vendu.
Grâce à Exigences de conformité PCI, la bibliothèque Stripe.js doit être chargée depuis les serveurs de Stripe. Cela crée un défi lorsque vous travaillez avec des applications rendues côté serveur, car l'objet fenêtre n'est pas disponible sur le serveur. Pour nous aider à gérer cette complexité, Stripe fournit un chargement de l'emballage qui permet d'importer Stripe.js comme un module 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 est chargé en tant qu'effet secondaire du import '@stripe/stripe-js'
déclaration.
Créer la session de paiement Stripe
Ajoutez un point de terminaison sur votre serveur qui crée un Séance de paiement. Une session de paiement contrôle ce que votre client voit sur la page de paiement, comme les éléments de ligne, le montant et la devise de la commande, et les méthodes de paiement acceptables. De plus, vous pouvez activer ou désactiver les méthodes de paiement directement dans le Tableau de bord à rayures.
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'); }
}
Prochaines étapes
Bien que cette application de marché soit principalement une preuve de concept pour en savoir plus sur ces solutions modernes, c'est un bon point de départ sur lequel s'appuyer. Il est possible d'ajouter de nouvelles fonctionnalités telles que :
- Page de compte utilisateur pour afficher les commandes
- Page de profil utilisateur pour montrer les jpegs achetés
- Système de commentaires pour capturer les critiques et les conversations
- Option Bitcoin / Lightning pour effectuer des achats
Conclusion
J'espère que vous avez apprécié ce didacticiel explorant comment utiliser de puissants outils d'API pour créer une application de marché complète. Ce marché uNFT dynamique, fonctionnel, personnalisable et entièrement intégré, propulsé par Suivant.js, Cosmique et Stripe peut également être personnalisé pour d'autres types d'entreprises. N'hésitez pas à bifurquer le code, et utilisez-le comme vous préférez !
- Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
- Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
- La source: https://www.codementor.io/nairage/build-an-unft-marketplace-with-next-js-cosmic-and-stripe-integration-1v892i89x2
- a
- A Propos
- acceptable
- Selon
- Compte
- à travers
- admin
- Après
- Tous
- permet
- toujours
- montant
- et de
- de n'importe où
- A PART
- api
- appli
- Application
- applications
- applications
- architecture
- atout
- auto
- Automatique
- automatiquement
- disponibles
- RETOUR
- backend
- car
- va
- ci-dessous
- Améliorée
- BRÛLANT
- corps
- Box
- navigateur
- construire
- Développement
- la performance des entreprises
- entreprises
- acheter
- Appelez-nous
- capacités
- capturer
- carte
- maisons
- catégories
- Catégories
- CD
- challenge
- Passer au paiement
- Selectionnez
- Cms
- code
- Couleur
- Commun
- complet
- complexe
- complexité
- conformité
- composants électriques
- composé
- concept
- conclusion
- contient
- contenu
- contexte
- des bactéries
- contrôles
- commodité
- Pratique
- engendrent
- crée des
- La création
- critères
- Devise
- des clients
- Clients
- personnalisables
- Foncé
- tableau de bord
- données
- Réglage par défaut
- Définit
- délicieux
- déployé
- déployer
- décrit
- Conception
- dev
- Développement
- directement
- Commande
- Dramatiquement
- Dynamic
- chacun
- e-commerce
- effet
- permettre
- permet
- Endpoint
- Environment
- équipé
- erreur
- essence
- Développer vous
- d'experience
- Expériences
- Explorer
- faciliter
- RAPIDE
- Fonctionnalités:
- Des champs
- Déposez votre dernière attestation
- Fichiers
- une fonction filtre
- filtration
- Trouvez
- Prénom
- Abonnement
- formulaire
- le format
- redoutable
- document
- Fondation
- Framework
- gratuitement ici
- De
- L'extrémité avant
- FS
- plein
- d’étiquettes électroniques entièrement
- fonctionnel
- fondamentalement
- généré
- génère
- obtenez
- obtention
- gif
- Bien
- l'
- ayant
- têtes
- aider
- ici
- haute performance
- Accueil
- d'espérance
- organisé
- Comment
- How To
- HTML
- HTTPS
- Hybride
- image
- l'importation
- améliorer
- in
- comprendre
- inclut
- Y compris
- Augmente
- indépendant
- Infrastructure
- installer
- plutôt ;
- des services
- l'intégration
- Interactif
- Interfaces
- indépendamment
- IT
- articles
- JavaScript
- XNUMX éléments à
- clés
- connu
- gros
- couche
- APPRENTISSAGE
- Bibliothèque
- lifting
- lumière
- foudre
- Gamme
- le travail
- Maintenable
- a prendre une
- FAIT DU
- Fabrication
- gérer
- gérés
- gestion
- manager
- les gérer
- marché
- max
- veux dire
- mesurer
- Médias
- message
- Métadonnées
- méthode
- méthodes
- Mode
- modèle
- numériques jumeaux (digital twin models)
- Villas Modernes
- module
- PLUS
- (en fait, presque toutes)
- plusieurs
- Besoin
- Nouveauté
- Nouvelles fonctionnalités
- next
- Next.js
- objet
- objets
- Offres Speciales
- ouvert
- à mettre en œuvre pour gérer une entreprise rentable. Ce guide est basé sur trois décennies d'expérience
- Option
- de commander
- Autre
- vue d'ensemble
- propre
- paquet
- paramètres
- Patron de Couture
- Payer
- Paiement
- Moyens de paiement
- Paiements
- performant
- Platon
- Intelligence des données Platon
- PlatonDonnées
- veuillez cliquer
- Post
- défaillances
- alimenté
- solide
- présentation
- prix
- processus
- Produit
- Produits
- Profil
- Projet
- projets
- preuve
- preuve de concept
- fournir
- fournit
- publiquement
- acheté
- mettre
- Quantité
- vite.
- Réagir
- recevoir
- Les relations
- supprimez
- rendu
- nécessaire
- a besoin
- résultat
- Résultats
- réutilisable
- Avis
- racine
- Itinéraire
- routes
- Courir
- SOLDE
- même
- Toupet
- évolutive
- Rechercher
- recherche
- secret
- Section
- les sections
- en toute sécurité
- voit
- seo
- séparation
- service
- Session
- brainstorming
- set
- Sets
- mise
- Paramétres
- montrer
- Logiciels
- vendu
- Solutions
- Résout
- quelques
- Identifier
- code source
- groupe de neurones
- peuplements
- Commencer
- j'ai commencé
- Région
- Déclaration
- étapes
- Boutique
- bande
- abonnement
- tel
- combustion propre
- Prenez
- prend
- prise
- tâches
- modèle
- terminal
- La
- L'État
- leur
- donc
- des choses
- fiable
- Titre
- à
- ensemble
- Boîte à outils
- les outils
- transformations
- tutoriel
- types
- ui
- expérience unique et authentique
- mise à jour
- us
- USD
- utilisé
- cas d'utilisation
- Utilisateur
- Interface utilisateur
- utilisateurs
- Plus-value
- Valeurs
- version
- web
- Applications Web
- Développement Web
- Site Web
- Quoi
- qui
- tout en
- Wikipédia
- sera
- dans les
- de travail
- world
- Votre
- zéphyrnet