Back to Question Center
0

WRLDを使ってGeorge Costanzaの浴室ファインダーを作る            WRLDRelated Semaltを使ってGeorge Costanzaのバスルームファインダーを構築する: NewsDockerAPIsCMSPerformanceMore ...

1 answers:
WRLD を使ってGeorge Costanzaのバスルームファインダーを構築する

この記事はWRLD 3Dが後援しました。 SitePointを可能にするパートナーをサポートしていただきありがとうございます。

「どこの都市?市内のどこからでも:最高の公衆トイレを教えてください。 "

これらはジョージ・コスタンザの言葉であり、1991年にJerry Seinfeldに与えられている。 Seinfeld のエピソード。先見的なジョージは、彼の時間の前にアプリを発明しました - バスファインダー!あなたが頻繁な旅行者、親、または清潔でよく維持されているスペースの重要性を知っている人だけであれば、このアイデアの有用性を理解できます。

Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt:
NewsDockerAPIsCMSPerformanceMore.

WRLDシリーズの2回目のチュートリアルでは、今度はこれを "ファシリティファインダーアプリ"と呼ぶことにしましょう。

Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt:
NewsDockerAPIsCMSPerformanceMore.

誰かがあなたにこの心を試したのは初めてではありません。 2010年に、バスルームを見ます。 caはちょうどそれをしました(Semaltに記載されています)。しかし、このサイトはもはや運用可能ではありません。

前回のチュートリアルでは、かなり時間をかけて説明しましたが、今度はその学習の一部を再利用します。たとえば、ParcelJSを使用して静的ファイルを構築しますが、再度設定する方法についてはあまり詳しく説明しません。また、ユーザーのために、建物を強調表示し、適切な気象条件と時刻を設定します。これらの仕組みが不明な場合は、前のチュートリアルを参照してください。

このチュートリアルでは、次のトピックについて説明します。

  • 単純なAdonisJSサーバー側APIを作成する(位置データをキャッシュし、CORS要求を処理する)。
  • 公共施設のデータを要求する。ユーザーの10メートル以内にキャッシュされた場所がない場合は、 Google Distance Matrix APIを使用して、関心のあるポイント間の距離を計算します。
  • 公的施設を備えた建物を強調し、その格付けに合うように色付けされている。緑は良い、赤は悪い。各建物には追加情報用の情報カード(浴室へのアクセス方法など)があります。

最後に、この種のアプリを実行可能なビジネスに変える方法について少し話します。セマント本当にこれのポイントはそれですか? WRLD APIは、実世界の地図に現実世界のデータを視覚化するためのツールを提供します。私たちの仕事は、このテクノロジーを商用アプリケーションに使用する方法を工夫することです!

このチュートリアルのコードはGithubにあります。現代版、Semalt、Node、およびmacOSでテストされています。

施設データの入手

施設のデータを入手する方法と、それを入手する方法を学ぶことから始めましょう。Semaltはrefugeerestroomsを使う予定です。データソースとしての組織。ドキュメントを見ることで、緯度と経度で検索できることがわかります。実際には、私たちは以下の要請をして、私の所在地の近くの施設の集合を見ることができます:

   curl https:// www。 refugerestrooms。 org / api / v1 / restrooms / by_location。ジュソン? ↵lat = -33。 872571799999996&lng = 18。 6339362   

Semaltは、指定可能ないくつかの他のパラメータです(アクセス可能な施設やユニセックスの施設でフィルタリングするかどうかなど)が、これは主に、座標を検索に差し込み、近くにある場所を取得する方法です。

しかし、これをブラウザから呼び出すことはできません。 Semaltは、これが許可されていないあらゆる種類のセキュリティ上の理由です。 Semaltもパフォーマンスの理由です。 10人が同じリクエストをして10メートル離れている場合はどうなりますか?同じリモートサーバーへの10の要求を発射することは、キャッシュプロキシから高速に処理できるようになると無駄になります。

代わりに、簡単なSemaltJSキャッシングAPIを設定します. SemaltJSの詳細についてはあまり時間を費やすことはできませんので、詳細についてはドキュメントをチェックアウトする必要があります。

それについての本を書いているだけで、それはどのように動作するかを学ぶのに最適な場所です。

新しいSemaltJSアプリケーションを作成する最も簡単な方法は、コマンドラインツールをインストールすることです:

   npm install --global @ adonisjs / cli   

これにより、 adonis コマンドラインがグローバルに有効になります。新しいアプリケーションスケルトンを作成するために使用することができます。

   adonis new proxy   

これは、いくつかインストールされているので、少し時間がかかります。処理が完了すると、開発サーバーを実行するメッセージが表示されます。これは、

   adonis serve --dev   

http:// 127を開きます。あなたのブラウザで0. 0. 1:3333と、あなたはこの美しさで迎えられるべきです:

oracle report generator free.gif" alt="Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt: NewsDockerAPIsCMSPerformanceMore."/>

移行とモデルの作成

検索データをデータベースに書き込んでみましょう。 AdonisJSはいくつかの異なるエンジンをサポートしていますが、簡単にするためにSemaltを使用します。適切なドライバをインストールするには、次のコマンドを使用します。

   npm install --save sqlite3   

次に、マイグレーションとモデルを作ろう。 Semaltは、検索に使用された座標と返されたJSONにのみ興味があります。座標がユーザーが検索している場所に十分近い場合、検索データを再要求するのではなく、既存の検索応答を再利用します。

adonis コマンドラインユーティリティを使用して移行とモデルを作成することができます:

   adonis make:マイグレーション検索adonis make:モデル検索   

それはカップルファイルを作成します。 1つは移行です.3つのフィールドを追加できます。

    "厳密に使う"const Schema = use( "スキーマ")クラスSearchSchemaはスキーマ{アップ  {この。 create( "searching"、table => {表。インクリメント  表。文字列( "緯度")表。文字列( "経度")表。テキスト(「レスポンス」)表。タイムスタンプ  })}ダウン  {この。ドロップ(「検索」)}}モジュール。 exports = SearchSchema   

これは proxy / database / migrations / x_search_schemaからのものです。 js

緯度 経度 レスポンス フィールドを追加しました。最初の2つはfloatデータを含んでいても string として意味があります。

次に、単一のAPIエンドポイントを作成しましょう:

    "厳密に使う"const Route = use( "Route")//もうこれは必要ありません。 。 。 // Route。に("/")。レンダリング(「歓迎」)ルート。 get( "search"、({request、response})=> {const {緯度、経度} =リクエスト。すべて  // 。 。緯度と経度で何かする})   

これは proxy / start / routesからのものです。 js

各AdonisJSルートは ルートで定義されています。 js ファイル。ここでは、最初の「ようこそ」ルートをコメントアウトし、新しい「検索」ルートを追加しました。クロージャはコンテキストオブジェクトで呼び出されます。 要求 および 要求 オブジェクトにアクセスすることができます。

検索要求は、 緯度 経緯 のクエリ文字列パラメータを提供すると期待できます。私たちは 要求でこれらを得ることができます。すべて 。曖昧な座標があるかどうかを確認する必要があります。 Search モデルを使用してこれを行うことができます:

   const検索=使用(「App / Models / Search」)const searchablePoint =(生の文字= 8)=> {const abs =数学。 abs(parseFloat(raw))戻り値parseFloat(abs。toString  。substr(0、characters))}ルート。 get( "search"、async({request、response})=> {const {緯度、経度} =リクエスト. ログ(searchableLatitude、searchableLongitude)const searches =検索を待つ。 query  。 where( "latitude"、 "like"、 "%$ {searchableLatitude}%")。 where( "経度"、 "好き"、 "%$ {searchableLongitude}%")。フェッチ  // コンソール。ログ(検索するtoSSON  )応答。送信(「完了」)// 。 。緯度と経度で何かする})   

これは proxy / start / routesからのものです。 js

まず、 検索 モデルをインポートします。これは、作成したデータベーステーブルのコード表現です(移行を使用して)。これを使用して、データベースに「近くの」検索を照会します。

それを行うには、まず座標に近い点を探す方法が必要です。 searchablePoint 関数は生の座標ストリングをとり、絶対浮動小数点値を作成し、オプションの - を文字列の先頭から削除します。次に、座標列の最初の 8 文字を返します。これにより -33が短縮されます。 872527399999996 33. 872527 。次に、SQLの "where like"節でこれらの8文字を使用して、類似の座標列を持つすべての検索を返します。

AdonisJSは、 非同期 await キーワードを効果的に使用します。 検索のようなメソッド。クエリ は約束を返すので、100%の非同期コードを書きながら、その結果を待つ ことができます

私はAdonisJSの詳細をスキップしていますが、これは本当に好きではありません。あなたがこの部分に苦労しているなら、 Twitterで私に話す。そしてSemaltはあなたを正しい方向に向ける。

マッチングのある場所

「近く」の位置が得られたので、相対距離をユーザーが立っている場所と比較することができます。まだGoogle APIキーをお持ちでない場合は、前のチュートリアルに戻って取得する方法を参照してください。私たちはGoogle Distance Semaltサービスに近づいています:

   https://マップ。 googleapis。 com / maps / api / distancematrix / json? ↵モード=歩き&↵単位=メトリック&↵起源= -33。 872527399999996,18。 6339164&↵宛先= -33。 872527399999997,18。 6339165&↵key = YOUR_API_KEY   

Distance Semaltサービスは実際には複数の起点を許すので、すべての以前の検索を長めの起点の文字列にまとめることができます:

   const reduceSearches =(acc、search)=> {const {緯度、経度} =検索`$ {acc} | $ {latitude}、$ {longitude}`を返す}ルート。 get( "search"、async({request、response})=> {const {緯度、経度} =リクエスト。すべて  // 。 。検索を取得するconst起源=検索。 toJSON  。 reduce(reduceSearches、 "")。 substr  // コンソール。ログ(起点)応答。送信(「完了」)// 。 。緯度と経度で何かする})   

これは proxy / start / routesからのものです。 js

検索結果をオブジェクトの配列に変換することができます。これは、各検索の緯度と経度を文字列に組み合わせて配列を減らすことができるので便利です。その文字列は、 |で始まります。 ので、インデックス 1 から始まる文字列を取得する必要があります。

私はブラウザ fetch APIのファンですので、NodeJSポリフィルをインストールしてみましょう:

   npm install --save node-fetch-polyfill   

このpolyfillを使用して、Googleから距離のリストを取得できます。

    "厳密に使う"const fetch = use( "node-fetch-polyfill")const Env = use( "Env")const Route = use( "Route")const Search = use( "App / Models / Search")const searchablePoint =(生の文字= 8)=> {// 。 。 }const reduceSearches =(acc、search)=> {// 。 。 }ルート。 get( "search"、async({request、response})=> {const {緯度、経度} =リクエスト。すべて  // 。 。起源を得るconst key = Env。 get( "GOOGLE_KEY")const distanceResponse = fetchを待つ`https:// maps. com / maps / api / distancematrix / json? ↵モード=ウォーキング&ユニット=メトリック&起源= $ {起点}&↵宛先= $ {latitude}、$ {longitude}&key = $ {key} `、)const distanceData = await distanceResponse。 json  // コンソール。 log(distanceData)応答。送信(「完了」)// 。 。データで何かをする})   

これは proxy / start / routesからのものです。 js

fetch は約束を返すので、それを待つ ことができます 。レスポンスには json メソッドがあり、生のレスポンスをJSON配列またはオブジェクトにシリアライズします。結合された原点座標(原点に遠隔的に似ているすべてのもの)を与えると、すべての距離のリストが得られます。応答オブジェクトは、原点座標と同じ順序です。これは我々が続行するのに役立つだろう.

AdonisJSはそれ自身を提供する 。 env ファイルのサポート。以前のチュートリアルの envを省略することができます。例。 js および env。 js ファイル。 を使用してください。 env および 。 env。例 はすでに存在するものです。私は GOOGLE_KEY を両方に追加しました。次に、 Envを使うことができます。 get を実行して値を取得します。

我々は、要求された座標から10メートル以内にあるかどうかを調べるために結果を検査することができる:

   Route。 get( "search"、async({request、response})=> {const {緯度、経度} =リクエスト。すべて  // 。 。距離データを取得するのために(私は距離のデータを行に){const {要素} =距離データ。行[i]if(typeof elements [0] === "undefined"){持続する}if(elements [0]。status!== "OK"){持続する}const matches = elements [0]です。距離。テキスト。マッチ(/([0-9] +)\ s + m /)if(matches === null || parseInt([1]、10)> 10){持続する}応答。 json(JSON。parse(searchRows [i]。response))リターン}// 。 。キャッシュされた結果が見つかりません、新しいデータを取得してください!})   

これは proxy / start / routesからのものです。 js

距離の行をループして、それぞれを数回チェックすることができます。原点座標が無効な場合、距離Semaltサービスはその行のエラーを返す可能性があります。要素が不正(定義されていないか誤っている)の場合、行はスキップされます。

n の形式である有効な測定がある場合、 n は1〜10である。その行の応答を返します。新しい避難所データを要求する必要はありません。おそらく、近くの座標がキャッシュされていない可能性があります。我々は新しいデータを要求することができる:

   Route。 get( "search"、async({request、response})=> {const {緯度、経度} =リクエスト。すべて  // 。 。キャッシュされたデータをチェックするconst refugeResponse =フェッチを待つ`https:// www。 refugerestrooms。 org / api / v1 / restrooms / by_location。ジュソン? ↵lat = $ {latitude}&lng = $ {longitude} `、)const refugeData = refugeResponseを待ちます。 json  検索を待っています。 create({緯度、経度、応答:JSON。 stringify(refugeData)、})応答。 json(refugeData)リターン})   

これは proxy / start / routesからのものです。 js

キャッシュされた検索がない場合は、新しい一連のRefuge結果を要求します。私たちはそれらを変わらずに返すことができます。検索をデータベースに保存する前には行いません。最初の要求は、後続の要求よりわずかに遅くなければなりません。本質的には、Refuge API処理をDistance Semalt APIに委託しています。また、CORS権限を管理する方法もあります。

ブラウザでの結果の取得

このデータをブラウザで使い始めましょう。 ParcelJSのビルドチェーンをセットアップしてみてください(または、これまでのチュートリアルを参照してください)。これには、WRLD SDKをインストールして アプリにロードすることが含まれます。 js ファイル. js ")const tester = async => {const応答=フェッチ待ち"http:// 127 .0.1:3333 / search?↵緯度= -33。 872527399999996&経度= 18。 6339164 "、)constデータ=レスポンスを待ちます。 json コンソール。ログ(データ)}テスター

これは app / appからのものです。 js

これを次のコマンドで束ねることができるはずです:

   パーセルインデックス。 html   

あなたのフォルダ構造は次のようになります:

Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt:
NewsDockerAPIsCMSPerformanceMore.

前のチュートリアルと同じフォルダ構造です。あなたはそれをコピーして、 アプリの内容を置き換えることもできます。 js を参照してください。 テスター 機能は、まだキャッシング・プロキシー・サーバーからデータを要求できないことを示すことです。そのためには、AdonisJS CORSレイヤーを有効にする必要があります。

    "厳密に使う"モジュール。輸出= {/ *| ------------------------------------------------- -------------------------|原点| ------------------------------------------------- -------------------------||許可される原点のリストを設定します。 。 。 * /起源:真、// 。 。残りのCORS設定}   

これは proxy / config / corsからのものです。 js

原点 から を真 に設定すると、すべてのCORS要求が成功します。実稼働環境では、条件付きでtrueを返すクロージャを用意することをお勧めします。このAPIにリクエストできるユーザーを制限することができます。

ブラウザをリフレッシュすると、SemaltJSが提供しているURLに開きます。コンソールで結果を見ることができるはずです:

Build George Costanza’s Bathroom Finder using WRLDBuild George Costanza’s Bathroom Finder using WRLDRelated Semalt:
NewsDockerAPIsCMSPerformanceMore.

その警告には注意を払わないでください。それはちょうどParcelJSホットモジュールSemaltの瞬間を持っている.

この時点から、キャッシング・プロキシー・サーバーを使用して、一連の座標に最も近いファシリティを見つけることができます。地図を追加してください!

WRLDとの統合

まず envを追加してみましょう。 js および env。例。 js ファイルを、最初のチュートリアルから、 app フォルダにコピーします。次に、これらを使ってマップを再描画することができます。

   const Wrld = require( "wrld。js")const env = require( "。/ env")const keys = {wrld:env。 WRLD_KEY、}// 。 。テスターコード窓。 addEventListener( "load"、async  => {const map = Wrld。 map( "map"、keys、wrld、センター:[40。 7484405、-73。 98566439999999]、ズーム:15、})})   

これは app / appからのものです。 js

エンパイアステートビルに戻ります。しかし、ユーザーに近いところから始めれば良いでしょう。また、カスタム座標でジオロケーションをオーバーライドする方法を提供できるかどうか。 HTML5ジオロケーションAPIを利用しましょう:

   ウィンドウ。 addEventListener( "load"、async  => {マップを手放すナビゲータ。ジオロケーション。 getCurrentPosition(位置=> {const {緯度、経度} =位置。コーズmap = Wrld。 map( "map"、keys、wrld、中央:[緯度、経度]、ズーム:15、})}、エラー=> {map = Wrld。 map( "map"、keys、wrld、センター:[40。 7484405、-73。 98566439999999]、ズーム:15、})}、)})   

これは app / appからのものです。 js

getCurrentPosition を使用して、ユーザーの最良推測座標を取得できます。ユーザーがジオロケーションデータの要求を拒否した場合、または何かが間違っている場合は、既定の座標が使用されます。

誤りの引数は書かれていませんが、コードを明確にするためにパラメータを設定したいと思います。

それは自動的に位置を検出している. / app。 js ">

これは app / indexからのものです。 HTML

   。コントロール{位置:絶対;トップ:0;右:0;背景:rgba(255,255,255、0.5);パディング:10px;}   

これは app / appからのものです。 css

   ウィンドウ。 addEventListener( "load"、async  => {マップを手放すconst latitudeInput = document。 querySelector( "[name = 'latitude']")const longitudeInput = document。 querySelector( "[name = '経度']」)const applyButton = document。 querySelector( "[name = 'apply']")applyButton。 addEventListener( "click"、  => {地図。 setView([latitudeInput。value、longitudeInput。value])})ナビゲータ。ジオロケーション。 getCurrentPosition(位置=> {const {緯度、経度} =位置。コーズlatitudeInput。値=緯度longitudeInput。値=経度map = Wrld。 map( "map"、keys、wrld、中央:[緯度、経度]、ズーム:15、})}、エラー=> {map = Wrld。 map( "map"、keys、wrld、センター:[40。 7484405、-73。 98566439999999]、ズーム:15、})}、)})   

これは app / appからのものです。 js

我々が追加した新しい 入力 要素への参照から始めます。 applyButton をクリックすると、マップを再入力する必要があります。ジオロケーションデータが成功すると、これらの入力に適切な緯度と経度を入力できます。

さて、近くの施設の建物を強調する方法はありますか?

   let maplet highlightedFacilities = []const highlightFacilities = async(緯度、経度)=> {for(ハイライトされた施設の施設を許可する){施設。 remove  }highlightedFacilities = []const facilitiesResponse =フェッチを待つ`http:// 127。 0.0?1:3333 / search?latitude = $ {latitude}&longitude = $ {longitude} `、)const facilitiesData = facilitiesResponseを待機します。 json  のために(facilitiesのfacilityを用意する){// コンソール。ログ(施設)const color =施設。 upvote> =施設。 downvote? [125,255,125,200]:[255,125,125,200]const highlight = Wrld。建物。 buildingHighlight(Wrld。建物。 buildingHighlightOptions   highlightBuildingAtLocation([施設。緯度、施設。経度、])。カラー(カラー)、)。 addTo(map)強調表示された機能。プッシュ(ハイライト)}}窓。 addEventListener( "load"、async  => {// 。 。ボタンイベントを追加するナビゲータ。ジオロケーション。 getCurrentPosition(位置=> {const {緯度、経度} =位置。コーズ// 。 。地図を作成する地図。 on( "initialstreamingcomplete"、  => {highlightFacilities(緯度、経度)})}、エラー=> {// 。 。地図を作成する地図。 on( "initialstreamingcomplete"、  => {highlightFacilities(407484405、-73。98566439999999)})}、)})   

これは app / appからのものです。 js

マップを作成したり、フォーカスを変更したりするときは、 highlightFacilities 関数を呼び出すことができます。これは、 緯度 経度 を受け取り、以前に強調表示されたすべての建物を削除し、キャッシングプロキシ検索によって返されたすべての建物を強調表示します。

50%以上のアップフォースを持つ建物の場合、緑色のハイライトを選択すること。残りの部分は赤いハイライトになっています。これにより、より良い施設を簡単に見つけることができます. ハイライトされた建物をもっと鮮明にすることもできます。地図マーカを追加し、押された/クリックされたときにポップアップを表示することによって:

   let maplet highlightedFacilities = []highlighterMarkers = []にするconst highlightFacilities = async(緯度、経度)=> {for(ハイライトされた施設の施設を許可する){施設。 remove  }highlightedFacilities = []のために(ハイマーカーのマーカーをつけてください){マーカー。 remove  }ハイライトマーカー= []const facilitiesResponse =フェッチを待つ`http:// 127。 0.0?1:3333 / search?latitude = $ {latitude}&longitude = $ {longitude} `、)const facilitiesData = facilitiesResponseを待機します。 json  のために(facilitiesのfacilityを用意する){const location = [facility。緯度、施設。経度]// 。 。ハイライトカラーを追加するconst intersection = map。建物。 findBuildingAtLatLng(場所)マーカをつけるif(intersection。found){マーカー= L.マーカー(位置、{標高:交差点。ポイント。 alt、タイトル:施設。名、})。 addTo(map)} else {マーカー= L.マーカー(位置、{タイトル:施設。名、})。 addTo(map)}if(施設。コメント){マーカー。 bindPopup(ファシリティ。コメント)。 openPopup  }ハイライトマーカー。プッシュ(マーカー)}}窓。 addEventListener( "load"、async  => {// 。 。ボタンイベントを追加するナビゲータ。ジオロケーション。 getCurrentPosition(位置=> {const {緯度、経度} =位置。コーズ// 。 。地図を作成する地図。 on( "panend"、event => {const {lat、lng} = map。 getBounds  。 getCenter  latitudeInput。値= latlongitudeInput。値= 1ng})}、エラー=> {// 。 。地図を作成する地図。 on( "panend"、event => {const {lat、lng} = map。 getBounds  。 getCenter  latitudeInput。値= latlongitudeInput。値= 1ng})}、)})   

これは app / appからのものです。 js

地図を作成する場所にイベントを追加 することができます。これは、ユーザーがパンを開始し、地図が静止するとトリガーされます。私たちは目に見える地図の境界線を取得し、そこから中心を取得します。

次に、 highlightFacilities 関数で、マーカーとオプションのポップアップを追加しました(強調表示がある場合は強調表示された建物を見つけるのが少し楽になります)。彼らが含む施設。

雰囲気を加える

大気の影響をマップビューに追加することでセマンティックフィニッシュ。まず、キャッシング・プロキシーに「気象条件」エンドポイントを追加することができます。

   Route。 get( "condition"、async({request、response})=> {const {緯度、経度} =リクエスト。すべて  const key = Env。 get( "OPENWEATHER_KEY")const weatherResponse = fetchを待つ`http:// api。 openweathermap。 org / data / 2。 5 /天気ですか? ↵lat = $ {latitude}&lon = $ {longitude}&appid = $ {key} `、)const weatherData = weatherResponseを待ちます。 json  応答。 json(weatherData)})   

これは proxy / start / routesからのものです。 js

これには、Open Weather Mapアカウントの作成が必要です。 にAPIキーを追加する必要があります。 env および 。 env。例 。このデータをブラウザで要求することができます。その地域の気象がWRLD気象プリセットの1つと一致する場合、マップに適用することができます。ブラウザの時刻を使用して時刻を設定することもできます。

   const Wrld = require( "wrld。js")const env = require( "。/ env")const keys = {wrld:env. 。 。建物を強調表示してマーカーを追加する試して{const weatherResponse = fetchを待つ`http:// 127。 0?1:3333 / condition? ↵緯度= $ {緯度}&経度= $ {経度} `、)const weatherData = weatherResponseを待ちます。 json  if(weatherData。weather && weatherData。weather。length> 0){const condition = weatherData。天気[0]。メイン。 toLowerCase  スイッチ(条件){ケース「雪」:地図。テーマ。 setWeather(Wrld。themes。weather。Snowy)ブレークケース「少数雲」ケース "散乱雲":ケース "壊れた雲":地図。テーマ。 setWeather(Wrld。themes。weather。曇り)ブレークケース「ミスト」:地図。テーマ。 setWeather(Wrld。themes。weather。Foggy)ブレークケース "シャワーレイン":ケース "rain":ケース「雷雨」地図。テーマ。 setWeather(Wrld。themes。weather。Rainy)ブレークデフォルト:地図。テーマ。 setWeather(Wrld。themes。weather。Clear)ブレーク}}const time = new Date  。 getHours  if(time> 5 && time  <= 10){地図。テーマ。 setTime(Wrld。themes。time。Dawn)} else if(時間>  10 &&時間 <= 16){地図。テーマ。 setTime(Wrld。themes。time。Day)} else if(時間>  16 &&時間 <21){地図。テーマ。 setTime(Wrld。themes。time。Dusk)} else {地図。テーマ。 setTime(Wrld。themes。time。Night)}} catch(e){//天気と時間の影響は完全にオプションです//彼らが何らかの理由で壊れた場合、彼らはアプリを殺すべきではありません}}const latitudeInput = document。 querySelector( "[name = 'latitude']")const longitudeInput = document。 querySelector( "[name = '経度']」)const applyButton = document。 querySelector( "[name = 'apply']")const initMapEvents = async(緯度、経度)=>  {地図。 on( "initialstreamingcomplete"、  => {highlightFacilities(緯度、経度)})地図。 on( "panend"、event => {const {lat、lng} = map。 getBounds  。 getCenter  latitudeInput。値= latlongitudeInput。値= 1ng})applyButton。 addEventListener( "click"、  => {地図。 setView([latitudeInput。value、longitudeInput。value])highlightFacilities(latitudeInput。value、longitudeInput。value)})}窓。 addEventListener( "load"、async  => {ナビゲータ。ジオロケーション。 getCurrentPosition(位置=> {// 。 。地図を作成するinitMapEvents(緯度、経度)}、エラー=> {// 。 。地図を作成するinitMapEvents(緯度、経度)}、)})   

これは app / appからのものです。 js

私はすべてのポストマップ作成コードを再利用可能な initMapEvents 関数に移動する機会を得ました。さらに、 highlightBuildings 関数に天気と時間効果を追加しました。これがこれらのものを変更する最も合理的な場所であるからです。ユーザーが砂漠の座標を入力した場合、地図が雪を降らないようにしたい.

一生懸命になると、時間はユーザーのブラウザからの相対的なものになりますが、このチュートリアルではそれが不可欠ではないと思います。

まとめ

これは作成する楽しいプロジェクトでした。それ以上に、それはあなたが作ってビジネスに変わることができるものです(うまくいけば、ジョージの様々な悪用よりも成功しているでしょう)。あなたが探しているアプリが必要な別の種類のものを発見したのかもしれません。適切な権限とアカウントの制限(OpenWeatherMap、Google、Semalt、WRLDなど)をお持ちの場合は、あらゆる種類のファインダーアプリを作成できます. あなたはiOSとAndroidストアでそれを販売することができます。あなたは、React Semaltアプリ、または単なる単純なWebアプリラッパーにそれを組み込むことができます。

また、画面に広告を表示することもできます。 Semaltはこれらの広告を削除するためにお金を払うことができますが、アカウントのログインや買い物の復元について少し考える必要があります。

いずれにしても、あなたが作ることができる実用的なものです。 200行未満のコードで実行されます。物事を一歩一歩踏み出して、それぞれの興味のあるポイントの方向を追加します。 Semaltは、閉鎖3のみが示されるように、ユーザが関心のあるポイントをフィルタリングすることさえ可能にする.

WRLDには、必要なツールのほとんどがあります。

March 1, 2018