کانال تلگرام پشتیبانی تلگرام شماره تماس پشتیبانی: 0930 395 3766
ورود ثبت نام

آموزش Vue JS + Google Maps API: راهنمای نهایی دوستانه مبتدیان

Vue JS + Google Maps API: Ultimate Beginner's Friendly Guide

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
توضیحات دوره: با استفاده از Vue JS و Google Maps API Like A Pro 3 برنامه وب مبتنی بر مکان واقعی در دنیای واقعی بسازید. با استفاده از HTML5 Geolocation API و Google Maps Geocoding API یک اپلیکیشن مکان یابی بسازید. اصول Vue JS - Components، Routes، Events، Data Binding، Nested Components، $EventBus را بدانید. قادر به طراحی سریع UI حرفه ای با استفاده از Semantic UI CSS Framework. با استفاده از Google Maps Places API - جستجوی نزدیک، جزئیات مکان، API تکمیل خودکار، یک برنامه CloseBuy بسازید. با ساختن یک برنامه Distance Calculator API & Directions Matrix Matrix Google Maps را در اختیار بگیرید. شی نقشه نقشه گوگل، نشانگرها، InfoWindows، Polylines، خطاهای رایج سرور. پیش نیازها: این دوره به گونه ای طراحی شده است که برای مبتدیانی که کمی HTML، CSS و جاوا اسکریپت می دانند مناسب است. همچنین برای توسعه دهندگانی که از قبل اصول Vue JS یا فریمورک های مشابه را می دانند اما می خواهند اکوسیستم Google Maps API را کاوش کنند، مناسب است. در نهایت، ما این دوره را برای برنامه نویسانی که قبلاً برخی از اصول API Google Maps را می‌دانند و می‌خواهند مهارت‌های خود را ارتقا دهند، قابل دسترس کرده‌ایم. اگر می خواهید در یک دوره آموزشی شرکت کنید و همه چیزهایی را که باید در مورد اکوسیستم Google Maps API بدانید همراه با Vue JS بیاموزید، این دوره را بگذرانید!

به دوره 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

نمایش نظرات

نظری ارسال نشده است.

آموزش Vue JS + Google Maps API: راهنمای نهایی دوستانه مبتدیان
خرید اشتراک و دانلود خرید تکی و دانلود | 160,000 تومان (5 روز مهلت دانلود) زمان تقریبی آماده سازی لینک دانلود این دوره آموزشی حدود 5 تا 24 ساعت می باشد.
جزییات دوره
4.5 hours
49
Udemy (یودمی) udemy-small
02 شهریور 1401 (آخرین آپدیت رو دریافت می‌کنید، حتی اگر این تاریخ بروز نباشد.)
20,405
4.3 از 5
دارد
دارد
دارد
Raja Tamil

https://donyad.com/d/02c8

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

آموزش هسته چارچوب موجودیت یادگیری [ویدئو]

آموزش هسته چارچوب موجودیت یادگیری [ویدئو]

Learning Entity Framework Core [Video]

یادگیری Entity Framework Core از ابتدا برای ساخت برنامه های کاربردی وب کارآمد و ایمن

آموزش طراحی وب سایت مدرن واکنش گرا CSS - ایجاد پنج وب سایت مختلف [ویدئو]

آموزش طراحی وب سایت مدرن واکنش گرا CSS - ایجاد پنج وب سایت مختلف [ویدئو]

CSS Modern Responsive Web Design - Create Five Different Websites [Video]

تنها در هفت ساعت، پنج وب‌سایت واکنش‌گرای شگفت‌انگیز ایجاد کنید تا بتوانید شبکه‌های Cascading Style Sheets (CSS)، Flexbox، float و موارد دیگر را درک کنید.

آموزش مقدمه ای بر طراحی رابط صوتی

آموزش مقدمه ای بر طراحی رابط صوتی

Introduction to voice interface design

مقدمه ای بر طراحی رابط صوتی و طراحی مکالمه برای چت ربات ها و ربات های صوتی/دستیاران هوشمند

آموزش عبارات منظم برای مبتدیان - جهانی

آموزش عبارات منظم برای مبتدیان - جهانی

Regular Expressions for Beginners - Universal

آموزش استفاده از عبارات با قاعده (Regex) در تمام زبان ها و ابزارهای برنامه نویسی به روش آسان با Edwin Diaz

Raja Tamil Raja Tamil

برنامه نویس و مدرس حرفه ای وب/موبایل من یک توسعه دهنده وب فرانت اند/iOS خودآموز هستم و تقریباً یک دهه است که به زبان های مختلف کد می نویسم. موضوعاتی که من در آنها تخصص دارم عبارتند از: JavaScript، VueJs، Google Maps API، Firebase و Swift. من یک وب‌سایت وبلاگی راه‌اندازی می‌کنم که به تقریباً 20 هزار دانش‌آموز در ماه کمک می‌کند تا مهارت‌های جدیدی در مورد موضوعاتی که من به آنها علاقه دارم بیاموزند. من می توانم با وب سایت وبلاگم از جمله تقریباً 1000 دنبال کننده فیس بوک به مردم در سراسر جهان کمک کنم. من همچنین با آموزش مهارت های کدنویسی به صورت حضوری به ده ها دانش آموز کمک کرده ام تا شغلی پیدا کنند. من اخیراً با راه اندازی یک تجارت تحویل مبتنی بر مکان به یک کارآفرین تبدیل شده ام. دو تا از مقالات من اخیرا توسط پلتفرم متوسط معرفی و توزیع شده است.

Udemy (یودمی)

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

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