برای این آموزش، من به شما نشان خواهم داد که چگونه با استفاده از Next.js، Cosmic و Stripe یک برنامه بازار بسازید. پس از اتمام کار، شما به پایه ای مجهز خواهید شد تا با استفاده از این ابزار قدرتمند، پروژه های خود را بسازید. بیا شروع کنیم.
ویژگی های پاداش شامل استقرار به ورسل، حالت تاریک و روشن و با استفاده از فانوس دریایی برای اندازه گیری عملکرد وب سایت معیارهای حیاتی وب اصلی، که تجربه کاربر را به طرز چشمگیری افزایش می دهد و دید وب سایت در نتایج جستجوی SEO (امتیاز Lighthouse این برنامه در زیر نمایش داده شده است).
بچه ها اگه خوشتون اومد لطفا upvote in شکار محصولات.
- Next.js - مقیاس پذیر و با کارایی بالا React.js چارچوبی برای توسعه وب مدرن مجموعه بزرگی از ویژگیها، مانند رندر ترکیبی، واکشی پیشفرض مسیر، بهینهسازی خودکار تصویر و بینالمللیسازی را در خارج از جعبه ارائه میکند.
- کیهانی - سریع، کاملا مدیریت شده CMS بدون سر که ما را قادر می سازد تا به سرعت محتوای وب سایت از جمله UGC (محتوای تولید شده توسط کاربر) را مدیریت و ایجاد کنیم.
- خط خطی – زیرساخت پرداخت که ابزارهای API را برای دریافت پرداخت های یکباره و اشتراک فراهم می کند.
TL؛ DR
کد را بررسی کنید
نمایش نسخه ی نمایشی زنده
قالب برنامه را نصب کنید
ابتدا باید معماری و طراحی را ارائه دهیم
طراحی اساساً در مورد جدا کردن چیزها است، به گونه ای که بتوان آنها را دوباره کنار هم قرار داد. تفکیک اشیا به چیزهایی که بتوان آنها را ترکیب کرد این همان طراحی است. - ریچ هیکی.
MVC مخفف الگوی طراحی نرم افزار model-view-controller است
در اینجا معنی هر یک از آن اجزا چیست:
- مدل: Backendی که شامل تمام منطق داده ها است. کیهانی انواع شی (مولتیپل یا سینگلتون) به ما کمک می کند تا ساختارهای داده ای پویا و مقیاس پذیر ایجاد کنیم و ماهیت تحولات آنها مستقل از دنیای بیرون است.
- مشاهده (UI): رابط کاربری پیشانی یا گرافیکی (GUI). برای آن، ما از React استفاده می کنیم که به عنوان "V” لایه در MVC
- کنترل کننده: مغز برنامه نحوه نمایش داده ها را کنترل می کند. ما از Context API React برای جدا کردن حالت از ارائه استفاده می کنیم چشم انداز و استفاده مجدد از منطق تجاری را تسهیل می کند.
الگوی MVC برای برنامه های کاربردی وب مدرن استفاده می شود زیرا به برنامه اجازه می دهد مقیاس پذیر، قابل نگهداری و به راحتی گسترش یابد.
راه اندازی یک پروژه با Next.js
Next.js دو چیز را بهبود می بخشد: تجربیات توسعه دهنده و کاربر و یک جعبه ابزار کامل برای ساخت برنامه های سریع React است. Next.js یک انتزاع ارائه می دهد که رایج ترین، پیش پا افتاده ترین و پیچیده ترین وظایف مانند مسیریابی، درونی سازی و بهینه سازی تصویر را حل می کند. بهطور پیشفرض، Next.js هر صفحه را پیشرندر میکند. این به این معنی است که Next.js HTML را برای هر صفحه از قبل تولید می کند، به جای اینکه همه کارها توسط جاوا اسکریپت سمت کلاینت انجام شود. پیش رندر می تواند منجر به عملکرد بهتر و SEO.
Next.js دو شکل دارد پیش رندر: تولید استاتیک (SSG) و رندر سمت سرور (SSR).
- تولید استاتیک روش پیش رندر است که HTML را در تولید می کند زمان ساختن. سپس HTML از پیش رندر شده است استفاده مجدد در هر درخواست
- رندر سمت سرور روش پیش رندرینگ است که HTML را روی آن تولید می کند هر درخواست.
در پروژه ما استفاده می کنیم رندر سمت سرور برای داده های پویا و صفحات پیش رندر که همیشه به روز خواهند بود.
برای شروع، ما یک را ایجاد می کنیم Next.js برنامه ای که شامل ابزار و تنظیمات است. برای این آموزش، شما نیاز دارید Node.js و 12.22.0 یا نسخه جدیدتر. ترمینال را باز کنید، بچسبانید یا تایپ کنید
npx create-next-app@latest unft-marketplace
# or
yarn create next-app unft-marketplace
به دایرکتوری جدید تغییر دهید و وابستگی ها را با استفاده از یک مدیریت بسته مانند نصب کنید npm
, yarn
، یا pnpm
و سپس برنامه را در حالت توسعه راه اندازی کنید:
cd unft-marketplace
npm install cosmicjs stripe @stripe/stripe-js sass npm run dev
# or
yarn dev
برای استفاده از رابط کاربری قالب باید آن را شبیه سازی کنید GitHub. ترمینال را باز کنید، این کد را بچسبانید یا تایپ کنید تا همه وابستگی ها نصب شوند و آن را اجرا کنید.
git clone https://github.com/cosmicjs/unft-marketplace
cd unft-marketplace yarn install
yarn dev
باز کن http://localhost:3000 در مرورگر خود صفحه اصلی زاهد را ببینید.
مدیریت کلیدها/رازهای API با Next.js
هنگام کار با کلیدها و اسرار API، باید مطمئن شویم که آنها را مخفی نگه می داریم و از کنترل نسخه خارج می کنیم، در حالی که به راحتی آنها را به عنوان در دسترس قرار می دهیم. .env
متغیرها شما باید یک فایل .env در ریشه پروژه ایجاد کنید. ورود به کیهانی و از Bucket Settings > API Access
مقادیر زیر را می گیرد:
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_
پیشوند به طور خودکار این متغیر را در معرض مرورگر قرار می دهد. Next.js مقدار آنها را در کد منبع قابل مشاهده برای عموم در زمان ساخت/رندر وارد می کند. بنابراین مطمئن شوید که از این پیشوند برای مقادیر مخفی استفاده نکنید! به همین ترتیب وارد شوید خط خطی و برای توسعه دهندگان بخش کلیدهای خود را بگیرید
مسیرهای API Next.js
Next.js مسیرهای API برای ایجاد نقاط انتهایی API در داخل برنامه Next.js. آنها به عنوان مستقر خواهند شد توابع بدون سرور (همچنین به عنوان شناخته شده لامبدا). در مورد ما، برای فیلتر کردن محتوای کیهانی بر اساس پارامترها، یک فایل به نام ایجاد می کنیم filter.js
in pages/api
دایرکتوری که فرمت زیر را دارد:
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); }
}
توجه داشته باشید که:
نمای کلی و ادغام ویژگی های کیهانی
کیهانی یک CMS بدون هد عالی است که به ما امکان میدهد محتوا و رسانه خود را در یک داشبورد میزبانی مناسب مدلسازی، مدیریت و ذخیره کنیم، سپس محتوای خود را با استفاده از ابزارهای API موجود واکشی کنیم. API قابلیتهای جستجو و فیلتر کردن را فراهم میکند که ساختن ویژگیهای جستجو و فیلتر را در برنامه ما آسان میکند. Cosmic قابلیت ها و ویژگی های کامل مدرن را برای ایجاد وب سایت های تعاملی، مستقل و پویا ارائه می دهد.
API قابل تنظیم – طرح، مدلها و کنترلکنندههای API را از داشبورد مدیریت بسازید. کیهانی هر دو را ارائه می دهد REST و GraphQL API برای راحتی ما.
قلابهای وب - هر جا که نیاز دارید تماس بگیرید تا عملکرد مورد نظر خود را از جعبه دریافت کنید.
پرس و جو - به شما امکان می دهد دارایی صحیح را با داده های خود پیدا کنید جستجو، فیلتر کردن و مرتب سازی. می توانید از مقداری استفاده کنید پرس و جوهای پیشرفته برای ایجاد قابلیت های جستجوی دانه بندی بیشتر.i
رسانه و شی را اضافه کنید - می توانید محتوای تولید شده توسط کاربر را در برنامه خود با استفاده از Cosmic API فعال کنید. کاربران می توانند محتوای تعاملی را در مدل های داده تعریف شده شما آپلود و ایجاد کنند. Cosmic نه تنها یک سیستم مدیریت محتوای کاملاً مدیریت شده است، بلکه API را می توان برای ایجاد تجربیات محتوای تولید شده توسط کاربر نیز مورد استفاده قرار داد.
شروع کار با Cosmic
اولین گام ایجاد الف است حساب رایگان کیهانی به داشبورد کیهانی و یک پروژه جدید بیایید گزینه "شروع از ابتدا" را انتخاب کنیم.
کیهانی انواع شی (مولتیپل یا سینگلتون) به ما در ایجاد ساختارهای داده پویا، مقیاس پذیر و قابل استفاده مجدد و مدل محتوای خود کمک کنید. ایجاد بخشهای مدل، به راحتی از ابتدا، «متافیلدها» را در «مدل محتوا» تعریف میکند. برای یک مدل قابل استفاده مجدد که در چندین شیء استفاده می شود، انتخاب کنید نوع شی چندگانه. برای پروژه خود، یک قابل استفاده مجدد ایجاد خواهیم کرد محصولات نوع شی مدل با استفاده از چندین روابط شی با دسته بندی ها. این به ما امکان می دهد که اضافه یا حذف کنیم محصولات به دسته بندی ها و جستجو و فیلتر کردن بر اساس دسته را فعال کنید.
پس از ایجاد مدل محتوا برای محصولات ما، می توانید شروع به اضافه کردن محصولات از داشبورد به شرح زیر کنید:
می توانید با ایجاد Object Types به دنبال این طرح طرح، مدل های محتوای دیگری را تعریف کنید:
- Singleton برای یک مدل منحصر به فرد،
- چندگانه برای مدل های قابل استفاده مجدد
با استفاده از کیهان نمایش ها، می توانید به سرعت محتوای خاص را مطابق با آن پیدا کنید جستجو، فیلتر و مرتب سازی شاخص.
محتوای ایجاد شده توسط کاربر
استفاده از قابلیت های کیهانی برای رسانه و اشیاء را اضافه کنید, کاربرانی که وارد سیستم شدهاند میتوانند محتوای ارسالی خود را آپلود کرده و ایجاد کنند. برای مورد استفاده ما، کاربر می تواند جدید ایجاد کند محصولات برای افزودن به بازار برای فروش
آپلود فایلها و محتوای پویا در Next.js به مسیرهای API نیاز دارد زیرا باید کلیدهای مخفی را بهطور ایمن در متغیرهای محیط سمت سرور ذخیره کنیم. در اینجا مروری کوتاه بر نحوه آپلود فایل ها با React و مسیرهای API Next.js با استفاده از formidable
, fs
، و کیهانی bucket.addMedia
روش.
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; }
};
نمای کلی و ادغام راه راه
خط خطی راهی برای ثبت پرداخت ها در برنامه شما فراهم می کند. درست مانند Cosmic که تمام کارهای سنگین را برای زیرساخت محتوا انجام داده است، Stripe نیز زیرساخت و ابزارهای تجارت الکترونیک را برای ایجاد تجربه پرداخت لذت بخش برای مشتریان شما، صرف نظر از خدمات یا محصولی که فروخته می شود، فراهم می کند.
بعلت الزامات انطباق با PCI، کتابخانه Stripe.js باید از سرورهای Stripe بارگیری شود. این یک چالش در هنگام کار با برنامه های رندر سمت سرور ایجاد می کند، زیرا شی پنجره در سرور در دسترس نیست. برای کمک به ما در مدیریت این پیچیدگی، Stripe a لفاف بارگیری که اجازه می دهد Stripe.js را مانند یک ماژول 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 به عنوان یک عارضه جانبی بارگذاری می شود import '@stripe/stripe-js'
بیانیه.
جلسه پرداخت Stripe را ایجاد کنید
یک نقطه پایانی را به سرور خود اضافه کنید که a را ایجاد کند جلسه پرداخت. جلسه پرداخت، آنچه را که مشتری شما در صفحه پرداخت می بیند، مانند موارد خط، مبلغ سفارش و ارز، و روش های پرداخت قابل قبول را کنترل می کند. همچنین، میتوانید روشهای پرداخت را مستقیماً در قسمت فعال یا غیرفعال کنید نوار داشبورد.
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'); }
}
مراحل بعدی
اگرچه این برنامه بازار عمدتاً اثبات مفهومی برای یادگیری در مورد این راه حل های مدرن است، شروع خوبی برای ساختن آن است. امکان اضافه کردن ویژگی های جدید وجود دارد مانند:
- صفحه حساب کاربری برای نمایش سفارشات
- صفحه نمایه کاربر برای نمایش jpeg های خریداری شده
- سیستم نظر برای گرفتن نظرات و مکالمات
- گزینه بیت کوین / لایتنینگ برای خرید
نتیجه
امیدوارم از این آموزش در مورد چگونگی استفاده از ابزارهای قدرتمند API-first برای ساختن یک برنامه کاربردی بازار با امکانات کامل لذت برده باشید. این بازار پویا، کاربردی، قابل تنظیم و کاملاً یکپارچه uNFT که توسط Next.js، کیهانی و راه راه می تواند برای انواع دیگر مشاغل نیز سفارشی شود. لطفا احساس راحتی کنید کد را چنگال کنیدو هر طور که ترجیح می دهید از آن استفاده کنید!
- محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
- پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
- منبع: https://www.codementor.io/nairage/build-an-unft-marketplace-with-next-js-cosmic-and-stripe-integration-1v892i89x2
- a
- درباره ما
- قابل قبول
- مطابق
- حساب
- در میان
- مدیر سایت
- پس از
- معرفی
- اجازه می دهد تا
- همیشه
- مقدار
- و
- هر جا
- جدا
- API
- نرم افزار
- کاربرد
- برنامه های کاربردی
- برنامه های
- معماری
- دارایی
- خودکار
- اتوماتیک
- بطور خودکار
- در دسترس
- به عقب
- بخش مدیریت
- زیرا
- بودن
- در زیر
- بهتر
- شعله ور
- بدن
- جعبه
- مرورگر
- ساختن
- بنا
- کسب و کار
- کسب و کار
- خرید
- صدا
- قابلیت های
- گرفتن
- کارت
- مورد
- دسته
- دسته بندی
- CD
- به چالش
- وارسی
- را انتخاب کنید
- اس ام اس
- رمز
- رنگ
- مشترک
- کامل
- پیچیده
- پیچیدگی
- انطباق
- اجزاء
- مرکب
- مفهوم
- نتیجه
- شامل
- محتوا
- زمینه
- کنترل
- گروه شاهد
- راحتی
- مناسب
- ایجاد
- ایجاد
- ایجاد
- ضوابط
- واحد پول
- مشتری
- مشتریان
- سفارشی
- تاریک
- داشبورد
- داده ها
- به طور پیش فرض
- تعریف می کند
- لذت بخش
- مستقر
- استقرار
- شرح داده شده
- طرح
- برنامه نویس
- پروژه
- مستقیما
- نمایش دادن
- به طور چشمگیری
- پویا
- هر
- تجارت الکترونیک
- اثر
- قادر ساختن
- را قادر می سازد
- نقطه پایانی
- محیط
- مجهز بودن
- خطا
- ماهیت
- گسترش
- تجربه
- تجارب
- بررسی
- تسهیل کردن
- FAST
- امکانات
- زمینه
- پرونده
- فایل ها
- فیلتر
- فیلتر
- پیدا کردن
- نام خانوادگی
- پیروی
- فرم
- قالب
- نیرومند
- اشکال
- پایه
- چارچوب
- رایگان
- از جانب
- ظاهر
- FS
- کامل
- کاملا
- تابعی
- قابلیت
- اساساً
- تولید
- تولید می کند
- دریافت کنید
- گرفتن
- GIF
- خوب
- بزرگ
- داشتن
- هدر
- کمک
- اینجا کلیک نمایید
- عملکرد بالا
- صفحه اصلی
- امید
- میزبانی
- چگونه
- چگونه
- HTML
- HTTPS
- ترکیبی
- تصویر
- واردات
- بهبود
- in
- شامل
- شامل
- از جمله
- افزایش
- مستقل
- شالوده
- نصب
- در عوض
- یکپارچه
- ادغام
- تعاملی
- رابط
- قطع نظر از
- IT
- اقلام
- جاوا اسکریپت
- نگاه داشتن
- کلید
- شناخته شده
- بزرگ
- لایه
- یاد گرفتن
- کتابخانه
- بلند کردن اجسام
- سبک
- رعد و برق
- لاین
- زنده
- قابل نگهداری
- ساخت
- باعث می شود
- ساخت
- مدیریت
- اداره می شود
- مدیریت
- مدیر
- مدیریت
- بازار
- حداکثر
- به معنی
- اندازه
- رسانه ها
- پیام
- متاداده
- روش
- روش
- حالت
- مدل
- مدل
- مدرن
- واحد
- بیش
- اکثر
- چندگانه
- نیاز
- جدید
- ویژگی های جدید
- بعد
- Next.js
- هدف
- اشیاء
- پیشنهادات
- باز کن
- بهینه سازی
- گزینه
- سفارش
- دیگر
- مروری
- خود
- بسته
- پارامترهای
- الگو
- پرداخت
- پرداخت
- روش های پرداخت
- مبلغ پرداختی
- کارایی
- افلاطون
- هوش داده افلاطون
- PlatoData
- لطفا
- پست
- پتانسیل
- صفحه اصلی
- قوی
- ارائه
- قیمت
- روند
- محصول
- محصولات
- مشخصات
- پروژه
- پروژه ها
- اثبات
- اثبات مفهوم
- ارائه
- فراهم می کند
- عمومی
- خریداری شده
- قرار دادن
- مقدار
- به سرعت
- واکنش نشان می دهند
- گرفتن
- روابط
- برداشتن
- تفسیر
- درخواست
- نیاز
- نتیجه
- نتایج
- قابل استفاده مجدد
- بررسی
- ریشه
- مسیر
- مسیرها
- دویدن
- فروش
- همان
- ساس
- مقیاس پذیر
- جستجو
- جستجو
- راز
- بخش
- بخش
- ایمن
- می بیند
- جستجوگرها
- جدا کردن
- سرویس
- جلسه
- جلسات
- تنظیم
- مجموعه
- محیط
- تنظیمات
- نشان
- نرم افزار
- فروخته شده
- مزایا
- حل می کند
- برخی از
- منبع
- کد منبع
- خاص
- می ایستد
- شروع
- آغاز شده
- دولت
- بیانیه
- گام
- opbevare
- پارچه راه راه
- اشتراک، ابونمان
- چنین
- سیستم
- گرفتن
- طول می کشد
- مصرف
- وظایف
- قالب
- پایانه
- La
- دولت
- شان
- از این رو
- اشیاء
- زمان
- عنوان
- به
- با هم
- ابزار
- ابزار
- تحولات
- آموزش
- انواع
- ui
- منحصر به فرد
- در جریان روز
- us
- دلار آمریکا
- استفاده کنید
- مورد استفاده
- کاربر
- رابط کاربری
- کاربران
- ارزش
- ارزشها
- نسخه
- وب
- برنامه های وب
- توسعه وب
- سایت اینترنتی
- چی
- که
- در حین
- ویکیپدیا
- اراده
- در داخل
- کارگر
- جهان
- شما
- زفیرنت