コロナマップ開発者との指導サービスの作成1

コロナマップ開発者と一緒に学ぶ実際の指導サービスの実装！

_{＜出典：KTV、EBS＞}

こんにちは、開発者イ・ドンフンです。
私は今回1400万人が利用し、4400万視聴数を超えたコロナマップと
マスクリアルタイム在庫状況を示すマスクマップを企画して開発しました。

サービス運営中に最もよく寄せられた質問の1つ
「コロナマップのようなサービスを作ってみたいのですが、どこでどのように始めるのかわかりません」でした。
それで講義制作を考えることになり、本当に良い機会で今回の講義を作ることになりました。

初めての講義なので、大変厄介で苦手ですが、多くの方にお役に立てば幸いです。
本当にもう一度ありがとう！いつでもフィードバックをお願いします。

指導サービス開発、なぜ学ぶといいですか？

_{＜出典：朝鮮日報＞}

大統領府の仕事報告に出席したときに聞いたことの最も印象的な言葉は

コロナマップは政府が情報を公開する方法の面で新しい発想だ。政府の広報方式に「発想の転換」をしなければならない。特に頼む」でした。コロナマップの基盤となる新しい発想として認識されるマップUIは、ユーザーに最も効率的かつ直感的に情報を表示する方法です。

サービスを企画または開発する際に、ユーザーに直感的で簡単かつ迅速に情報を提供することがますます重要になっている現状で、本講義を通じて指導サービスを作成するための基本設定から活用する方法を皆さんにお知らせしたいと思います。

直接指導サービスを作成してください。

以下は本講義で製作する指導サービスです。

本講義では、指導サービスを作るための基本知識を学ぶ予定です。

1. ネイバーマップapi経由でWebマップを浮かべる
2. 情報提供に必要なバナーとインフォボックスの作成
3. 複数のマーカーを作成して地図上に表示し、クリックイベントを追加する
4. 現在位置を取得し、アニメーションが適用されたマーカーを地図上に表示する
5. カカオapiによる目的地検索機能の実装

講義で学ぶ知識は、現在コロナマップで活用されている知識です。このように本講義を通じて受講生の皆さんが今後の指導サービスを制作する際に役立つと思います。

どんなことを学びますか？

本講義と今後作成するプロジェクトの紹介と、Web開発を始める際にコロナマップクローンプロジェクトで得られる基礎的な知識について説明しています。

プロジェクトを進めるための初期環境を設置して設定する方法についての講座が含まれています。本講義ではVS Code、
node.js、expressをインストールしてプロジェクトを進めるための初期環境設定について説明しています。

マップサービスの中核であるマップapiを設定して適用する講義を盛り込んだ。

このレッスンではネイバーマップapiを使用しており、applicationの生成とapi keyの発行、そしてWebでネイバーマップapiを浮かべる方法について説明しています。

指導サービスで見られるバナー部分とインフォボックスを生成する講義が盛り込まれました。

マップサービスとWebサービスに必要なトップバナーとインフォボックスを作成し、cssを介してユーザーに見せることを説明するレッスンです。このレッスンでは、地図上に情報を表示する方法であるバナーとインフォボックスを作成する方法を学びます。

マップサービスでデータを表示する方法の1つであるマーカーについて説明するセクション。

複数のマーカーを作成し、地図上に表示し、クリックイベントを追加する方法を説明するレッスンです。マーカーをクリックしたときにインフォウィンドウを表示して消える機能を作成し、地図にクリックイベントを追加する方法について説明します。

セクション6 - 現在地を地図上に表示する

地図サービスで最も活用され、基本となる現在位置を受け取り、それを地図上にマーカーを通じて表示する方法について説明するセクションです。

現在位置を取得するためのボタンを作成し、jQueryを使用してclickイベントを付与し、現在位置にマーカーを生成する方法について説明します。また、マーカーの周りに広がるアニメーション効果を付与する方法についても取り上げています。

Section 7 - 現在地を地図上に表示する

カカオapiを利用して目的地を検索し、地図を上に表示する方法を説明するセクション。

カカオが提供するキーワード検索apiを活用し、ユーザーに目的地を入力して地図上に表示する機能を実装します。その目的地の緯度と経度を結果値として受け取った後、それを処理する方法について学ぶことができ、地図上に一つのマーカーだけ浮かせるエラーハンドリングについても取り上げています。

コロナマップをいつ、どのように企画したのか開発日誌に解放しました。現在運営されているコロナマップがどのように誕生するようになり、どのようなきっかけで企画し、運営しているか簡単に紹介しました。

この講義だけの特徴

コロナマップ開発者が直接初期環境設定から指導サービスの実装まで教えてくれる講義です。

そのため、地図サービスを初めて経験する開発者も簡単にアクセスできるように製作しており、現在多くの利用者が使用している地図サービスをクローンすることで
単純なプロジェクトではなく、企画、開発過程で得たノウハウはもちろん、コロナマップで実際に利用するコードまで確認できます。

取り扱うツール

• VS Code - 開発を行うためのIDE（統合開発環境）
• express - Webアプリケーションフレームワーク
• naver map api - ネイバー地図を浮かべるためのapi

Web開発を全く学んでみなかった入門者なら？ 👀

「ウェブ基盤からじっくりと、
地図サービスを作成する"ロードマップのショートカット