Создание приложения для продажи билетов с использованием Next.js, Vercel и Back4App

в этом учебном пособии мы создадим систему бронирования билетов с использованием next js с маршрутизатором приложения, back4app в качестве серверной части и tailwind css для стилизации приложение позволяет пользователям создавать, обновлять, просматривать и удалять билеты, используя parse server на back4app для управления базой данных 1\ предварительные требования перед началом убедитесь, что у вас есть node js установлен на вашем компьютере ( руководство по установке node js https //nodejs org/ ) аккаунт back4app ( зарегистрируйтесь бесплатно https //www back4app com/ ) аккаунт vercel для развертывания ( зарегистрируйтесь в vercel https //vercel com/ ) 2\ настройка back4app войдите в свою панель управления back4app и создайте новый проект перейдите в обозреватель данных и создайте новый класс под названием билет со следующей схемой название поля тип название строка описание строка категория строка приоритет номер прогресс номер статус строка создано дата (автоматически сгенерировано) обновлено дата (автоматически сгенерировано) 3\ настройка фронтенда (next js) 3 1 создать новый проект next js выполните следующую команду, чтобы создать новый проект next js npx create next app\@latest ticketing app cd ticketing app 3 2 установите зависимости установите tailwind css , font awesome , и parse sdk для операций на стороне сервера npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome free parse npx tailwindcss init p 3 3 настройка tailwind css отредактируйте файл tailwind config js для настройки путей к контенту tailwind css module exports = { content \[ ' /app/ / {js,ts,jsx,tsx}', ' /components/ / {js,ts,jsx,tsx}', ], theme { extend {}, }, plugins \[], } в styles/globals css , добавьте импорты tailwind @tailwind base; @tailwind components; @tailwind utilities; 3 4 создание структуры проекта следуя предоставленной структуре, создайте необходимые директории и компоненты структура директорий /app /tickets /\[id] page js layout js page js /components deleteblock jsx nav jsx prioritydisplay jsx progressdisplay jsx statusdisplay jsx ticketcard jsx ticketform jsx /lib parseclient js 4\ настройка клиента parse в папке /lib создайте файл parseclient js для настройки sdk parse import parse from 'parse'; // initialize parse sdk parse initialize('your app id', 'your js key'); parse serverurl = 'https //parseapi back4app com'; export default parse; замените 'your app id' и 'your js key' на учетные данные вашего проекта back4app 5\ создание ключевых компонентов 5 1 ticketform этот компонент будет обрабатывать как создание так и обновление тикетов в /components/ticketform jsx , создайте следующее import { usestate } from 'react'; import parse from ' /lib/parseclient'; export default function ticketform({ ticket }) { const \[title, settitle] = usestate(ticket? title || ''); const \[description, setdescription] = usestate(ticket? description || ''); const handlesubmit = async (e) => { e preventdefault(); const ticket = parse object extend('ticket'); const newticket = ticket || new ticket(); newticket set('title', title); newticket set('description', description); try { await newticket save(); alert('ticket saved successfully!'); } catch (error) { console error('error saving ticket ', error); } }; return ( \<form onsubmit={handlesubmit}> \<input type="text" value={title} onchange={(e) => settitle(e target value)} placeholder="title" required /> \<textarea value={description} onchange={(e) => setdescription(e target value)} placeholder="description" required /> \<button type="submit">save ticket\</button> \</form> ); } 5 2 ticketcard этот компонент будет отображать информацию о каждом билете в /components/ticketcard jsx import link from 'next/link'; import progressdisplay from ' /progressdisplay'; export default function ticketcard({ ticket }) { return ( \<div classname="border p 4"> \<h2>{ticket title}\</h2> \<p>{ticket description}\</p> \<progressdisplay progress={ticket progress} /> \<link href={`/tickets/${ticket objectid}`}>edit\</link> \</div> ); } 5 3 удалитьблок компонент подтверждения для удаления билетов в /components/deleteblock jsx import parse from ' /lib/parseclient'; export default function deleteblock({ ticketid, ondelete }) { const handledelete = async () => { const query = new parse query('ticket'); const ticket = await query get(ticketid); try { await ticket destroy(); alert('ticket deleted successfully'); ondelete(); } catch (error) { console error('error deleting ticket ', error); } }; return ( \<button onclick={handledelete}>delete ticket\</button> ); } 5 4 отображениепрогресса этот компонент показывает прогресс в виде процентной шкалы в /components/progressdisplay jsx export default function progressdisplay({ progress }) { return ( \<div> \<div classname="w full bg gray 200 rounded"> \<div classname="bg blue 600 text xs font medium text blue 100 text center p 0 5 leading none rounded" style={{ width `${progress}%` }} \> {progress}% \</div> \</div> \</div> ); } 5 4 отображениепрогресса 6\ страницы и маршрутизация 6 1 список билетов в /app/page js , отобразите список билетов import { useeffect, usestate } from 'react'; import parse from ' /lib/parseclient'; import ticketcard from ' /components/ticketcard'; export default function home() { const \[tickets, settickets] = usestate(\[]); useeffect(() => { const fetchtickets = async () => { const query = new parse query('ticket'); const results = await query find(); settickets(results); }; fetchtickets(); }, \[]); return ( \<div> \<h1>tickets\</h1> {tickets map(ticket => ( \<ticketcard key={ticket id} ticket={ticket} /> ))} \</div> ); } 6 2 детали билета и редактирование в /app/tickets/\[id]/page js import { useeffect, usestate } from 'react'; import { userouter } from 'next/router'; import parse from ' / / /lib/parseclient'; import ticketform from ' / / /components/ticketform'; import deleteblock from ' / / /components/deleteblock'; export default function ticketdetail() { const router = userouter(); const { id } = router query; const \[ticket, setticket] = usestate(null); useeffect(() => { if (!id) return; const fetchticket = async () => { const query = new parse query('ticket'); const result = await query get(id); setticket(result); }; fetchticket(); }, \[id]); const handledelete = () => { router push('/'); }; if (!ticket) return \<div>loading \</div>; return ( \<div> \<ticketform ticket={ticket} /> \<deleteblock ticketid={ticket id} ondelete={handledelete} /> \</div> ); } 7\ развертывание на vercel 7 1 создайте учетную запись vercel если у вас еще нет учетной записи vercel, перейдите на vercel com https //vercel com/ и создайте учетную запись вы можете зарегистрироваться с помощью github, gitlab или bitbucket vercel упрощает связывание вашего репозитория напрямую для развертываний 7 2 отправьте свой код на github чтобы развернуть ваше приложение на vercel, вам нужно, чтобы ваш проект был размещен на платформе контроля версий, такой как github (или gitlab/bitbucket) если ваш проект еще не на github, выполните следующие шаги инициализируйте git в каталоге вашего проекта добавьте ваш проект на github 7 3 установите vercel cli (необязательно) если вы предпочитаете развертывание непосредственно из командной строки, установите vercel cli глобально в качестве альтернативы вы можете развернуть через панель управления vercel, которую мы рассмотрим далее 7 4 подключите ваш репозиторий github к vercel перейдите к vercel https //vercel com/ нажмите новый проект выберите репозиторий git, который содержит ваш проект next js настройте ваш проект vercel автоматически определит, что это next js проект и применит правильные настройки сборки установите корневую директорию на папку проекта (если необходимо) 7 5 установите переменные окружения вам нужно будет настроить ваши учетные данные back4app и любые другие переменные окружения в vercel в настройках проекта vercel , перейдите в раздел переменные окружения добавьте следующие переменные окружения 7 6 настройте конфигурацию parse в env local (необязательно) если вы используете локальные переменные окружения во время разработки, убедитесь, что вы создали файл env local в корневом каталоге вашего проекта с следующими переменными эти переменные окружения также будут использоваться vercel, как только они будут установлены в панели управления vercel 7 7 настройка параметров сборки (необязательно) убедитесь, что версия node js и команда сборки настроены правильно (vercel автоматически определяет это) для next js приложений настройки по умолчанию должны быть команда сборки npm run build выходной каталог next/ 7 8 развертывание проекта после того как вы свяжете свой репозиторий github, vercel автоматически запустит процесс сборки и развертывания вы можете просмотреть статус своей сборки в панели управления vercel 7 9 проверьте журналы развертывания если возникнут какие либо проблемы во время развертывания, вы можете просмотреть журналы развертывания, чтобы отладить их 7 10 доступ к вашему развернутому приложению после успешного развертывания vercel предоставит вам уникальный url, по которому ваше приложение next js будет доступно вы можете посетить этот url, чтобы получить доступ к вашему развернутому приложению для продажи билетов например https //your app name vercel app/ 8\ обеспечение плавного развертывания учетные данные back4app дважды проверьте, что ваши переменные окружения back4app правильно установлены как в env local (для локальной разработки), так и в панели управления vercel (для продакшена) cors (обмен ресурсами между разными источниками) убедитесь, что back4app разрешает ваш url vercel в своих настройках cors, которые вы можете настроить в панели управления back4app в разделе безопасность проверьте свой api перед развертыванием протестируйте взаимодействия с вашим api back4app локально, чтобы убедиться, что все работает гладко 9\ заключение с этими шагами ваше приложение для продажи билетов на next js теперь должно быть развернуто на vercel , используя back4app в качестве бэкенда это завершает полный цикл разработки, начиная с настройки back4app, создания фронтенда в next js и заканчивая развертыванием приложения в сети на vercel если вы хотите внести обновления, просто отправьте изменения в свой репозиторий github, и vercel автоматически запустит новое развертывание