نوشته های سجاد ایوبی

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

سجاد ایوبی — Tue, 30 Oct 2018 00:39:24 +0330

ساختن ORM ای که از api تغذیه میشه.فرض کنید که یک API/Restful دارید قراره یک سایت رو به این api متصل کنید و قراره که با express.js و react این پروژه رو انجام بدید. دو راه حل عموما میتونید پیش بگیرید، یکی اینکه دیتاهای api رو سمت کاربر لود کنید یا از طریق express.js اطلاعات رو گرفته و به کاربر نمایش بدید.این آموزش راه حل دوم رو پوشش میده و با استفاده از کتابخونه YAK یک ORM رو شبیه سازی کنید.بعد از نصب پکیج npm install yak-orm بعنوان مثال قرار هست که todo لیست هامون رو، دریافت کنیم و api ما این شکلی هست:// GET: https://jsonplaceholder.typicode.com/todos/1 { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }برای ساخت model، قدم اول، باید api رو وارد کنیم.var Yak = require('yak-orm'); var yak = new Yak({ host: "https://jsonplaceholder.typicode.com/" }); و بعد تعریف کردن مدلمونvar Todo = yak.model({ name: "todos" }); var todo = new Todo.get({ id: 1 }).then( todo => console.log(todo.attrs) ).catch(err => console.log(error)) نکته ای که باید توجه کنید اینه که ابجکی که از api ارسال شده رو باید توی attrs بهش دسترسی پیدا کنید.برای ساخت یک todo جدید کافیه متد save رو استفاده کنید و اگه id رو هم اضافه کنم به payload، بصورت اتوماتیک درخواست PATCH ارسال میشه که برای ویرایش todo میشه استفاده کرد.var todo = new Todo({ "userId": 11, "title": "delectus aut autem", "completed": false }) .save() .then( todo => console.log(todo.attrs)) .catch(err => console.log(error)) حالا اگه یک endpoint خاصی داشته باشیم چی؟ مثلا قراره نظرات پست شماره یک رو بگیریم// GET https://jsonplaceholder.typicode.com/posts/1/comments/ var Post = yak.model({ name: 'posts', postComments(id){ const url = `${this.endpoint}/${id}/comments` return this.request('GET', url, { success: res => res, error: this.errorHandler, }) } }) var comments = new Post() .postComments(2) .then(comments => console.log(comments)) .catch(err => console.log(error)) برای اطلاعات بیشتر میتونی به گیتهاب پروژه برید و مثال های مختلف رو ببنید.

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

سجاد ایوبی — Fri, 19 Oct 2018 17:50:18 +0330

** بروز رسانی **جهت تکمیل این بخش ویدیویی درست کردم که میتونید از لینک های زیر مشاهده کنیدیوتیوب: https://www.youtube.com/watch?v=3RjCiSnSN0sآپارات: https://www.aparat.com/v/tncIUتوی این پست قراره در مورد استفاده از pattern match و کتابخونه daggy رو یاد بگیریم و چطور میشه توی پروژه‌ هایی مثل react و react-native از اون استفاده کرد.مشکل if هااین تیکه کد خب همه ما قبلا باهاش مواجه شدیم:render() { if (this.state.isLoading) { return ... } if (this.state.isError) { return ... } if (this.state.isListEmpty) { return ... } return this.state.list.map(item => ...) } این همه دستور تو یه رندر اصلا جالب نیست.راه حل: pattern matchingتوی جاوا اسکریپ بصورت استاندارد چیزی تعریف نشده و خب ما مجبور هستیم از کتابخونه هایی مثل daggy استفاده کنیم.نمونه کد استفاده از daggyconst Item = daggy.tagged('Item', ['title']) const List = daggy.taggedSum('List', { Empty: [], Items: [Item], }) const list = List.Empty list.cata({ Empty: () => console.log(‘empty…’), Items: items => items.map(item => console.log(item.title)), }) با این روش ما چند تا چیز جدید رو بدست آوردیم:کدی کم باگ تری داریماستفاده مجدد ساده تر از کدهاخوانایی راحت تر کد و ساده کردن زندگی دیگرانروش استفاده در مثالی از دنیای واقعیخب فرض کنیم که شما پروژه خودتون رو با با دستور create-react-app ساختید و کتابخونه daggy رو با دستور yarn add daggy نصب کردید.src index.js App.js App.css types.js خب قرار ما یک لیستی رو از api دریافت کنیم و خب باید این لیست از دیتا رو با type تعریف کنیم.فرض کنید که لیستی که از api ارسال میشه این شکلیه:const LIST = [ { title: 'Butter' }, { title: 'Bread' }, { title: 'Eggs' }, { title: 'Fish' }, { title: 'Cake :3' }, ] const petFetch = () => Promise .resolve(LIST) .then(list => ({ list }))برای تعریف type ما باید اول بخش بندی کنیم لیستمون رو.مثلا آبجکت اول این آرایه رو یک Item در نظر میگیرم و بعد مجموعه همه این item ها رو یک page در نظر میگیریم.const Item = daggy.tagged('Item', ['title']) const List = daggy.taggedSum('Page', { Empty: [], Initial: [], Items: [Item], NotFound: ['searchMessage'], FetchError: [], }) نکته بعد این هست که توی taggedSum ما باید حالت های مختلف type رو تعریف کنیم. مثلا اگه حالت اولیه بود و هنوز دستوری ارسال نشده، یاموقعی که خروجی از api داشتیم و غیره رو تعریف میکنیم.مرحله بعد استفاده از این تایپ های تعریف شده استclass App extends Component { state = { list: List.Initial, searchString: '', } render() { return (

This list is empty =(
Loading...
{title}
There is nothing on your request: ’{seacrhMessage}’
Oooooops...

); } } نیاز به توضیح نداره که کد ما چقدر قشنگ تر شده و از شر اون همه شرط راحت شدیم.حالا وقته شبیه سازی اینه که ما مثلا دستور رو به api ارسال کردیم و منتظر نتیجه ای هستیمcomponentWillMount() { setTimeout(this.fetchList, 2000) } fetchList = () => petFetch() .then(res => this.wrapList(res.list)) .catch(() => this.setState({ list: List.FetchError })) wrapList = (list) => { const wrapperList = list.length === 0 ? List.Empty : List.Items(list) this.setState({ list: wrapperList }) } حالا اگه از redux استفاده میکنید کافیه این رو توی ریداکستون قرار بدید.کدهای این پست رو توی گیتهاب میتونید مشاهده کنید.

چطور با یک قالب ساده وردپرسی میشه مفیدتر بود

سجاد ایوبی — Thu, 16 Aug 2018 01:16:06 +0430

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

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

سجاد ایوبی — Wed, 09 May 2018 11:27:39 +0430

پیشگفتار:مشکلی که برای بروزرسانی اپ های موبایل وجود داره اینه که ما باید هر سری یک نسخه apk یا ipa رو بسازیم و بعد یک ورژن جدید تعریف کنیم و در نهایت بعد از یه مدت کوتاه نسخه بروز شده اپ ما در اختیار کاربران قرار میگیره. مشکل اینجا اینه که باید کلی زمان بگذره تا نسخه جدید منتشر بشه و به دست کاربر برسه.ولی خب وقتی که اپ موبایلی که با react-native نوشته شده، میتونه با code-push ترکیب بشه و مراحل بروز رسانی اپ موبایلتون رو خیلی سریعتر کنید، بدون نیاز به قرار دادن نسخه جدید در فروشگاه اپ موبایل.روش کار code-pushاین ابزار که ساخت مایکروسافت هست کدهای جاوا اسکریپت و عکس های اپ شما رو توی سرورهای خودش ذخیره میکنه و هربار که اپ موبایل اجرا میشه با سرور چک میشه که تغییری اگه ایجاد شده فایل های جدید و دانلود میکنه و بعد توی اجرای بعدی اپ آپدیت جدید اعمال شده. توجه داشته باشید که تغییرات عمده و اضافه کردن پلاگین های جدید به AppDelegate.m/MainActivity.java باید نسخه آپدیت شده اش رو انتشار بدید و از این طریق امکانپذیر نیست.نصب code-push-clinpm install -g code-push-cli ۱- ثبت نامcode-push register ۲- اضافه کردن اپ به اکانتcode-push app add MyApp-iOS ios react-native ** توجه کنید که بعد از این دستورات یک deployment key بهتون میده که باید به هم تیمی هاتون بدید (من هنوز نفهمیدم که چطوری میشه دوباره این کد رو چک کرد)اضافه کردن code-push به اپ۱- نصب ابزارnpm install --save react-native-code-push ۲- لینک کردن react-native link react-native-code-push** در این مرحله از شما deployment key پرسیده میشه که توی مرحله قبلی باید اون ها رو داشته باشید و اینجا وارد کنید.۳- اضافه کردن به اپimport codePush from "react-native-code-push"; class MyApp extends Component { } MyApp = codePush(MyApp);** باید شما یک نسخه apk یا ipa از اپ منتشر کنید تا بتونید از code-push استفاده کنید.۴- ایجاد تغییرات و ارسال کد جدید ** شما میتونید یه تغییر کوچیک توی دکمه یا متنی یا فرمی ایجاد کنید و بعد دستور زیر رو وارد کنید.code-push release-react MyApp-Android android۵- دیباگ کردنcode-push debug androidبرای اعمال تغییرات یکبار باید اپ بسته و باز بشه.کدپوش و expo ابزار های مشابه هست و بسته به میل خودتون میتونید هر کدوم رو استفاده کنید. امکانات زیادی داره این ابزار که میتونید توی گیتهاب مشاهده کنید و این مقاله بیشتر جهت آشنایی بود و اگر هم قبلا استفاده کردید تجربیات خودتون رو به اشتراک بزارید.

یک برنامه نویس خلاق و خوب چه شکلیه؟

سجاد ایوبی — Fri, 19 Jan 2018 17:40:09 +0330

همه داستان از اینجا شروع شد که یه روز واقعا هیچ کاری نموده بود انجام بدم، من از رییس خواستم که یک تسکی بهم بده ولی با گفتن یک جمله، خیلی ناراحتم کرد (ناراحتی من بیشتر بخاطر تلخ بودن حقیقت بود). گفت: باید یک شخص خلاق باشی و کمی خلاق باش و قرار نیست که همیشه من بهت یک کار محول کنم.من تا قبل از اون فکر میکردم که آدم خلاقی هستم و خیلی نیروی خوبی هستم، اینکه کارها رو زودتر از موعد تحویل میدم، کدهام رو تست شده و بدون باگ یا حداقل کمترین باگ تحویل میدم. ولی باید صادق باشیم، همه آدم ها میتونن این کار رو انجام بدند و این شکلی باشند، در کل برنامه نویس خلاقی نبودم و بیشتر یک برنامه نویس حرف گوش کن بودم که کارهایی که بهش داده می شه رو خیلی خوب انجام میداد.برنامه نویس معمولیکسایی که کدهای توی گیتهاب، stackoverflow و غیره رو با تغییراتی در پروژه خودشون قرار می دن و در آخر کاری رو که بهشون واگذار شده بود رو سر وقت تحویل می دند.:صادقانه بگم که من هنوز توی گروه معمولی هستم و در حال تغییر و حرکت به سوی خلاق شدن هستم هرچند کار سختیه ولی غیر ممکن نیست. برنامه نویس خلاقبعد به فکر افتادم که چطور میشه خلاق بود، اصلا تعریف برنامه نویس خلاق چیه. از چند برنامه نویس خوب پرسیدم که خلاقیت یعنی چی و حتی رفتار یکی از برنامه نویس های خلاق رو دنبال کردم و به نتایج زیر رسیدم و خب هنوز در حال یادگیری بیشتر هم هستم در این زمینه.خلاق ها توی ساعت کاری:موقع انجام دادن وظیفه شون اگه خارج از حیطه وظیفه شون باگی یا کدی که خراب باشه رو درست میکنند و نمی ترسند از تغییر دادن اون کد.هیچ وقت بیکار نیستند و همیشه کاری هست برای انجام دادن، برای مثال اونها درصورت نداشتن کار، مشغول Code refactoring یا افزایش Code coverage هستند.خلاق ها موقع وقت آزادشون:دائم مشغول یادگیری زبان، تکنولوژی و یا سرویس های جدیدی هستند که میتونه به پروژه شون کمک کنه و کارها رو ساده تر کنه.مثلا توی آخر هفته اش زبان جدیدی که می تونه توی پروژه استفاده بشه رو یاد میگیره و یک نمونه نمایشی هم ارائه میده، اگر هم تایید نشد چیزی از دست نمیده و در اصل هم زبان جدیدی یا گرفته و هم باعث شده که هم تیمی ها بدونن کسی هست که علاقه مند به پیشرفت همه هست.حرف آخرهنوز این لیست خلاق بودن در حال تغییر هست و نمیشه یک قانون مشخص براش نوشت و دنبال کرد همون طور که مشخصه باید خلاق بود ولی چیزی که در بین همه خلاق ها مشترک هست پرسشگری بودن هست و باید همیشه کنجکاو بود و سوال پرسید.من آدم با استعدادی نیستم، من فقط بسیار کنجکاو هستم - انشتیندنیای وب دچار تحول شده و بدنبال افراد خلاق هست پس باید خلاق بود و خلاقیت یاد گرفتنی هست و چیزی ذاتی نیست.نظر شما چیه در مورد برنامه نویس خلاق؟

Flake8 چی هست و چرا باید استفاده کرد؟

سجاد ایوبی — Thu, 18 Jan 2018 11:03:11 +0330

ابزارهای زیادی هست که با استفاده از اونها ما تبدیل بشیم به یک برنامه نویس بهتر. ابزارهایی که در استفاده های روزمره به کمک زیادی میکنه، که یکی از اون ابزار linting هست که تقریبا همه زبان های برنامه نویسی برای خودشون یکی دارند. دقیقا linting یعنی چه؟به برنامه ای که کد ما رو آنالیز میکنه و خطاهای احتمالی رو پیدا میکنه، Linting نامیده میشه.اولین برنامه ای که این کار رو کرد Lint بود و توی زبان C کار میکرد. آیا Linting جزو واجبات هست؟خب تقریبا میشه گفت آره، استفاده از اونا باعث میشه کهمی تونیم syntax error، بد بون شکل ظاهری، غلط املایی ها و غیره رو بفهمیمصرفه جویی در وقتباعث میشه بازبینی کدهامون (review) راحت تر باشه برای هم تیمی هامون (بخاطر یک شکل بودن کدها)سادگی استفادهسادگی در راه اندازی اولیهحالا flake8 چی هست؟خب یکی از ابزارهای linting در پایتون هست و توی کاروانرو ما از اون استفاده میکنیم.نصب flake8 و روش استفادهبرای نصب کافیه با توجه به ورژن پایتونی که دارید نصب رو انجام بدیدpython -m pip install flake8برای استفاده از اون هم کافیه فقط توی ترمینالتون دستور زیر رو وارد کنیدflake8 path/to/code/to/check.py # or flake8 path/to/code/یکی از امکانات خیلی باحال تر flake8 اینه که شما میتونید فقط یک خطای خاص رو توی یک فایل یا فولدر بررسی کنید.فرض کنید که میخواهیم بررسی کنیم که آیا خط طولانی توی یک فولدر وجود داره یا نهflake8 — select E501 path/to/your_project/تنظیمات flake8 برای ادیتورها:VIMSublimeTextPyCharmAtomترکیب flake8 و gitفرض کنید که پروژه ای دارید فایل های زیادی داره و وقت و حوصله ویرایش فایلهای قدیمی رو ندارید ولی تصمیم دارید از این ابزار برای فایل های جدید استفاده کنید و یا شاید شما دوست داشته باشید که flake8 رو به Continuous integration اضافه کنید و از این به بعد همه باید از این ابزار استفاده کنند.#!/usr/bin/env bash changed_files=$(git diff --diff-filter=ACM --name-only origin/master | grep -E '\.py$' | grep -v 'migrations/') echo "$changed_files" echo "" if [[ "$changed_files" = "" ]]; then exit 0 fi echo "$changed_files" | xargs flake8 --ignore=E711 --statistics --count rc=$? if [[ "$rc" != 0 ]]; then echo "FLAKE8 check failed, commit denied" exit "$rc" fiاین کد کاری که انجام میده اینه که اول که فایل های جدید یا تغییر پیدا کرده رو از گیت میگیره و linting رو روی اونا انجام میده و اگه خطا داشته باشه نمایش میده. شما کافیه این دستور shell رو هر بار قبل از کامیت کردن یا قبل از deploy کردن کدتون اجرا کنید.