نوشته های شیوا توکل

ساخت پومودورو با جاوااسکریپت

شیوا توکل — Sat, 09 May 2020 17:24:11 +0430

اگر تازه شروع به یادگیری جاوااسکریپت کردید این پروژه ساده میتونه براتون تمرین خوبی باشه اول اینو بگم هزارتا کد مختلف برای ساخت یه پومودورو وجود داره که تنوع و سادگی و حتی پیچیدگی در بینشون دیده میشه مهم اینکه بشینین فکر کنین و تک تک چیزایی که نیاز دارین رو لیست کنین و حالا برای هرکدوم دنبال راه حل بگردین کپی کردن شاید باعث بشه اون کد رو یاد بگیرین ولی صرفا همون کد یعنی نحوه ی فکر کردن رو یاد نمیگیرین و این میشه که نمیتونید هیچوقت قدم های اول رو بردارید برای همینه که همه به ما توصیه میکنن برای یادگیری برنامه نویسی هرچه سریعتر دست به کد بشین .دراینجا هم من فقط توضیحات کلی میدم و سعی میکنم بهتون سرنخ بدم و به هیچ وجه خط به خط توضیح نمیدم.برای اینکه این زمان 25 دقیقه ثانیه ثانیه ازش کم بشه اول از همه به تابعی بنام setInterval نیاز داریم:setInterval(startTimer,1000)کاری که setInterval برامون انجام میده اینکه هر 1000 میلی ثانیه یکبار startTimer دوباره اجرا میشه.پس کافیه startTimer یک ثانیه از 25:00 کم کنه هربار و براش شرط بزاریم که وقتی به 0 رسید از clearInterval استفاده کنه ینی دیگه 1000 میلی ثانیه یکبار تابع قبلی اجرا نمیشه و کاملا اجراش قطع میشه.البته من از یه صدای دینگ هم استفاده کردم تاوقتی که زمانتون تموم شد بااین صدا آگاه بشید.var audio = new Audio('ding.mp3'); audio.play();در ابتدا ما متغیری رو به صورت زیر تعریف میکنیم :countdown= 25*60*1000;حالا در startTimer :countdown -= 1000;اینجا هربار 1000 تا معادل یک ثانیه از countdown کم میشه و دوباره مقدارجدید رو توی countdown میریزه.بعد عدد مورد نظرمو به فرمت ثانیه و دقیقه در میارم و در min و sec میریزم و به این صورت نمایش میدم:var min = Math.floor(countdown / (60 * 1000)); var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000); document.getElementById("timer") =min + " : " + sec;برای pause احتمالا باتوجه به توضیحات قبلی الان میدونید باید از چی استفاده کنید؟درسته از clearInterval اینطوری تابع قبلی اجرا نمیشه و عددمون ثابت میمونه.و اما برای Reset کردن چکار کنیم؟در ابتدا میخوایم startTimer دیگه اجرا نشه پس از clearInterval استفاده میکنیم ولی نمیخوایم روی اخرین عدد ثابت بمونه بلکه میخوایم به 25:00 برگرده پس دوباره به countdown مقدار میدیم و اونرو در timer چاپ میکنیم .document.getElementById("reset").= function(){ clearInterval(window.timerId); countdown=25*60*1000; document.getElementById("timer")= "25:00" };همچنین تاریخی که در بالای صفحه میبینید رو به راحتی بااستفاده از ()new Date میتونید تولید کنید و با استفاده از switch اعداد ماه رو به اسامی ماه تغییر بدید.var today= new Date(); var month =today.getMonth()+1; document.getElementById("year")= today.getFullYear();.همچنین اگر میخواید کد کامل پروژه رو ببینید اینجا درگیتهابم هست و اگر دوست داشتید بهم ستاره بدید :) .اگر هم میخواید راجب پومودورو بدونید پیشنهاد میکنم این پست رو بخونید.اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید.شیواتوکل | 20 اردیبهشت 99

چیز‌هایی که از جاوااسکریپت نمیدانیم (قسمت دوم)

شیوا توکل — Fri, 17 Apr 2020 19:08:13 +0430

قسمت اول این مقاله را در اینجا و مقاله اصلی به زبان انگلیسی را در اینجا میتوانید بخوانید .ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ6. the keyword "this" : برای اشاره به object مورد نظرمون از‌کلمه کلیدی this استفاده میکینم که به نزدیکترین object اشاره میکنه . let person = { name: "shiva", age: 20, introduceMe: function(){ return "My name is "+this.name+", I am "+this.age + " years old" } } console.log(person.introduceMe()); خروجی به صورت زیر است:My name is shiva, I am 20 years oldبهتره بگیم this به ابجکتی اشاره میکنه که در current context باشه :let person = { name: "shirin", age: 40, introduceMe: function(){ return "My name is "+this.name+", I am "+this.age + " years old" }, child: { name: "shiva", age: 20, indroduceMe: function(){ return "My name is "+this.name+", I am "+this.age + " years old" } } }; console.log(person.indroduceMe()); console.log(person.child.indroduceMe());خروجی به صورت زیر است:My name is shirin, I am 40 years oldMy name is shiva, I am 20 years oldاما زمانی که از asynchronous function استفاده میکنیم کمی پیچیده تر میشود به مثال زیر توجه کنید:let person = { firstName: "shiva", age: 20, introduceMe: function(){ setTimeout(function(){ console.log(this.firstName + " is " + this.age + " years old") },6000) } } person.introduceMe();اما خروجی به شکل زیر است:undefined is undefined years oldبرای جلوگیری از این مشکل یکی از راه ها این هست که متدمون رو bind کنیم :let person = { firstName: "shiva", age: 20, introduceMe: function(){ setTimeout(function(){ console.log( this.firstName + " is " + this.age + " years old") }.bind(person),5000) } } person.introduceMe();خروجی به صورت زیر است:shiva is 20 years old7.Promise :قبل از اینکه Promise رو توضیح بدم خیلی کوتاه راجب callback میگم .از callback زمانی استفاده میکنیم که میخواهیم مطمئن شویم که قطعه کد مشخصی بعد از انجام قطعه کد دیگری انجام میشود :function doHomework(subject, callback) { alert(`Starting my ${subject} homework.`); callback(); } doHomework('math', function() { alert('Finished my homework'); });در برنامه‌نویسی Asynchronous ما نمیدونیم که کار Async چه زمانی به پایان میرسه و به همین خاطر از Callback استفاده میکنیم. Callback یک تابع هست و زمانی فراخوانی میشه که کار Async به پایان رسیده باشه. پس با استفاده از Callback میتونیم کار خاصی رو بعد از به اتمام رسیدن فعالیت Async انجام بدیم.اگر کار مورد نظر موفقیت‌آمیز باشه که اطلاعات در اختیارمون قرار میگیره و اگر هم اروری وجود داشته باشه میتونیم اون رو دریافت کنیم و Error handling رو انجام بدیم.زمانی که از Callback‌ ها استفاده میکنیم، اغلب به مشکلات خوانایی کد برمیخوریم چون بعضی مواقع ممکنه که 10 مورد Callback تودرتو داشته باشیم و اصطلاحا به این مورد callback hell یا جهنم Callback میگن.برای همین از Promise استفاده میکنیم .مثال ساده ی زیر نحوه ی عملکرد Promise رو نشون میده:let p = new Promise((resolve, reject) = > { let a = 1+1 if (a== 2){ resolve('success') } else{ reject('failed') } }); p.then ((message) = >{ console.log('this is in then ' +message) }).catch((message) = >{ console.log('this is in catch ' +message) })بجای succeccCallback تابع resolve و بجای errorCallback تابع reject رو پاس میدیم .چیزی که به resolve پاس میدیم در اختیار then و چیزی که به reject پاس میدیم د راختیار catch قرار میگیره.حالا فرض کنید که چند Promise داشته باشیم :const recordVideoOne = new Promise ((resovle , reject) = >{ resolve("video 1 recorded") })const recordVideoTwo = new Promise ((resovle , reject) = >{ resolve("video 2 recorded") })const recordVideoThree = new Promise ((resovle , reject) = >{ resolve("video 3 recorded") }) Promise.all([ recordVideoOne , recordVideoTwo, recordVideoThree ]).then ((messages) = > { console.log(messages) }) خروجی به صورت زیر خواهد بود:0 :"video 1 recorded"1 :"video 2 recorded"2 :"video 3 recorded" در Promise.all باید همه Promise ها انجام شوند یعنی اگر یکی از promise ها هم مقداری طول بکشد تا انجام شود بقیه Promise ها صبر میکنند تا آن Promise نیز به پایان برسد.ولی اگر بخواهیم اولین Promise که مراحلش به پایان رسید را داشته باشیم میتوانیم از Promise.race استفاده کنیم .اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید.شیوا توکل |29 فروردین 99

چیزهایی که از جاوااسکریپت نمیدانیم (قسمت اول)

شیوا توکل — Fri, 10 Apr 2020 12:13:41 +0430

این مقاله صرفا ترجمه و در بسیاری از موارد برداشت شخصی من ،در دو قسمت، از مقاله ای دیگر است که در اینجا میتوانید بخوانید.در قسمت اول 5 موضوع مهم مورد بحث قرار میگیرد و در قسمت دوم دو موضوع مهم و چند نکته ی جزیی.اگر قبلا کتاب you don't know js را خوانده اید احتمالا نیازی به خواندن این مطلب ندارید.ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ1.logical operatorsدر بسیاری از زبان ها وقتی از AND و OR استفاده میشود مقادیر true یا false برگردانده میشود اما زبان جاوااسکریپت یکی از operand ها را بر میگرداند .عملگر AND نسبت به OR اولویت دارد.همچنین بجای ternary expresssion ها و if-else میتوانیم از AND و OR استفاده کنیم .در زیر معادل ternary expression ها را مشاهده میکنید:a ? a : b ==> a||ba ? b : a ==> a&&bیکی دیگر از operator های منطقی که البته به ندرت استفاده میشود ~ است که معادل (x)- است.2.type conversionعلاوه بر متد های valueOf ، جاوا اسکریپت از دوراه برای تبدیل type های مختلف استفاده میکند..cast.coercionطریقه عملکرد هرکدام را در تصویر پایین میبینید.3.falsy valuesشرط ها یکی از پایه ای ترین ساختار ها در زبان برنامه نویسی هستند که از آن ها بسیار استفاده میکنیم و مهمه که بدونیم درهر زبان به چه صورت رفتار میکنه.مقداری که شرط ها بر میگردانند falsy یا truthy است .در زیر چند مقدار falsy را مشاهده میکنید:1- empty string ==> ' '2- undefined3- boolaen value ==> false4- null5- number value ==> 06- number value ==> -07-not a number value ==> NANهر مقدار که جز موارد بالا نباشد truthy حساب میشود.حتی :empty literal object ==> { }empty array ==> [ ]false string ==> 'false'4.scope and IIFE اولین باری که شروع به نوشتن کد های جاوااسکریپت میکنید احتمالا کسی به شما میگوید اینطور نوشتن (در عکس پایین) را دنبال کنید چون بهتر کار میکند .این مثل این میمونه که یک function را بلافاصله فراخوانی کنیم.این یک IIFE است یعنی ==> Immediately Invoked Function Expressionو در واقع بهتر عمل نمیکند اما از برخورد متغیر ها جلوگیری میکند.5.objectآبجکت به ما کمک میکند که چند variable را با یک عنوان جمع آوردی کنیم .دوراه برای دسترسی به مشخصات object وجود دارد .1-dot syntax2-array syntaxاگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید.شیوا توکل | 22 فروردین 99

بازطراحی وبسایت اینستاگرام

شیوا توکل — Sat, 28 Mar 2020 20:05:27 +0430

در این روزهای قرنطینه کمی با html وcss بازی کردم و از طرحی که در اینجا بود ایده گرفتم و روی این پروژه کوچولو با دانش نصف و نیمه ام کار کردم .قطعا مشکلات زیادی داره که امیدوارم به مرور زمان اون هارو اصلاح کنم همچنین از اینکه شما دوستان هم نظراتتون رو برام بنویسید خوشحال میشم و اگر همراه با بیان مشکلات راه حل و سرنخ هایی برای حل اون مشکل رو پیشنهاد بدید خیلی بیشتر خوشحال میشم .در این پروژه از :sass fontawesomefont: billabong gridflexboxو BEMاستفاده شده .همچنین بزودی نسخه موبایل رو هم آماده میکنم.در گیتهابم میتونید کد مربوط به این پروژه رو ببینید. اینجا سپاس از وقتی که گذاشتید.شیوا توکل | 9فروردین 1399

مرورگر چیست؟

شیوا توکل — Thu, 05 Mar 2020 23:58:33 +0330

مرورگر ها نرم افزارهایی هستند که کار قراردادن ،بازیابی و نمایش محتوا را انجام میدهند.در مدل browser , client-server ها نقش client را ایفا میکنند، browser ها میتونن فایل های HTML و Application ها و javascript را تفسیر کنن و نمایش بدهند.به طور ساده میتوان گفت مرورگر ها مجموعه ای از کدهای ساختاری است که در کنار هم یکسری وظایف را برای نمایش یک صفحه وب انجام می دهند.در شکل زیر component های اصلی یک مرورگر را می بینید.1.The User Interfaceفضایی هست که در اون تعامل با Browser اتفاق میفته و شامل address bar و دکمه های back و next و home و ... میشه.2.The Browser Engineموتور مرورگر مانند یک پل میان UI و Rendering Engine میباشد و باتوجه به UI های مختلف در Rendering Engine دستکاری میکند.3.The Rendering Engineمسيولیت ارا‌‌يه صفحه وب درخواست شده را دارد. در مرورگر های مختلف از Rendering Engine های مختلف استفاده میشود. Internet Explorer: Trident Firefox & other Mozilla browsers: Gecko Chrome & Opera 15+: Blink Chrome (iPhone) & Safari: Webkitجریان اصلی که Rendering Engine برای ارايه صفحه وب طی میکند به صورت زیر است:برای تشریح و توضیح تصویر بالا نیاز داریم بدانیم DOM چیست ؟ document object modelدر زمانی که یک صفحه وب بار گذاری میشود، مرورگر از آن صفحه یک مدل شی گرا یا DOM ایجاد میکند که یک ساختار درختی از اشیاء موجود در صفحه HTML است .جاوااسکریپت بااستفاده از DOM یک صفحه داینامیک یا پویا ایجاد میکند.Rendering Engineشروع به تجزیه سند HTML میکند یعنی المنت های موجود در HTML را به node در DOM تبدیل میکند و content tree را میسازد . مانند تصویر پایینسپس داده های موجود در فایل CSS را نیز تجزیه کرده و درختی دیگر بنام render tree ایجاد میکند .مانند تصویر پایین همچنین در تصویر پایین میبینید که چطور این دو درخت در نهایت ترکیب شده و صفحه نمایش داده میشود.4.Networkingشبکه جنبه های ارتباطی و امنیتی را کنترل میکند و یک حافظه نهان بازیابی برای کاهش ترافیک شبکه ایجاد میکند.5.Javascript interpreterاین مولفه کد جاوااسکریپت در یک وبسایت را تفسیر و اجرا میکند و نتایج بدست آمده را برای نمایش به Rendering Engine میفرستد.6.UI backend7.Data Persistence/storageمرورگرها از مکانیسم های ذخیره سازی پشتیبانی میکنند مانند:local storageIndexedDBwebSQLfileSystemاین ها مانند یک دیتابیس کوچک هستند که در درایومحلی کامپیوتری که مرورگر درآن نصب شده است ایجاد میشوند و داده هایی مانند حافظه نهان ، کوکی ها و بوکمارک ها را مدیریت میکنند.اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید.شیوا توکل | 15اسفند 98

مروری برصفت position در css

شیوا توکل — Wed, 04 Mar 2020 15:05:13 +0330

در این پست بسیار کوتاه میخوام توضیحی درمورد چهار پوزیشن مهم و پراستفاده درcss بدم.static , relative , fixed , absolute 1.staticپوزیشن دیفالت برای هر المنت static است .هر المنت با پوزیشن static در جایی که انتظارش داریم قرار میگیرد یعنی جایی که برای آن در HTML مشخص کرده ایم و مکان اولیه آن عوض نمیشود یعنی صفات left ,top ,bottom و right تاثیری روی المنت مورد نظر ندارد.2.relativeیک المنت با پوزیشن relative میتواند نسبت به مکان اولیه اش جا به جا شود . صفات top ,left و ... میتوانند المنت را نسبت به مکان اولیه اش جا به جا کنند ولی مکان اولیه آن توسط المنت های دیگر پر نخواهد شد ،یعنی باوجود تغییر مکان هنوز هم مکان اولیه اش اشغال شده حساب میشود.3.fixedیک المنت با پوزیشن fixed نسبت به صفحه نمایش جابه جا میشود . صفات left ,right و ... آن را در صفحه جابه‌جا میکند ولی برخلاف relative مکان اولیه اش اشغال نمشود و میتواند با المنت های دیگر پر شود. 4.absoluteیک المنت با پوزیشن absolute نسبت به نزدیکترین المنت پدر خود جابه‌جا میشود و اگر المنت پدر نداشت نسبت به body جابه‌جا میشود .**نکته : اگر میخواهید متنی را در تصویری قرار دهید به تصویر مورد نظر پوزیشن relative و به متن خود پوزیشن absolute بدهید.همچنین این لینک میتونه در یادگیری چگونگی استفاده از پوزیشن مناسب باشه. اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید.شیواتوکل | 14اسفند 98

سیستم های نامگذاری CSS

شیوا توکل — Sun, 16 Feb 2020 23:00:46 +0330

من یک توسعه دهنده فرانت اند تازه کارم که شدیدا به یادگیری در این زمینه علاقه مندم و میخوام یکی از مشکلاتی که باهاش درگیر هستم رو حل کنم .مشکل من نام گذاری کلاس های CSS هست ،من گاهی به کلاسی نیاز دارم که توی بخش های مختلف ازش استفاده کنم ولی نام گذاری اشتباه باعث میشه من کلاس های اضافی زیادی داشته باشم ، گاهی وقتی به پروژه قبلی برمیگردم بین کلاس ها گم میشم و واقعا نمیدونم چی به چیه یا اینکه نگرانم اگر این کلاس رو تغییر بدم توی بخش های دیگه تغییری رخ نده.برای حل این مشکلات طبق معمول از گوگل کمک گرفتم چند تا راه حل پیدا کردم و راجب هرکدام از اون ها مطالعه کردم و سپس تست کردم و حالا میخوام این اطلاعات رو باشما به اشتراک بگذارم. سه راه حل که تاکنون برای حل این مشکلات بوجود آمده اند در زیر آمده:1. OOCSS ==> object oreinted CSS2. SMACSS ==> scables and madular architecture for CSS3. BEM ==> block element modifierتقریبا میتوان گفت که درحال حاضر جامع ترین و بهترین روش برای من BEM است پس بریم ببینیم این روش چیه ...‌BEM:همونطور که در تصویر میبینید کل بدن آدمک یک Block است که در صفحاتی که ما توسعه میدهیم میشود گفت همان component است ،به دست و پا و بقیه اجزا که زیر مجموعه بدن هستند Elementمیگوییم که همان اجزای تشکیل دهنده ی component هستند و در نهایت Modifier که برای بیان ویژگی ها و توصیف بکار میرود.بزارید یک مثال واضح بزنم این تصویر رو ببینید دراین تصویر component اصلی ما card هست که از اجزای دیگه ای که به اون ها element میگیم تشکیل شده و حالت دکمه های پایین که میتونن دکمه های back و successباشن و تغییراتی مثل رنگ واندازه وفونت دارن که میشه modifier .صبرکنین میدونم هنوز متوجه داستان نشدین و میخوام بهتون بگم چطور کلاس های همین مثال رو بنویسید.به طور کلی ساختار کلاس ها در روش BEM به اینصورته:Block__Element--Modifierابتدا نام Block سپس دوتا underscore سپس نام Element و بعد از آن دوتا dash و در انتها Modifier .حالا شروع میکنیم به نوشتن نام برای کلاس های مثال بالا:خب component اصلی ما اسمش چیه؟cardمیریم سراغ Element ها :card__imagecard__descriptioncard__buttonو در انتها Modifier:card__button--successcard__button--backدرضمن درکنار استفاده از BEM اگر از Sass استفاده کنین بسیار کار خودتون رو راحت تر میکنید.همچنین اگر دراستفاده از BEM دوبار یا بیشتر از __ استفاده کردید بدونید دارید اشتباه میکنید ینی اگر Element های تودرتو داشتید اون هارو زنجیر وار بهم دیگه متصل نکنید و فقط Element مورد نظر رو به بالاترین والد یا همون Block اصلی وصل کنید.خب BEM همین بود اما من پیشنهاد میکنم برای مدیریت بهتر style هاتون در پروژه تمام کلاس هاتون در یک فایل Sass ننویسید بلکه برای هر component یک فایل Sass ایجاد کنید تا پروژه تمیز تری داشته باشین و بین کدها و کلاس ها گم نشین .اگر این مقاله به شما کمک کرد درانتشار آن کوتاهی نکنید.شیوا توکل | 27 بهمن 98

رابط برنامه نویسی نرم افزار یا API

شیوا توکل — Wed, 12 Feb 2020 15:55:41 +0330

در ابتدا فقط میخوام مفهموم API رو به زبان ساده توضیح بدم.حتما تاالان UI یا user interface به گوشتون خورده، ui یا رابط کاربری درواقع رابطی گرافیکی برای تعامل بهتر انسان با کامپیوتره ینی مثلا همین که فلان دکمه زیبا که اگه روش کلیک کنی فلان کارو میکنه. خب پس UI رابطی هست برای تعامل انسان با برنامه های کامپیوتری و حالا برای اینکه برنامه های کامپیوتری بتونن باهم ارتباط برقرار کنن هم به یک رابط نیاز داریم . نه صبر کنین مگه برنامه ها هم باهم ارتباط دارن؟بله برای مثال شما گوگل مپ رو درنظر بگیرید که حجم زیادی دیتا دراختیار داره حالا گوگل مپ میگه اجازه دارین از دیتاهای من در application خوتون استفاده کنین و منِ توسعه دهنده حالا میخوام از این دیتا توی application خودم استفاده کنم برای اینکار باید از یه رابط استفاده کنم که به اون aplication programming interface یا رابط برنامه نویسی نرم افزار میگیم.خب API انواع مختلفی داره مثل API سخت افزاری ، API سیستم عاملی ، API زبان های برنامه نویسی ، API تحت وب (وب سرویس)که من دراین مقاله فقط درموردAPIتحت وب صحبت میکنم.هر وب سرویس یک API هست، به این خاطر که به بوسیله وب سرویس می تونیم امکانات و داده های یک نرم افزار رو به اشتراک بزاریم، اما یک API لزوماً یک Web Service نیست.درواقعWeb Service منابعی هستن که در محیط اینترنت دردسترس قرار میگیرن. مثال هایی از API تحت وب:1.لاگین کردن به وب سایت های مختلف با حساب های گوگل 2.استفاده از قابلیت جستجوی گوگل در وب سایت شخصیتون3.نمایش نقشه گوگل در وب سایت هاهمش شد گوگل که ، انگار گوگل داره دنیارو میگیره :)زمانی که پای API تحت وب به میان می‌آید، باید با سازوکار پروتکل HTTP و HTTPS آشنا باشیم که در اینجا به طور خلاصه اونهارو توضیح دادم.انواع وب سرویس ها:1.RPCاین اصطلاح مخفف واژگان remote Procedure Client است. این نوع وب سرویس در دو نوع مدل XML-RPC و JSON-RPC عرضه شده است و همان‌طور که از نام آن‌ها مشخص است، مدل اول از فرمت اکس‌ام‌ال پشتیبانی می‌کند و مدل دوم از جیسون (نیاز به توضیح است که این وب سرویس امروزه کاربرد چندانی ندارد.)2.RESTاین اصطلاح که مخفف واژگان Representational State Transfer است بر خلاف موارد قبل یک پروتکل حساب نمی‌شود بلکه نوعی معماری است که نسبت به بقیه کاربرد آسان‌تری دارد و به همین دلیل هم هست که امروزه فراگیر شده است.سرویسی که بر پایه این معماری نوشته شده باشد را Restful API گویند.3.GraphQLاستانداردی برای طراحی و توسعهٔ API است که به صورت اپن‌سورس توسط کمپانی فیسبوک توسعه داده شده است که در حقیقت در پاسخ به نقدهایی که به REST وارد است طراحی شده تا بتواند به عنوان راه‌کاری جامع و اثربخش در توسعهٔ ای‌پی‌آی مورد استفاده قرار گیرد.انتخاب بین REST و GraphQL:درمقایسه این دو باید نقاط ضعف و قوت هرکدام رو بیان کنیم و باتوجه به نیازمون انتخاب کنیم که از کدام استفاده کنیم .نقاط ضعف REST:1. Multiple Endpoints (Multiple Round Trips)در سرویس های rest هر route یا به عبارتی هر url دیتای خاصی را به عنوان response نشان می دهد. پس هر url تنها به یک سورس از اطلاعات دسترسی دارد و می تواند همان موارد را در خروجی نشان دهد و برای دسترسی به داده های مختلف نیاز است تا urlهای مختلفی را تعریف کنید.2. Overfetching/Underfetching Data (ارسال و دریافت دیتا) در طول یک پروژه داده هایی را که مورد نیازتان است از URLهایی برای دریافت این داده ها استفاده می کنید که شاید بخشی از داده هایی که به واسطه آن URL در اختیارتان قرار می گیرد مورد نیازتان نباشد و اینکه دیتایی که دریافت می کنید تمام دیتای مورد نیازتان نباشد و مجیور باشید از چندین URL برای دریافت آن استفاده کنید که درنهایت باعث میشه که دیتای سنگینی دریافت کنید و همچنین زمان بیشتری برای response صرف میشود.3. API Versioningروشی است که به شما کمک می کند تا درصورتی که در response داده های خود تغییری ایجاد کنید کاربرانی که از نسخه های قبلی استفاده می کنند دچار مشکل نشوند و همچنان بتوانند از سرویس های مختلف استفاده کنند.ولی همیشه این مشکل وجود دارد که وقتی شما یک ورژن جدید از API را منتشر می نمایید دیگر از نسخه های قدیمی پشتیبانی نمی کنید و در نهایت کاربران باید این بروزرسانی را مورد استفاده قرار دهند و مشکل اصلی زمانی به وجود می آید که شما موظفید برای ورژن جدید URLها، داکیومنت و … جدید را بنویسید و البته در نهایت دچار یک افزونگی کد می شوید.4. Weak Typingهر زمان که داده ای را از سرویس RESTFULL دریافت می کنید حتما این اتفاق می افتد که به داده خاصی که مد نظرتان است دسترسی نداشته باشید و دلیل آن این است که شما یکسری URLهای خاص را برای طیف خاصی از داده در نظر گرفته اید و برای اینکه به داده های خاصی از سرویس RESTFULL دسترسی داشته باشید باید یک فرآیند پیچیده از URLها و ساختارهای وابسته به آن را پشت سر بگذارید.5. Client Kept In The Darkباید همیشه این موضوع را در نظر داشته باشید در کنار پیاده سازی ساختارهای پیچیده پیاده سازی URLها و به عبارتی end-point ها مختلف کاربر هیچگاه اطلاعی از داده ای که دریافت می کند ندارد مگر اینکه از url استفاده کرده و داده ای که برای وی ارسال می شود را دریافت نماید و این در مواقعی باعث بروز مشکل می شود می توانم بگویم این احتمال وجود دارد که داده ای که کاربر دریافت می کند تمام ان چیزی که به آن نیاز دارد نیست. درمقابل ضعف های REST ، مزایای GraphQL قرار دارند:1. One Request To Get Them Allسرویس GraphQL ساختاری را در اختیارتان قرار می دهد تا بتوانید تنها با استفاده از یک end-point تمام داده ای که نیاز دارید را از طریق یک query درخواست کنید .2. Strongly Typed:به دلیل ساختاری که GraphQL دارد از انواع مختلف داده ای پشتیبانی می کند چه آنهایی که در ساختار آن وجود دارد و چه آنهایی که کاربر آنها را مشخص می کند.باید بدانید که هیچگونه وابستگی به این که باید نوع داده ای را برای آن مشخص کنید ندارد و در صورتی که داده ای را درخواست می کنید می داند که چه نوع داده ای را باید response کند.3. Client Is The Driver :در GraphQL این امکان به توسعه دهنده فرانت اند داده میشود تا خودش مشخص کند که چه داده و با چه نوع داده ای را می خواهد به عنوان response دریافت کند.این ویژگی باعث می شود تا ارسال و دریافت داده هایی که مورد نیاز کاربر نیست به حداقل برسد.4. API Evolution :گراف کیوال مطابق با schema که برای آن مشخص شده است داده مورد نیاز کاربر را response می کند درنتیجه به راحتی می توانید فیلدی را کم و یا زیاد کنید پس نیاز به ورژن های مختلف از API از بین می رود.5. Transport Layer Agnostic :یکی از اصلی ترین ویژگی های GraphQL که باعث تمایز آن از REST می شود این است که از پروتکل های انتقال دیتای مختلفی را پشتیبانی می کند اگر وب سرور API به جهت پورتکل انتقال دیتا تغییراتی داشته باشد (http, https, WebSocket, TCP, UDP) انگاه GraphQL می تواند داده را با توجه به پورتکل انتقال بین client و server جابه‌جا کند.معایب GraphQL:1. Non-Existent Cachingگراف کیوال برخلاف REST که از سیستم کش HTTP استفاده می کند از cach پشتیبانی نمی کند.2. Monitoring and Error Reporting :سیستم RESTFUl از status های HTTP برای مدیریت انواع خطاها استفاده می کند.این مقوله باعث میشود تا بتوان بحث مانیتورینگ را بر روی API به راحتی پیاده سازی نمود.ولی API که توسط ساختار GraphQL پیاده سازی شده است همه responseها را با status 200 ارسال می کند.و این کار مانیتوریگ API را با مشکل مواجه می کند.3. Exposed Schema and Resource Attacks :برخلاف REST در GraphQL برای درخواست از Queryها استفاده می کنید در نتیجه باید به درستی با Schema دادها آشنایی داشته باشید بنابراین وقتی API خود را در اختیار دیگران قرار می دهید این API را باید آنقدر قوی و ایمن توسعه داده باشید تا کاربر در حالی که با Queryها کار می کند نتواند به راحتی به دیتا استراکچر (Schema) دسترسی داشته باشد و حملات Dos را انجام دهد.4. Security – Authentication and Authorization :مشکلی که در APIهایی که با GraphQL توسعه داده می شود در حال حاضر در بین جامعه GraphQL وجود دارد این است که چگونه باید مقوله امنیت را پیاده سازی کرد. این درحالی است که هنوز استانداردی برای ادغام authentication and authorization وجود ندارد.5. Young Ecosystem :گراف کیوال ابزاری نو ظهور در حوزه توسعه APIها محسوب می شود و شاید در اولین تجربه کاربری خود با این ساختار با مشکلات زیادی روبه رو شوید که شاید ساعت ها وقت شما را برای حل آن مشکل به خود بگیرد. ولی همواره در حال بروزرسانی و رفع باگ هایی است که ممکن است هر شخصی که از آن استفاده می کند با آن برخورد داشته باشد.در انتها باید بگم که GraphQL درسرعت و راحتی و پرفورمنس واقعا برتری داره و کاررو برای توسعه دهنده فرانت اند خیلی راحتتر میکنه ، اما REST امنیت بیشتری داره.-اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید:)شیوا توکل | 23 بهمن 98

مروری بر پروتکل http

شیوا توکل — Tue, 04 Feb 2020 17:44:27 +0330

ابتدا قراربود این مقاله درارتباط باHTTP باشه اما چیزای دیگه ای هم هستن که با HTTP ارتباط تنگاتنگی دارن پس قبل از اینکه درارتباط با پروتکل HTTP چیزی بگم بهتره راجب URL کمی بیشتر بدونیم.واما (URL ( Uniform Resource Locator: درنوار بالای مرورگرخود میتونیم یک نمونه URL ببینیم درواقع بسیاری از URL‌ها، موقعیت یک فایل را در جایی از فضای وب برای ما تعیین می‌کنن به عبارت دقیق تر URL مسیر یک صفحه خاص از سایت را نشان می دهد که منحصر به فرد است و نیازی به WWW ندارد( البته استفاده کردن یا نکردن از www بیشتر در مباحث سئو مهم است) و بجای آن از //:Http استفاده می کنه. حالا این URL شامل چه چیز هایی میشه؟-Protocol-DomainName-Port-Path1.پروتکل(protocol):نشان میده که مرورگر از کدام پروتکل باید استفاده کنه،دربیشتر موارد از HTTP استفاده میشه و گاها ازHTTPS که نمونه امن آن است.الف)پروتکلHTTP چیست؟HTTP:Hyper Text Transfer Protocolاصطلاحا به پروتکلی گفته میشه که برای ایجاد ارتباط ،دریافت و ارسال داده ها بین سرور و کلاینت استفاده می شه.این پروتکل قابل بسط درسال1991طراحی شد که بارها تکامل یافته. پروتکل HTTP از پروتکل TCP/IP، که امنیت داده ها و تضمین ارسال آنهارا تماما برعهده داره،برای بستن پلی میان server و client استفاده میکنه.برای ارایه یک صفحه وب ابتدا مرورگر شما یک درخواست اصلی برای گرفتن html document ارسال میکنه .همونطور که در خیلی از موارد دیدید که وارد سایتی میشید و فقط یک سری متن بدون استایل میبینید چون فقط html اصطلاحا لود شده .سپس این فایل را تجزیه کرده و درخواست های دیگری که مربوط به اجرای اسکریپت هاو CSS است را میفرسته،سپس مرورگر این اطلاعات را ترکیب میکنه تا یک صفحه کامل را به شما نشان بدهد.ب)پیام های HTTP:نحوه عملکرد HTTP به اینصورت است که برای مثال آدرسی را در مرورگر وارد میکنید ابتدا از کامپیوتر شما پیامی که به آن اصطلاحا request گفته میشه به server فرستاده میشه و سرور پاسخ خودرا ،کهresponse نامیده میشه،به client(هروسیله ای که ازطرف کاربررفتارمیکند) میفرسته.درواقع مرورگر تمام درخواست ها و پاسخ ها را ترجمه و تفسیر میکند و به صورت HTTP request و HTTP response در می اورد که اینها دو نوع پیام HTTPهستند.پیام های HTTP به صورت encode ،ASCII شدند.ج) MIME Types:از MIME types برای مشخص کردن نوع اطلاعات یک فایل استفاده میشه.(شبیه همون پسوند فایل ها مثل jpg، pdf، mp3 و غیره)به عکس زیر دقت کنید در قسمت Content-Type نوع فایل که دراینجا text/html است مشخص شده. بطور کلی به صورت type/subtype نمایش داده میشود.دراینجا میتوانید لیست کاملی از MIME Types ببینید. د) حافظه نهان یا cache:حافظه نهان تکنیکی است که برای نگه داری فایل هایی که بین سرور و کاربر رد و بدل شده استفاده میشود که دارای دو نوع private caches و shared caches میباشد. چرا باید کش مرورگر را خالی کنیم؟ اگه شما یک طراح سایت هستین و بخواین که تغییراتی توی ظاهر سایت انجام بدین، برای اینکه مطمئن بشید تغییرات به خوبی اعمال شده باید حافظه کش مرورگر رو خالی کنید. چرا که ممکنه همچنان فایل‌هایی که برای لود صفحه مورد نیاز هستند، در حالت کش بارگزاری بشن که در این صورت هیچ تغییری رو مشاهده نمیکنین. بنابراین باید یک بار با پاک کردن کش مرورگر کاری کنید که فایل‌های مورد نیاز مجددا از سمت سرور دانلود بشن و در حالت بروز شده بتونید فایل‌ها رو ببینید.همچنین میتوانید درقسمت cache ، settingمرورگرتان را پاک کنید.ه) HTTP redirect یا تغییر مسیر:شما میتوانید کاربران را به فایل، Directory و یا سایت دیگری redirect کنید.برای مثال شما مکان وب سایتتان را تغییر داده اید و می خواهید بازدیدکنندگان سایت جدید شما را مشاهده کنند پس سایت قبلی خودرا به آدرس سایت جدید redirect میکنید. به عنوان پرسش آخر این بخش آیا HTTP بهترین راه حل ممکن است؟ خیر،مشکل اینجا است که HTTP داده‌ها را رمزنگاری نمی‌کنه و به همین دلیل افراد شخص‌ثالث می‌تونن به اطلاعاتی که بین سیستم‌ها و تحت این پروتکل منتقل می‌شوند دسترسی داشته باشن.اما می‌توان با بهره بردن از HTTPS انتقال اطاعات بین سیستم‌ها را با امنیت انجام داد،که به معنای پروتکل امن انتقال ابرمتن است و کاربرد بسیاری در ارسال اطلاعات بین سیستم‌ها به‌صورت امن داره.HTTPS:hyper text transfer secure2.نام دامنه(DomainName):نام دامنه نشان میده که کدام وب سرور مد نظر است .همچنین میشه مستقیما از آدرس IP سایت مورد نظر استفاده کرد.برای بدست آوردن IP یک سایت میتونید از روش های زیر استفاده کنید:لینوکس: ترمینال را باز کنید و دستور زیر را وارد کنیدhost ویندوز: cmd را باز کنید و دستور زیر را وارد کنیدping میتوانید به این وب سایت مراجعه کنید.3.پورت(Port): نشان دهنده "درگاه" فنی است که برای دسترسی به منابع روی سرور وب استفاده می شود. اگر سرور وب از پورت های استاندارد پروتکل HTTP استفاده کنه معمولا حذف میشه. (80 برای HTTP و 443 برای HTTPS) 4.مسیر (path):مسیر تقریبا موضوع واضحی است ،نشان میدهد شما درکدام صفحه یا قسمت ازوب سایت قرار دارید.اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید :)شیوا توکل | 15 بهمن 98