سجاد ایوبی | برنامه نویسی، بلاک چین و دفاع از آزادی بیان

Menu

دسته: javascript

ORM برای اتصال به API

فرض کنید که یک API/Restful دارید قراره یک سایت رو به این api متصل کنید و قراره که با express.js و react این پروژه رو انجام بدید. دو راه حل عموما میتونید پیش بگیرید، یکی اینکه دیتاهای api رو سمت کاربر لود کنید یا از طریق express.js اطلاعات رو گرفته و به کاربر نمایش بدید.
این آموزش راه حل دوم رو پوشش میده و با استفاده از کتابخونه YAK یک ORM رو شبیه سازی کنید.

بعد از نصب پکیج npm install yak-orm  بعنوان مثال قرار هست که todo لیست هامون رو، دریافت کنیم و api ما این شکلی هست:

 

برای ساخت model، قدم اول، باید api رو وارد کنیم.

و بعد تعریف کردن مدلمون

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

برای ساخت یک todo جدید کافیه متد save رو استفاده کنید و اگه id رو هم اضافه کنم به payload، بصورت اتوماتیک درخواست PATCH ارسال میشه که برای ویرایش todo میشه استفاده کرد.

حالا اگه یک endpoint خاصی داشته باشیم چی؟ مثلا قراره نظرات پست شماره یک رو بگیریم

برای اطلاعات بیشتر میتونی به گیتهاب پروژه برید و مثال های مختلف رو ببنید.

الگوی تطابقی با استفاده از daggy

** بروز رسانی **

جهت تکمیل این بخش ویدیویی درست کردم که میتونید از لینک های زیر مشاهده کنید
یوتیوب: https://www.youtube.com/watch?v=3RjCiSnSN0s

آپارات: https://www.aparat.com/v/tncIU

 

 

توی این پست قراره در مورد استفاده از pattern match و کتابخونه daggy رو یاد بگیریم و چطور میشه توی پروژه‌ هایی مثل react و react-native از اون استفاده کرد.

مشکل if ها

این تیکه کد خب همه ما قبلا باهاش مواجه شدیم:

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

 

راه حل: pattern matching

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

نمونه کد استفاده از daggy

با این روش ما چند تا چیز جدید رو بدست آوردیم:

  1. کدی کم باگ تری داریم
  2. استفاده مجدد ساده تر از کدها
  3. خوانایی راحت تر کد و ساده کردن زندگی دیگران

روش استفاده در مثالی از دنیای واقعی

خب فرض کنیم که شما پروژه خودتون رو با با دستور create-react-app ساختید و کتابخونه daggy رو با دستور yarn add daggy نصب کردید.

خب قرار ما یک لیستی رو از api دریافت کنیم و خب باید این لیست از دیتا رو با type تعریف کنیم.

فرض کنید که لیستی که از api ارسال میشه این شکلیه:

برای تعریف type ما باید اول بخش بندی کنیم لیستمون رو.

مثلا آبجکت اول این آرایه رو یک Item در نظر میگیرم و بعد مجموعه همه این item ها رو یک page در نظر میگیریم.

نکته بعد این هست که توی taggedSum ما باید حالت های مختلف type رو تعریف کنیم. مثلا اگه حالت اولیه بود و هنوز دستوری ارسال نشده، یاموقعی که خروجی از api داشتیم و غیره رو تعریف میکنیم.

مرحله بعد استفاده از این تایپ های تعریف شده است

نیاز به توضیح نداره که کد ما چقدر قشنگ تر شده و از شر اون همه شرط راحت شدیم.

حالا وقته شبیه سازی اینه که ما مثلا دستور رو به api ارسال کردیم و منتظر نتیجه ای هستیم

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

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

بروزرسانی زیرپوستی با code-push

پیشگفتار:

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

ولی خب وقتی که اپ موبایلی که با react-native نوشته شده، میتونه با code-push ترکیب بشه و مراحل بروز رسانی اپ موبایلتون رو خیلی سریعتر کنید، بدون نیاز به قرار دادن نسخه جدید در فروشگاه اپ موبایل.

روش کار code-push

این ابزار که ساخت مایکروسافت هست کدهای جاوا اسکریپت و عکس های اپ شما رو توی سرورهای خودش ذخیره میکنه و هربار که اپ موبایل اجرا میشه با سرور چک میشه که تغییری اگه ایجاد شده فایل های جدید و دانلود میکنه و بعد توی اجرای بعدی اپ آپدیت جدید اعمال شده.
توجه داشته باشید که تغییرات عمده و اضافه کردن پلاگین های جدید به AppDelegate.m/MainActivity.java باید نسخه آپدیت شده اش رو انتشار بدید و از این طریق امکانپذیر نیست.

نصب code-push-cli

۱- ثبت نام

 

۲- اضافه کردن اپ به اکانت

 

** توجه کنید که بعد از این دستورات یک deployment key بهتون میده که باید به هم تیمی هاتون بدید (من هنوز نفهمیدم که چطوری میشه دوباره این کد رو چک کرد)

اضافه کردن code-push به اپ

۱- نصب ابزار

۲- لینک کردن

** در این مرحله از شما deployment key پرسیده میشه که توی مرحله قبلی باید اون ها رو داشته باشید و اینجا وارد کنید.

۳- اضافه کردن به اپ

** باید شما یک نسخه apk یا ipa از اپ منتشر کنید تا بتونید از code-push استفاده کنید.

۴- ایجاد تغییرات و ارسال کد جدید
** شما میتونید یه تغییر کوچیک توی دکمه یا متنی یا فرمی ایجاد کنید و بعد دستور زیر رو وارد کنید.

۵- دیباگ کردن

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

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