چگونه یک سایت ثبت رویداد را فقط در 1 هفته با Nuxt، Directus، OpenAI، و TailwindCSS ارسال کردم

من اخیراً یک سایت ثبت رویداد را در 1 هفته ارسال کردم که برای برخی از شرکت ها 1 سال طول می کشد. و من قطعا یک توسعه دهنده 10x نیستم.

وقتی برای اولین بار کدنویسی را یاد می گرفتم، همیشه از نگاه های پشت پرده به نحوه ساخت پروژه ها قدردانی می کردم، خیلی… این داستان و نحوه ساخت آن است.

TLDR؛

این را در اینجا اضافه کنید، فقط برای دریافت “پشته شما چیست؟” سوالات دور از ذهن 🤣

تمام جزئیات تلخ در زیر آمده است.

داستان 🐰

Leapweek را ملاقات کنید

LeapWeek.dev جشن راه اندازی یک هفته ای ما برای توسعه دهندگان در Directus است. اعلامیه های محصول، کارگاه ها، هدایا و موارد دیگر وجود دارد.

رویدادهای زنده معمولاً از طریق وب سایت Directus TV (https://directus.io/tv) میزبانی می شوند، اما ثبت نام معمولاً توسط ابزارهای دیگری مانند Lu.ma و چند ابزار دیگر انجام می شود.

استفاده از ابزارهای شخص ثالث بدیهی است که به معنای هزینه های اضافی است که افزایش می یابد، اما این نگرانی اصلی نبود.

سردردهای بزرگی که باید حل شوند عبارت بودند از:

1. یک تجربه بسیار بی ارتباط برای کاربران
2. یک گردش کار ناکارآمد (تلفظ “💩-y”) برای تیم ما.

بنابراین با این سومین هفته کبیسه، ما تماس گرفتیم تا «پلتفرم» خود را بسازیم که کاملاً با پشته موجود ما ادغام شده است و می‌تواند برای رویدادهای هفته کبیسه مجدد استفاده شود.

اهداف 🥅

به غیر از پشتیبانی از ثبت نام برای رویداد، چند کادر مهم برای بررسی وجود داشت.

• “مالک” دارایی رویداد خودمان است.
• یک حلقه رشد برای ایجاد انگیزه در سهام ایجاد کنید.
• از هوش مصنوعی برای چیزی “متفاوت” برای جلب توجه استفاده کنید.

مفهوم 👨‍🚀🚀

رویدادهای هفته کبیسه قبلی ما با موضوع فاصله داشتند. ما می‌دانستیم که می‌خواهیم همان تم را داشته باشیم، بنابراین مجبور نیستیم هزاران خلاقیت جدید را تولید کنیم.

جدا از آن، سایت ثبت رویداد بیشتر یک بوم خالی بود.

ما از Vercel Ship و مفهوم نشان ثبت کاربر آنها الهام گرفتیم. همچنین شرکت های دیگری را در گذشته دیده بودم که کارهای مشابهی انجام می دادند.

من واقعاً شخصی‌سازی را دوست داشتم، اما قطعاً می‌خواستم مفهوم “بالا” را مطرح کنم.

پچ ماموریت

حلقه اشتراک گذاری برای پروژه حیاتی بود و اولین ایده ما برای آن یک پچ ماموریت بود.

زیبا به نظر می‌رسید، وقتی فرم را پر می‌کردید به صورت پویا یک نام اضافه می‌کرد، و یک افکت اختلاف منظر برای ایجاد احساس «سه بعدی» در آن گنجانده شد. خوب می شد، اما احساس خوبی نداشت.

هر چند ما به تکرار ادامه دادیم. در نقطه‌ای نسبتاً در اوایل فرآیند، من یک فضانورد خرگوش را در صفحه فرود به‌عنوان یک قطعه لهجه پنهان کرده بودم.

فکر بعدی من این بود که “خوب، بیایید از آن استفاده کنیم تا مفهوم پچ را حتی جالب تر کنیم”. بنابراین من قابلیت آپلود یک آواتار و انداختن آن را در لباس فضانوردی اضافه کردم که در پشت پچ سفارشی ظاهر شد. این کمی جالب تر به نظر می رسید.

و سپس….من می‌خواستم فضانورد را حتی بیشتر با اضافه کردن وصله‌های سفارشی برای کشور و شرکت آن شخص سفارشی کنم.

پس از چند جلسه پارازیت با GPT و دمو سریعی که تمام تیم را لبخند زدند، فضانورد به نقطه کانونی تبدیل شد.

و Rabbitars متولد شدند.

بنابراین اساسا “Rabbitars” فضانوردان خرگوش شخصی هستند. این نسخه ما از نشان ثبت نام است و قطعا بالاتر از آن است. آنها عبارتند از:

• هد شات خرگوش توسط هوش مصنوعی ایجاد شد
• پچ آرم شرکت
• پچ نام
• پچ کشور

و هنگامی که پیوند ارجاع منحصر به فرد خود را به اشتراک می گذارید – ما از آن آواتار برای ایجاد یک تصویر اشتراک گذاری اجتماعی شخصی نیز استفاده می کنیم.

باطن 🧱

پشتیبان توسط Directus – یک پلتفرم داده که ترکیبی از BaaS و CMS است، پشتیبانی می‌شود. با اکثر پایگاه های داده SQL جفت می شود.

فراهم می کند:

• APIهای REST آماده فوراً (یا GraphQL اگر این مورد شماست)
• ذخیره سازی دارایی / فایل
• احراز هویت و مجوزها
• رابط مدیریت که در آن می توانید داده ها را مدیریت و ویرایش کنید، مدل داده خود را بدون نوشتن کد بسازید یا تنظیم کنید
• داشبوردهای بدون کد
• ابزار اتوماسیون کم کد برای ساخت جریان های ساده یا پیچیده

Directus کل باطن را از تهیه بلیط و ثبت نام گرفته تا ارائه داده ها برای صفحه فرود اجرا می کند.

مدل داده

من مدل داده را از طریق رابط کاربری داخل Directus ایجاد کردم.

این بدان معناست که دیدن تجربه ویرایش برای تیم من آسان بود.

من همچنین یک داشبورد خوب برای تیم تهیه کردم تا ثبت نام‌ها را ردیابی کند و همه کشورهای مختلف کاربران را مشاهده کند. این در Directus پخته شده است و من تقریباً 5 دقیقه طول کشید.

Frontend 🧱

فرانت‌اند روی Nuxt اجرا می‌شود – متا فریمورک محبوب تمام پشته در بالای Vue.js. من از طرفداران Nuxt هستم و چندین سال است که از آن در پروژه های مختلف استفاده می کنم.

مسیرها

مسیریابی مبتنی بر فایل Nuxt یک الگوی مفید برای سرعت بخشیدن به پروژه ها است. یک جزء Vue را در /pages دایرکتوری و شما یک مسیر دریافت می کنید.

و واقعاً تعداد انگشت شماری از مسیرها برای این پروژه وجود دارد.

• / – صفحه فرود
• /tickets – صفحه ثبت نام
• /tickets/customize – (فقط وارد شده)
• /ticket/[ticket] – صفحه شخصی rabbitar
• /auth/login – در صورت تعویض دستگاه یا خروج از سیستم وارد شوید
• /auth/reset – اگر به نحوی ایمیل اولیه را با کد تایید اشتباه قرار دهید
• /terms – شرایط و ضوابط برای هدیه

قوانین مسیر Nuxt با اجازه دادن به حالت‌های مختلف رندر بر اساس مسیرهای خاص – یک ویژگی غیر معمول برای سایر چارچوب‌ها، سایت را سریع نگه می‌دارد.

برای مثال، داده‌های صفحه فرود از باطن Directus واکشی می‌شوند، اما از الگوی ذخیره‌سازی قدیمی و اعتبارسنجی مجدد برای عملکرد استفاده می‌کنند.

من همچنین یک پروکسی برای Clearbit Logo API تنظیم کردم تا همیشه از تعقیب سرور آنها جلوگیری کنم. این سایت از API خود برای واکشی آرم شرکت ها بر اساس وب سایتی که وارد می کنید استفاده می کند.

صفحه فرود

صفحه فرود رویداد از مفهوم «صفحه‌ساز» استفاده می‌کند که در آن هر کسی در تیم بازاریابی ما می‌تواند طرح‌بندی صفحه را به‌روزرسانی کند و اجزای جدیدی مانند گروه‌های کارت یا سؤالات را اضافه کند.

در باطن، این با استفاده از روابط Multi-to-Any (M2A) Directus تنظیم می شود. هر بلوک می تواند طرح واره متفاوتی داشته باشد.

همه اینها در سمت Nuxt جمع می شود. داده ها از باطن Directus واکشی می شوند و سپس به a ارسال می شوند PageBuilder مؤلفه ای که وظیفه حلقه زدن در میان آرایه ای از بلوک ها و رندر کردن مؤلفه ها به صورت پویا را بر عهده دارد.

UI

این سایت از کتابخانه Nuxt UI برای بسیاری از اجزای اصلی مانند دکمه ها و ورودی های فرم استفاده می کند. Nuxt UI به نوبه خود از کتابخانه هایی مانند TailwindCSS و Headless UI استفاده می کند. قالب بندی آن بسیار آسان است و از tailwind-merge برای مدیریت تضادهای کلاس استفاده می کند.

این واقعاً با ایجاد نکردن مجدد برخی از مؤلفه‌های «غنی‌تر» مانند جعبه‌های ترکیبی یا منوهای کشویی در زمان زیادی صرفه‌جویی کرد.

تولید AI Rabbitars 🧱

تصاویر واقعی rabbitar با استفاده از OpenAI’s Dall•E 3 تولید می‌شوند. در حال حاضر، کاربر متوسط ​​1.52 آواتار تولید می‌کند که مجموعاً 0.0608 دلار برای هر ثبت‌کننده هزینه دارد. ما محدودیت سختی از 3 نسل برای جلوگیری از هر گونه صورتحساب ترسناک دیوانه کننده OpenAI تعیین کرده ایم.

یک مسیر سرور Nuxt وجود دارد که OpenAI API را فراخوانی می کند، تصویر تولید شده را در نمونه Directus ذخیره می کند و آواتارهای تولید شده توسط کاربر را به روز می کند.

بیش از چند چالش وجود داشت که من با این موضوع روبرو شدم. 😅

ردیابی ارجاع

ما می‌خواستیم فرصت‌های بیشتری را در اعطای ارجاع ارائه دهیم، بنابراین باید مکانیزمی برای کنترل آن ایجاد کنیم.

هنگامی که rabbitar شخصی خود را ایجاد کردید – می توانید آن را به اشتراک بگذارید تا شانس خود را برای برنده شدن افزایش دهید. هر فردی که معرفی می‌کنید، یک ورودی دیگر را برای شما در هدایا به دست می‌آورد.

برای پیگیری این موضوع، بازدید کننده را با a تگ می کنیم referral_ticket_id هر زمان که از URL شخصی ثبت‌کننده بازدید می‌کنند، کوکی کنید. هر زمان که یک بازدیدکننده برای رویداد ثبت نام می کند، کوکی را بررسی می کنیم و a را به روز می کنیم referred_by فیلد داخل باطن Directus ما.

این به عنوان “Swag-O-Meter” در صفحه بلیط شخصی آنها برای ثبت نام کننده ظاهر می شود.

مهلت زمانی عملکرد

Leapweek.dev در Netlify میزبانی می شود. ما تعدادی از پروژه‌های دیگر خود را در آنجا میزبانی کرده‌ایم و من کاملاً با گردش کار آشنا هستم. با Nuxt، به غیر از اتصال مخزن و اضافه کردن متغیرهای ENV، پیکربندی زیادی برای انجام دادن وجود ندارد.

اما Dall•E 3 در حال حاضر تقریباً بین 15-21 ثانیه طول می کشد تا یک خرگوش برای سایت ایجاد شود. در توسعه محلی، این مشکلی نبود، اما پس از استقرار در Netlify، ما در عملکردهای بدون سرور وقفه زمانی دریافت می‌کردیم، زیرا زمان پیش‌فرض 10 ثانیه است.

تیم پشتیبانی Netlify دقیقاً آنجا بود تا به ما کمک کند. آنها محدودیت ما را به 26 ثانیه افزایش دادند و ما دیگر مشکلی نداشتیم.

URL های طولانی

در ابتدا می خواستیم این را از یک زیر دامنه سایت اجرا کنیم. ولی https://leapweek.directus.io/tickets/bryant-gillespie کاراکترهای زیادی را می خورد و آدرس های اینترنتی کوتاهتر برای به اشتراک گذاری بهتر است. ما واقعاً Dub.co را برای اشتراک‌گذاری محتوای خود در شبکه‌های اجتماعی جستجو می‌کنیم، اما اینجا برای ایجاد پیوند مناسب نبود.

بنابراین ما را انتخاب کردیم leapweek.dev دامنه تمام شد leapweek.directus.io.

اما ما می توانستیم بهتر عمل کنیم.

نام مستعار Nuxt

ویژگی مستعار در definePageMeta Nuxt، تولید نام مستعار را برای یک مسیر خاص بسیار آسان می کند. بنابراین صفحه در /tickets/bryant-gillespie همچنین قابل ارائه در /t/bryant-gillespie.

که یک URL نهایی مانند:

https://leapweek.dev/t/bryant-gillespie

تصاویر و ذخیره سازی دینامیک OG

تصاویر OG که به صورت دینامیکی تولید می‌شوند واقعاً فوق‌العاده هستند، اما اطمینان از ارائه کامل آنها در پلتفرم‌های رسانه‌های اجتماعی مختلف دشوار است. هر پلتفرم تمایل دارد حافظه پنهان مخصوص به خود را برای تصاویر OG داشته باشد که تشخیص آن را نسبت به معبد آب در Ocarina of Time دشوارتر می کند.

برای تولید واقعی تصاویر اشتراک اجتماعی پویا و ذخیره آنها، ما از ماژول Nuxt OG-Image توسط Harlan Wilton استفاده می کنیم. بسیاری از پیچیدگی های ارائه تصاویر اجتماعی پویا را از بین می برد.

در زیر کاپوت، از Satori توسط Vercel برای رندر کردن تصاویر از یک جزء Vue استفاده می کند. اما به همین دلیل نکاتی در مورد ساختار اجزا و نحوه استایل دادن به تصاویر وجود دارد.

هنگامی که فردی آواتار خود را به روز می کند، ما نیز باید تصویر ذخیره شده را پاک کنیم تا تصویر قبلی را نشان ندهیم. این در داخل مسیر سرور Nuxt نیز انجام می شود.

من از نتایج تا اینجا کاملا راضی هستم.

این سایت به تازگی در روز دوشنبه این هفته راه اندازی شد و ما در حال حاضر بیش از 300 ثبت نام کننده و 475 خرگوش تولید کرده ایم.

به غیر از چند توییت از تیم ما و یک پست لینکدین، 0 تبلیغ وجود دارد.

و تا آنجا که من می دانم، ما اکنون بزرگترین مجموعه آواتارهای خرگوش را در جهان داریم.

بنابراین اگر زمانی به 100 یا 1000 عکس سر خرگوش نیاز داشتید، من را پسر خود در نظر بگیرید.

اگر علاقه مند هستید و می خواهید در سایت بگردید و خرگوش خود را تولید کنید – آن را دنبال کنید. می توانید سایت را در https://leapweek.dev بررسی کنید