آموزش Vue JS + Google Maps API: راهنمای نهایی دوستانه مبتدیان
Vue JS + Google Maps API: Ultimate Beginner's Friendly Guide
به دوره Vue JS (Options API) و Google Maps API خوش آمدید، تنها دوره‌ای که برای ایجاد برنامه‌های وب مبتنی بر مکان باید یاد بگیرید و کدنویسی کنید.
بیش از 10016 دانش‌آموز با میانگین امتیاز 4.7، دوره Vue JS من و Google Maps API یکی از دوره‌های با رتبه برتر در Udemy بود!
در این دوره، شما 3 برنامه مبتنی بر مکان در دنیای واقعی خواهید ساخت، از ابتدا شروع کنید تا به پایان برسانید، که تقریباً تمام جنبه های Google Maps API را به شما آموزش می دهد.
من شما را گام به گام از طریق آموزش های ویدیویی جذاب و سرگرم کننده که از نظر محتوا غنی هستند، راهنمایی می کنم!
در طول این دوره کاملاً عملی، ما تعداد زیادی از ابزارها و فناوری‌ها را پوشش می‌دهیم، از جمله:
Vue JS
Vue CLI
API Options (که Vue JS 2 یا Vue JS 3 Project کار می کند، مشکلی ندارد)
اجزاء
مسیرها
رویدادها
Data Binding
اجزای تو در تو
Axios HTTP Client
Firebase
چارچوب CSS UI معنایی
HTML5 Geolocation API
CORS
بالا بردن
مدیریت خطا و موارد دیگر
Google Maps API
کلید API را دریافت کنید
Geocoding API
API تکمیل خودکار مکان‌ها
Places API - درخواست جستجوی نزدیک
Places API - درخواست جزئیات مکان
شیء نقشه
شیء نشانگر
InfoWindow Object
Distance Matrix API
Directions API - Directions Service JS Library
پردازنده مسیرها
شیء چند خط
خطاهای رایج سرور Google Maps و موارد دیگر
در پایان این دوره، شما به طور روان در Vue JS کدنویسی میکنید و از پلتفرم نقشه‌های Google برای ساختن برنامه‌های مبتنی بر مکان خود مانند یک حرفه‌ای استفاده میکنید!
فقط حرف من را قبول نکنید، ببینید برخی از دانش آموزان من در مورد این دوره چه می گویند:
" از دوره آموزشی Vue.js + Google Maps API شما بسیار سپاسگزارم! همچنین از سرعت دوره شما تشکر می کنم، زیرا در توجه به دوره های طولانی تر مشکل دارم. من نیز از طرفداران بسیار Vue هستم (من در گذشته سعی کردم React و Angular را یاد بگیرم، اما به سرعت از آنها خسته شدم - Vue برای من بسیار شهودی تر است). امیدوارم دوره های بیشتری را در آینده از شما ببینم!!" - تراموا Le
"یک دوره بسیار واضح و مختصر که اطلاعات کافی در مورد API google maps که با Vue استفاده می شود را در اختیار شما قرار می دهد. نقشه با آدرس های ذخیره شده در پایگاه داده با تشکر از شما " - براندون اوکلی
"این دوره برای من بسیار مفید است. با تشکر و امیدوارم که بسیاری از منابع مانند این مفید باشند." - لانگ لی
اگرچه دوره کوتاه است، اما از نظر محتوا بسیار غنی است. معلم قطعاً نکته ای را بیان کرده است. من دوره را بدون حوصله تمام کردم و اطلاعات مفیدی یاد گرفتم. ممنون از استاد - اردم نیر
"این دوره به روشی آسان مرا راهنمایی می کند و هر بخش دستورالعمل های بسیار واضحی دارد. اگر می خواهید ساخت سریع برنامه های مبتنی بر مکان با Google Maps API را یاد بگیرید، اکیداً توصیه می کنم این دوره Vue js را بگذرانید" - Vikneswaran Thangarasu
"پیگیری این دوره بسیار آسان بود. مدرس به وضوح و با سرعت خوب صحبت کرد. این دوره همه چیزهایی را که برای شروع با Google Maps API و Vue.js نیاز دارید را دارد!" - جنیفر اینوود
"من خوشحالم که این مفهوم را یاد گرفتم و نحوه استفاده از Google Map API را در vue.js درک می کنم. تشخیص این ویدیوها بسیار آسان است. من می خواهم ویدیوهای بیشتری در مورد vue.js بیاموزم. با این حال، Google Maps را برای مفاهیم API بسیار آسان است. متشکرم" - Viijayaraghavan
به خاطر داشته باشید... من آنقدر مطمئن هستم که شما این دوره را دوست خواهید داشت که ما یک ضمانت بازگشت کامل وجه به مدت 30 روز ارائه می دهیم! بنابراین این کار کاملاً بیهوده است، امروز با ریسک صفر و هر چیزی که به دست آورید ثبت نام کنید.
من برای حمایت از شما در طول این سفر اینجا خواهم بود، بنابراین اگر سؤال، پیشنهاد یا بازخوردی دارید، لطفاً با من تماس بگیرید!
پس منتظر چه چیزی هستید؟ روی دکمه خرید در حال حاضر کلیک کنید و اکنون بپیوندید!
شروع شدن Getting Started
-
شروع کار با Vue JS Getting Started With Vue JS
-
کلید Google Maps API را دریافت کنید Obtain Google Maps API Key
برنامه Vue JS Detector Location [HTML5 Geolocation API & Geocoding API] Build A Location Detector Vue JS App [HTML5 Geolocation API & Geocoding API]
-
آنچه در پایان این ماژول خواهید ساخت What You Will be Building by the End of this Module
-
یک کامپوننت و مسیر Vue ایجاد کنید Create a Vue Component and Route
-
فرم موقعیت مکانی کاربر را با استفاده از Semantic-UI بسازید Build User Location Form Using Semantic-UI
-
HTML5 Geolocation API چیست؟ What is HTML5 Geolocation API?
-
یک درخواست HTTP برای API جغرافیایی نقشه های گوگل Make An HTTP Request To Google Maps Geocoding API
-
خطا و راه حل های CORS هنگام درخواست HTTP به API کدگذاری جغرافیایی CORS Error & Solutions When Making HTTP Request to Geocoding API
-
خطاها و راه حل های رایج هنگام درخواست HTTP به Google Maps API Common Errors & Solutions When Making an HTTP Request To Google Maps API
-
رسیدگی به خطاهای سرور Vue JS Client و Google Maps API Handling Vue JS Client and Google Maps API Server Errors
-
چگونه API تکمیل خودکار Google Maps را فعال کنیم؟ How To Enable Google Maps Autocomplete API?
-
چگونه مکان فعلی کاربر را در نقشه گوگل نمایش دهیم؟ How To Display User's Current Location On The Google Maps?
-
کد پروژه تکمیل شده را دانلود کنید Download The Completed Project Code
-
وقت آن است که آنچه را که در این ماژول آموخته اید آزمایش کنید Time To Test What You've Learned In This Module
-
زمان بازخورد! Feedback Time!
با استفاده از Google Maps Places API یک برنامه CloseBuy بسازید Build A CloseBuy App Using Google Maps Places API
-
آنچه در پایان این ماژول خواهید ساخت What You Will be Building by the End of this Module
-
درخواست جستجوی Google Maps Nearby چیست؟ What is Google Maps Nearby Search Request?
-
یک کامپوننت CloseBuy Vue JS ایجاد کنید Create A CloseBuy Vue JS Component
-
یک تماس HTTP با Google Maps در نزدیکی درخواست جستجو کنید Make An HTTP Call To Google Maps Nearby Search Request
-
هنگام استفاده از API تکمیل خودکار Google Maps، داده‌های مکان‌های نزدیک را دریافت کنید Get Nearby Places Data When Using Google Maps Autocomplete API
-
نمایش داده های مکان ها در نما Display Places Data on the View
-
نمایش داده‌های مکان‌ها در نمای Google Maps Show Places Data on the Google Maps View
-
وقتی روی یک نشانگر کلیک می‌شود، نکته‌ی ابزار را نمایش دهید Show Tooltip (callout) When A Marker is Clicked
-
نمایش اطلاعات بیشتر درباره یک مکان با استفاده از Google Maps Place Details Show More Information About A Place Using Google Maps Place Details
-
انتخاب خودکار نشانگرها هنگامی که مورد فهرست در Vue JS کلیک می شود Auto Select Markers When List Item is Clicked in Vue JS
-
خوشه بندی نشانگر را به خرید نزدیک اضافه کنید Add Marker Clustering To The Close Buy
-
وقت آن است که آنچه را که در این ماژول آموخته اید آزمایش کنید Time To Test What You've Learned In This Module
-
زمان بازخورد! Feedback Time!
برنامه Vue JS Calculator Distance با استفاده از Distance Matrix API & Directions Distance Calculator Vue JS App Using Distance Matrix API & Directions API
-
آنچه در پایان این ماژول خواهید ساخت What You Will be Building by the End of this Module
-
آنچه در پایان این ماژول خواهید ساخت What You Will be Building by the End of this Module
-
اجزای برنامه ماشین حساب فاصله Vue JS را ایجاد کنید Create Distance Calculator Vue JS App Components
-
طرح‌بندی برنامه ماشین‌حساب فاصله Vue JS Distance Calculator Vue JS App Layout
-
طراحی فرم مقصد مبدا با استفاده از چارچوب CSS UI معنایی در Vue JS Design Origin Destination Form Using Semantic UI CSS Framework in Vue JS
-
Google Maps Autocomplete API To Origin & Destination Fields Input را فعال کنید Enable Google Maps Autocomplete API To Origin & Destination Input Fields
-
Google Maps Distance Matrix API چیست؟ What is Google Maps Distance Matrix API?
-
یک درخواست HTTP به Google Maps Distance Matrix API Make An HTTP Request To Google Maps Distance Matrix API
-
نمایش خطاهای سرور Vue JS Client و Google Maps API Display Vue JS Client & Google Maps API Server Errors
-
یک پروژه Firebase ایجاد کنید Create A Firebase Project
-
ذخیره اطلاعات مسیر به پایگاه داده Cloud Firestore (Firebase) Store Route Data To The Cloud Firestore Database (Firebase)
-
نمایش داده‌های فهرست مسیرها در برنامه Vue JS Show Route List Data On The Vue JS app
-
مرتب سازی داده های مسیر بر اساس فاصله و مدت زمان با استفاده از Firebase Sorting Route Data By Distance & Duration Using Firebase
-
نحوه به اشتراک گذاری داده ها بین مؤلفه ها با استفاده از $EventBus در Vue JS How To Share Data Between Components Using $EventBus in Vue JS
-
Google Maps Directions API چیست؟ What is Google Maps Directions API?
-
درخواست خدمات مسیرها را بدهید و نتایج را در Google Maps ارائه دهید Make A Request To Directions Service & Render The Results On The Google Maps
-
نمایش مسیرهای چندگانه جهت مسیر در یک نقشه در گوگل Show Multiple Route Direction Paths On The Google Maps At Once
-
با استفاده از InfoWindow نشانگرهای پیش فرض را در آدرس مبدا/مقصد جایگزین کنید Replace Default Markers To Origin/Destination Addresses Using InfoWindow
-
نحوه ایجاد Polylines سفارشی در Google Maps API How To Create Custom Polylines in the Google Maps API
-
نمایش هر مسیر با رنگ تصادفی شامل برچسب ها، چند خط و غیره. Display Each Route With A Random Color Including Labels, Polyline, etc.
-
کد پروژه تکمیل شده را دانلود کنید Download The Completed Project Code
-
وقت آن است که آنچه را که در این ماژول آموخته اید آزمایش کنید Time To Test What You've Learned In This Module
-
وقت آن است که آنچه را که در این ماژول آموخته اید آزمایش کنید Time To Test What You've Learned In This Module
-
زمان بازخورد! Feedback Time!
-
زمان بازخورد! Feedback Time!
سخنرانی پاداش Bonus Lecture
-
سخنرانی پاداش Bonus Lecture
-
اجرا و اجرا با پروژه Vue 3 Up and Running With Vue 3 Project
https://donyad.com/d/02c8
Raja Tamil
برنامه نویس و مدرس حرفه ای وب/موبایل من یک توسعه دهنده وب فرانت اند/iOS خودآموز هستم و تقریباً یک دهه است که به زبان های مختلف کد می نویسم. موضوعاتی که من در آنها تخصص دارم عبارتند از: JavaScript، VueJs، Google Maps API، Firebase و Swift. من یک وب‌سایت وبلاگی راه‌اندازی می‌کنم که به تقریباً 20 هزار دانش‌آموز در ماه کمک می‌کند تا مهارت‌های جدیدی در مورد موضوعاتی که من به آنها علاقه دارم بیاموزند. من می توانم با وب سایت وبلاگم از جمله تقریباً 1000 دنبال کننده فیس بوک به مردم در سراسر جهان کمک کنم. من همچنین با آموزش مهارت های کدنویسی به صورت حضوری به ده ها دانش آموز کمک کرده ام تا شغلی پیدا کنند. من اخیراً با راه اندازی یک تجارت تحویل مبتنی بر مکان به یک کارآفرین تبدیل شده ام. دو تا از مقالات من اخیرا توسط پلتفرم متوسط معرفی و توزیع شده است.
نمایش نظرات