دیگه معطل بَک نشو! (Don't think about Back-end) ?

خب معلومه که خیلی با تیتر مقالم حال کردی و میخوای ببینی قضیه چیه!?

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

حالا واقعا میشه؟ چطوری آخه؟؟

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

استفاده از Mockoon

چه برای مان آورده‌ای سلطان؟ محصول شگفت از بلاد کُفر ? ( نرم افزار Mockoon)

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

https://mockoon.com/

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

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

کار این برنامه این که برای شما رو لوکال و رو پُرتی که دوست دارید یه سرور ران میکنه که توش میتونید end point هاتون رو اضافه کنید و انواع status code ها رو هم برگردونید. قدرت این برنامه اینجاست که شما میتونید یه سری شرط براش بزارید که اگر مثلا تو کوِریش پارامتر id برابر ۱ بود چی برگردونه یا اینکه اگر کلا نداشت چه جوابی بده یا هر چیز دیگه‌ای.

حتی میتونی یه دیلِی برای ریسپانسش تعریف کنی! ?

اصلا میتونی یه فایل عکس یا هر چیزی رو هم برای یه end point بفرستی که دیگه نخوای تو سایت های دیگه عکس یا asset ها تو اپلود کنی. ( به به عجب چیز نابیه ? )

آماده‌ای بریم یادش بگیریم؟ ?

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

۱- بعد از اینکه برنامه رو اجرا کردی باید بیای رو دکمه منو در بالا سمت چپ بزنی و بعد روی علامت مثبت تا یه پروژه جدید بسازه.

من الان میخوام اول End point رو درست کنم.

خب end point ای که میخوام بسازم دوست دارم متود Get باشه, آدرس rout اش هم api/v1/token باشه و دو تا ریسپانس دار که یکی همون statue 200 که یعنی همه چیز اوکی بود و توکن رو بهمون میده و اون یکی status هم میخوام Bad Request باشه که یه ارور مسیجی هم به فرانت برمیگردونه. برای اینکه تو این مثال یه سری قابلیت های دیگه مثل گذاشتن شرط رو هم نشونت بدم, میخوام اگر device_id رو کاربر فرستاد استتوس ۲۰۰ و اگر هم نه که استتوس ۴۰۰ رو برگردونه. (خب این شد یه تمرین خوب ?)

نکته: باید بگم که آدرس سرورت همون ادرس ip لوکال سیستمت هست که میتونی با دستور ipconfig تو cmd در ویندوز و برای دوستان مک بازم هم باید بگم باید برید تو Network Preferences از ستینگتون و روی علامت wifi یا هر چیزی که الان باهاش به اینترنت کانکت هستی بزنی تا در سمت راست ip لوکال دستگاهت رو ببینید.

حالا میام تو قسمت Path support regexes که بغل نوع متودم هست مینویسم v1/token که آدرس end point ام هست.

متودم هم که دیفالت رو Get انتخاب شده و پورت رو هم رو 3001 گذاشتم (من ۳۰۰۱ حال کردم شما یه چیز دیگه بزار). اون قسمتی هم که نوشته prefix میتونی اون عبارت یا آدرسی که همیشه قبل از end point و بعد از آدرس سرورت میاد رو بزاری. (من گذاشتم api که یعنی اگر بخوام به این end point درخواست بدم باید به این آدرس درخواستم رو ارسال کنم: http://192.168.1.104:3001/api/v1/token)

192.168.1.104 این آدرس local ip دستگاه من ها. برای شما قطعا فرق دار. حالا میریم سراغ ریسپانس‌ها که اول میایم اون ریسپانس بَدَ رو تعریف میکنیم که بیشتر اتفاق میافته. (استتوس ۴۰۰ یا همون بد ریکوِست)

روی دکمه Add response بزن تا یه ریسپانس جدید برات بساز.

حالا بیا از قسمت پایینش 400 - Bad Request رو انتخاب کن.

حالا بیا تو قسمت پایین که خیلی بزرگ, body ایش رو بنویسیم:

نکته خیلی خیلی مهم: این برنامه به تو نمیگه که json اتون مشکل دار یا نه پس حتما باید تو یه json viewer چک کنی. (بیشترین اشتباهی که من میکردم این بود که بعد آخرین آبجکت یه آرایه یا آخرین پراپرتی یه آبجکت میومدم ویرگول میزاشتم که این باعث می شه که دیگه به فرمت جیسون بر نگردونه و فرمتش استرینگ میشه)

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

حالا بیا ریسپانس ۲۰۰ یا همون ok رو بسازیم. برای این کار چون به صورت دیفالت خود برنامه بعد از ساخت یه end point جدید برات میسازتش دیگه نیازی نیست دوباره بسازیم برای همین بیا رو اون قسمتی که ریسپانس هاتو انتخاب میکردی دوباره بزن و روی ۲۰۰ کلیک کن تا مشخصاتش معلوم بشه.

من اومدم ریسپانس قبولیم رو اینطوری تعریف کردم برای مثال:

حالا برای اینکه بیاد چک کنه که اگر کاربر تو کوِری استرینگش (یا همون پارامترهایی که با متود Get میفرستادیم ) اون پارامتر device_id رو داره یا نه میایم تو سربرگ Rules یه قانون جدید اد میکنیم.

تموم شد! من الان تونستم خیلی راحت یه end-point بسازم که فرانت بتون بهش درخواست بده.

حالا برای اینکه یه سری تنظیمات رو برای همشون یه جا ست کنم میام اون بالا سمت راست میزنم رو علامت setting که بیام توش Content-type رو که تو ریسپانس برمیگردونه رو برای همشون application/json کنم.