Hướng dẫn tạo dịch vụ bản đồ bằng React + Express từ nhà phát triển Corona Map (Typescript)

Đây là khóa học hướng dẫn xây dựng dịch vụ bản đồ từ đầu đến cuối bằng cách sử dụng MERN stack (feat. TypeScript). Hãy cùng nhau xây dựng từng bước một trong khi tham khảo tài liệu hướng dẫn chính thức của API.

(5.0) 4 đánh giá

114 học viên

Độ khó Cơ bản

Thời gian Không giới hạn

MongoDB
MongoDB
Express
Express
React
React
Node.js
Node.js
TypeScript
TypeScript
MongoDB
MongoDB
Express
Express
React
React
Node.js
Node.js
TypeScript
TypeScript

Đánh giá từ những học viên đầu tiên

5.0

5.0

ksh990913

100% đã tham gia

Tôi muốn tìm hiểu về cú pháp TypeScript và sử dụng nó với React, đồng thời có một bài giảng mới hấp dẫn vừa được cập nhật nên tôi đã tham gia. Trước đây tôi đã sử dụng một số API nhưng gần như tôi đã sao chép và dán chúng. Tuy nhiên, qua bài giảng này, tôi đã học được cách sử dụng tài liệu API chính thức và tự tin rằng tôi sẽ có thể tìm và sử dụng các chức năng tôi cần trong tương lai. Ngoài ra, nội dung về TypeScript không khó và được giải thích rõ ràng nên tôi nghĩ ngay cả những người mới bắt đầu cũng có thể dễ dàng theo dõi. Cảm ơn bạn vì bài giảng tuyệt vời :)

5.0

ACACIA

100% đã tham gia

Chà... nó thật mơ hồ. Cảm ơn bạn đã làm việc chăm chỉ.

5.0

baby4

100% đã tham gia

Tôi không thể thử API bản đồ vì cảm thấy khó khăn nhưng tôi rất thích khóa học này.

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

  • Phát triển React + TypeScript

  • Phát triển Express + TypeScript

  • Sử dụng MongoDB + Mongoose

  • Cách sử dụng Kakao Map API

  • Cách sử dụng Naver Map API

Hãy cùng nhà phát triển Corona Map với 44 triệu lượt xem
thử thách phát triển dịch vụ bản đồ 💻

<출처: KTV>
<출처: EBS>

Phát triển dịch vụ bản đồ cùng với MERN stack 🗺️

Xin chào, tôi là nhà phát triển Lee Dong-hoon.
Tôi đã lên kế hoạch và phát triển Corona Map, dịch vụ đã có 16 triệu người sử dụng và vượt quá 44 triệu lượt xem, cùng với Mask Map hiển thị tình trạng kho hàng khẩu trang theo thời gian thực. Hiện tại, tôi đang xây dựng các sản phẩm liên quan đến GIS tại một startup.

Tôi tin rằng dịch vụ bản đồ sẽ trở thành một trong những kỹ năng công nghệ thiết yếu trong tương lai khi thông tin vị trí ngày càng trở nên quan trọng. Tuy nhiên, sự thật là rào cản gia nhập đối với những người lần đầu phát triển dịch vụ bản đồ là khá cao. Thông qua khóa học này, tôi hy vọng các học viên có thể xây dựng dịch vụ bản đồ một cách dễ dàng hơn, và xa hơn nữa là cảm nhận được sức hấp dẫn của loại hình dịch vụ này.. However, it is true that the barrier to entry is quite high when first developing a map service. Through this course, I hope students can create map services more easily and, furthermore, experience the true appeal of map services.

Khóa học này hướng dẫn trực tiếp từ việc thiết lập môi trường ban đầu cho đến triển khai dịch vụ bản đồ bằng cách sử dụng React, Express, MongoDB, v.v. Thông qua việc tự tay tạo ra dịch vụ, bạn có thể trải nghiệm quy trình sản xuất Full-stack, bao gồm cả Frontend và Backend.

Đối với Naver Map và Kakao Map API, đây không chỉ là khóa học viết mã đơn thuần mà là khóa học cùng nhau tìm hiểu lý do tại sao lại sử dụng như vậy thông qua việc vận dụng tài liệu hướng dẫn chính thức (official document). Khóa học giúp các học viên có thể trở nên thân thuộc hơn với các tài liệu hướng dẫn chính thức này.

Khóa học này bao gồm kiến thức liên quan đến bản đồ được sử dụng trong thực tế. Tất nhiên, độ khó của bài giảng được thiết lập để những người mới bắt đầu cũng có thể dễ dàng hiểu được và phụ đề đã được thêm vào tất cả các bài giảng, vì vậy bạn có thể theo học mà không gặp áp lực nào. Chúng tôi cũng cung cấp mã nguồn boilerplate để giảm bớt gánh nặng thiết lập ban đầu cho học viên.

Hiện tại tôi đã phát hành 2 bài giảng về dịch vụ bản đồ trên Inflearn. Nhờ sự ủng hộ và quan tâm của nhiều người, tôi đã nhận được rất nhiều phản hồi tích cực dù đây là một chủ đề hạn chế như dịch vụ bản đồ. Trong số các phản hồi về bài giảng, có rất nhiều ý kiến cho rằng muốn tạo ra dịch vụ bằng các tech stack được sử dụng trong thực tế, vì vậy tôi đã thực hiện bài giảng lần này. (Dưới đây là đánh giá của học viên về bài giảng 'Cùng nhà phát triển Coronamap tạo dịch vụ bản đồ' đã mở trước đó.)

★★★★★

Thật tuyệt vời khi có thể tranh thủ thời gian rảnh để nghe và vì có phụ kiện nên có thể xem mà không cần âm thanh. Ngoài ra, vì người hướng dẫn giải thích và thực hiện cùng từ đầu đến cuối nên rất dễ hiểu và làm theo.

★★★★★

Lời giải thích thực sự rất, rất tốt nên nó thực sự là tuyệt nhất. Một mẹo nhỏ dành cho các học viên khác là với tư cách là người đã hoàn thành khóa học giống hệt như bài giảng, chỉ cần bạn phân biệt tốt chữ hoa và chữ thường thì bạn sẽ có thể hoàn thành mà không gặp vấn đề gì. Tôi thực sự cảm ơn bạn.

★★★★★

Nhìn chung, đây là một khóa học giúp tôi học được cách xây dựng và vận dụng dịch vụ bản đồ. Điểm ấn tượng nhất chính là tốc độ phản hồi Q&A và sự tận tình, chi tiết trong cách giải đáp của giảng viên. Chân thành cảm ơn bạn đã tạo ra một khóa học hữu ích như vậy.


Đề xuất cho những đối tượng sau 🙆‍♀️

Những ai muốn thử tạo dịch vụ bản đồ bằng React và Express

Những ai muốn thử sức tạo ra một dự án từ đầu đến cuối

Những ai muốn sử dụng API bằng cách tận dụng tài liệu chính thức


Đặc điểm của bài giảng ✨

Trong khóa học lần này, chúng tôi sẽ đề cập đến các nội dung như React, Express, MongoDB, mongoose, TypeScript, tính năng tải lên, tính năng truy vấn, tính năng tìm kiếm. Trong khóa học, chúng ta dự kiến sẽ cùng nhau tạo ra dự án như dưới đây.

Tính năng truy vấn dữ liệu, hiển thị marker và info window trên bản đồ

Tính năng tìm kiếm thông tin vị trí sử dụng Kakao Keyword Search API

Tính năng tải lên thông tin vị trí

  • Bạn có thể hiểu cách sử dụng API Naver và Kakao Map bằng cách tận dụng tài liệu hướng dẫn chính thức.
  • Bạn có thể hiểu cách tạo dự án bằng cách sử dụng React, Express, MongoDB và TypeScript.
  • Khi tạo dự án, bạn có thể hiểu và thiết lập được vai trò của Frontend, Backend và DB.

Bạn sẽ học được những điều này 📚

#0.
Giới thiệu khóa học và
Thiết lập môi trường ban đầu

Bài giảng này giới thiệu về nội dung khóa học, dự án sẽ thực hiện sắp tới và hướng dẫn thiết lập môi trường ban đầu để tiến hành bài học.

#1.
Frontend.
Tạo thanh điều hướng

Đây là bài giảng về cách tạo thanh điều hướng cần thiết cho quá trình thực hiện dự án. Chúng ta sẽ bắt đầu bằng việc viết các thành phần cơ bản bao gồm Button và Input, sau đó tiến hành tạo thanh điều hướng.

#2.
Frontend.
Hiển thị Bản đồ Naver

Khóa học này bao gồm việc thiết lập và áp dụng API bản đồ, yếu tố cốt lõi của dịch vụ bản đồ. Trong khóa học này, chúng tôi sử dụng API bản đồ Naver, giải thích cách tạo ứng dụng và cấp phát API key, cũng như cách hiển thị API bản đồ Naver trong React. Ngoài ra, bạn sẽ học cách thêm sự kiện click trên bản đồ bằng cách tham khảo tài liệu chính thức.

#3.
Frontend. Jotai

Đây là bài giảng giới thiệu và hướng dẫn cách sử dụng Jotai, một thư viện quản lý trạng thái toàn cục.

#4.
Frontend.
Tạo Marker

Đây là phần giải thích về marker, một trong những cách để hiển thị dữ liệu trên dịch vụ bản đồ. Bài giảng này hướng dẫn cách tạo nhiều marker, hiển thị chúng trên bản đồ và thêm sự kiện nhấp chuột (click event). Ngoài ra, bài giảng cũng giải thích cách tạo chức năng hiển thị hoặc ẩn cửa sổ thông tin (infowindow) khi nhấp vào marker, đồng thời hướng dẫn cách thêm sự kiện nhấp chuột vào chính bản đồ.

#5.
Frontend.
Tạo Info Window

Đây là phần giải thích về cách nhận vị trí hiện tại và hiển thị nó thông qua các dấu mốc (marker) trên bản đồ, một trong những tính năng cơ bản và được sử dụng nhiều nhất trong các dịch vụ bản đồ.

#6.
Frontend.
SearchBoard
Tạo thanh tìm kiếm

Đây là bài giảng về việc tạo SearchBoard để hiển thị kết quả tìm kiếm và sử dụng hook để tạo thanh tìm kiếm. Chúng ta sẽ thực hiện chức năng nhận điểm đến từ người dùng và hiển thị lên bản đồ bằng cách sử dụng keyword search API do Kakao cung cấp. Bạn có thể học cách xử lý sau khi nhận được giá trị kết quả là vĩ độ và kinh độ của điểm đến đó, đồng thời bài giảng cũng đề cập đến cách xử lý lỗi để chỉ hiển thị duy nhất một marker trên bản đồ.

#7.
Cơ sở dữ liệu. MongoDB

Đây là bài giảng về cách cài đặt và thiết lập MongoDB, một cơ sở dữ liệu NoSQL. Chúng ta sẽ sử dụng docker-compose để chạy máy chủ DB trong môi trường local và kết nối với Compass, một công cụ GUI của MongoDB.

#8.
Backend. Express

Đây là bài giảng về cách tạo API lưu trữ dữ liệu vị trí, truy vấn toàn bộ dữ liệu vị trí và truy vấn kết quả tìm kiếm bằng Express. Chúng ta sẽ quản lý dữ liệu bằng cách sử dụng mongoose với MongoDB đã thiết lập trước đó.

#9.
Frontend )
React-Query

Đây là bài giảng về cách sử dụng React Query để thực hiện giao tiếp API nhằm truy vấn dữ liệu vị trí, kết quả tìm kiếm và tạo dữ liệu vị trí.


Câu hỏi dự kiến Q&A 💬

Q. Những lợi ích khi học React, Express, MongoDB và Node là gì?

Ưu điểm lớn nhất là bạn có thể xây dựng cả front-end và back-end chỉ bằng một ngôn ngữ duy nhất. React và Express là thư viện và framework được sử dụng phổ biến nhất trong môi trường Node, còn MongoDB là cơ sở dữ liệu NoSQL rất ăn ý với Node và có thể dễ dàng sử dụng thông qua package có tên là mongoose.

Q. Độ khó của bài giảng đối với người mới bắt đầu như thế nào?

Vì bạn sẽ được hướng dẫn xây dựng dự án từ đầu đến cuối, nên nếu theo dõi từ từ, đây là mức độ khó mà bất kỳ ai cũng có thể hoàn thành một cách hoàn hảo. Tuy nhiên, do đặc thù của bài giảng, các kiến thức cơ bản (như TypeScript, React hooks, cấu trúc Express, v.v.) sẽ không được đề cập đến, vì vậy bạn cần phải tìm hiểu trước.

Q. Sử dụng API Naver Map và Kakao Map có phát sinh chi phí không?

Bạn không cần phải lo lắng vì việc tạo dự án trong bài giảng này không tốn bất kỳ chi phí nào. :) Naver Map API cung cấp miễn phí 10.000.000 lượt mỗi tháng, và Kakao Map API cung cấp miễn phí 300.000 lượt mỗi ngày. Bạn có thể sử dụng miễn phí trừ khi có lượng truy cập cực kỳ lớn. 


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

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

  • Người muốn tạo dịch vụ bản đồ bằng React

  • Người muốn học cách sử dụng tài liệu chính thức

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

  • Cú pháp cơ bản của React (hooks, jsx)

  • Cấu trúc cơ bản của Express (router)

  • Ngữ pháp TypeScript

  • yarn hoặc npm

Xin chào
Đây là donghunee

1,351

Học viên

119

Đánh giá

165

Trả lời

4.8

Xếp hạng

3

Các khóa học

Xin chào, tôi là nhà phát triển Lee Dong-hoon.

Tôi đã lên ý tưởng và phát triển Coronamap đầu tiên với hơn 44 triệu lượt xem, đồng thời vận hành các dịch vụ như Maskmap và Coroname nhằm giải quyết những bất tiện cho nhiều người dùng.

Hiện tại, tôi đã thành lập một startup nhỏ và đang nỗ lực làm việc với vai trò là CTO.

Cảm ơn bạn.

Thêm

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

Tất cả

45 bài giảng ∙ (4giờ 24phú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á

Tất cả

4 đánh giá

5.0

4 đánh giá

  • kafmjy5012님의 프로필 이미지
    kafmjy5012

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Nó thực sự hữu ích.

    • ksh9909138319님의 프로필 이미지
      ksh9909138319

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Tôi muốn tìm hiểu về cú pháp TypeScript và sử dụng nó với React, đồng thời có một bài giảng mới hấp dẫn vừa được cập nhật nên tôi đã tham gia. Trước đây tôi đã sử dụng một số API nhưng gần như tôi đã sao chép và dán chúng. Tuy nhiên, qua bài giảng này, tôi đã học được cách sử dụng tài liệu API chính thức và tự tin rằng tôi sẽ có thể tìm và sử dụng các chức năng tôi cần trong tương lai. Ngoài ra, nội dung về TypeScript không khó và được giải thích rõ ràng nên tôi nghĩ ngay cả những người mới bắt đầu cũng có thể dễ dàng theo dõi. Cảm ơn bạn vì bài giảng tuyệt vời :)

      • songhajun6485378님의 프로필 이미지
        songhajun6485378

        Đánh giá 6

        Đánh giá trung bình 4.7

        5

        100% đã tham gia

        Chà... nó thật mơ hồ. Cảm ơn bạn đã làm việc chăm chỉ.

        • vsakurav07님의 프로필 이미지
          vsakurav07

          Đánh giá 66

          Đánh giá trung bình 5.0

          5

          100% đã tham gia

          Tôi không thể thử API bản đồ vì cảm thấy khó khăn nhưng tôi rất thích khóa học này.

          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!