강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Full-stack

Tạo dịch vụ bản đồ với Corona Map Developers 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 giảng dạy.

(4.8) 91 đánh giá

890 học viên

  • donghunee
3시간 만에 완강할 수 있는 강의 ⏰
Node.js
Web Application
Express
VSCode

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

Dịch cái này sang tiếng Việt

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

  • Thiết lập dịch vụ bản đồ dựa trên web thông qua Naver Map API

  • Tạo điểm đánh dấu, cửa sổ thông tin và hộp thông tin cần thiết cho các dịch vụ bản đồ cơ bản

  • Cần có kiến ​​thức về HTML, CSS và JS để phát triển web

  • Triển khai chức năng tìm kiếm điểm đến thông qua Kakao API

Tìm hiểu cách triển khai dịch vụ bản đồ thực tế với các nhà phát triển của Corona Map!

<Nguồn: KTV, EBS>

Xin chào, tôi là nhà phát triển Donghoon Lee.
Lần này, tôi sử dụng Corona Map , bản đồ này đã được 14 triệu người sử dụng và có hơn 44 triệu lượt xem.
Chúng tôi đã lập kế hoạch và phát triển một bản đồ mặt nạ hiển thị trạng thái tồn kho mặt nạ theo thời gian thực.

Một trong những câu hỏi thường gặp nhất mà tôi nhận được khi vận hành dịch vụ là
' Tôi muốn tạo một dịch vụ như Corona Map, nhưng tôi không biết bắt đầu từ đâu hoặc như thế nào .'
Vì vậy, tôi bắt đầu nghĩ đến việc tạo một khóa học và đây thực sự là cơ hội tuyệt vời để tạo ra khóa học này.

Đây là bài giảng đầu tiên của tôi nên có phần ngượng ngùng và vụng về, nhưng tôi hy vọng nó sẽ hữu ích với nhiều người.
Cảm ơn bạn rất nhiều lần nữa!! Tôi rất mong nhận được phản hồi của bạn bất cứ lúc nào.

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

<Nguồn: Chosun Ilbo>

Điều ấn tượng nhất tôi nghe được khi tham dự báo cáo kinh doanh của Nhà Xanh là

" Bản đồ Corona đại diện cho một cách tiếp cận mới về cách chính phủ công bố thông tin. Chúng tôi kêu gọi một 'sự thay đổi trong tư duy' trong cách tiếp cận quan hệ công chúng của chính phủ. Chúng tôi đặc biệt kêu gọi điều này." Giao diện người dùng bản đồ, được công nhận là khái niệm mới làm nền tảng cho Bản đồ Corona, là cách hiệu quả và trực quan nhất để hiển thị thông tin cho người dùng.

Khi lập kế hoạch hoặc phát triển dịch vụ, việc cung cấp cho người dùng thông tin trực quan, dễ sử dụng và nhanh chóng ngày càng trở nên quan trọng. Khóa học này sẽ hướng dẫn bạn cách tạo dịch vụ bản đồ, bắt đầu từ các thiết lập cơ bản và cách sử dụng chúng.

Tạo dịch vụ bản đồ của riêng bạn.

Dưới đây là dịch vụ bản đồ sẽ được tạo trong bài giảng này.

Trong bài giảng này, bạn sẽ tìm hiểu những kiến thức cơ bản cần thiết để tạo ra một dịch vụ bản đồ.

  1. Hiển thị bản đồ web bằng Naver Map API
  2. Tạo biểu ngữ và hộp thông tin để cung cấp thông tin
  3. Tạo nhiều điểm đánh dấu, đặt chúng trên bản đồ và thêm sự kiện nhấp chuột.
  4. Nhận vị trí hiện tại và hiển thị điểm đánh dấu động trên bản đồ.
  5. Triển khai chức năng tìm kiếm điểm đến thông qua Kakao API

Kiến thức bạn học được trong bài giảng này hiện đang được ứng dụng trong Corona Map. Tôi tin rằng khóa học này sẽ hữu ích cho bạn khi phát triển các dịch vụ bản đồ trong tương lai.

Tôi nên học những gì?

Phần 1 - Giới thiệu

Khóa học này giới thiệu về dự án bạn sẽ thực hiện, cùng với kiến thức cơ bản bạn có thể thu được từ dự án Corona Map Clone khi bắt đầu phát triển web.

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

Khóa học này bao gồm cách cài đặt và thiết lập môi trường ban đầu để chạy một dự án. Khóa học này bao gồm VS Code,
Phần này giải thích cách cài đặt node.js và express cũng như thiết lập môi trường ban đầu để tiếp tục dự án.

Phần 3 - Giới thiệu và Cài đặt cho API Bản đồ

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

Bài giảng này sử dụng Naver Map API và giải thích cách tạo ứng dụng, cấp khóa API và hiển thị Naver Map API trên web.

Phần 4 - Tạo biểu ngữ và hộp thông tin

Khóa học này bao gồm cách tạo biểu ngữ và hộp thông tin xuất hiện trên các dịch vụ bản đồ.

Khóa học này hướng dẫn bạn cách tạo banner và hộp thông tin trên cùng cho dịch vụ bản đồ và web, cũng như cách hiển thị chúng cho người dùng bằng CSS. Khóa học này hướng dẫn bạn cách tạo banner và hộp thông tin hiển thị thông tin trên bản đồ.

Phần 5 - Tạo điểm đánh dấu và thiết lập sự kiện

Phần này mô tả các điểm đánh dấu, một trong những cách hiển thị dữ liệu trong dịch vụ bản đồ.

Hướng dẫn này giải thích cách tạo nhiều điểm đánh dấu, hiển thị chúng trên bản đồ và thêm sự kiện nhấp chuột. Bài viết cũng giải thích cách tạo một tính năng hiển thị và ẩn cửa sổ thông tin khi nhấp vào điểm đánh dấu, và cách thêm sự kiện nhấp chuột vào bản đồ.

Phần 6 - Hiển thị vị trí hiện tại của bạn trên bản đồ

Phần này giải thích cách nhận vị trí hiện tại, đây là phương pháp cơ bản và phổ biến nhất trong các dịch vụ bản đồ, và hiển thị vị trí đó trên bản đồ bằng cách sử dụng điểm đánh dấu.

Hướng dẫn này giải thích cách tạo nút để truy xuất vị trí hiện tại, kích hoạt sự kiện nhấp chuột bằng jQuery và tạo điểm đánh dấu tại vị trí hiện tại. Bài viết cũng hướng dẫn cách tạo hiệu ứng động cho điểm đánh dấu để nó tỏa sáng xung quanh điểm đánh dấu.

Mục 7 - Hiển thị vị trí hiện tại của bạn trên bản đồ

Phần này giải thích cách sử dụng Kakao API để tìm kiếm điểm đến và hiển thị chúng trên bản đồ.

Sử dụng API tìm kiếm từ khóa do Kakao cung cấp, chúng tôi sẽ triển khai tính năng nhắc người dùng nhập điểm đến và hiển thị điểm đến đó trên bản đồ. Bạn sẽ học cách xử lý vĩ độ và kinh độ của điểm đến dưới dạng giá trị trả về, đồng thời chúng tôi cũng sẽ hướng dẫn xử lý lỗi để đảm bảo chỉ có một điểm đánh dấu xuất hiện trên bản đồ.

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

Chúng tôi đã công bố nhật ký phát triển, nêu chi tiết thời điểm và cách thức Bản đồ Corona được lên kế hoạch. Chúng tôi cũng cung cấp tổng quan ngắn gọn về quá trình ra đời của Bản đồ Corona hiện đang hoạt động, lý do thúc đẩy việc lập kế hoạch và cách thức vận hành hiện tại.

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

Bài giảng này được giảng dạy bởi nhà phát triển Corona Map, từ thiết lập môi trường ban đầu đến triển khai dịch vụ bản đồ.

Do đó, chúng tôi tạo ra nó để ngay cả những nhà phát triển mới làm quen với dịch vụ bản đồ cũng có thể dễ dàng truy cập và bằng cách sao chép dịch vụ bản đồ hiện đang được nhiều người dùng sử dụng.
Đây không chỉ là một dự án đơn giản mà bạn còn có thể kiểm tra kiến thức chuyên môn thu được trong quá trình lập kế hoạch và phát triển, cũng như mã thực sự được sử dụng trong Corona Map .

Công cụ để xử lý

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

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

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

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

  • Những người muốn tạo một dịch vụ bản đồ 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 cách thực hiện

  • Những người muốn tạo dịch vụ web của riêng mình

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

  • HTML

  • CSS

  • Javascript

Xin chào
Đây là

1,334

Học viên

119

Đánh giá

165

Trả lời

4.8

Xếp hạng

3

Các khóa học

안녕하세요 개발자 이동훈입니다.

4400만 조회수가 넘는 코로나맵을 최초로 기획하고 개발하였으며, 마스크맵, 코로나미를 통해 많은 사용자분들의 불편함을 해소하는 서비스를 운영하고 있습니다.

현재는 작은 스타트업을 창업하여 CTO로서 열심히 개발을 하고 있습니다.

감사합니다.

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ả

91 đánh giá

4.8

91 đánh giá

  • 이호진님의 프로필 이미지
    이호진

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    8% đã tham gia

    강의마다 자막이 달려 있어서 보기에 편했어요~!! 지도서비스 기본지식을 배우는데 좋았어요

    • 이동훈
      Giảng viên

      안녕하세요 호진님~😆 첫 강의라 많이 부족했지만 도움이 되었다니 정말 감사드립니다. 앞으로 계속해서 강의를 업데이트 할 예정이니 많은 관심 부탁드립니다🤗🤗🤗

  • lgw9898님의 프로필 이미지
    lgw9898

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    안녕하세요. 컴공관련 학생 특성상 잘 공유 안해주는 사람들이 많은데, 처음부터 차근차근 정말 감사합니다. 추가로 설명이 진짜 너무너무 좋아서 진짜 최고입니다. 다른 수강생 분들 팁을 드리자면 강의만 듣고 똑같이 완성한 입장으로써, 대소문자 구분만 잘하신다면 문제없이 완성하실 수 있을거에요. 정말정말 감사합니다.

    • 신은경님의 프로필 이미지
      신은경

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      8% đã tham gia

      목소리가 너무 좋아요. 강의에 적합한 몯소리같아요.알기쉽게 설명해줘서 이해가팍팍갑니다.늘 코로나맵의 서비스과정이 궁금했는데...이런 기회를 주시니 감사합니다.화이팅하세요!!!!

      • 이동훈
        Giảng viên

        안녕하세요 은경님~!! 다소 부족할 수 있는 강의에도 좋은 평가 주셔서 감사드립니다~!! 코로나맵을 기획하고 개발하면서 얻은 노하우를 앞으로 지속적으로 업데이트할 예정이오니 많은 관심 부탁드립니다.

    • pjh992510님의 프로필 이미지
      pjh992510

      Đánh giá 1

      Đánh giá trung bình 3.0

      3

      72% đã tham gia

      친절한 목소리로 코로나 맵을 어떻게 만드는지 차근차근 알려주셔서 따라하기에 좋습니다. 다만, 각 단계들이 어떤 원리로 작동되는지에 대한 부연설명이 없어서 원리에 대해 이해하기엔 어려움이 있었습니다 ~!

      • CodingChan님의 프로필 이미지
        CodingChan

        Đánh giá 3

        Đánh giá trung bình 5.0

        5

        96% đã tham gia

        실전강의를 통해 전반적으로 지도서비스를 어떻게 만들고 활용하는지 배울 수 있었던 강의였습니다. 강사님의 친절하고 자세한 설명으로 정말 많은 도움이 되었습니다. 제일 인상깊었던 점은 Q&A 에 대한 답변 속도와 세세하게 봐주시는 친절함이었습니다. 앞으로 DB 등 다양한 컨텐츠를 업데이트 하신다고 말씀하셨는데, 업로드 되면 꼭 확인하고 추가적으로 공부하겠습니다. 이런 유익한 강의를 만들어 주셔서 진심으로 감사합니다.

        717.461 ₫

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

        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!