inflearn logo

Tạo dịch vụ bản đồ cùng với nhà phát triển Corona Map 1

Đây là bài giảng về cách tạo dịch vụ bản đồ do nhà phát triển Corona Map hướng dẫn.

(4.8) 92 đánh giá

900 học viên

Độ khó Cơ bản

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

Node.js
Node.js
Web Application
Web Application
Express
Express
VSCode
VSCode
Node.js
Node.js
Web Application
Web Application
Express
Express
VSCode
VSCode

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

4.8

5.0

이호진

8% đã tham gia

Mỗi bài giảng đều có phụ đề nên rất dễ xem!! Thật tốt cho việc học kiến ​​thức cơ bản về dịch vụ bản đồ.

5.0

lgw9898

100% đã tham gia

Xin chào. Do tính chất của sinh viên kỹ thuật máy tính nên có nhiều người không chia sẻ nhiều nhưng mình thực sự trân trọng từng bước ngay từ đầu. Ngoài ra, lời giải thích thực sự tuyệt vời, nó thực sự là tốt nhất. Tôi muốn đưa ra một lời khuyên cho các sinh viên khác. Là một người chỉ nghe bài giảng và hoàn thành khóa học theo cách tương tự, miễn là bạn giỏi phân biệt chữ hoa và chữ thường, bạn sẽ có thể hoàn thành nó mà không cần bất kỳ chữ nào. vấn đề. Cảm ơn bạn rất nhiều.

5.0

신은경

8% đã tham gia

Tôi yêu giọng nói của bạn. Nghe có vẻ như một trò đùa phù hợp với bài giảng. Bạn giải thích một cách dễ hiểu để tôi có thể hiểu rõ. Tôi luôn tò mò về quy trình dịch vụ của Corona Map... Cảm ơn bạn đã cho tôi cơ hội này. may mắn!!!!

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

  • Thiết lập môi trường ban đầu cơ bản để phát triển web

  • Xây dựng dịch vụ bản đồ dựa trên web thông qua Naver Map API

  • Tạo marker, infowindow và infobox cần thiết cho dịch vụ bản đồ cơ bản

  • Kiến thức về HTML, CSS, JS cần thiết cho phát triển web

  • Thực hiện tính năng tìm kiếm điểm đến thông qua Kakao API

Cùng nhà phát triển Corona Map học cách triển khai dịch vụ bản đồ thực tế!

<Nguồn : KTV, EBS>

Xin chào, tôi là nhà phát triển Lee Dong-hoon.
Lần này, tôi đã lên kế hoạch và phát triển Corona Map, dịch vụ đã có 14 triệu người 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 tồn kho khẩu trang theo thời gian thực.

Một trong những câu hỏi tôi nhận được nhiều nhất khi vận hành dịch vụ là
'Tôi muốn tạo một dịch vụ giống như Corona Map, nhưng tôi không biết phải bắt đầu từ đâu và như thế nào'.
Vì vậy, tôi đã nảy ra ý định sản xuất bài giảng, và nhờ một cơ hội thực sự tốt, tôi đã tạo ra bài giảng lần này.

Vì đây là bài giảng đầu tiên nên vẫn còn nhiều chỗ ngượng ngùng và thiếu sót, nhưng tôi hy vọng nó sẽ giúp ích được cho nhiều người.
Thực sự cảm ơn các bạn một lần nữa!! Xin hãy góp ý cho tôi bất cứ lúc nào. 

 

 

Tại sao nên học phát triển dịch vụ bản đồ?

<Nguồn: Chosun Ilbo>

Điều ấn tượng nhất mà tôi đã nghe khi tham dự buổi báo cáo công việc tại Nhà Xanh là

'Corona Map là một ý tưởng mới mẻ trong cách chính phủ công khai thông tin. Chúng ta cần phải có một 'sự chuyển đổi tư duy' trong phương thức quảng bá của chính phủ. Tôi đặc biệt yêu cầu điều này'. Giao diện bản đồ (Map UI), vốn được coi là một ý tưởng mới làm nền tảng cho Corona Map, là phương pháp hiển thị thông tin hiệu quả và trực quan nhất cho người dùng.

Trong bối cảnh hiện nay, khi việc cung cấp thông tin một cách trực quan, dễ dàng và nhanh chóng cho người dùng ngày càng trở nên quan trọng trong việc lập kế hoạch hoặc phát triển dịch vụ, thông qua khóa học này, tôi muốn hướng dẫn các bạn từ các bước thiết lập cơ bản đến cách vận dụng để tạo ra một dịch vụ bản đồ.

 

 

Hãy tự mình tạo ra dịch vụ bản đồ nhé.

Dưới đây là dịch vụ bản đồ sẽ được xây dựng trong khóa học này.

 

 

Trong khóa học này, chúng ta sẽ học những kiến thức cơ bản để tạo ra một dịch vụ bản đồ.

  1. Hiển thị bản đồ web thông qua Naver Map API
  2. Tạo biểu ngữ và hộp thông tin cần thiết để cung cấp thông tin
  3. Tạo nhiều dấu mốc (marker) để hiển thị trên bản đồ và thêm sự kiện nhấp chuột (click event)
  4. Nhận vị trí hiện tại và hiển thị dấu mốc có hiệu ứng hoạt họa trên bản đồ
  5. Triển khai tính năng tìm kiếm điểm đến thông qua Kakao API

Kiến thức học được trong bài giảng này chính là những kiến thức đang được sử dụng trong bản đồ Corona hiện nay. Vì vậy, tôi tin rằng thông qua bài giảng này, các bạn học viên có thể nhận được sự trợ giúp đắc lực khi xây dựng các dịch vụ bản đồ trong tương lai.

 

 

Chúng ta sẽ học những gì?

Phần 1 - Giới thiệu khóa học

Bài giảng này giới thiệu về khóa học và dự án sẽ được thực hiện sắp tới, đồng thời giải thích những kiến thức cơ bản mà bạn có thể nhận được từ dự án clone bản đồ Corona khi bắt đầu phát triển web.

 

Phần 2 - Thiết lập môi trường ban đầu

Bao gồm các bài giảng về cách cài đặt và thiết lập môi trường ban đầu để tiến hành dự án. Trong bài giảng này, chúng tôi sẽ giải thích cách cài đặt VS Code,
node.js, express và thiết lập môi trường ban đầu để thực hiện dự án.

 

Phần 3 - Giới thiệu và thiết lập API bản đồ

Bài giảng này bao gồm việc thiết lập và áp dụng API bản đồ, vốn là cốt lõi của các dịch vụ bản đồ.

Trong bài giảng này, chúng tôi sử dụng Naver Map API, vì vậy sẽ giải thích về cách tạo application, cấp mã API key và cách hiển thị Naver Map API trên web.

 

Section 4 - Tạo banner và hộp thông tin (infobox)

Bài giảng này bao gồm nội dung tạo phần biểu ngữ (banner) và hộp thông tin (infobox) hiển thị trên dịch vụ bản đồ.

Đây là bài giảng giải thích về việc tạo biểu ngữ (banner) phía trên và hộp thông tin (infobox) cần thiết cho dịch vụ bản đồ và dịch vụ web, đồng thời thực hiện các thao tác để hiển thị chúng cho người dùng thông qua CSS. Thông qua bài giảng này, bạn có thể biết cách tạo biểu ngữ và hộp thông tin, vốn là những phương pháp hiển thị thông tin trên bản đồ.

 

Section 5 - Tạo marker và thiết lập sự kiện

Đây là phần giải thích về dấu mốc (marker), một trong những phương pháp hiển thị dữ liệu trên dịch vụ bản đồ.

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

 

Section 6 - Hiển thị vị trí hiện tại trên bản đồ

 

Đâ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 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 đồ.

Giải thích cách tạo nút để lấy vị trí hiện tại, sử dụng jQuery để gán sự kiện click và tạo dấu mốc (marker) tại vị trí hiện tại. Ngoài ra, phần này cũng đề cập đến cách tạo hiệu ứng hoạt ảnh lan tỏa xung quanh dấu mốc.

Section 7 - Hiển thị vị trí hiện tại trên bản đồ

 

Đây là phần giải thích về cách tìm kiếm điểm đến bằng cách sử dụng Kakao API và hiển thị điểm đến đó trên bản đồ.

Sử dụng Keyword Search API do Kakao cung cấp để triển khai tính năng nhận điểm đến từ người dùng và hiển thị lên bản đồ. 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 nội dung 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 đồ.

Phần 0 - [Phụ lục] Nhật ký bản đồ Corona

Tôi đã trình bày chi tiết trong nhật ký phát triển về việc bản đồ Corona (Coronamap) đã được lên kế hoạch khi nào và như thế nào. Tôi cũng giới thiệu ngắn gọn về quá trình bản đồ Corona hiện đang vận hành đã ra đời ra sao, cũng như động lực nào dẫn đến việc lập kế hoạch và vận hành nó.

 

 

Đặc điểm riêng của bài giảng này

Đây là bài giảng mà chính nhà phát triển Corona Map sẽ 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 đồ.

Vì vậy, khóa học được xây dựng để ngay cả những nhà phát triển lần đầu tiếp cận với dịch vụ bản đồ cũng có thể dễ dàng bắt đầu. Bằng cách clone dịch vụ bản đồ đang được nhiều người dùng hiện nay,
bạn không chỉ dừng lại ở một dự án đơn thuần mà còn có thể học hỏi được những bí quyết thu được từ quá trình lập hoạch, phát triển, cũng như trực tiếp kiểm tra các mã nguồn thực tế đang được sử dụng trên Corona Map..

 

 

Các công cụ được sử dụng

  • VS Code - IDE (Môi trường phát triển tích hợp) để lập trình.
  • express - framework ứng dụng web
  • naver map api - API để hiển thị bản đồ Naver

 

 

 

Nếu bạn là người mới bắt đầu và chưa từng học về phát triển web? 👀

 

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

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

  • Những ai muốn thử tạo ra dịch vụ bản đồ giống như Corona Map

  • Những người muốn sử dụng API liên quan đến bản đồ nhưng không biết phải làm thế nào

  • Những người muốn thử tự tạo dịch vụ web cho riêng mình

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

  • HTML

  • CSS

  • Javascript

Xin chào
Đây là donghunee

1,352

Học viên

120

Đá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ả

25 bài giảng ∙ (1giờ 57phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

92 đánh giá

4.8

92 đánh giá

  • lgw98985062님의 프로필 이미지
    lgw98985062

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Xin chào. Do tính chất của sinh viên kỹ thuật máy tính nên có nhiều người không chia sẻ nhiều nhưng mình thực sự trân trọng từng bước ngay từ đầu. Ngoài ra, lời giải thích thực sự tuyệt vời, nó thực sự là tốt nhất. Tôi muốn đưa ra một lời khuyên cho các sinh viên khác. Là một người chỉ nghe bài giảng và hoàn thành khóa học theo cách tương tự, miễn là bạn giỏi phân biệt chữ hoa và chữ thường, bạn sẽ có thể hoàn thành nó mà không cần bất kỳ chữ nào. vấn đề. Cảm ơn bạn rất nhiều.

    • yongchanski6650님의 프로필 이미지
      yongchanski6650

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      96% đã tham gia

      Đó là một bài giảng mà tôi có thể học cách tạo và sử dụng dịch vụ bản đồ nói chung thông qua một bài giảng thực tế. Những lời giải thích tử tế và chi tiết của người hướng dẫn thực sự hữu ích. Điều làm tôi ấn tượng nhất là tốc độ trả lời Hỏi & Đáp của họ cũng như sự tử tế khi họ xem xét các chi tiết. Bạn nói rằng bạn sẽ cập nhật nhiều nội dung khác nhau như DB trong tương lai và tôi chắc chắn sẽ kiểm tra và nghiên cứu bổ sung sau khi nó được tải lên. Cảm ơn bạn rất nhiều vì đã tạo ra một bài giảng hữu ích như vậy.

      • ldh17665963님의 프로필 이미지
        ldh17665963

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        8% đã tham gia

        Tôi yêu giọng nói của bạn. Nghe có vẻ như một trò đùa phù hợp với bài giảng. Bạn giải thích một cách dễ hiểu để tôi có thể hiểu rõ. Tôi luôn tò mò về quy trình dịch vụ của Corona Map... Cảm ơn bạn đã cho tôi cơ hội này. may mắn!!!!

        • donghunee
          Giảng viên

          Xin chào Eunkyung~!! Cảm ơn bạn đã đánh giá tích cực về khóa học, điều này có thể hơi thiếu sót~!! Chúng tôi sẽ tiếp tục cập nhật những bí quyết thu được trong quá trình lập kế hoạch và phát triển Corona Map, vì vậy vui lòng dành cho chúng tôi sự quan tâm của bạn.

      • wkshwk0519님의 프로필 이미지
        wkshwk0519

        Đánh giá 4

        Đánh giá trung bình 5.0

        5

        84% đã tham gia

        Donghoon! Tôi đang học rất tốt! Thế giới thật tuyệt vời, chiến đấu!

        • ehdgns17664658님의 프로필 이미지
          ehdgns17664658

          Đánh giá 2

          Đánh giá trung bình 5.0

          5

          8% đã tham gia

          Mỗi bài giảng đều có phụ đề nên rất dễ xem!! Thật tốt cho việc học kiến ​​thức cơ bản về dịch vụ bản đồ.

          • donghunee
            Giảng viên

            Xin chào, Hojin~😆 Đây là bài giảng đầu tiên của tôi nên tôi còn thiếu sót rất nhiều, nhưng cảm ơn bạn rất nhiều vì đã giúp đỡ. Chúng tôi sẽ tiếp tục cập nhật bài giảng trong thời gian tới nên hãy dành nhiều sự quan tâm cho chúng tôi nhé🤗🤗🤗

        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!

        Giảm 25% cho thành viên mới

        537.283 ₫

        25%

        716.373 ₫