GeoPuzzle-世界を一つ一つ作ろう

過去数年にわたって開発されてきたプロジェクトについてお話したいと思います。 GeoPuzzleと呼ばれ、世界の政治地図上のパズルゲームです。 目標は、国の断片をその場所に置くことです。 このアイデアは、 「地理学の専門家向けのメルカトルパズル」という記事で発見され、子供時代にも国（まだDOSの下）からテトリスを演奏しましたが、プログラムの名前は覚えていません。 私は、小学生だけでなく地理学の専門家にとっても興味深い完全な製品を作りたいというアイデアにとても感銘を受けました。 プロジェクトの開発はGitHubで確認できます。

試作機

記事「地理学の専門家向けパズルメルカトル」は2013年2月8日に公開されましたが、4か月後にプロトタイプが完成し、世界のすべての国のポリゴンが組み立てられました。 少し後に、ロシアと米国の州の地域を追加し、ポリゴンのマップ上の初期位置の選択をランダムにしました。 ブログで開発プロセスを説明し、 GitHubにソースコードを投稿しました。 そしてそれはそれです-立ち往生。 自由時間はずっと少なくなり、モチベーションは失われ（決定は行われませんでした）、複雑さが指数関数的に増加しました。 それはペットプロジェクトであり、主な仕事は何か新しいことを学ぶことでした。そのため、私はテクノロジーに少し倒れました。 クライアントでは、もちろん、javascript（私はあまり役に立たなかった）で、ルビースクリプト（再び、私にとっては新しい言語）がデータの準備を担当しましたが、サーバーではアーランがありました（純粋に機能的なものを試してみました）。 コンフォートゾーンから完全に抜け出します。PostGISオブジェクトを直接操作するのは難しく、文字列をアーランに変換する苦労、YAWSの構成はまったく別の問題でした...次の段階で、この動物園すべてに対応して本格的な製品を作ることができず、数年間考えます。

ジオパズル

このサイトはこれまでずっと機能しており、人々もそこに行きましたが、もう1つ小さな詳細を追加したかったのです。新しく発見されたポリゴンに関する少なくともいくつかの情報を表示するためです。 したがって、私は2017年に年末年始を有益に過ごすつもりでした。 プロトタイプの問題のため、私はすべてを書き直し、製品をDjangoに馴染みのあるものにすることにしました。 すぐに使用できるものがあります。たとえば、管理パネルやORMを介してPostGISを操作するなど、私の人生が大幅に簡素化されています。 しかし、まず最初に、すでに機能していた機能を再作成する必要がありました。 ほんの数晩で、KMLファイルからデータをロードするのにほとんどの時間がかかりました。 インポートプロセス自体ではなく、インポートプロセスの準備と、それらを使用する方法についての私の知識の復元です。 ところで、当時私はgadm.orgからポリゴンを取得しました。 これは国にとってはうまく機能しましたが、地域の精度に特定の問題があったため、この問題にタイムアウトを取りました。

プロジェクト開発

当時、アプリケーションは最小限のCSSを備えたHTMLページの単なるコレクションでした。 デザインを気にせず、アイデアをすばやく確認したかったのです。 アイデアは実現可能であることが判明し、そのための美しいシェルを作成する時が来ました。 なぜなら UIには美しさはありませんが、Bootstrapは私を助けてくれます。 インターフェースはありませんが、登場し、モバイル機器にも適合しました。 しかし、これはフロントエンドを整理するための最初のステップに過ぎませんでした。



2016年にJavaScriptを学ぶのはどうですか？！ コードが別の方言にコンパイルされると、テンプレートにまとめられ、接着されて断片に切り分けられます。 私はバックエンドとして怖がっていましたが、クライアント部分の複雑さは十分に大きく計画されていたため、フレームワークまたはライブラリを使用する必要がありました。 Reactには2つの理由がありました。SPAは必要ありませんでしたが、さまざまなページのコンポーネントセットが必要だったため、すぐに結果を確認したかったからです。 ただし、プログラミングを開始する前に、環境を設定する必要がありました。 これで、2日間Webpackをセットアップしたと言った、よく知られたフロントエンドがわかりました。 冗談ではなかったことがわかりました。



そのとき、私は説得に屈して、Reduxを使用してアプリケーションのロジックを実装しました。 おそらくこれは間違いではなかった、なぜなら トピックをすばやく入力できます。 正式なルールにより、コードを記述し、内部を見ることなく動作することを確認できました。 Reduxは、そのミドルウェアを使用して、ネットワークインタラクションから私を引き離し、サーバーへの応答を確認することができました。 はい、これまで、クライアントは独自に作業していました。ajaxリクエストが必要なすべてのデータを引き出し、回答を独自にチェックしました。 ユーザーは、サーバーから送信されたデータを見て不正行為を行う可能性があります。 さらに、ロード時に、データは正しい回答の後でのみ必要になりました。 Webソケットを介して検証を実装した後、プロセスはイデオロギー的により正確になりました-答えは、クライアントが利用できないコードを検証します。 ユーザーにとっては、これは即座に見えました。ポリゴンの極値をサーバーに送信し、エラーが発生して正方形に入ったかどうかを確認し、情報ボックスのデータとjsonの詳細なポリゴンをパックして、クライアントに転送します。







javascriptのすべての力を学んだので、止めるのは難しいです。 すぐに、アニメーション、折りたたみブロック、まばたき、ゲームの新しいバージョンを追加するアイデアがありました。 それらの1つは「クイズ」で、名前、旗、紋章、または首都で国を推測する必要があります。 確かに、テストプロセス中に、フラグのない地域と首都のない地域があることが判明したため、利用可能な国のリストから一部の国を非表示にする必要がありました。 同時に、ゲームモードが世界の物理的な地図に登場しました-実際のプロのために、国の国境なしで。

オープンデータソース

現在、ゲームには50,000個のポリゴンがあり、WikipediaやOpen Street Mapなどの素晴らしいプロジェクトに感謝​​します。 基本的な要件は、オープンソースからデータを受信および更新することでした。つまり、手動で編集する必要はありませんでした。 複雑な同期ロジックを行いたくありません。 その結果、情報ボックスとポリゴンを更新できる2つのスクリプトを入手しました。

ウィキペディアとSPARQL

国と地域の最大のデータベースは何ですか？ ウィキペディア！ 最初は、ユーザーに情報ボックス全体を表示したかったのですが、すぐにこの考えを捨てました。 はい、名前、旗、首都などの重要なものがありましたが、ゴミもたくさんありました（電話コード、政府の形態、GDPなど）。 すでに収集されているものを解析しようとしましたが、構造が異なることがわかりました。 これは災害であることが判明しました。実装の人件費が何倍も増加しました。 立ち止まって考える時間でした。 翌日、特別なクエリ言語であるSPARQLの存在について学びました。 外観はSQLに似ており、キーワードSELECT



、 WHERE



、 ORDER BY



WHERE



した宣言型でもありますが、まったく異なる方法で機能します。 州のリストを大文字と英語とロシア語で返す小さな例：

 SELECT DISTINCT ?country ?capital ?row WHERE { ?country wdt:P31 wd:Q3624078 . FILTER NOT EXISTS {?country wdt:P31 wd:Q3024240} OPTIONAL { ?country wdt:P36/rdfs:label ?capital } . BIND(lang(?capital) as ?row) filter (?row = 'ru' || ?row = 'en') } ORDER BY ?capital
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ワイルドに見えますよね！ こちらをご覧ください 。 私は自分の経験を何らかの形で構造化し、トピックに入るのを助けるために、ブログに小さなメモを書きました。 インターネットには詳細な資料はあまりありません。 このようなクエリを非常にすばやく読むことを学ぶことができますが、意味のある何かを書くのに週末全体がかかりました。 wd:Q3624078



からの多くの「魔法」 wd:Q3624078



およびその他の属性。 wdt:P31



は「エンティティ」であり、 wd:Q3624078



は「主権国家」であることを知っておく必要があります。 不明な人は疑問符で始まり、要求の実行は、条件を満たすような事実のトリプルを検索することにあります。 たとえば?country wdt:P31 wd:Q3024240



「履歴状態であるすべてのオブジェクトを検索する」。 そして、同じオブジェクトが他のトリプルに参加し?country wdt:P36/rdfs:label ?capital



-資本は?country wdt:P36/rdfs:label ?capital



から?country wdt:P36/rdfs:label ?capital



。



約1週間後、最初のバージョンのスクリプトが用意され、Wikipediaから地域情報がダウンロードされました。 そして、ここでもう1つの問題が明らかになりました。今回はデータに関するものです。 一部のsvgは<?xml version="1.0" encoding="UTF-8"?>



始まっていませんでした<?xml version="1.0" encoding="UTF-8"?>



また、ブラウザーによって有効な画像として認識されませんでした。 幸いなことに、ソースファイルを編集できます。 wikipedia.orgに登録するのに複雑なことはありませんが、すぐに1日浴場にいることに気づきます。 ここにロボットに対する保護があります。 そのため、翌日の夕方、XMLを支配し、XMLがどれほどシンプルで、フラグとエンブレムがマップに表示されたことを嬉しく思いました。

ポリゴン

事実をウィキペディアに、次に地理データを-Open Street Mapに行くと。 ローカルコピーを手に取り、 高架道路のリクエストの言語を習得するのはクールですが、どれくらい時間がかかるかさえ想像できません。 また、どこかから階層を取得する必要があります...幸いなことに、ある種の人がすでにこの問題を解決してくれました 。 このサービスは、情報を取得するためのAPIも提供します。 私はそこからレベル6までのすべてのポリゴン（地区）をダウンロードし、Postgresのすべてを埋めることができました。2Gb以上が出力されました。 冒険がなかったわけではありません。一部のポリゴンは非常に大きく（たとえば、圧縮されたGeoJSONでカナダの重量が100 Mbを超える）、サーバーがクラッシュしたか、応答しませんでした。 そのような瞬間を手動でバイパスする必要がありました。 すべての子をダウンロードし、QGISにマージしました。 ところで、これは私を大いに助けてくれたオープンソースプロジェクトの別の例です。

ビッグデータの問題

だから、私はデータを含むデータベースを持っています、私はゲームを立ち上げて...そして待ちます...再び待ちます...登場しました！ ポリゴンをドラッグしようとした-彼は死んだ、ジム！ Chromeはそのようなポイントを処理できず、落ちました。 額の戦略はもはや機能しません。考えてみましょう。 最も明白なのは、ポリゴンの詳細を減らすことです。 図の面積に依存する式を経験的に導き出した-それは良くなった。 稼働中のコンピューターでは、アルゴリズムはその場で機能しましたが、サーバーのリソースは厳しく制限されていました。 接続されたredisは、サーバー上で既に良くなっています。 ただし、切り捨てられたポリゴンはドラッグアンドドロップに適しています。適切な場所に設定すると、境界線はGoogleマップを描画する境界線と一致しなくなります。 まあ、これはあまり積極的でない式を適用して詳細を減らすことで回避できます。 すでに2つのキャッシュがあるので、可能なすべてのものをキャッシュしてみませんか？！ 情報ボックス（2つの言語）はRedisに飛んでいきました。Redisは、答えを計算する境界、ポリゴンの中心、およびサイトの静的ページです。 その結果、ゲームはより速く動作し始め、多くのワークロードがPostgresから削除されました。これは理論的にはボトルネックになる可能性があります。 マイナス-アプリケーションはRedisなしでは機能しません。

最初の展開

それでは、フィードバックのためにプロジェクトを友人に見せましょう。 ほんの少しだけ：sitemap.xmlの生成、robots.txtの追加、メトリックの接続、ソーシャルボタンの追加。 ネットワークと...展開！ ホスティングとしてAWSを選択しました。 提供される無料のリソースに収まることを望みました。 そして、これは初心者プロジェクトにとって非常に良いスタックです：

• アプリケーションサーバー（t2.micro：1xCPU、1 Gb RAM、20Gb SSD）
• データベース（db.t2.micro：1xCPU、1 Gb RAM、20Gb SSD）
• CDNを使用したファイルストレージ（5 Gb S3、50 Gbのトラフィック）
• キャッシングサーバー（cache.t2.micro：1xCPU、0.5 Gb RAM）
• Elasticsearch + Kibana（t2.small.elasticsearch：1xCPU、2 Gb RAM）

これは、私が何とか使用したリストです。 途中で、 記事の形で熊手を作成することにしましたが、すぐに亡くなりました。 時間はきちんと過ぎますが、だれかがそれを必要としているかどうかは明らかではありません。



その結果、奉仕の年に私は10ドルのオーダーを支払いました。 しかし、ここで試用期間が終了し、私は移動しなければなりませんでした。 この経済全体の所有コストは数百ドルに近づき始めました。 関税を比較し、DigitalOceanで解決しました。 今のところ、すべて（アプリケーションサーバー、データベース、キャッシュ）に2 Gb RAMの十分なマシンがありますが、AWSには統計とCDNを残しました。 今度は、DOがCDNとストレージを1か月あたり5ドルで入手できることを知りました。したがって、この部分も移動することを検討するのは理にかなっています。

オープンソースへの転送

この1月の夕方、デンマークの学校から手紙を受け取りました。 その本質は、彼らが100ドルを持っているという事実に来て、彼らは私にそれらを与えたいと思っています。 ただし、条件があります-プロジェクトのソースコードが開いている必要があります。 その瞬間まで、私はオープンソースについてさえ考えていませんでした。 数晩、ライセンスの検討と選択に行きました。 その結果、GPLv3ライセンスでGithubにソースをアップロードし 、約束された100ドルを受け取りました。 これにより、モチベーションが大幅に向上しました-私のプロジェクトは本当に役に立ちました！ そして、次の目標であるゲームエディターに急ぎました。 誰もが独自のパズルを作成できるように。 たとえば、「第二次世界大戦に参加している国」、「クラスノダール準州の地区」、「国土」など...しかし、このためには、登録と原始的な個人アカウントが必要でした。 その結果、開発は3か月も続いた。 この間、私はajaxを介してデータを取得し、ローカライズを接続し、プレビューを生成するための画像としてgoogleマップを保存し、reduxをカットする領域のツリーを作成しました。 はい、彼は最初からデータの処理を手伝ってくれましたが、今では干渉する可能性が高くなっています。 レデューサーをドラッグして、マップ上にポリゴンを描画し、それらの動きを処理するコードを作成する必要があります。 幸いなことに、グローバルステートへのバインディングを削除するのに数日しかかからず、コードをローカルに移動するだけでアプリケーションが簡素化されました。 そしてもちろん、これは良い経験です:)

サービス接続

多くの有料サービスは、オープンソースプロジェクトに無料でサービスを提供していることがわかりました。 自分が接続したものだけをリストします。



- セントリー 。 エラーをキャッチするためのこのサービスは誰もが知っていると思います。 プロジェクトをデプロイしたばかりのとき、ロギングはスタックトレースをメールに送信することで構成されていました。 これはバックエンドでのみ機能しましたが、フロントエンドのバグも追跡したかったのです。 無駄ではありません-わずか2週間でメッセージの無料制限を使い果たしました。 エラーのほとんどはGoogleマップライブラリの腸にあり、一見すると非常に奇妙です。 調査中、それはすべて私のせいであることが判明しました。 修正は1か月以上続きましたが、非常に便利なjavascriptエラー処理方法でした。



-crowdin.com-ローカライズ。 このプロジェクトに誰でもアクセスできるようにする予定です。 インフォボックスが彼の母国語で表示されたことを含めます。 ウィキペディアからそれらを記入することは問題ではありませんが、一貫性を保つために、同じ言語でインターフェースを持ちたいです。これまでのところ、ロシア語と英語のみに翻訳されています。







-CircleCI 。 CI / CD、テスト、自動展開なしでは、最新のプロジェクトはできません。 Circledexを選んだのは、Yandex.Diskを操作するためのライブラリを作成したときにすでにTravisCIを操作していたからです 。 ライブラリのテストに適しているという印象を受けました。 コードをテストする環境のマトリックスを設定するのは簡単です。 しかし、テスト自体には問題があります。インフラストラクチャの準備はすでに整っていますが、希望するほど多くはありません。







- つなぎ服 。 コードカバレッジ視覚化サービス。 README.mdプロジェクトに挿入するラベルも付けることができます。



-SonarQube 。 コード品質管理のためのハーベスタ。 多くのルールに従ってコードをチェックし、循環的な複雑さを考慮し、テストでカバレッジを監視し、さらにコードの重複を認識します！ 非常に興味深いサービスで、まだ完全に理解する時間がありませんでした。







-Githubボット。 これまでのところ、依存関係を更新するDependabotのみが接続されています。







コメントで、プロジェクトのサービスとボットのリストを共有することをお勧めします。

虫

バグと問題の分析には、別の記事が必要です。 面白くて複雑で、修正が難しいものがありました（したがって、Chukotkaは常にその代わりになります）。 現在、ユーザーを本当に煩わせるものがあります。 回答を受け取ると、ポリゴンは削除され（react-google-mapsライブラリで）再作成され、その時点でユーザーがドラッグした場合、Googleマップはプロセスがまだ終了していないと想定し続けます。 ドラッグアンドドロップの過程でポリゴンが消えて、他のものをつかむことができなくなったように見えます。 もちろん、ドラッグアンドドロッププロセスで応答処理をロックすることもできますが、これにより、現在実装しているマルチプレイヤーゲームが強制終了されます。 プログラムでドラッグアンドドロップを中断する方法を見つけようとしましたが、最終的にはStackOverflowに関する質問と、 Google Mapsのバグを提起しました。 それまで、彼は「ゲームが壊れた！」というボタンを追加しました。これはマップ全体を再初期化しますが、結果はリセットしません。

次は？

1. デザイン。 私はこれで、すべてが完全に悪いことを認めます。 私自身はレイアウトとレイアウトの友達ではないので、デザイナーとレイアウトデザイナーを雇う必要があります。
2. 収益化。 最初は何も計画していませんでした。 このプロジェクトは基礎教育に捧げられており、私の意見では誰でもアクセスできるはずです。 私はデンマークの学校からの手紙に非常に触発されましたが、ほぼ1年が経過し、その間に5ドルの送金は1回だけでした。 まあ、私はそれがサーバーの代価を払うことさえできるとは信じていませんでした。 しかし、彼はとにかくパトレオンでキャンペーンを開始しました。 同時に、おそらく教師や組織に有料の機会を導入することを考えることができます。 たとえば、私は学習管理システムと統合した経験があります。これは、コースを作成できるプラットフォームのセットであり、ヨーロッパとアメリカで非常に人気があります。 私の知る限り、ソースコードはGithubのGPLの下にもありますが、これは著者として、並列商用バージョンの開発を妨げるものではありません。
3. 携帯電話。 iOS / Android用のアプリケーションをリリースしたい。 Yandexの指標から判断すると、4分の1のユーザーが携帯電話やタブレットでプレイしようとしていますが、困難を感じています。
4. 開発。 すべての作業はGitHubで行われます 。 私はプロジェクトの開発を続けたいと思っていますが、それを一人で行うのは難しいです。 計画には、マルチプレイヤーの追加、Workshopでのタグ、評価、フィルターの作成、物理マップ（山、海、半島）のポリゴンの追加が含まれます。 まだ面白いことがたくさんあるので、記事の目標の1つは、志を同じくする人々を見つけることです。 もう1つのオプションは、 Python Software Foundationなどの財団に行って助成金を取得することです。

これが現在の状態です。 最後まで読んでくれてありがとう！ こちらでプレイできます-geopuzzle.orgで 、 GitHubのソースコードをご覧ください。

UFOケアミニッツ

この資料は相反する感情を引き起こす可能性があるため、コメントを書く前に、記憶の中で重要な何かを更新してください。

コメントを書いて生き残る方法

• 不快なコメントを書いたり、個人的にならないでください。
• わいせつな言葉遣いや中毒行為は避けてください（ベールに包まれた形でも）。
• サイトのルールに違反するコメントを報告するには、[レポート]ボタン（利用可能な場合）またはフィードバックフォームを使用します。

対処方法 ： マイナスカルマ | ブロックされたアカウント



→ 著者のコードHabrとhabraetiket

→ サイトルールの完全版