강의

멘토링

커뮤니티

Programming

/

Web Development

Học Vue js và UI cùng lúc / Xây dựng ứng dụng thời tiết thời gian thực với Nuxt3 + OpenWeatherMap

Có thể dễ dàng học Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login~~

24 học viên đang tham gia khóa học này

  • gis
nuxt3
openweathermap
Vue.js
PWA
Firebase
Nuxt.js
pinia

Bạn sẽ nhận được điều này sau khi học.

  • Học cơ bản Nuxt 3 - framework web Vue.

  • Triển khai Nuxt 3 sau phát triển

  • Firebase Firestore v11

  • Nuxt quản lý trạng thái chính thức Pinia

  • vite-pwa/nuxt PWA(Progressive Web App)

  • Nuxt SEO (Tối ưu hóa công cụ tìm kiếm)

  • .env(Bảo vệ API key không bị lộ ra cho client)

  • Đăng nhập, Đăng ký

  • tailwindcss

  • vue.js

  • Geolocation API

  • Pinia HMR

Tạo ứng dụng thời tiết thời gian thực với Nuxt3 + OpenWeatherMap?

(Học ​​Vue.js và UI cùng lúc) 🤔

Bạn có thể tìm hiểu các mô-đun và thành phần cốt lõi dựa trên Nuxt 3, một khuôn khổ front-end dựa trên Vue js, để xây dựng một trang web/ứng dụng cung cấp thông tin thời tiết cần thiết cho cuộc sống hàng ngày và áp dụng quản lý trạng thái Pinia, xử lý dữ liệu API và SSR để xây dựng một ứng dụng web được tối ưu hóa. Thiết kế giao diện người dùng phản hồi nhanh với Tailwind CSS và triển khai với Vercel. Thông qua khóa học này, bạn sẽ học được các khái niệm cốt lõi của Nuxt 3 dựa trên Vue.js và hoàn thành một dự án thực tế bằng cách sử dụng Pinia, Firebase và PWA!"

💡 Khóa học sử dụng chức năng cốt lõi Nuxt 3

  • Bạn có thể học Vue.js và UI cùng một lúc.

  • Xây dựng ứng dụng thời tiết với Nuxt 3: Dễ dàng thực hiện ngay cả với người mới bắt đầu



  • Bạn có thể tìm hiểu và sử dụng các tính năng cốt lõi của Nuxt 3.

  • Cấu hình hoàn chỉnh từ phát triển API thời tiết đến phân phối


Các tính năng của khóa học này

📌 Tập trung vào các dự án thực tế - Phát triển ứng dụng thời tiết thực tế bằng Nuxt 3.

📌 Học tích hợp API - Sử dụng dữ liệu thời gian thực bằng cách sử dụng API thời tiết như OpenWeatherMap.

📌 Firebase DB - Quản lý thông tin thời tiết bằng cách chuyển đổi thông tin thời tiết thành cơ sở dữ liệu.

📌 Khóa học này dành cho người mới bắt đầu và người học ở trình độ trung cấp. Việc học tập tập trung vào thực hành, tiến triển từng bước từ những điều cơ bản.

📌 Có thể triển khai và mở rộng - Triển khai ứng dụng Minden của bạn như một dịch vụ thực tế và mở rộng thêm các tính năng bổ sung sau này.

📌 Vue.js + UI + Nuxt + Tailwind CSS - Phát triển UI nhanh chóng và hiệu quả

💡 Hãy cùng xem xét các tính năng và sự khác biệt chính:

  • Áp dụng các tính năng mới nhất của Nuxt 3

  • Tận dụng các tuyến máy chủ: Tối ưu hóa các cuộc gọi API bằng các tính năng máy chủ của Nuxt 3 mà không cần phần phụ trợ

  • Pinia State Management: Áp dụng Clean Data State Management mà không cần Vuex

  • SSR (Server-Side Rendering) & Tối ưu hóa SEO: Tận dụng tối đa các tính năng cốt lõi của Nuxt 3

  • PWA (Ứng dụng web tiến bộ): Một ứng dụng web kết hợp những ưu điểm của web và ứng dụng gốc, được tối ưu hóa cho thiết bị di động.

  • Triển khai Vercel: Triển khai ứng dụng đã hoàn thiện của bạn

Tôi giới thiệu điều này cho những người này

💡 Ai cần khóa học này?

  • Những người muốn trải nghiệm xử lý dữ liệu theo thời gian thực và phát triển giao diện người dùng thân thiện.

  • Bất kỳ ai cần một dự án danh mục đầu tư.

  • Những người muốn tìm hiểu về công nghệ liên kết API và xử lý dữ liệu có thể ứng dụng trong thực tế.

  • Mọi người đang chuẩn bị phát triển SaaS.

  • Các nhà phát triển không có kinh nghiệm triển khai dịch vụ web

  • Đối với những ai thấy CSS khó, hãy giảm thiểu việc viết CSS bằng các lớp tiện ích được xác định trước.

Dành cho những người biết Vuejs nhưng mới biết đến Nuxt3.

Bất kỳ ai sử dụng Vue js và muốn học Nuxt 3

Dành cho những ai muốn tạo ra một dự án thực tế.
Một khóa học thực tế vượt ra ngoài lý thuyết đơn thuần và tập trung vào các ứng dụng thời tiết thực tế

Có ai tò mò về Pinia & PWA không?
Bất kỳ ai sử dụng Vuex và muốn học Pinia hoặc học ứng dụng web

Pinia, mạnh mẽ hơn và dễ dàng hơn Vuex

Thư viện quản lý trạng thái chính thức cho Nuxt 3 ngắn gọn và mạnh mẽ hơn Vuex.

Có thể quản lý dữ liệu được tối ưu hóa trên phía máy chủ với sự hỗ trợ của SSR

Cấu hình cửa hàng trực quan bằng cách giảm thiểu mã trùng lặp

Thay vì chỉ tham dự một bài giảng, bạn hoàn thành một dự án có thể phân phối được.

Có được kinh nghiệm thực tế từ dự án và tìm hiểu những kiến ​​thức cơ bản để phát triển nhiều dự án dựa trên API trong tương lai.

Tìm hiểu cách thu thập dữ liệu thời tiết theo thời gian thực bằng API bên ngoài và hiển thị dữ liệu đó một cách hiệu quả.

Bản đồ thời tiết mở, Tuyến đường động

Học các kỹ năng thực tế bằng cách lấy dữ liệu từ API bên ngoài và sử dụng chúng.

Nuxt Dynamic Routes thay thế địa chỉ bộ định tuyến bằng tên thành phần cho tất cả các thành phần được tạo trong các trang.

Sử dụng Nuxt 3 + Firebase Firestore

Quản lý DB đám mây có khả năng mở rộng cao dựa trên NoSQL

Quản lý dữ liệu mạnh mẽ mà không cần máy chủ

Triển khai quản lý trạng thái hiệu quả bằng cách kết hợp Pinia và Firestore

Đăng ký và đăng nhập bằng Firebase Authentication

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành

  • Bài giảng giải thích dựa trên Windows 10.

  • Trong bài giảng này, chúng ta sẽ tìm hiểu về Vscode, Node.js 22.

Tài liệu học tập

  • Bạn có thể lấy hình ảnh liên quan và dữ liệu nền mp4 từ phòng dữ liệu.

Kiến thức và ghi chú của người chơi

  • javascrip

  • Vue.js.

  • Kiến thức cơ bản về CSS

💡 Ghi chú để học bài giảng

  1. Môi trường thực hành

    • Hệ điều hành và Phiên bản (OS): Windows 10 trở lên

    • Các công cụ được sử dụng: Vscode, Github, Firebase, openWeatherMap, v.v. đều miễn phí, nhưng sẽ tính phí nếu sử dụng vượt quá mức nhất định. Tuy nhiên, bạn có thể học khá tốt khi sử dụng miễn phí.


    • Thông số kỹ thuật PC: CPU Intel i5 thế hệ thứ 8 trở lên hoặc AMD Ryzen 5 trở lên RAM: 8GB trở lên, Kết nối Internet

  2. Kiến thức và ghi chú của người chơi

    • Việc học sẽ dễ dàng hơn nếu bạn biết ngữ pháp cơ bản của HTML, CSS và JavaScript.

    • Ngay cả khi bạn có chút kinh nghiệm với Vue.js, việc học Nuxt 3 cũng sẽ dễ dàng.

    • Tài khoản GihHub, Vercel, Google, openWeatherMap

    • Đăng ký tài khoản OpenWeatherMap miễn phí nhưng yêu cầu phải đăng ký thẻ.

Mẫu có tiêu đề là ' Ứng dụng giao hàng tìm được nhà hàng ngon gần tôi như thế nào?' Chúng tôi cung cấp thông tin này để tham khảo bài giảng.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người muốn học nhanh cốt lõi Nuxt nền Vue

  • Người quan tâm đến phát triển web

  • Người khó về DB

  • Người muốn học PWA(Progressive Web App)

  • Người quan tâm đến Vue.js

Cần biết trước khi bắt đầu?

  • vue

  • javascript

Xin chào
Đây là

64

Học viên

4

Đánh giá

8

Trả lời

4.8

Xếp hạng

2

Các khóa học

안녕하십니까?

저는 드론맵핑 저자로서, 현재 드론을 이용하여 맵핑에 관심있는 분들에게 필요한 강좌를 개설하였습니다. 처음 드론맵핑을 하고 싶은분들은 무엇부터 시작해야 될지 모르는경우가 많습니다. 이 강좌는 그런 분들을 위하여 꼭 필요한 부분에 대하여 핵심적인 부분을 요약하여 담았습니다. 

또한, Nuxt 3를 활용한 웹 개발 강의를 진행하는 강사입니다. 이 강의에서는 Nuxt 3, Pinia, OpenWeatherMap API, Tailwind CSS를 활용하여 실전 프로젝트인 날씨 앱을 직접 만들어 봅니다. API 연동, 상태 관리, 반응형 UI 설계, 배포까지 배워 실무에서도 활용할 수 있는 기술을 익힐 수 있습니다. 쉽고 실용적인 강의로 Nuxt 3의 핵심을 함께 마스터해 보세요! 🚀

Chương trình giảng dạy

Tất cả

39 bài giảng ∙ (7giờ 31phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

596.978 ₫

Khóa học khác của gis

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!