Создайте торговую площадку uNFT с интеграцией Next.js, Cosmic и Stripe

Создайте торговую площадку uNFT с интеграцией Next.js, Cosmic и Stripe

В этом уроке я покажу вам, как создать приложение для торговой площадки, используя Next.js, Cosmic и Stripe. После того, как мы закончим, у вас будет основа для создания собственных проектов с использованием этих мощных инструментов. Давайте начнем.

Дополнительные функции включают в себя развертывание в Vercel, темном и светлом режимах, а также использование Lighthouse для измерения производительности основных веб-показателей веб-сайта, что значительно повышает удобство работы пользователя и видимость веб-сайта в результатах поиска SEO (это оценка приложения Lighthouse, показанная ниже).

Ребята, если вам это нравится, пожалуйста, проголосуйте в разделе Product Hunt.

Инструменты, которые мы будем использовать

• Next.js — масштабируемый и высокопроизводительный фреймворк React.js для современной веб-разработки. Предоставляет большой набор функций, таких как гибридный рендеринг, предварительная выборка маршрута, автоматическая оптимизация изображения и интернационализация.
• Cosmic — быстрая, полностью управляемая безголовая CMS, которая позволяет нам быстро управлять и создавать контент веб-сайта, включая UGC (пользовательский контент).
• Stripe — платежная инфраструктура, предоставляющая API-инструменты для приема разовых и подписных платежей.

TL;DR

Проверить код
Посмотреть демоверсию
Установить шаблон приложения

Во-первых, нам нужно предоставить архитектуру и дизайн

Дизайн — это, по сути, разбирать вещи таким образом, чтобы их можно было снова собрать. Разделение вещей на вещи, которые можно составить, — вот что такое дизайн. — Богатый Хикки.

MVC означает шаблон проектирования программного обеспечения модель-представление-контроллер.

Вот что означает каждый из этих компонентов:

• Модель: серверная часть, содержащая всю логику данных. Космические типы объектов (Multiple или Singleton) помогают нам создавать динамические, масштабируемые структуры данных, и сущность их преобразований не зависит от внешнего мира.
• Вид (UI): внешний интерфейс или графический интерфейс пользователя (GUI). Для этого мы используем React, который описывается как слой «V» в MVC.
• Контроллер. Мозги приложения управляют отображением данных. Мы используем контекстный API React, чтобы отделить состояние от представления View и облегчить повторное использование бизнес-логики.

Шаблон MVC используется для современных веб-приложений, поскольку он позволяет масштабировать приложение, поддерживать его и легко расширять.

Настройка проекта с Next.js

Next.js призван улучшить две вещи: удобство для разработчиков и пользователей и представляет собой полный набор инструментов для создания молниеносно быстрых приложений React. Next.js предлагает абстракцию, которая решает наиболее распространенные, обыденные и сложные задачи, такие как маршрутизация, интернализация и оптимизация изображений. По умолчанию Next.js выполняет предварительную визуализацию каждой страницы. Это означает, что Next.js заранее создает HTML для каждой страницы, вместо того, чтобы все это делал клиентский JavaScript. Предварительный рендеринг может привести к повышению производительности и 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 
npm install 
#or 
yarn install 
npm run dev 
#or 
yarn dev

Откройте http://localhost:3000 в своем браузере, чтобы увидеть аскетичную домашнюю страницу.

Управление ключами/секретами API с помощью Next.js

При работе с ключами и секретами API мы должны убедиться, что мы храним их в секрете и вне контроля версий, в то же время удобно делая их доступными в виде .env переменных. Вам нужно будет создать файл .env в корне проекта. Вход в Cosmic и от 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

Префикс NEXT_PUBLIC_ автоматически предоставляет эту переменную браузеру. Next.js вставит их значение в общедоступный исходный код во время сборки/рендеринга. Поэтому не используйте этот префикс для секретных значений! Таким же образом войдите в раздел Stripe и для разработчиков и заберите свои ключи.

NEXT_PUBLIC_prefix автоматически предоставляет эту переменную браузеру. Next.js вставит их значение в общедоступный исходный код во время сборки/рендеринга. Поэтому не используйте этот префикс для секретных значений! Таким же образом войдите в раздел Stripe и для разработчиков и заберите свои ключи.

Маршруты API Next.js

Next.js API Routes для создания конечных точек API внутри приложения Next.js. Они будут развернуты как бессерверные функции (также известные как лямбда-выражения). В нашем случае для фильтрации космического контента по параметрам мы создадим файл с именем filter.js в каталоге pages/api следующего формата:

Next.js API Routes для создания конечных точек API внутри приложения Next.js. Они будут развернуты как бессерверные функции (также известные как лямбда-выражения). В нашем случае для фильтрации космического контента по параметрам мы создадим файл с именем filter.js в каталоге pages/api следующего формата:

Обратите внимание, что req — это экземпляр http.IncomingMessage, а также несколько предварительно созданных промежуточных программ, а res — это экземпляр http.ServerResponse, а также некоторые вспомогательные функции.

Обзор и интеграция космических функций

Cosmic — это отличная CMS без управления контентом, которая позволяет нам моделировать, управлять и хранить наш контент и мультимедиа на удобной размещенной панели инструментов, а затем извлекать наш контент с помощью доступных инструментов API. API предоставляет встроенные возможности поиска и фильтрации, что упрощает создание функций поиска и фильтрации в нашем приложении. Cosmic предоставляет полный набор современных функций и возможностей для создания интерактивных, независимых и динамичных веб-сайтов.

Настраиваемый API. Создавайте схемы, модели и контроллеры для API с панели администратора. Для нашего удобства Cosmic предлагает как REST, так и GraphQL API.
Веб-перехватчики — обратные вызовы в любом месте, где вам нужно, чтобы получить нужные функции без дополнительных настроек.
Запросы — позволяют найти нужный объект с вашими данными с помощью поиска, фильтрации и сортировки. Вы можете использовать некоторые расширенные запросы для создания более детальных возможностей поиска.
Добавить мультимедиа и объект — вы можете включить пользовательский контент в своем приложении с помощью Cosmic API. Пользователи могут загружать и создавать интерактивный контент в определенных вами моделях данных. Cosmic — это не только полностью управляемая система управления контентом, но и API, который можно использовать для создания пользовательского контента.

Начало работы с Космиком

Первый шаг — создание бесплатной учетной записи Cosmic в Cosmic Dashboard и нового проекта. Выбираем опцию Начать с нуля.

Космические типы объектов (Multiple или Singleton) помогают нам создавать динамические, масштабируемые, многократно используемые структуры данных и нашу модель контента. Создание разделов модели, простое с нуля, определяет Метаполя в Модели контента. Для многоразовой модели, используемой в нескольких объектах, выберите Несколько типов объектов. Для нашего проекта мы создадим повторно используемую модель типа объекта Products, используя множественные отношения объектов с категориями. Это позволит нам добавлять или удалять Продукты в Категории, а также включать поиск и фильтрацию по категориям.

После создания модели контента для наших продуктов вы можете начать добавлять продукты с панели управления следующим образом:

Вы можете определить другие модели содержимого, создав типы объектов в соответствии со следующей схемой:

• Синглтон за уникальную модель,
• Несколько для многоразовых моделей.

Используя запросы Cosmic, вы можете быстро найти определенный контент в соответствии с критериями поиска, фильтрации и сортировки.

Контент, создаваемый пользователями

Используя возможности Cosmic для Добавления мультимедиа и объектов, вошедшие в систему пользователи могут загружать и создавать собственный контент, отправленный через форму. В нашем случае пользователь может создавать новые Продукты и добавлять их на рынок для продажи.

Для загрузки файлов и динамического содержимого в Next.js требуются API-маршруты, поскольку нам потребуется безопасно хранить секретные ключи в переменных среды на стороне сервера. Вот краткий обзор того, как загружать файлы с помощью React и маршрутов API Next.js с использованием методов formidable, fs и Космического bucket.addMedia.

Обзор и интеграция Stripe

Stripe позволяет отслеживать платежи в вашем приложении. Подобно тому, как Cosmic проделал всю тяжелую работу по инфраструктуре контента, Stripe предоставляет инфраструктуру и инструменты электронной коммерции для создания восхитительных способов оплаты для ваших клиентов, независимо от продаваемой услуги или продукта.

Из-за требований соответствия PCI библиотеку Stripe.js необходимо загружать с серверов Stripe. Это создает проблемы при работе с приложениями, отображаемыми на стороне сервера, поскольку объект окна недоступен на сервере. Чтобы помочь нам справиться с этой сложностью, Stripe предоставляет загрузочную оболочку, которая позволяет импортировать Stripe.js как модуль ES:

Stripe.js загружается как побочный эффект оператора import '@stripe/stripe-js'.

Создайте сеанс оформления заказа Stripe

Добавьте конечную точку на свой сервер, которая создает Сеанс проверки. Сеанс оформления заказа контролирует то, что ваш клиент видит на странице оплаты, например позиции, сумму и валюту заказа, а также приемлемые способы оплаты. Кроме того, вы можете включить или отключить способы оплаты прямо в Панель управления Stripe.

Следующие шаги

Хотя это рыночное приложение в основном является проверкой концепции, чтобы узнать об этих современных решениях, оно является хорошим стартом для дальнейшего развития. Возможно добавление новых функций, таких как:

1. Страница учетной записи пользователя для отображения заказов
2. Страница профиля пользователя для демонстрации купленных изображений в формате JPEG
3. Система комментариев для сбора отзывов и разговоров
4. Биткойн / Lightning вариант для совершения покупок

Заключение

Надеюсь, вам понравился этот учебник, в котором вы узнаете, как использовать мощные инструменты API для создания полнофункционального приложения для торговой площадки. Этот динамичный, функциональный, настраиваемый и полностью интегрированный рынок uNFT на базе Next.js, Cosmic и Stripe можно настроить и для других видов бизнеса. Пожалуйста, не стесняйтесь форкнуть код и используйте его по своему усмотрению!