نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
از Quasar V1، Vue JS 2، Vuex و Firebase برای ساختن یک برنامه Cross Platform برای Web، iOS، Android، Mac و Windows استفاده کنید. Quasar Framework V1 و Firebase چگونه با استفاده از Vuex وضعیت برنامه خود را مدیریت کنیم چگونه با استفاده از پایگاه داده Realtime Firebase یک back-end برای برنامه ایجاد کنیم - شامل احراز هویت کاربر، خواندن و نوشتن داده ها همه موارد ضروری Quasar Framework V1 و VueJS 2 پیش نیازها :دانش پایه HTML و CSS لازم است دانش پایه جاوا اسکریپت مفید است اما لازم نیست دانش پایه VueJS مفید است اما لازم نیست یک مک برای توسعه ترجیح داده می شود
در این دوره به شما نشان خواهم داد که چگونه از Quasar Framework V1 (همراه با Vue JS 2، Vuex Firebase) برای ایجاد برنامههای دنیای واقعی و چند پلتفرمی با استفاده از یک پایگاه کد Vue JS استفاده کنید. و این برنامهها را آماده تولید کنید و در تمام پلتفرمهای اصلی - وب، iOS، Android، Mac Windows اجرا کنید.
در طول این دوره ما یک برنامه واقعی به نام Awesome Todo ایجاد خواهیم کرد. در این برنامه میتوانیم کارهایی را اضافه، ویرایش یا حذف کنیم و آنها را بهعنوان تکمیلشده علامتگذاری کنیم.
همچنین میتوانیم کارها را بر اساس نام یا تاریخ مرتب کنیم و با استفاده از نوار جستجو در میان کارها جستجو کنیم.
همچنین یک صفحه تنظیمات با 2 تنظیمات واقعی خواهد داشت که نحوه عملکرد برنامه را تغییر میدهد - و هنگامی که برنامه بسته میشود و راهاندازی مجدد میشود (یا مرورگر در نسخه وب مجدداً بارگیری میشود) باقی میماند. همچنین دارای یک صفحه راهنما، یک پیوند "از وب سایت ما بازدید کنید" و یک پیوند "به ما ایمیل کنید".
این برنامه با استفاده از پایگاه داده بیدرنگ Firebase پشتیبان خود را ایجاد می کند. کاربران میتوانند ثبت نام کنند، وارد شوند و همگامسازی دادههای خود را بهطور بیدرنگ در همه دستگاههایشان ببینند.
ما تولید برنامه را برای همه پلتفرمهای مختلف - وب، iOS، Android، Mac Windows آماده خواهیم کرد.
شما تمام اصول اولیه Quasar Framework، از جمله Quasar CLI، اجزای Quasar، پلاگینهای Quasar، دستورالعملهای Quasar، تشخیص پلتفرم، طرحبندیها، قالببندی ابزارهای مختلف Quasar را خواهید آموخت.
همچنین تمام اصول اولیه Vue.js از جمله Data Binding، رویدادها، Computed Properties، Components، Directives، Filters، Lists Lifecycle Hooks را به شما نشان خواهم داد.
میآموزید که چگونه با استفاده از Vuex وضعیت برنامه خود را مدیریت کنید، جایی که من وضعیت، جهش، تنظیمکننده اقدامات را پوشش میدهم.
من تمام اصول اولیه Firebase را پوشش خواهم داد، از جمله احراز هویت، خواندن دادهها، نوشتن دادهها برای محافظت از دادههای شما با قوانین پایگاه داده.
در پایان این دوره، میتوانید برنامههای دنیای واقعی خود را با بکاندهای واقعی که روی همه پلتفرمهای مختلف کار میکنند، ایجاد کنید.
توجه: این دوره برای Quasar V1 (با Vue 2) است. Quasar V2 (با Vue 3) در این دوره پوشش داده نمی شود.
سرفصل ها و درس ها
معرفی
Introduction
برنامه معرفی و دوره: Awesome Todo
Introduction & Course App: Awesome Todo
کوازار چیست؟
What is Quasar?
Vue.js چیست؟
What is Vue.js?
شروع شدن
Getting started
معرفی ماژول
Module Introduction
Node.js و Quasar CLI را نصب کنید
Install Node.js and Quasar CLI
یک پروژه Quasar جدید در مرورگر ایجاد و راه اندازی کنید
Create & launch a new Quasar Project in the Browser
به روز رسانی: Quasar V1 Documentation
Update: Quasar V1 Documentation
وارد کردن خودکار اجزا و دستورالعمل ها
Auto-import Components & Directives
ساختار پوشه - طرحبندیها، صفحات، مسیرها و موارد دیگر
Folder structure - Layouts, Pages, Routes & more
مبانی Vue.js
Vue.js Basics
معرفی ماژول
Module Introduction
آناتومی یک جزء فایل واحد Vue
Anatomy of a Vue Single File Component
اتصال داده به نما
Binding Data to the View
اتصال داده دو طرفه با مدل v
Two-way Data Binding with v-model
رویدادها و روش ها - کلیک کنید
Events & Methods - Click
رویدادها - صفحه کلید و موارد دیگر
Events - Keyboard & more
نمایش و پنهان کردن عناصر - v-show
Showing and Hiding Elements - v-show
Delete Task - وظیفه را از ایالت حذف کنید
Delete Task - Delete the Task from the State
کد ماژول
Module Code
اضافه کردن کار - فرم ها، فیلدها و اعتبارسنجی
Add Task - Forms, Fields & Validation
معرفی ماژول
Module Introduction
اضافه کردن کار - دکمه و مدال
Add Task - Button & Modal
اضافه کردن وظیفه - سفارشی کردن Modal
Add Task - Customize the Modal
فیلدها را اضافه کنید
Add the Fields
اعتبار سنجی و ارسال فرم
Form Validation & Submission
Vuex - وقتی فرم ارسال شد، کار را اضافه کنید
Vuex - Add Task when Form Submitted
چند پیشرفت
A Few Improvements
کد ماژول
Module Code
ویرایش کار - اجزای کودک در عمق، به روز رسانی و همگام سازی، اسلات ها
Edit Task - Child Components in-depth, Update and Sync, Slots
معرفی ماژول
Module Introduction
افزودن وظیفه - اجزای قابل استفاده مجدد (1/5): سربرگ معین
Add Task - Reusable Components (1/5): Modal Header
افزودن وظیفه - اجزای قابل استفاده مجدد (2/5): نام وظیفه
Add Task - Reusable Components (2/5): Task Name
افزودن وظیفه - اجزای قابل استفاده مجدد (3/5): تاریخ سررسید
Add Task - Reusable Components (3/5): Due Date
اضافه کردن کار - اجزای قابل استفاده مجدد (4/5): زمان مقرر
Add Task - Reusable Components (4/5): Due Time
افزودن وظیفه - اجزای قابل استفاده مجدد (5/5): دکمه ها
Add Task - Reusable Components (5/5): Buttons
ویرایش وظیفه - دکمه را اضافه کنید و مدال را نشان دهید
Edit Task - Add the Button & Show the Modal
ویرایش وظیفه - سفارشی کردن و راه اندازی Modal
Edit Task - Customise & Setup the Modal
کد ماژول
Module Code
Vuex، Forms، Quasar Components و Vue.js را تمرین کنید
Practice Vuex, Forms, Quasar Components & Vue.js
وظایف را به بخش های "Todo" و "Completed" تقسیم کنید
Split Tasks into "Todo" and "Completed" Sections
معرفی ماژول
Module Introduction
Getters برای Todo و کارهای تکمیل شده ایجاد کنید
Create Getters for Todo and Completed Tasks
نمایش کارهای انجام شده و انجام شده در لیست های جداگانه
Display Todo and Completed Tasks in Separate Lists
سرفصل ها را به لیست وظایف اضافه کنید
Add Headings to the Task Lists
رنگ پس زمینه عنوان را قابل تنظیم کنید
Make the Heading Background Color Adjustable
مشروط به نمایش و پنهان کردن لیست وظایف
Conditionally Show & Hide the Task Lists
یک "بدون کار برای انجام امروز!" بنر
Add a "No tasks to do today!" Banner
از گذرگاه رویداد جهانی برای رفع دکمه بنر «بدون کار» استفاده کنید
Use Global Event Bus to fix the "No tasks" Banner Button
کد ماژول
Module Code
یک نوار جستجو اضافه کنید
Add a Search Bar
معرفی ماژول
Module Introduction
علامت گذاری نوار جستجو را اضافه کنید
Add the Search Bar Markup
نوار جستجو را با mapState به Vuex State متصل کنید
Connect Search Bar to Vuex State with mapState
برای تنظیم مقدار جستجوی Vuex از یک تنظیم کننده ویژگی محاسبه شده استفاده کنید
Use a Computed Property Setter to set the Vuex search value
یک Action & Mutation را برای تنظیم ویژگی جستجو تنظیم کنید
Setup an Action & Mutation to set the search property
وظایف را بر اساس مقدار جستجو فیلتر کنید
Filter the Tasks based on Search Value
نمایش "نتیجه جستجو وجود ندارد" و پنهان کردن بنر "بدون کار امروز".
Display “No search results” & Hide the “No tasks today” Banner
کد ماژول
Module Code
یک فهرست کشویی مرتب سازی اضافه کنید (برای مرتب کردن وظایف بر اساس نام/تاریخ سررسید)
Add a Sort Dropdown (to sort Tasks by Name / Due Date)
معرفی ماژول
Module Introduction
Sorting Getter را به Vuex Store اضافه کنید
Add Sorting Getter to Vuex Store
معیارهای مرتب سازی را قابل تنظیم کنید
Make the Sort Criteria Configurable
یک جزء کشویی مرتب سازی به صفحه اضافه کنید
Add a Sort Dropdown Component to the Page
مرتب سازی کشویی - تنظیمات را پیکربندی کنید
Sort Dropdown - Configure the Options
منوی کشویی مرتب سازی را به وضعیت فروشگاه Vuex پیوند دهید
Link the Sort Dropdown to the Vuex Store State
کد ماژول
Module Code
برنامه را با Transitions، Directives، Filters، Mixins و Scroll Area بهبود دهید
Improve the app with Transitions, Directives, Filters, Mixins & Scroll Area
معرفی ماژول
Module Introduction
دستورالعمل سفارشی - هنگامی که روی آن کلیک می شود، تمام متن در ورودی را انتخاب کنید
Custom Directive - Select All Text in Input when Clicked
دستورالعمل سفارشی - آن را جهانی کنید!
Custom Directive - Make it Global!
با فشار دادن Esc، فیلد جستجو را پاک کنید
Clear the Search Field when Esc pressed
برای ویرایش با دستور v-touch-hold روی یک Task کلیک کنید و نگه دارید
Click and Hold a Task to Edit with v-touch-hold Directive
فیلتر - تاریخ را به خوبی قالب بندی کنید
Filter - Format the Date Nicely
فیلتر - پرس و جو جستجو را روی وظایف تطبیق برجسته کنید
Filter - Highlight the Search Query on Matching Tasks
Mixin - کدهای تکراری را در Add/Edit Task در Mixin ترکیب کنید
Mixin - Combine Duplicated Code on Add / Edit Task into Mixin
Transitions - نمایش و پنهان کردن اجزا را متحرک کنید
Transitions - Animate the Showing & Hiding of Components
یک ناحیه اسکرول اضافه کنید
Add a Scroll Area
کلیک کردن در کنار دکمه افزودن وظیفه را فعال کنید
Enable clicking beside the Add Task button
کد ماژول
Module Code
صفحه تنظیمات
Settings Page
معرفی ماژول
Module Introduction
تنظیم "نمایش قالب زمان 12 ساعت" را اضافه کنید
Add a "Show 12 hour time format" Setting
Vuex - یک فروشگاه تنظیمات ایجاد کنید
Vuex - Create a Settings Store
یک Computed Getter & Setter اضافه کنید
Add a Computed Getter & Setter
زمان را با یک ویژگی محاسبه شده فرمت کنید
Format the Time with a Computed Property
تنظیم "نمایش وظایف در یک لیست" را اضافه کنید
Add a "Show tasks in one list" Setting
تنظیمات را با استفاده از افزونه LocalStorage پایدار کنید
Make the Settings Persistent using LocalStorage Plugin
تنظیمات LocalStorage را در بارگذاری برنامه دریافت و اعمال کنید
Get & Apply the LocalStorage Settings on App Load
یک بخش "بیشتر" و یک صفحه راهنما اضافه کنید
Add a "More" Section and a Help Page
پیوند "از وب سایت ما بازدید کنید" با ابزار openURL اضافه کنید
Add a "Visit our website" Link with openURL Utility
پیوند "به ما ایمیل بزنید" اضافه کنید
Add an "Email us" Link
کد ماژول
Module Code
یک صفحه ورود و ثبت نام ایجاد کنید
Create a Login & Register Page
معرفی ماژول
Module Introduction
ایجاد یک صفحه ورود و ثبت نام (و مسیر)
Create a Login & Register Page (and Route)
پنل های تب برای ورود و ثبت نام ایجاد کنید
Create Tab Panels for Login & Register
ثبت نام - ایجاد کامپوننت و اضافه کردن یک بنر
Register - Create Component & Add a Banner
ثبت نام - فیلدها و دکمه های ایمیل/رمز عبور را اضافه کنید
Register - Add Email/Password Fields & Button
ثبت نام - اعتبار سنجی فرم
Register - Form Validation
ثبت نام - در صورت معتبر بودن فرم را ارسال کنید
Register - Submit Form if Valid
ورود - از مؤلفه ثبت مجدد استفاده کنید
Login - Reuse the Register Component
ورود/ثبت نام - سفارشی کردن بنر
Login / Register - Customise the Banner
کد ماژول
Module Code
Firebase - مقدمه
Firebase - Introduction
مقدمه ای بر Firebase
Introduction to Firebase
چگونه از Firebase استفاده می کنیم
How we’re going to use Firebase
یک پروژه Firebase ایجاد کنید
Create a Firebase Project
تنظیم احراز هویت
Setup Authentication
Firebase - احراز هویت
Firebase - Authentication
معرفی ماژول
Module Introduction
Firebase را با استفاده از Boot File به پروژه اضافه کنید
Add Firebase to the Project using Boot File
Vuex - یک فروشگاه Auth ایجاد کنید
Vuex - Create an Auth Store
ثبت نام کاربر
Register User
ورود کاربر
Login User
دکمه خروج از سیستم را اضافه کنید - فقط زمانی که کاربر وارد شده است نمایش داده شود
Add Logout Button - Show only when User Logged In
دکمه خروج - کاربر را از سیستم خارج کنید
Logout Button - Log the User Out
تغییر مسیر در ورود/خروج از سیستم
Redirect on Log In / Log Out
خطای NavigationDuplicated را برطرف کنید
Fix the NavigationDuplicated error
گاردهای ناوبری - هنگام خروج از سیستم از مسیرها محافظت کنید
Navigation Guards - Protect Routes when Logged Out
گاردهای ناوبری - یک فایل بوت ایجاد کنید
Navigation Guards - Create a Boot File
رسیدگی به خطاها
Handling Errors
نمایش یک پوشش بارگیری هنگام ورود به سیستم
Show a Loading Overlay when Logging In
کد ماژول
Module Code
Firebase - ساختار داده را تنظیم کنید
Firebase - Setup the Data Structure
معرفی ماژول
Module Introduction
ساختار داده - طراحی
Data Structure - Design
ساختار داده - با استفاده از Import به Firebase اضافه کنید
Data Structure - Add to Firebase using Import
Firebase - خواندن داده ها
Firebase - Reading Data
معرفی ماژول
Module Introduction
خواندن داده ها هنگام ورود کاربر
Read Data when user Logs In
به پایگاه داده متصل شوید
Connect to the Database
خواندن داده ها - وقتی کار اضافه شد
Read Data - When Task Added
خواندن داده ها - هنگامی که وظیفه به روز می شود
Read Data - When Task Updated
خواندن داده ها - هنگامی که وظیفه حذف می شود
Read Data - When Task Deleted
کد ماژول
Module Code
Firebase - نوشتن داده ها
Firebase - Writing Data
معرفی ماژول
Module Introduction
نوشتن داده - هنگامی که وظیفه اضافه شد
Write Data - When Task Added
دادهها را بنویسید - وقتی کار بهروزرسانی شد
Write Data - When Task Updated
داده ها را بنویسید - وقتی کار حذف شد
Write Data - When Task Deleted
کد ماژول
Module Code
Firebase - تجربه بارگیری را بهبود بخشید
Firebase - Improve The Loading Experience
معرفی ماژول
Module Introduction
یک نمای بارگیری برای صفحه کار اضافه کنید
Add a Loading View for the Todo Page
نمای بارگیری را زیبا کنید
Make the Loading View Pretty
پنهان کردن نمای بارگیری هنگام بارگیری وظایف
Hide Loading View when Tasks Downloaded
کد ماژول
Module Code
Firebase - چندین کاربر و قوانین پایگاه داده
Firebase - Multiple Users & Database Rules
معرفی ماژول
Module Introduction
پس از خروج کاربر، وضعیت را پاک کنید
Clear the State after User Logs Out
قوانین پایگاه داده Firebase را به روز کنید
Update the Firebase Database Rules
کد ماژول
Module Code
Firebase - خطاها را مدیریت کنید و اعلانها را نشان دهید
Firebase - Handle Errors & Show Notifications
من ۷ سال برای شرکتهای مختلف در بریتانیا به عنوان یک توسعهدهنده وب (هم جلویی و هم پشتیبان) کار کردم و در HTML، CSS، جاوا اسکریپت، jQuery، PHP و بسیاری موارد دیگر مهارت بالایی داشتم.
پس از علاقهمندی بیشتر به برنامهها، به مدت ۲ سال بهعنوان یک توسعهدهنده برنامه ترکیبی کار کردم و با استفاده از فناوریهایی از جمله Angular، Ionic، Vue.js و غیره، برنامههای چند پلتفرمی را برای بخش خیریه ایجاد کردم.
من برنامه موفق خود را به نام Fudget (برای iOS، Android، Mac Windows) ایجاد کردم که بالاترین رتبه بندی کاربر در برنامه مالی شخصی در iOS با بیش از 1.5 میلیون بارگیری است. این در نهایت به من امکان داد که شغلم را ترک کنم و یک برنامهنویس تمام وقت Indie App Developer شوم و روی برنامههای خودم کار کنم.
من یک کانال جوان اما موفق YouTube دارم که در آن آموزش های کدنویسی را نیز به اشتراک می گذارم.
من بسیار هیجان زده هستم که دانش خود را در Skillshare به اشتراک بگذارم!
نمایش نظرات