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

کارگاه آموزشی کار با ریسایکلر ویو در زبان کاتلینhttps://avasam.ir/product/49

توضیحات و جزئیات دوره :

سلام در این کارگاه به مدت یک ساعت به مبحث بسیار کاربردی در برنامه نویسی اندروید به نام ریسایکلر ویو خواهیم پرداخت.

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

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

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

با آواسام و مهندس نیکزاد همراه باشید با یک کارگاه آموزشی فوق العاده ی د یگر 

جزئیات این کارگاه آموزشی 

تعداد جلسات 1 

مدت زمان کلی :‌1 ساعت یا 58 دقیقه و خورده ای 

مباحث مطرح شده :‌

• آموزش ساخت ریسایکلرویو
• آموزش ساخت adapter برای ریسایکلرویو در کاتلین
• آموزش ساخت کلاس مدل دریافتی جیسان از اینترنت
• آموزش دریافت اطلاعات جیسان با volley
• آموزش پارس کردن داده های جیسان 
• آموزش کار با کتابخانه ی glide برای لود کردن تصاویر از اینترنت درون ریسایکلر ویو 
• نحوه ی ساخت دیتالیست و آدپ کردن آن به ریسایکلر ویو در کاتلین

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

خب ! 

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

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

امیدوارم که این کارگاه آموزشی مورد پسند برنامه نویسان اندرویدی عزیز باشه ...

محیط استفاده در این کارگاه آموزشی android studio و سیستم عاملی که باهاش تدریس میشه ubuntu 16.04 هست 

موفق باشید

کارگاه آموزشی کار با Grunt js

کارگاه آموزشی کار با Grunt jshttps://avasam.ir/product/46

توضیحات و جزئیات دوره :

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

اگر بخواهیم بصورت ساده Grunt js را تعریف کنیم ، یک ابزار برای ساخت سیستم اتوماسیون کارهای تکراری برای تمام توسعه دهندگان وب اعم از php و پایتون و نودجی اس و  asp و .... 

هیچ تفاوتی ندارد که شما از چه زبان و تکنولوژی برای کارهای وب خود استفاده میکنید مهم این است که شما یک سری کارهای تکراری دارید که باید به دست یک اجرا کننده وظایف مثل Grun js بسپارید ! او برای شما این کارها را انجام خواهد داد . 

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

در این دوره نصب و راه اندازی هسته ی grunt و همچنین خط فرمان آن آموزش داده خواهد شد . 

سپس نحوه ی راه اندازی یک task runner با grunt بصورت کامل آموزش داده میشود . 

سپس وارد یک پروژه ی عملی خواهیم شد و در این پروژه کارهای زیر را انجام خواهیم داد : 

هر توسعه دهنده ی وب ، دوست دارد که سرعت بارگزاری سایتش بالا باشد و همچنین سئو خوبی داشته باشد . یکی از مشکلاتی که وجود دارد تعداد زیاد فایل های css و js است که باعث زیاد شدن درخواست فایل های js و css میشود . شما فرض کنید ده فایل css داشته باشید که برای قالب سایت شما باشد ( بین این ده فایل میتواند فریمورک هایی مثل بوت استرپ یا bulma یا هر چیز دیگر مشابهی باشد ) و همچنین ده ها فایل js داشته باشید که برای کتابخانه ها و خیلی ابزارهای دیگر مثل ساخت یک اسلایدر ساده در سایت نیاز باشد . 

همه ی اینها درخواست های http هستند یعنی درخواست مکرر آنها سرعت سایت شما را کم میکنند برای مثال بالا سایت شما حداقل 20 درخواست http به سمت سرور ارسال میکند و به همین سادگی بیست بار سرعت بازشدن  سایت شما را کاهش میدهد ! 

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

همچنین در نظر داشته باشید ، تمام ابزارهای سئو ، برای بهود وضعیت رتبه ی شما در نتایج گوگل و همچنین دیگر موتورهای جستجو به شما اعلام میکنند که فایل های js و css خود را کم کنید و اگر میتوانید آنها را درون یک فایل قرار دهید و سپس فشرده سازی کنید . اما این کاری نیست که یک توسعه دهنده بتواند بصورت دستی یا با محیط توسعه ی خود انجام دهد . 

شما میتوانید با چند خط دستور توسط grunt یک سیستمی پیاده سازی کنید که کل فایل های css و فایل های js شما را درون یک فایل css و یک فایل js جمع میکند یعنی برای درخواست css های سایت شما فقط یک درخواست و برای درخواست فایل های js شما فقط یک درخواست دیگر نیاز است  و این یعنی یک جادوی سرعت برای سرعت و سئو سایت شما . فقط این نیست در ادامه خواهیم دید هر یک از فایل ها را چطور فشرده سازی خواهیم کرد . 

فرض کنید ، شما فایل های css مربوط به یک اسلایدر ، یک فریمورک مثل بوت استرپ ، یک فایل استایل برای قالب آماده ، یک فایل css برای کدهای استایلی که دستی مینویسید ، دارید و بعد از اعمال تغییرات در هر یک از فایل های css و بعد از save کردن آن در کسری از ثانیه ، همه ی فایل های css شما، درون یک فایل به نام app.css یا هر فایل css با نام دلخواه دیگر، جمع آوری میشود و سپس فشرده سازی میشود . 

با چند خط کدنویسی بسیار ساده به شما یاد میدهیم که چطور بعد از کدنویسی css و js روی پروژه وب خودتان آنها را در کسری از ثانیه فشرده سازی کنید تا سرعت سایت شما باز هم بالاتر برود . 

سپس زمانی که کارتان با css و js ها تمام شد به راحتی آنها را روی سرور یا هاست خود Sync میکنید و تمام . حالا سایت شما یک فایل css به نام مثلا app.css و یک فایل js به نام app.js دارد که تمام فایل های متعدد css و js درون آنها جمع آوری و فشرده شده است و این برای بهبود کیفیت سایت بسیار بسیار مفید است . 

این فقط یک مثال از کاربرد grunt js بود ، grunt یک ابزار جادویی  است فقط مسئله جمع آوری فایل های css و فشرده سازی آنها درون یک فایل نیست شما تقریبا هر کار تکراری که روزانه انجام میدهید را میتوانید به grunt بسپارید . او برای شما این کارها را انجام خواهد داد و دستیار خوبی برای تمام توسعه دهندگان وب میباشد .

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

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

این کارگاه یک بخش پروژه محور نیز دارد تا بتوانید بحث این کارگاه را بصورت کامل یاد بگیرید .

کارگاه آموزش کامل گیت ، گیتهاب ، گیت لب

کارگاه آموزش کامل گیت ، گیتهاب ، گیت لبhttps://avasam.ir/product/59

توضیحات و جزئیات دوره :

درباره ی کارگاه آموزشی گیت 

در کارگاه آموزش گیت استاد نیک زاد ، بصورت کامل گیت ، گیت لب و گیتهاب آموزش داده میشود ،‌ این دوره ی آموزشی گیت ، برای تمامی برنامه نویسان ، بازی سازان ، طراحان و هر کسی که نیاز دارد پروژه ها و بروزرسانی فایل های خود را مدیریت کند مورد نیاز است. 

در این کارگاه آموزشی گیت ، که از سه بخش اصلی تشکیل شده است در ابتدا بر روی فلسفه ی وجودی git ، مسائل فنی آن ، همه ی دستورات و ابزارهای گیت خواهیم پرداخت . بعد از آموزش کامل git به سراغ سرویس های هاستینگ ریپوزیتوری های نوع git خواهیم رفت که دو نمونه ی معروف github و gitlab خواهیم پرداخت.

سپس بصورت کامل نحوه ی استفاده از github و gitlab آموزش داده خواهد شد تا بتوانید از ریپوزیتوری های لوکال که روی کامپیوتر شخصی خود دارید یک ریپوزیتوری ریموت بسازید و بصورت آنلاین به دیگر برنامه نویسان ارائه دهید. 

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

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

مدرس کارگاه آموزش گیت ( git )  ، مهندس نیک زاد هستند که سابقه ی طولانی تدریس مباحث مختلف برنامه نویسی داشته اند . استاد نیک زاد از سال 2012 بصورت حرفه ای در زمینه ی برنامه نویسی تدریس و از سال 2010 بصورت حرفه ای وارد مبحث برنامه نویسی شده اند . 

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

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

شما با دیدن این کارگاه آموزشی گیت ، هیچ مشکلی از بابت گیت و دستورات پیچیده ی ان نخواهید داشت چون مواردی که به نظر بسیاری از دوستان و حتی مدرسین سخت است و تدریس نشده اند ، به زبان ساده و با مثال های شیرین در این کارگاه به شما منتقل میشوند.

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

در کارگاه آموزشی گیت ( git ) که از سایت آواسام قصد دارم تقدیم دوست داران برنامه نویسی بکنم به مبحث اصلی گیت میپردازیم به تاریخچه ی آن و تمام مفاهیم لازم میپردازیم . مباحث اصلی گیت ممکن است بخاطر نبود منبع آموزشی جامع و خوب ، تا به حال تدریس نشده باشد و شما بعنوان یک برنامه نویس از آنها بی بهره باشید . قصد من از تهیه این دوره آموزش کامل با شیوه ی روان می باشد که هیچ مشکلی از نظر گیت و گیتهاب و گیت لب برای شما پیش نیاید. 

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

1. جلسه ی 1 : git workshop - introduce git and installation git 
2. جلسه ی 2 :  git workshop - git-init and introduce github
3. جلسه ی 3 : git workshop - git workflow how works ? 
4. جلسه ی 4 : git workshop - git-add and staging area
5. جلسه ی 5 : git workshop - git-commit and configure default commit message editor
6. جلسه ی 6 : git workshop - git-log and git-status
7. جلسه ی 7 : git workshop - branches ( add , remove , switch and merge )
8. جلسه ی 8 : git workshop - git cloning and clone special branch
9. جلسه ی 9 : git workshop - git restore and git mv commands
10. جلسه ی 10 : git workshop - git rm and gitk tools
11. جلسه ی 11 :  git workshop - git bisect and git show
12. جلسه ی 12 : git workshop - git diff and git grep
13. جلسه ی 13 : git workshop - git tags
14. و ...

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

جلسه ی اول کارگاه آموزش گیت و گیتهاب : 

 

جلسه ی دوم کارگاه آموزش گیت و گیتهاب :‌

دوره ی آموزشی پروژه محور دفترچه تلفن با Vue.js و Laravel

دوره ی آموزشی پروژه محور دفترچه تلفن با Vue.js و Laravelhttps://avasam.ir/product/27

دوره ی آموزش پروژه محور دفترچه تلفن با Vue.js و فریمورک محبوب Laravel

دوره ی آموزش پروژه محور ساخت دفترچه مخاطبین بصورت single page application یا سایت تک صفحه ای توسط فریمورک Laravel  و فریمورک Vue.js و فریمورک Bulma میباشد . در این پروژه تمرکز اصلی و هدف اصلی ما یادگیری کامل Vue.js نسخه ی دوم میباشد که جدیدترین و بروزترین نسخه ی این فریمورک است . شما با طی کردن این دوره ی آموزشی علاوه بر اینکه خود مبحث ویو جی اس را بصورت کامل یاد میگیرید بلکه نحوه ی استفاده ی Vue در فریمورک محبوب توسعه ی وب سایت به نام Laravel را نیز یاد خواهید گرفت . 

از آنجایی که Vue.js یک فریمورک برای JavaScript خالی است برای دیزاین و طراحی نهایی سایت نیز باید یک فریمورک دیگر استفاده کنید البته چه بهتر که فریمورک شما عاری از هرگونه کد JavaScript باشد ( برعکس بوت استرپ که به جاوااسکریپت محتاج است ) چونکه کارهای مربوط به جاوا اسکریپت را Vue.js برای شما انجام خواهد داد پس برای فرانت اند وب سایت دیگر نیازی به چیز اضافه دیگر مربوط به جاوااسکریپت نیست . 

پس ما انتخابمان فریمورک Bulma است یک فریمورک کاملا ریسپانسیو برای طراحی انواع وب سایت ها به زیبایی هر چه تمام تر ...

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

همچنین Bulma بر پایه ی طراحی جدید Flex است . 

سایت SPA یا  single-page application چیست ؟‌

سایت single page application همانطور که از اسمش هم پیداست با هدف این بوجود آمده است که سایت ها را درون یک صفحه ی واحد درست همانند یک اپلیکیشن دسکتاپ که باز میشود به اجرا بگذارد .

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

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

این درخواست کوچک هرگز از مرورگر درخواست نمیکرد که برای دیدن یک بخش جدید ،‌برای ثبت یک نظردر سایت ، برای جستجوی محصول خاص ،‌برای خرید کردن و ... سایت به صفحات مختلفی برود و هر بار آن صفحات لود شوند . 

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

فریمورک ها و کتابخانه های JavaScript دست از تلاش خود برنداشتن و Vuejs و Reactjs و Angularjs فریمورک ها و کتابخانه هایی بودن که به توسعه دهنده ساخت سایت های بدون نیاز به ریفرش را به ارمغان آورندند . 

پس سایت SPA یا Single Page Application سایتی است که تک صفحه ای هست و نیاز نیست برای کارهای مختلف ریفرش در مرورگر اتفاق بیوفتد مثل یک برنامه ی نصب شده درون یک مرورگر است . مثلا برنامه ی چت نسخه ی وب تلگرام :) که با انگولار نوشته شده 

درباره ی کلیات دوره ی آموزش پروژه محور دفترچه تلفن با Vuejs و Laravel 

در بحش پروژه محور این دوره ی آموزشی ، دفترچه مخاطبین آنلاین ساخته میشود که بتوانیم عملیات CRUD دیتابیس یا همان عملیات CREATE READ UPDATE DELETE را بدون ریفرش کردن صفحه ی مرورگر و بصورت AJAX با استفاده از Vue.js انجام دهیم . 

در این دوره ی آموزشی از فریمورک Laravel پی اچ پی برای ایجاد پروژه و ارتباط آن با Vue.js استفاده میکنیم .

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

نحوه ی کار با axios برای ارسال داده ها بصورت AJAX را آموزش میدهیم و در نهایت میتوان گفت شما الفبای فریمورک قوی Vue.js را در این دوره طی خواهید کرد و مطمئنا مباحث مطرح شده در این دوره هم برای فریمورک Vue.js و هم برای Laravel و هم برای Bulma  بی نظیر است . 

سرفصل های دوره ی آموزش پروژه محور ساخت دفترچه مخاطبین آنلاین با Vuejs و Laravel 

جلسه ۱ : 

• معرفی فریمورک Vue.js و مقایسه آن با انواع فریمورک های JavaScript
• آموزش دانلود و نصب Node.js و npm
• آموزش دانلود و نصب Vue.js

جلسه ۲ : 

• آموزش افزودن صحیح فایل Vue.js به سند HTML
• آموزش شروع کدنویسی با Vue.js
• آموزش کار با آبجکت اصلی Vue 
• آموزش کار با el و انتخاب element مورد نظر 
• آموزش کار با متد data  و تعریف متغیرهای Vue.js 

جلسه  ۳ : 

• آموزش مدیریت آبجکت ها در Vue.js
• آموزش نحوه ی استفاده از console مرورگر کروم جهت مشاهده ی رخ دادها در طول کدنویسی Vue.js و مدیریت خطاهای کدنویسی رخ داده
• آموزش تغییر لحظه ای داده ها با console
• آموزش کار با delimiters در Vue.js
• آموزش استفاده از v-bind: جهت تغییر ویژگی های تگ های HTML با استفاده از Vue.js

جلسه ۴ : 

• آموزش کار با فرم های HTML و V-bind
• آموش کار با v-model 
• آموزش کار با v-model-lazy
• آموزش کار با checkbox و v-model برای دریافت آیتم های انتخاب شده در فرم HTML
• آموزش متد  join در Vue.js
• آموزش کار با v-for یا ساخت حلقه در Vue.js

جلسه ۵ : 

• آموزش کار با آرایه ها در Vue.js
• ساخت یک لیست از آیتم های قابل انتخاب در Vue.js
• آموزش تعریف key برای آیتم های حلقه ی v-for 
• آموزش شرط if و else و elseif 

جلسه ۶ : 

• آموزش کار با رویداد کلیک یا v-on:click 
• آموزش کار با توابع در Vue.js و نوشتن تابع جدید در بخش methods
• آموزش استفاده از @click بجای v-on:click در رویداد کلیک 
• آموزش کار با @click.prevent 

جلسه ۷ : 

• آموزش استایل نویسی با Vue.js
• آموزش اختصاص کلاس css توسط Vue.js
• آموزش کار با متد @mousehover در Vue.js
• اختصاص مقادیر استایل با استفاده از v-model

جلسه ۸ :

• آموزش Bind کردن انواع کلاس های css با استفاده از Vuejs به همراه مثال 
• تغییر کلاس های css و استایل element های HTML با استفاده از Vue.js

جلسه ۹ : 

• آموزش ساخت لیست در Vuejs 
• آموزش ساخت لیستی از مرورگرها و ورژن های متناظر آنها بصورت تمرین عملی

جلسه ۱۰ : 

• آموزش انتساب رشته ها  در Vuejs
• آموزش انجام عملیات ریاضی روی داده های عددی
• آموزش ایجاد پروژه مبدل داده های ریاضی(سانتی متر) بصورت عملی 

جلسه ۱۱ : 

• آموزش کار با متد indexOf
• ساخت یک پروژه سوال و جواب اتوماتیک برای نشان دادن کارآیی indexOf
• آموزش افزودن Jquery و استفاده از متد Ajax
• آموزش فراخوانی api جیسان یک وب سرویس
• آموزش لود کردن محصولات از یک وب سرویس به همراه توضیحات و تصویر و ...

جلسه ۱۲ : 

• آموزش چرخه ی حیات در Vuejs 
• آموزش کار با متد beforeCreate
• آموزش کار با متد Created 
• آموزش کار با متد beforeMounted
• آموزش کار با متد Mounted
• آموزش کار با متد beforeUpdate
• آموزش کار با متد Updated
• آموزش کار با متد beforeDestroy
• آموزش کار با متد destroyed
• آموزش ایجاد و کار با component های Vue.js
• آموزش ایجاد template های مختلف با استفاده از Component ها 

جلسه  ۱۳ : 

• ادامه ی آموزش کار با component ها و ایجاد component های جدید 
• دریافت json از وب سرویس و نمایش محصولات با استفاده از component ها 
• آموزش استفاده از component برای افزودن element های جدید 

جلسه ۱۴ : 

• آموزش نصب و کار با vue.js devtools برای مرورگر کروم 
• آموزش ایجاد toggle برای نمایش بخشی از متن محصول 
• آموزش کار با devtools جهت پیدا کردن component های vue.js و مدیریت آنها به آسانی

جلسه ۱۵ :

• آموزش پیشرفته ی کار با component ها در Vue.js و ایجاد template های بیشتر
• آموزش کار با scope
• آموزش افزودن تگ های HTML سفارشی به لیست component ها فراخوانی شده با json

جلسه ۱۶ : 

• آموزش تعریف متد remove برای پاک کردن یک آیتم از یک لیست در Vue.js 
• آموزش کار با متد splice در Vue.js 

سرفصل دوره ی پروژه محور Vue.js + Laravel ۵ + Bulma

جلسه ۱۷ : 

• آموزش نصب Composer 
• آموزش نصب فریمورک  Laravel 
• آموزش نصب Nodejs و npm
• آموزش دانلود و نصب فریمورک Bulma
• آموزش نصب Vue.js و Vue-router 

جلسه ۱۸ : 

• ایجاد view جدید در Laravel 
• ایجاد route جدید در Laravel 
• آموزش ایجاد یک view به همراه Vuejs در Laravel 
• تست و راه اندازی Vuejs و استفاده از Laravel Mix 

جلسه ۱۹ : 

• آموزش نصب محیط توسعه ی Atom و افزونه های مورد نیاز برای Laravel و Vue.js 
• آموزش استفاده از دستور npm run watch برای کامپایل css و js های پروژه در یک فایل
• آموزش ایجاد و استفاده از component مربوط به header و footer سایت توسط Vue.js
• آموزش استفاده از vue-router در پروژه دفترچه مخاطبین 
• آموزش ساخت فایل component های مختلف و لود کردن آنها بدون ریفرش شدن مرورگر

جلسه ۲۰ : 

• آموزش نصب Font Awesome در Laravel با استفاده از npm 
• ایجاد item برای نمایش مخاطبین در لیست 
• ایجاد دکمه های مدیریتی مثل ویرایش - حذف - نمایش یک آیتم در دفترچه مخاطبین 
• آموزش استفاده از پنجره ی modal در bulma و استفاده ی آن توسط Vue.js
• آموزش کدنویسی رویداد کلیک @click برای نمایش و بستن یک پنجره ی modal

جلسه ۲۱ : 

• آموزش ایجاد دامنه ی مجازی در xampp بصورت phonebook.me 
• آموزش ساخت Model جدید در لاراول
• آموزش ساخت migration جدید در لاراول
• آموزش ساخت Controller جدید در لاراول از نوع resource
• آموزش مدیریت جدول دیتابیس با استفاده از Migration 
• آموزش استفاده از php artisan جهت migrate کردن تغییرات جدول دیتابیس
•  

جلسه ۲۲ : 

• آموزش اعتبار سنجی فرم با Laravel Request اختصاصی و Vuejs 
• آموزش نصب axios و استفاده از آن برای درج اطلاعات در پایگاه داده با استفاده از Model لاراول و Vuejs بصورت ایجکسی ( درج مخاطب جدید )

جلسه ۲۳ : 

• آموزش ایجاد متد جدید getData در کنترلر برای لود کردن داده های مخاطبین از دیتابیس
• آموزش لود کردن داده ها توسط axios 
• آموزش پر کردن لیست از مخاطبین موجود در دیتابیس توسط Vue.js

جلسه ۲۴ : 

• آموزش ایجاد modal جدید و نمایش آن زمان کلیک شدن نمایش یک مخاطب 
• آموزش فراخوانی یک مخاطب با آیدی بدون رفرش صفحه توسط axios
• آموزش نمایش اطلاعات یک مخاطب لود شده در modal ایجاد شده 

جلسه ۲۵ : 

• آموزش ایجاد modal یا پنجره جدید با استفاده از Vue.js برای عملیات بروزرسانی یک مخاطب خاص از دفترچه مخاطبین
• آموزش فراخوانی اطلاعات مخاطب از دیتابیس و نمایش ان در فرم modal ،  جهت ویرایش
• آموزش ثبت تغییرات انجام شده در دیتابیس با Axios و متدهای model

جلسه ۲۶ : 

• آموزش ایجاد متد delete یک مخاطب خاص از دیتایس با استفاده از axios 
• آموزش برنامه نویسی متد delete و پاک کردن آیتم انتخاب شده توسط Vue.js و متد destroy کنترلر ، بدون رفرش مرورگر

جلسه ۲۷ : 

• رفع برخی باگ های پروژه 
• آموزش تبدیل تمام قسمت های پروژه به یک وب سایت Single Page Application 

جلسه ۲۸ : 

• آموزش مرتب کردن خودکار لیست توسط Vue.js بصورت حروف الفبایی بعد از درج یک فیلد جدید بدون نیاز به رفرش مرورگر
• آموزش خالی کردن فیلد های فرم به محض افزودن یک آیتم برای لیست مخاطبین با استفاده از دستورات Vue.js 

جلسه ۲۹ : 

• آموزش ایجاد متد جستجو بین آیتم های لیست مخاطبین با وارد کردن عبارت در input جستجو
• ایجاد watcher برای جستجو بین فیلدهای Name 

جلسه ۳۰ : 

• آموزش کدنویسی جستجوی پیشرفته برای سرچ بین فیلد های دیگر مثل email , phone و ...
• آموزش پر کردن لیست از نتایج جستجو شده و بازگشت اطلاعات قبلی بعد از پاکسازی فیلد جستجو
• جستجو بصورت آنی با تایپ هر حرف یا حذف آن ، در فیلد input جستجو 

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

دمو دوره ی آموزش پروژه محور ساخت دفترچه تلفن بصورت SPA با Vuejs و لاراول 

سیستم ثبت نام و ورود کاربران با لاراول نسخه ی 6

سیستم ثبت نام و ورود کاربران با لاراول نسخه ی 6 https://avasam.ir/post/137

سیستم ثبت نام و ورود کاربران با لاراول نسخه ی 6 

در این آموزش به سیستم احراز هویت لاراول نسخه ی ۶ بپردازیم . سیستمی که در آن عمل ثبت نام کاربران ، ورود و خروج و بازیابی پسورد ساخته میشود . 

قبل از اینکه این آموزش را شروع کنید مطمئن شوید یک نسخه ی جدید از لاراول را نصب کرده اید و سرور آنرا استارت کرده اید با php artisan serve و سپس در localhost:۸۰۰۰ پروژه ی جدید لاراول خود را مشاهده میکنید . 

در نسخه ی ۶ لاراول سیستم احراز هویت کاربران به داخل یک پکیج دیگری به نام Laravel/UI انتقال داده شده است و برای استفاده از سیستم احراز هویت باید ابتدا این پکیج را نصب کنید . 

از طریق دستورات زیر در ترمینال یا cmd میتوانید این بسته را نصب کنید :‌

نکته : در ترمینال یا cmd حتما به محل نصب پروژه ی خود بروید .

composer require laravel/ui

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

Using version ^1.0 for laravel/ui
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing laravel/ui (v1.0.1): Downloading (100%)
Writing lock file
[...]

سپس میتوانید دستور زیر را در ترمینال وارد کنید 

php artisan ui vue --auth

و خروجی این دستور نیز طبق زیر خواهد بود 

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfull

شما باید این دستورات را در ترمینال وارد کنید تا یک سیستم احراز هویت کامل به همراه رابط کاربری آن ساخته شود که شامل بخش های ثب نام ، ورود و بازیابی رمز عبور است  . 

view ها و route  های احراز هویت باید به پروژه ی لاراول شما اضافه شده باشد . همچنین یک کنترلر به نام HomeController باید ساخته شود که احراز هویت را کنترل کند . 

دستور php artisan ui vue --auth ویوهای ضروری را میسازد و در مسیر resources/views/auth قرار میدهد . 

دستور ui هم مسیر resources/views/layouts را میسازد که قالب پایه ی پروژه را بر مبنای فریمورک سی اس اس  به نام بوت استرپ ، میسازد . 

خب حالا که این سیستم بصورت خودکار ساخته شده کاربر میتواند ثبت نام کند ،‌سپس وارد سیستم شود و خارج شود ، اگر رمز خود را فراموش کرد بازیابی رمز را بزند . 

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

ثبت نام کاربران با لاراول 

حالا اگر در مرورگر خود بزنید http://localhost:۸۰۰۰/register باید سیستم ثبت نام کاربر برای شما بالا بیاد . 

ورود کاربران با لاراول

حالا اگر در مرورگر بزنید : localhost:۸۰۰۰/login تصویر زیر باید برای شما نمایش داده شود 

فراموشی رمز عبور کاربران در لاراول

و در آدرس http://localhost:۸۰۰۰/password/reset باید شکل زیر باشد :‌

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

$ npm install
$ npm run dev

اگر شما خطای Unhandled rejection Error: EACCES: permission denied  را دارید شما باید دسترسی لازم را با استفاده از دستور sudo بدهید : 

$ sudo npm install 
$ sudo npm run dev

حالا رابط کاربری و استایل view ها بهتر شد تصویر زیر را ببینید :‌

vدر این سیستم اگر شما ثبت نام کنید بصورت خودکار لاگین میشوید و به صفحه ی اصلی منتقل میشوید همان مسیر /home که در کنترلر HomeController وجود دارد . 

برای دیدن route های ایجاد شده به مسیر routes/web.php بروید محتویات این فایل باید شکل زیر باشد :‌

<?php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

در کد های بالا متد Auth::routes() را مشاهده میکنید این متد شامل تمام route های مورد نیاز مثل login, registration, logout و password reset است .

این متد زمانی به فایل web.php اضافه شد که شما دستورات نصب و راه اندازی سیستم auth لاراول را در ابتدای این مقاله وارد کردید . 

LoginController ،  RegisterController و ResetPasswordController در لاراول 

لاراول سه کنترلر آماده میکند که نام آنها LoginController, RegisterController و ResetPasswordController است . اینها کنترلرهای اصلی برای ثبت نام ، ورود و بازیابی پسورد هستند که شما میتوانید این کنترلرها را در مسیر app/Http/Controllers/Auth پیدا کنید و آنها را شخصی سازی کنید . 

چطور بخش هایی از سایت را برای کاربران نمایش دهید ( محدودسازی بخشی سایت فقط برای اعضا ) 

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

برای این کار در لاراول شما باید از middelware ها کمک بگیرید . 

لاراول برای احراز هویت middleware دارد به نام auth که در مسیر Illuminate\Auth\Middleware\Authenticate قرار گرفته است . همچنین در سیستم HTTP هسته ی پروژه نیز ثبت شده است . 

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

خب بیایید بررسی کنیم که صفحه ی اصلی چطور محافظت شده است و طبق این مثال باقی قسمت ها را نیز محافظت سازی کنیم . 

فایل app/Http/Controllers/HomeController.php را باز کنید محتویات این فایل باید مثل زیر باشد : 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{

    public function __construct()
    {
        $this->middleware('auth');
    }
    public function index()
    {
        return view('home');
    }
}

در کدهای بالا در متد __construct شما میبینید که middleware فراخوانی شده است و مقدار auth به معنای اینکه ما middleware مربوط به auth را نیاز داریم ارسال شده است .

middleware ها میتوانند درون کنترلر یا در route ها ضدا زده شوند . خب حالا فایل routes/web.php را باز کنید و route مربوط به /home را به شکل زیر بروزرسانی کنید : 

Route::get('/home', 'HomeController@index')->name('home')->middleware('auth');

نتیجه گیری :‌

خب در این آموزش با نحوه ی پیاده سازی سیستم auth لاراول آشنا شدید سیستمی که بصورت خودکار تمام چیزهایی که برای ثبت نام ، ورود و فراموشی رمز عبور کاربران نیاز است . 

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

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

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

خب اگر قبلا با لاراول کار کرده باشید میبینید که سیستم auth در نسخه ی ۶ لاراول کمی تفاوت داشت :

• در نسخه ی 6 لاراول route ها و view ها در داخل پکیج laravel/ui قرار گرفته است که باید از طریق composer نصب کنید 
• دستور php artisan ui vue --auth با دستور php artisan make:auth جایگزین شده است 

اتمام مقاله