ساخت اپلیکیشن وب و موبایل با Lovable، n8n، Supabase و هوش مصنوعی!

سلام دوستان امیدوارم حالتون خوب باشه امروز میخوام ساخته یک اپلیکیشن حوشمند رو بهتون یاد بدم بدون نیاز به کود نویسی اول کار کردش رو بهتون نشون میدم که ببینید چه کار کردی داره بعد نحوه ساختش رو بهتون نشون میدم

ببین اپلیکیشنی که ما میسازیم یک اپلیکیشن مدیریت تراکنش محصولاته خب و اینجوریه که این اپلیکیشن این اجازه رو به شما میده که شما میتونید یه محصولی رو انتخاب کنید یه سری توضیحات براش وارد کنید و یه مبلغی رو براش وارد کنید نوعش رو انتخاب کنید که خرید بوده یا فروش بوده و سبت رو بزنید وقتی سبت رو میزنید این اضافه میشه به

تاریخچه تراکنش های شما اینجا هم نشون میده جالب تر از اون وقتی آنالیز تراکنش ها رو بزنید این به صورت حوشمند میره دیتا بیس تراکنش ها رو میگرده یک آنالیزی به شما خلاص تحویل میده این قسمت حوشمندش اینجاشه چون با اپلیکیشنه

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

بیاییم اول با یه شماتیک اینجوری ببینیم که کاری که میخواییم انجام بدیم از چه بخشهایی تشکیل شده که ارتباط این بخشهای مختلف رو با هم بهتر درک کنیم.

بازم تکرار میکنم تقریباً صد درصد کاری که میخواییم انجام بدیم بدون نیاز به کود نویسی و با این ابزارهای جدید و خیلی جالبیه که اومدن.

ببینید ما اول می آیم با یک ابزاری به نام لاببل اپ که واقعا چیز حیجان انگیز و جالبیه پرانت اند یا یو آی یا رابط کاربری اپمون رو می سازیم جلوتر همه اینا رو دونه به دونه نشون می دم یعنی این که چیزی که کاربر می بینه اون قسمت که کاربر می بینه

البته فقط فرانت اندو کار نمی کنه بک اندم تا حدودی این که چه کاری اون اپ انجام می دارم تا حدودی می سازه این لاویبل اپ ولی برای بعضی کاربورت ها خب محدودیت داره اونجا ما می آییم بک اندو با یک ای آی ایجنت با ابزار ان ای تن می سازیم

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

بکندشو با نیتن میسازیم فرانتندشو با لاویبل اپ میسازیم و این حالا من این فلشو به این کشیدم اما خب حالا میتونه اینجا باشه یعنی این مودل زبانی یا اللم میتونه یا به بکندمون به نیتن وست باشه یا به همین لاویبل اپ وست باشه بسته به اون کار کردیه که داریم و این مودل زبانیمون حالا میتونیم با ای پی آی اوپن ای آی در ارتباط باشه میتونه از طریق ای پی آی

یا میشه مودل های زبانی لوکال بسه اولامه رو بهش وست کرد خیلی حالا اصلا میتونه جمنه های باشه هر مودلی بذارید همین پایین بذاریم بهتره و نهایتا اپمون یه دیتا بیسی خواهد داشت چون که اون اطلاعاتی که ما میخواییم زخیره بشه یه جایی باید زخیره بشه دیگه تون اپمون ممکنه حالا

هر مودل اطلاعاتی اپمون نیاز داشته باشه زخیره کنه اطلاعات کاربران اطلاعات موجودی هم بار هر چیزی اون باید توی دیتا بیس زخیره بشه و به عنوان پلاتفورم دیتا بیس امونم از سوپا بیس استفاده میکنیم سوپا بیس یکی از الان پر کاربورت ترین پلاتفورم هاییه برای داشتن یک دیتا بیس برای اپلیکیشن ها به خصوص ویب اپلیکیشن ها و واقعا کار باش راحته و خیلی استرک

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

حالا که با شماتیک کلیه کار آشنا شدیم بیاییم کار شروع کنیم.

خب بیاییم با Loveable App شروع کنیم.

ببینید Loveable App بیایید تو سایتش loveable.dev اولا که خب یه سری نمونه کارهایی که بقیه انجام دادن رو میتونید ببینید.

کار کردش اینه که شما یک پرامت میدید میگید من همچین اپلیکیشنی میخوام برام بسازد.

تمام و براتون اونو میسازه و چیزهایی که کار برای دیگه ساختن میتونید هم ببینید ایده بگیرید بذاری من لاغین کنم با گوگل

اولا کارهایی که کاربرهای دیگه انجام دادن و میتونید ببینید مثلا این یک سایتیه که حالا یکی ساخته فقط با پرامت بیشترین کار کردی که تویش خیلی خوب کار میکنه همین فرانت انده من حالا تست هایی که کردم اما فقط هم اون نیست یعنی شما میتونید یک دشبورت بسازید با هاش

اپلیکیشنی بسازید یک کاربورد خیلی خوبی که داره اینه که مثلا شما یک ایدهی دارید میخواید به یک دیولوپر بگید اینو برمن بساز خیلی خوب میتونید بیاید اون ایده رو اینجا بسازید پیاده سازی کنید و اینجوری خیلی راحت تر به مثلا اون دیولوپر یا همکارتون یا هر چیز توضیح بدید که این چیزیه که من میخوام حالا بیاییم شروع کنیم

ببینید برای این که پرامت خوبی بتونیم اینجا بنویسیم چون خیلی مهمه که چه پرامتی اینجا مینویسیم من میام از چتچی بیدی کمک میگیرم به چتچی بیدی ایدمو توضیح میدم میگم اینو برای ساخته ویب اپلیکیشن به یک دیولوپر توضیح بده خب ببینید من براش نوشتم که یه توضیحات کلی در مورد اپلیکیشنی که میخوام بسازم نوشتم یک اپلیکیشن تحت ویب بساز که در اون کاربر بتونه از

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

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

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

ببینید اپلیکیشن رو ساخت.

جوابش هم فارسی داد.

بذارید من تصویر خودم ببرم کنار.

ببینید اپلیکیشن رو ساخت.

سیستم مدیریت ترکش همه اینا رو خودش نوشته.

یک محصول رو میتونیم انتخاب کنیم.

توضیحات بنویسیم.

مبلغ و حتی به تومان.

اینجا نوشته.

من اصلا حرفی از تومان نزدم.

بین خرید و فروش میتونید یکی رو انتخاب کنید و نهایتا سبت رو بزنید.

حالا توی

قسمت ظاهریش بعدم میتونیم تغییرات بدیم خوشکلتش کنیم ولی الان من میخوام که با دیتا بیس بیاییم وصلش کنیم

ببینید خودش گفته که اگه نیاز به زخیره اطلاعات دارید یک راه ساده اتصال سرویس سوپا بیسه و این خودش شما رو راه نمایی می کنه که چطور به سوپا بیس وصف بشید.

بیایید اول توی سوپا بیس سبتنام کنیم.

برای اوز شدن توی سوپا بیس گذینه ی ستارت پروژکت رو بزنیم.

بعد برای اوز شدن توی سوپا بیس باید با گیت هاب یا اس اس او.

یا هم که میتونید با یه ایمیل و پسفوردی اوز بشید.

حالا من با گیت هاب میرم جلو چون بعدن اگه شما با گیت هاب آشنایی دارید کارتون خیلی راحت تر میشه.

اگه نمیخواید وارد جزیات گیت هاب بشید میتونید همون یوزر پسفورد معمولی اوز بشید ولی اگه با اکانت گیت هابتون اوز بشید اینو میزنیم و وارد شدیم.

یه اسمی میتونید برای حالا کلن تیمتون یا شرکتتون ایجاد کنید حالا من میزنم Coding for AI

بعد پلاناش هم ججوریه اگه شما پلان رایگانش رو داشته باشید به شما اجازه 50 هزار تا کاربر اکتیف میده یعنی از اون دیتا بیس استفاده کنن 500 مگا باید فضای دیتا بیس به شما میده 5 گگا باید پهنای باند میده و 1 گیگ فضای حافظ زخیر سازی میده اگه شما حالا یه مقدار

اپتون بخواید بزرگتر باشه یعنی پرکاربورتتر باشه میتونید این پلن 25 دولار در ماهش که دیگه 100 گیک فضا به شما میده پهنای باندش 5 برابر میشه رمش به 16 برابر میشه حالا نهایتا میتونید همه اینا رو ببینید ولی ما همین با فری هم میتونیم شروع کنیم

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

من اسم پروژه ها میذارم.

inventory app.

inventory یعنی حالا انبار یا موجودی.

این میشه اسم پروژم.

یه دونم پسفورد دیتابیس بهش میگم خودت برامن یه پسفورد قوی جنریت کن.

حتما اینو کوپی کنید.

جایی دیگه نگه دارید.

یه فایلی داشته باشید حتما بر پروژتون.

بنویسید که این پسفورد دیتابیستونه.

بعد create new project رو میزنم.

حالا که پروژمونو ایجاد کردیم ببینید پروژکت استاتوس اینجا داره هنوز کار میکنه یعنی روش بزنم نشون میده که الان همه مراحل انجام داد سبز شده یعنی پروژه با موفقیت ایجاد شد.

حالا من برگردم تو لاویبل اپ این قسمت گفته برای این که سوپا بیس رو بس کنی این دکمه سبز بالا رو میزنیم اگه این رو بزنم این صفحه باز میشه قسمت سوپا بیس شما حالا چیزی ندارید اینجا یه دونه add another organization هست یا دکمه connect سوپا بیس هست این رو اگه بزنید یه دونه pop up میاد authorize lavable رو بزنید

این وزخ میشه به اکانت سوپا بیس شما بعد این که وزش شد اون حالا اسم شرکتی که یا اسم پروژهی که انجام داده بودید اینجا برای شما ظاهر میشه مال من انوینتوری اپه اینو کانکت بزنم کانکتو بزنید این سبز میشه وقتی یعنی کانکت شده

الان اینو به بنده هم این خودش برا ما برد که کانکت شده با سوپا بیز اینجارم باز کنید میبینید کانکتد.

گیتابم هم کانکت شده.

حالا بهش میگم که جدول مورد نیاز برای سبت قرار کنش محصول را ایجاد کنید.

گفته که برای ایجاد جدول مورد نیاز این SQL ها رو نیازه که توی سوپا بیس وارد کنیم.

گفته اینا رو بررسی کنید.

اگه با SQL آشنایی دارید میتونید اینا رو بررسی کنید.

اگه هم آشنایی ندارید همین Apply Changes رو بزنید خودش توی سوپا بیس اینا رو ایجاد میکنه.

گفت جدول های مورد نیاز توی سوپا بیس ایجاد شدن حالا داره تغییراتو توی کود اپلیکیشن تو میده تا این داره این کارو انجام میده بریم توی سوپا بیسمون قسمتی که گفتم تیبل ایدیتوره و تیبل ها رو نشون میده الان دو تا تیبل ایجاد کرده یکی تیبل پروڈاکس یعنی محصولات یکی هم تیبل تراکنش ها ترنزکشنز

الان خالیه هن تیبل محصولاتو خودش پر کرده حالا شما میتونید اون چیزهایی که میخواید مثلا اینجا همون لیستی که توی اپ داشتین گوشی تبلت موبایل مانیتور همونا رو اومده تیبل کرده برای تراکنش ها هنوز تراکنش جدیدی نیست هر وقت از اپ استفاده بشه و کسی دکمه سبتو بزنه اینجا اضافه میشه

حالا این کارها رو انجام داد فقط یک ارور داد حالا ارور داد ولی گفته که اون جدول رو ایجاد کرده و همه کارها رو کرده بیاییم یه تست بکنیم ببینیم اصلا میشه مثلا بزنم لپتاب قریده دوم حالا هر توضیحاتی مبلغ و خرید

سبت رو بزنم خودش یه پیام داد که تراکنش با موفقیت انجام شد ولی توی این جدول ترنزکشن همون اضافه نشد باید بهش بگیم که وقتی دکمه سبت کلیک میشه تراکنش رو به جدول ترنزکشن در دیتا بیس اضافه کن

الان گفت تغییرات اعمال شد ولی اینجا یه ارور داد همین ارور رو قبلن دکمه try to fixش بهتر کار میکرد ولی الان خیلی کار نمی کنه یعنی همینجور دکمه try to fix رو می زدی کار میکرد تو بهش این قبلیش الان میام خودم این اروری که داده رو کپی میکنم پیست میکنم براش ببینم که میتونه درستش کنه یا نه گفتش که الان درستش میکنم

باز یه ارور دیگه داد دوباره من اینو کپی می کنم پیس می کنم الان درست کرد ظاهرن هیچ اروری دیگه نداد بیاییم یه تست بکنیم لپتاب خرید دوم مبلغ خرید سبتو زدم

ببینید توی جدول ترنزکشنز اومد اضافه شد خرید دوم پروڈاکت دو یعنی از لیست پروڈاکت ها دومی که لپتاب درسته و مبلغ و بای یعنی خرید پس این اضافه شد هر چند تا اضافه کنید ما الان مثلا کیبورد اضافه کنم خانوم صادقی مبلغ این فروش یکی دیگه اضافه کردم

این دومی هم اومد سبت شد پس الان اپلیکیشن همون کاملا درست کار میکنه پایین هم تاریخچه تراکونش ها رو نشون میده حالا من میخوام ببین بکنده این هم کار میکنه دیگه خب یعنی اون کاری که ما میخواییم رو انجام میده حالا اگه اپلیکیشن همون تا این حد باشه و ما بخواییم اینو لایف کنیم چون اینجا فقط شما دسترسی دارید به این پروژه بخوایید حالا در دسترس کسایی دیگه هم بذار

میگه که اپلیکیشن شما آیدیش این میشه و دیگه هرکی بیاد توی این سایت میتونه از این اپلیکیشن شما استفاده کنه ولی بیاد یه سری تغییرات دیگه بدیم چون گفتیم که از انیتن هم میخواییم توش استفاده کنیم میخواییم یکم حوشمند ترش کنیم بهش میگم که یک دکمه دیگر هم اضافه کن با عنوان آنالیز مثلا حالا دیگه هرچی میتونید بذارید وقتی

کاربر دکمه آنالیز را زد یک HTTP request بفرست HTTP request چیه؟ HTTP request در واقع بخوام خیلی ساده بگم یه سیگنالیه به یه اپلیکیشن دیگهی که قابلیت دریافت این سیگنال رو داره

شما یه سیگنال میفرستید که میتونه تایپ های گیت پوست و چند تایپ دیگه ده باشه مهمتریناش گیت و پوسته یا میتونید با این سیگنال یه سری اطلاعات بفرستید یا میتونید یک سری اطلاعات دریافت کنید با استفاده از این ما میتونیم با یک اپلیکیشن دیگه ارتباط برقرار کنیم من میخوام از این استفاده کنم تا با N8N ارتباط برقرار کنیم و اگه یادتون باشه ما میخواستیم

یه فرانت اند بسازیم که ساختیم با لاویبل اپ به دیتا بیس هم الان دست رسید داره حالا میخواییم این ارتباط رو شکل بدیم یعنی با بک اند یا ای آی ایجنتی که با ان ای تن میسازیم میخواییم ارتباط داشته باشه بیاییم ان ای تن رو ببینیم ببینید ان ای تن همونطور که گفتم شما میتونید خیلی ساده بدون کود نویسی یک ای آی ایجنت بسازید اگه ویدیوهای قبلی من در موند ان ای تن رو

اینجا Get Started رو بزنید.

میتونید یک اکانت بسازید.

من چون اکانت ساختم میام با همین لاغین میکنم.

این جاییه که توی نیتن میبینید میتونید یک ورکفلو جدید ایجاد کنید.

هاو این صفحه اصلیه اسمه.

ای آی ایجنت همو میذارم.

ایمونتوری ایجنت.

حالا این ایجنت ما یه ورودی داره که میشه به صورت یعنی ایجنت ما با چی شروع به کار کنه؟ ما میتونیم بگیم که یا توسط یک اپلیکیشن دیگه تریگر بشه یعنی استارتش زده بشه توسط

چت مثلا مثل همین چت بات ها استارتش زده بشه اما تو حالت ما ما میخواییم با اون HTTP ریکوستی که از Loveable App میفرستیم به این استارتش زده بشه برای این کار WebHook Call رو استفاده میکنیم

توی webhook call get رو انتخاب میکنیم اینم این URL ماست خب در نظر داشته باشید توی respond when last note finishes خب الان آخرش بیشتر توضیح میدم این چیه اینو که ساختیم بیاییم این لینک رو کپی کنیم این لینکی که اینجاست

میام تو لاببل اپ بهش میگم که اولا این گفتش که دکمه آنالیز اضافه شد این دکمه رو خودش اضافه کرد بهش میگم که وقتی دکمه آنالیز کلیک شد یک http request get به آدرس زیر بفرست بعد اون آدرسی که از انیتن کپی کرده بودم رو اینجا پیست میکنم

و اینا رو اصلا من هیچ کار نکردم خودش درست کرده اینا رو خیلی جالبه بعدن حالا تم اینم درست میکنیم که قشنگتر بشه یا اون حالتی که ما میخواییم باشه الان داره کود و جوری تغییر میده که وقتی من اینو کلیک کردم یک HTTP ریکوست بفرسته به اون آدرسی که من خواستم به چه معنا؟ به معنای این که ارتباط برقرار کنه با AI ایجنت من اینجا

از کجا میفهمم که این ارتباط درست برقرار شده؟ تستش میتونیم بکنیم.

این الان انجام داد بدون ارور.

من میام تست ورکفلور رو میزنم.

این الان داره گوش میده که ببینه ایشتیپ ریکوستی میاد یا نه.

الان آنالیز تراکانش ها رو بزنم.

این سبس شد یعنی اون پیغامه اونو گرفت یعنی کار میکنه الان اون کانکشن بینشون این کانکشن بین این دوتا الان برقراره حالا من میام به این یک ای آی ایجنت اضافه میکنم اینا همینجوری بمونه

یه دونه LLM بهش وصل می کنم که حالا توی مورد من OpenAI وصل می کنم که راحت تر باشه.

Create New Credentials رو می زنید یا همون اکانت خودتون رو وصل می کنید.

GPT-4 اومینی من می خواهم استفاده کنم.

یه دونه Simple Memory بهش می دم.

هم اینا بمونه.

این در واقع مودل زبانی یا مغزش این حافظه یه که داره در مورد چطای قبلی

توی ابزار ها من میام دیتا بیس سوپا بیسمو بهش وست میکنم.

سوپا بیس اکانتو create new credentials میزنم.

اینجا یه دونه هاست از ما میخواد.

یه سرویس رول سیکریت میخواد.

اگه بریم تو سوپا بیسمون اگه بیام توی پروژکت اوورویو

View API Settings.

اینجا به من یه دونه URL میده که اینجا میذارم.

Service Role Secret هم اینه.

که کپیش میکنم اینجا پیست میکنم سیف ببینیم وست شد وقتی سبز میشه یعنی با موفقیت وست شد حالا وست که شدیم میگه که کارش چی باشه

من get menu رو میزنم یا میتونید کارش این باشه که چیزی ایجاد کنه دیتا بیست شما چیزی پاکل کنه چیزی بگیره ازش.

من get menu رو میزنم یعنی ازش چیزی بگیره و تیبل هم باید انتخاب کنیم که از کدوم تیبل میخواید چیزی انتخاب کنه.

من تیبل ترنزکشن ها رو انتخاب میکنم همون تراکنش ها.

حالا بذارید برای اینم یه اسم بذاریم.

برای این نودمون به جای سوپا بیس میزنم دیتا بیس که بعدا به ای آی ایجنتمون توضیح بدیم کار این چیه.

اینو میزنم.

خب ببینید اسمش شد دیتا بیس.

حالا تو ای آی ایجنتمون بیاییم یه سری توضیحات بهش بدیم.

یه توی این قسمت اد آپشن اگه سیستم مسیج رو بزنیم اینا دستور و لمل هایی که ما به ای آی انجنت همون بیدیم بهش میگیم که You are a helpful assistant

بذار این هم فارسی بنویسم.

تو یک دستیار حوشمند هستی که اطلاعات دیتابیس را به زبان ساده گفتاری تبدیل می کنی.

اطلاعات را از دیتابیس بگیر و خلاصه کن.

این ای آی ایجنت باید تریگرش رو عوض کنیم.

Define Below چون که چت که نیست ورودیمون.

Define Below رو باید بزنیم.

این سیستم مسیجه چیزهایی که بهش میدیم.

این پرامت یوزره.

بهش میگم که همون چتی که مثلا شما با چت چی بیدیمی کنید اطلاعات تراکنش های اخیر رو به طور خلاصه به من بگو.

اصلا اینو لازم نداریم.

اینو اصلا لازم نداریم.

تا زمانی که شما تست ورک فلور رو نزنید این گوش نمیده.

اگه من تست ورک فلور رو بزنم و بیام اینجا دوباره آنالیز تراکادش ها رو بزنم.

ببینید این شروع کرد کار کردن.

همه اینا سبسکریت یعنی تعمیه این اجزا دارن کار میکنن.

حالا روی ای آی ایجنت بزنم.

این خلاصه رو برای ما این خروجی رو برای ما ایجاد کرده یعنی کار کرده ما باید توی این اپ یک قسمتی ایجاد کنیم که وقتی این خروجی که این ایجاد کرد

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

مثلا خانوم صادقی چه چیزهایی خریده اینا رو میشه انجام داد حالا یه کاری که میتونیم بکنیم بیاییم ببینیم که این خورجی این رو چطور بدیم اونجا شما تو این ترمینالتون هم میتونید ویب و پوکتون رو تست کنید اگه

اینو کوپی کنید.

همیشه یادتون باشه سیف رو بزنید.

چون این خودش اوتوماتیک سیف نمی کنه.

اگه تست ورک فلور بزنم اون ای پی اشان کوپی کنم.

می توانیم مثلا کرل ایکس گت اون ای پی رو بنویسم.

خب ببینید این اینو به کار انداخت.

در جواب من اینو گرفتم.

پس الان میان به اپم میگم که وقتی کاربرد دکمه آنالیز رو کلیک کرد و HTTP request فرستاده شد پاسخ دریافتی را در پایین صفحه در یک بخش جداغانه نمایش بده انجام داد

ریلودش کرد الان بیاییم دوباره اینجا تست ورکلور رو بزنیم یعنی آماده شنیدنه و دکمه آنالیز رو بزنیم ببینید این پایین نمایش داد این الان با فرمت قشنگی نیست حالا این چون به صورت به فرمت جیسون میفرسته به هر حال ما داریم یه HTTP ریکوست میفرستیم وقتی یه اکولاد بازو بسته داریم به فرمت جیسون داره میفرسته

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

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

با این چیزاش باید ور برید.

حالا من این رو دوباره تست ورک فلور بزنم.

حالا بهتون نشون میدم چطور میتونید.

چیکار کنید که لازم نباشه هر دفعه این تست ورک فلور رو بزنید.

بذارید این تغییرات رو اعمال کنه.

تغییرات اعمال شد.

بیاییم دوباره آنالیز رو بزنیم.

الان ببینید دیگه با فورمت جیسون نمایش نمیده بهتر نمایش داد حالا این جزئیات شما اینها رو میگید میتونید بگید حصف کنه و هر چیزی میتونید بهش بگید با اون تغییرات انجام بده الان دیگه اپ ما اون چیزی که میخواستیم تقریبا کامل شده شما دیگه خودتون میتونید بر اساس خواسته های خودتون این یو آیش رو تغییر بدید میتونید این بکندش رو تغییر بدید خواسته هایی که دارید

حالا میخوام بهتون نشون بدم که دیگه چیکار کنید این همیشه ران بشه.

اگه این ویب هوکو بزنید اینو ببریم روی پروڈاکشن یارل جدید به ما میده که دیگه این برای پروڈاکشنه و دیگه میتونید اینو بزنید رو حالت اکتیو.

اگه تو حالت اکتیف باشه دیگه میتونید این رو ببندید.

بیایید اینجا بهش بگید که change حالا فارسی میتونید بگید HTTP request get URL to میگید اون URL رو به این تغییر بده.

این دیگه بر پروڈاکشن همیشه قابل استفاده است.

یعنی اون لینکی که به این وصله رو عوض کرد به اون لینک جدیدی که من بهش دادم.

من الان دیگه انیتن رو بستم کاملا میخوام تست کنم ببینم اون بسته باشه هم کار میکنه یا ندید چون دیگه گذاشتمش تو حالت اکتیف الان آنالیز تراکنش ها رو بزنم ببینید کار میکنه کاملا خودش به انیتن بست شد و اینا رو نمایش داد

بعد دیگه کاملا با متن خوبم نوشت.

خب این الان خیلی خوب شد.

حالا بیاین این اپلیکیشن همونو پابلیش کنیم.

یعنی دیگه وارد عملش کنیم.

اینجا من اگه پابلیش رو بزنم میگه این لیک اپت خواهد بود.

کپیش میکنم پابلیش کنم.

دیگه الان توی این لینکی که به ما داده، این لینک که اپلیکیشن منه، این کاملا یه سایتی که الان من به هر کسی بدم میتونه به این دسترسی داشته باشه.

میتونه محصول اضافه کنه، میتونه آنالیز تراکنش ها رو بزنه و ببینه.

پس الان ما همه قسمت های این رو کامل کردیم.

فرانتند رو ساختیم به دیتابیس وز کردیم.

البته بین این دوتا هم الان یک اتصالی هست بین انیت ان و دیتابیس.

این هم که از م

یه مورد دیگه هم که میخواستم توی این لاویبل اپ نشونتون بدم یه آپشنی داره به نام دیو مود اگه اینو بزنید

کود همه این اپلیکیشنتون رو بهتون نشون میده یعنی اگه با کود نویسی آشنایی دارید میتونید توی کود هم ایدیتی انجام بدید یا قسمت های مختلفش رو ببینید و دوباره برگردید به این قسمت یک نکته دیگه هم که داره مثلا یو آی ظاهر اپتون رو میتونید عوض کنید مثلا میتونم بهش بگم که ظاهر اپ رو مدرن و بنفش رو آبی بکن در کار کرد هیچ تغییری نده

ببینید مشخصا داره توی فایل CSS تغییرات ایجاد می کنه.

CSS مربوط به استایل اپلیکیشن همونه ویب اپ همونه.

تغییرات رو داد بنفش کرد و حالا خیلی ظاهر خاصی تغییر نداد.

اما یه کاری هم که شما می تونید بکنید بیایید تو سایت موبین دات کام

این سایت ما بین میاد مثلا یوزر انترویس سایت های مختلف رو میتونید توش چک کنید بعد مثلا یه یو آی برای اپتون انتخاب کنید مثلا من میخوام اپم این ظاهر رو داشته باشه یا حالا هر حالتی میتونید بیاید چک کنید انتخاب کنید این قسمت خیلی جالبه بذارید این رو انتخاب کنید یکیش که خیلی متفاوته بعد این رو سیف کنم یا دانلودش کنم

بعد توی لاویبل اپ این اکسو بندازم توش.

گفتم که از این اکسی که من فرست دادم الهام بگیر.

یو آی رو اونجوری تغییر بده.

بازم گفتم فانکشنالیتی یا کار کرده شو هیچ تغییری نده.

یعنی حالا این شاید اکس خوبی نبود برای انتخاب کردن.

مثلا بهتر بود که این اکسو بهش می دادم.

ببینید تغییرات رو دا جالب هم شد دیگه حالا اون اکسر رو انداخته بکگراند و تیمش خیلی قشنگتر شد حتی میتونم بهش بگم که از فونت فارسی یکان استفاده کن ببینید فونتش هم قشنگتر شد حالا دوباره پابلیش رو میزنم اپدیت که تغییرات توی این دامینمون ایجاد بشه اپدیت وقتی کامل شد اینجا ریفرش رو بزنم

اپ جدید میاد الان ببینید این خوبیش اینه که لاویبل اپ میاد با زبان تایپ سکریپت و ریاکت مینویسه این معنیش اینه که اپلیکیشن شما هم توی براوزر توی لپتاپ خوب باز میشه هم توی گوشی دیگه خوب باز میشه یعنی کاملا به هینه سازی برای گوشی و کاملا یه چیز اپلیکیشن خوب تحبیل شما میده

فقط دقت کنید چند تا نکته دیگه در مورد لاویبل اپ و این ایتن میخوام بهتون بگم لاویبل اپ حالا یه مقدار استفاده محدود داره دیگه یعنی شما میتونید تا مثلا یه مقدار کردیت استفاده کنید اپتونو بسازید

یه نکته دیگه هم داره مثلا شما اگه برای این محدودیت هایی دارید یا مثلا شما برای این اپلیکیشن بخواید مثلا بگید که خالا قابلیت اینو اضافه کن که کاربر های مختلف بتونن سبت نام کنن هر کاربر پروفایل خودش رو داشته باشه تو پروفایل خودش بتونه اونجا من تجربه همین موده که یه مقدار قاطی میکنه و انجام میده ها ولی بعضی جاها گیر میکنه یعنی

شاید خوب باشه که شما اپتون رو تا اینجا بسازید بعد به یه دیولوپر بدید بگید اون فانکشنالیتی رو اضافه کن بهش که مثلا کاربرای مختلف بتونن پروفایل خودشون رو داشته باشن تو اون حالت هم انجام میده اگه بهش توضیحات خوب بدید مثلا توی چچی پیتی بنویسید بگید توضیحات خوب و کامل به لاویبل اپ بده و اون پرامپتش رو کپی کنید بیایید پس کنید جا میاد توی

سوپا بیس یه دونم جدول برای کاربرها ایجاد میکنه و باید یه سری اوتنتیکیشن ها انجام بدید اونجا یه مقدار قاطی میکنه برای همین من اونو نشون نمیدونم چون خیلی گیر داره این از این یه موردی هم در مورد انیتن بگم

نیتن هم محدودیتش چیه؟ محدودیتش اینه که شما وقتی اینو تو حالت اکتیف میذارید به ازای هر بار استفاده از این یک استفاده برای شما حساب میشه و شما یه تعداد استفاده های محدودی دارید از این یعنی اگر رایگان استفاده کنید

به شما یک مقدار مثلا از هزار تا اکسیکیوشن رایگاه میده از اونجا به بعد دیگه پولی میشه یعنی شما باید مثلا اگه 24 یورو در ماه بدید دیگه 2500 تا به شما اجازه اکسیکیوشن میده اجرای اون میده پنج تا اکتیف ورکفلو میتونید داشته باشید و همینطور اگه کارهاییتون بیشتر هم باشه میتونید پلنهای بیشترش رو بگیرید این از این

و همیشه حواستون باشه که اگه اون لینکو در اختیار کسی میذارید هر استفادهی که اونا بکنن پای ورکفلو یا اکانت شما نوشته میشه در نتیجه میتونید اینو از اکتیف در بیارید هر وقت میخوایید استفاده نشه که دیگه اون اکسیکیوشناتون تلف نشه

در کل حالا این کار کرده این اپ بود امیدوارم براتون جالب شده باشه واقعا اصری هست الان که شما بدون دانش برنامه نویسی میتونید اپلیکیشن کامل بسازید میتونید کار کرده شو تعین کنید میتونید رابطه کاربری شو تعین کنید و هر ایدهی دارید پیاده سازی کنید خیلی خیلی جالبه امیدوارم براتون جالب بوده باشه و بتونید اون ایدهی که همیشه داشتید و پیاده سازی کنید مثل هم

PYM JBZ