
코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
이동훈
MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.
Basic
MongoDB, Express, React
Đâ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.
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.
<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.
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 đồ.
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.
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.
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.
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.
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 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 đồ.
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.
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 .
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
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로서 열심히 개발을 하고 있습니다.
감사합니다.
Tất cả
25 bài giảng ∙ (1giờ 57phút)
Tất cả
91 đánh giá
4.8
91 đánh giá
Đánh giá 1
∙
Đánh giá trung bình 5.0
Đánh giá 1
∙
Đánh giá trung bình 3.0
Đánh giá 3
∙
Đánh giá trung bình 5.0
717.461 ₫
Hãy khám phá các khóa học khác của giảng viên!
Khám phá các khóa học khác trong cùng lĩnh vực!