راهنمای گام به گام برای ایجاد یک برنامه وب پشته کامل با استفاده از NEXT JS و SUPABASE 🙌🙌💥..
در عصر دیجیتال امروزی، اپلیکیشن ها نقشی حیاتی در زندگی ما ایفا می کنند و دسترسی فوری به اطلاعات و خدمات را فراهم می کنند. اگر به پخت و پز علاقه دارید یا می خواهید دستور العمل های کیک مورد علاقه خود را با جهان به اشتراک بگذارید، ساختن یک برنامه دستور پخت کیک می تواند یک پروژه هیجان انگیز باشد. در این پست وبلاگ، ما شما را در فرآیند ایجاد یک برنامه دستور پخت کیک با استفاده از Supabase و Next.js راهنمایی می کنیم، دو ابزار قدرتمندی که توسعه را کارآمد و لذت بخش می کنند.
Supabase چیست؟
Supabase یک جایگزین Firebase منبع باز است که مجموعه ای از خدمات باطن، از جمله احراز هویت، پایگاه داده و عملکردهای بلادرنگ را ارائه می دهد. این به شما امکان می دهد بدون نیاز به توسعه سمت سرور، به سرعت برنامه های وب و موبایل بسازید. با Supabase می توانید به راحتی احراز هویت کاربر را مدیریت کنید، داده ها را ذخیره کنید و به روز رسانی های بلادرنگ را پیاده سازی کنید.
چرا Next.js را انتخاب کنید؟
Next.js یک چارچوب محبوب React است که رندر سمت سرور (SSR) را فعال می‌کند و یک تجربه توسعه عالی را ارائه می‌دهد. ویژگی هایی مانند تقسیم خودکار کد، رندر سمت سرور و تولید سایت ایستا را ارائه می دهد که آن را به گزینه ای عالی برای ساخت برنامه های کاربردی و سئو دوستانه تبدیل می کند. Next.js همچنین یک سیستم مسیریابی بصری و یکپارچه سازی یکپارچه با اجزای React را ارائه می دهد.
برای شروع، مطمئن شوید که Node.js و npm را روی دستگاه خود نصب کرده اید. در اینجا نحوه راه اندازی پروژه آورده شده است:
یک پروژه Next.js جدید با اجرای دستور زیر ایجاد کنید و مطمئن شوید که tailwind را نیز شامل می شود:
`
`
کیک های npx create-next-app
`
`
من اسم کیک‌های خودم را گذاشتم، اما شما می‌توانید هر چیزی را که راحت هستید نام ببرید.
به دایرکتوری پروژه بروید:
کیک سی دی
کتابخانه و وابستگی های مشتری Supabase را نصب کنید:
npm @supabase/supabase-js را نصب کنید
به supabase.com بروید و برای یک حساب ثبت نام کنید یا به سادگی می توانید با حساب GitHub خود وارد شوید. یک پایگاه داده ایجاد کنید و یک جدول جدید ایجاد کنید. نکته جالب در مورد supabase این است که رابط کاربری بسیار دوستانه ای ارائه می دهد و کار با آن بسیار آسان است، من فقط آن را دوست دارم:
من یک جدول درست کردم و نام آن را کیک گذاشتم:
پس از اتمام کار به استودیو مقابل بروید تا ما بتوانیم روی پروژه خود کار کنیم 😊😊
طراحی رابط کاربری:
Next.js گزینه های مختلفی را برای استایل دادن به برنامه شما ارائه می دهد، از جمله ماژول های CSS، styled-components یا tailwind CSS. یکی را انتخاب کنید که مطابق با ترجیحات شما باشد. یک طرح بندی و ساختار مؤلفه برای برنامه خود ایجاد کنید، از جمله صفحات برای صفحه اصلی، لیست دستور العمل ها و جزئیات دستورالعمل های جداگانه.
من شخصاً از Float UI استفاده کردم، می‌توانم به شما تضمین بدهم که این یک تغییر بازی در طراحی جلویی کار است. دارند:
فقط کپی و پیست است من مقداری کد را از Float UI وارد خواهم کرد. می توانید * را اجرا کنیدnpm run dev * در cli خود دستور دهید تا مطمئن شوید که وب سایت Next js شما به درستی راه اندازی و اجرا می شود. اکنون می توانید طراحی صفحه وب خود را متناسب با طراحی خود شروع کنید. من به دنبال ایجاد یک پوشه کامپوننت ها در دایرکتوری src/app خود هستم:
فایلی به نام Nav.tsx ایجاد کنید و به Float UI بروید تا کد را دریافت کنید.
مؤلفه Nav را به layout.tsx اصلی خود وارد کنید و آن را قبل از {children} داخل تگ بدنه قرار دهید:
ابتدا باید داده هایی را از supabase واکشی کنیم که بتوانیم با آن کار کنیم. اجازه دهید با ایجاد یک فایل به نام supabase.js در دایرکتوری ریشه شروع کنیم.
ما باید به supabase برویم و کلید anon عمومی را که بعداً به فایل .env.local و آدرس اینترنتی مورد نیاز خود اضافه خواهیم کرد، دریافت کنیم.
تنظیمات پروژه خود را در supabase باز کنید و به API بروید:
شما به آدرس عمومی و anon عمومی نیاز خواهید داشت. کلید anon supabase را در فایل your.env.local که در دایرکتوری ریشه ایجاد کرده اید کپی کنید:
بازگشت به فایل supabase.js کد زیر را داشته باشید:
url supabase خود را کپی و جایگذاری کنید.
در صفحه اصلی page.tsx داده ها را با کمک قلاب useEffect و قلاب useState واکشی کنید:
مطمئن شوید که جدولی ایجاد کرده اید و داده هایی را برای واکشی وارد کرده اید. Supabase یک رابط کاربری گرافیکی ساده برای کمک به شما در دستیابی به این هدف ارائه می دهد. اطمینان حاصل کنید که ابتدا امنیت سطح ردیف را غیرفعال کرده اید زیرا چیزی جز یک آرایه خالی برگردانده نمی شود:
جدول من اساساً دارای پنج ستون است که id و create_at به طور پیش فرض در آنجا هستند. من ستون عنوان را که یک فیلد متنی است، تصویر را برای نشانی اینترنتی تصویر که یک فیلد varchar است و ستون دستور غذا را که یک فیلد متنی است اضافه کردم.
هنگامی که داده ها را به ردیف های خود اضافه کردید، می توانید API های ارائه شده توسط supabase برای جدول خود را بررسی کنید.
در دایرکتوری کامپوننت ها یک جزء Cards داشته باشید که در آن داده ها نقشه برداری می شوند و در کارت های مختلف به مشتری نمایش داده می شوند. داده‌هایی را که به‌عنوان پشتیبان واکشی کرده‌ام، پاس کردم.
مزیت استفاده از تایپ اسکریپت این است که هنگام تعریف مدل در پایگاه داده خود مفید است، جایی که می توانید یک نوع/رابط ایجاد کنید که کار با داده های خود را آسان تر می کند. من این کار را با قرار دادن انواع خود در فایل type.d.ts در دایرکتوری ریشه انجام می دهم
این نتیجه نهایی من بود 🔥🧯:
به زودی با وبلاگ دیگری در مورد نحوه افزودن امنیت سطح ردیف و پیاده سازی آن در جداول خود برای امنیت بیشتر ارائه می شود.
لطفاً با رفتن به مخزن GitHub من Github Repo و افزودن یک ستاره کمی عشق را نشان دهید 😊😊. ممنون میشم به زودی ببینمت
