آموزش Quasar V1: برنامه هواشناسی برای موبایل، دسکتاپ و وب (Vue JS 2)

Quasar V1: Weather App for Mobile, Desktop & Web (Vue JS 2)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: از Quasar V1 و Vue JS 2 برای ایجاد یک برنامه آب و هوای زیبا و چند پلتفرمی برای وب، iOS، اندروید، مک و ویندوز استفاده کنید. Framework V2 & Vue JS 2 نحوه دریافت موقعیت مکانی کاربر در همه دستگاه ها نحوه ایجاد آیکون ها و Splashscreens برای همه دستگاه ها نحوه راه اندازی برنامه برای توسعه در Mac, Windows, iOS و Android نحوه راه اندازی شبیه ساز برای iOS و Android نحوه اشکال زدایی برنامه شما در همه پلتفرم ها نحوه راه اندازی و اشکال زدایی برنامه در دستگاه های iOS و اندروید واقعی مقدمه ای سریع برای ایجاد برنامه های Cross-Platform با Vue JS & Quasar Framework پیش نیازها: دانش اولیه HTML، CSS و جاوا اسکریپت لازم است دانش اولیه VueJS مفید است اما لازم نیست Mac برای توسعه ترجیح داده می شود (و برای توسعه برنامه های Mac و iOS لازم است)

در این دوره کوتاه، من به شما نشان خواهم داد که چگونه از Quasar Framework V1 Vue JS 2 برای ایجاد یک برنامه آب و هوای فوق العاده از ابتدا استفاده کنید - و آن را اجرا کنید و روی 5 پلتفرم مختلف - Web، iOS، Android، Mac Windows اجرا کنید. .

بله! ما برنامه های واقعی ایجاد خواهیم کرد که می توانند در همه فروشگاه های برنامه مختلف مستقر شوند!

در این برنامه ما می‌توانیم موقعیت مکانی کاربر را دریافت کنیم و آب و هوای مکانی را که در آن قرار دارد (با استفاده از OpenWeatherMap API) در یک طرح‌بندی زیبا نشان دهیم.

ما همچنین می‌توانیم با استفاده از نوار جستجو مکانی را جستجو کنیم.

بسته به روز یا شب بودن مکان فعلی، پس‌زمینه متفاوتی را نمایش خواهیم داد.

ما با استفاده از ابزار فوق‌العاده IconGenie CLI Quasar Framework، Icons Splashscreens زیبا برای همه دستگاه‌های مختلف ایجاد خواهیم کرد.

ما شبیه‌سازها را برای آزمایش در Android iOS راه‌اندازی می‌کنیم.

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

ما حتی برنامه را در دستگاه‌های Android واقعی iOS اجرا خواهیم کرد. آره! دستگاه های اندروید واقعی iOS!

اگر می خواهید مقدمه ای سریع برای ایجاد برنامه های چند پلت فرم با استفاده از Vue JS 2 (و Quasar V1) داشته باشید، این دوره برای شما مناسب است.

توجه: این دوره برای Quasar V1 (با Vue 2) است. Quasar V2 (با Vue 3) در این دوره پوشش داده نمی شود.


سرفصل ها و درس ها

معرفی Introduction

  • برنامه معرفی و دوره Introduction & Course App

  • کوازار چیست؟ What is Quasar?

شروع شدن Getting Started

  • Node.js و Quasar CLI را نصب کنید Install Node.js and Quasar CLI

  • ایجاد و راه اندازی یک پروژه کوازار جدید Create & Launch a New Quasar Project

  • به روز رسانی: Quasar V1 Documentation Update: Quasar V1 Documentation

  • ساختار پوشه - چیدمان ها، صفحات و مسیرها Folder Structure - Layouts, Pages & Routes

  • Vue Devtools را روی کروم نصب کنید Install Vue Devtools on Chrome

  • مبانی Vue.js Vue.js Basics

  • پروژه را پاکسازی کنید Clean up the Project

چیدمان و طراحی Layout & Design

  • طرح بندی - سربرگ و کشو را حذف کنید Layout - Remove Header & Drawer

  • یک پس زمینه گرادیان اضافه کنید Add a Gradient Background

  • طراحی - نوار جستجو Design - Search Bar

  • طراحی - مکان، توضیحات آب و هوا و دما Design - Location, Weather Description & Temperature

  • طراحی - اضافه کردن تصویر و خط افق Design - Add Image & Skyline

  • طراحی - صفحه شروع Design - Start Screen

موقعیت مکانی و آب و هوا را دریافت کنید Get Location & Weather

  • موقعیت مکانی کاربر را دریافت کنید Get User's Location

  • API OpenWeatherMap را راه اندازی کنید Setup OpenWeatherMap API

  • دریافت آب و هوا بر اساس مختصات Get Weather by Coordinates

  • نمایش داده ها در View Display Data in View

  • دریافت آب و هوا با جستجو Get Weather By Search

پایان کار Finishing Touches

  • پس زمینه های مختلف برای روز و شب Different Backgrounds for Day & Night

  • صفحه های بارگیری را اضافه کنید Add Loading Screens

آیکون ها و صفحه های چلپ چلوپ Icons & Splash Screens

  • IconGenie را نصب کنید Install IconGenie

  • ایجاد آیکون ها و صفحه های اسپلش Generate Icons & Splashscreens

  • یک اسکریپت NPM برای Easy Icon & Splash Generation ایجاد کنید Create an NPM Script for Easy Icon & Splash Generation

پلتفرم‌ها - مک (الکترون) Platforms - Mac (Electron)

  • معرفی ماژول/اگر مک ندارید Module Introduction / If You Don't Have a Mac

  • برنامه را برای توسعه در Mac اجرا کنید Launch App on Mac for Development

  • برای Electron یک مکان یابی مجدد اضافه کنید Add a Geolocation Fallback for Electron

  • پوشه src-electron src-electron folder

  • آیکون های مک را تولید کنید Generate Mac Icons

  • ساخت برای مک Build for Mac

  • انتشار در فروشگاه App Mac Publishing to Mac App Store

پلتفرم ها - ویندوز (الکترون) Platforms - Windows (Electron)

  • معرفی ماژول Module Introduction

  • Virtualbox را نصب کنید Install Virtualbox

  • ماشین مجازی ویندوز 10 را نصب کنید Install Windows 10 Virtual Machine

  • ماشین مجازی را راه اندازی کنید و اشتراک گذاری فایل را فعال کنید Setup Virtual Machine & Enable File Sharing

  • نحوه کار بر روی نسخه ویندوز برنامه How to work on the Windows version of your app

  • ساخت اپلیکیشن برای ویندوز Build the App for Windows

  • برنامه را در ماشین مجازی ویندوز 10 راه اندازی کنید Launch App on Windows 10 Virtual Machine

  • در حال انتشار در فروشگاه ویندوز Publishing to the Windows Store

پلتفرم‌ها - iOS (Cordova) Platforms - iOS (Cordova)

  • معرفی ماژول/اگر مک ندارید Module Introduction / If You Don't Have a Mac

  • Cordova و Xcode را نصب کنید Install Cordova and Xcode

  • برنامه را در iOS Simulator برای توسعه راه اندازی کنید Launch App on iOS Simulator for Development

  • ایجاد آیکون ها و صفحه های اسپلش Generate Icons & Splashscreens

  • اشکال زدایی با Safari Dev Tools Debug with Safari Dev Tools

  • پوشه Src-cordova Src-cordova folder

  • پلاگین Cordova Geolocation را نصب کنید Install Cordova Geolocation Plugin

  • شبیه ساز - اجرا بر روی دستگاه های مختلف iOS Simulator - Run on Different iOS Devices

  • روی یک دستگاه iOS واقعی توسعه دهید Develop on a Real iOS Device

  • ساخت اپلیکیشن برای تولید Build the App for Production

  • انتشار در اپ استور iOS Publishing to iOS App Store

پلتفرم‌ها - Android (Cordova) Platforms - Android (Cordova)

  • معرفی ماژول Module Introduction

  • Android Studio و SDK را نصب کنید Install Android Studio and SDK

  • اندروید را به مسیر خود اضافه کنید (کاربران مک) Add Android to your Path (Mac Users)

  • نصب نرم افزار اضافی و تنظیم متغیرهای محیط (کاربران ویندوز) Install Additional Software & Set Environment Variables (Windows Users)

  • راه اندازی دستگاه مجازی اندروید Setup Android Virtual Device

  • در Android Simulator راه اندازی کنید Launch on Android Simulator

  • ایجاد آیکون و صفحه نمایش چلپ چلوپ Generate Icons & Splash Screens

  • اشکال زدایی با Chrome Dev Tools Debug with Chrome Dev Tools

  • رفع خطا در شبیه ساز Fix Error On Simulator

  • بر روی یک دستگاه اندروید واقعی توسعه دهید Develop on a Real Android Device

  • ساخت اپلیکیشن برای تولید Build the App for Production

  • در فروشگاه Google Play منتشر کنید Publish to Google Play Store

کد منبع تمام شده Finished Source Code

  • کد منبع تمام شده Finished Source Code

  • کد منبع کامل (Quasar V2) Finished Source Code (Quasar V2)

Quasar & Vue بیشتر More Quasar & Vue

  • کوازار بیشتر More Quasar

  • به‌روزرسانی: Quasar V2، Vue 3 و Composition API Update: Quasar V2, Vue 3 & Composition API

نمایش نظرات

آموزش Quasar V1: برنامه هواشناسی برای موبایل، دسکتاپ و وب (Vue JS 2)
جزییات دوره
1.5 hours
67
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
721
4.6 از 5
دارد
دارد
دارد
Danny Connell
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Danny Connell Danny Connell

معلم و برنامه نویس Indie App

من ۷ سال برای شرکت‌های مختلف در بریتانیا به عنوان یک توسعه‌دهنده وب (هم جلویی و هم پشتیبان) کار کردم و در HTML، CSS، جاوا اسکریپت، jQuery، PHP و بسیاری موارد دیگر مهارت بالایی داشتم.

پس از علاقه‌مندی بیشتر به برنامه‌ها، به مدت ۲ سال به‌عنوان یک توسعه‌دهنده برنامه ترکیبی کار کردم و با استفاده از فناوری‌هایی از جمله Angular، Ionic، Vue.js و غیره، برنامه‌های چند پلتفرمی را برای بخش خیریه ایجاد کردم.

من برنامه موفق خود را به نام Fudget (برای iOS، Android، Mac Windows) ایجاد کردم که بالاترین رتبه بندی کاربر در برنامه مالی شخصی در iOS با بیش از 1.5 میلیون بارگیری است. این در نهایت به من امکان داد که شغلم را ترک کنم و یک برنامه‌نویس تمام وقت Indie App Developer شوم و روی برنامه‌های خودم کار کنم.

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

من بسیار هیجان زده هستم که دانش خود را در Skillshare به اشتراک بگذارم!