Angular Attack hackathonへの参加方法とその結果

こんにちは友人。 私の名前はAlexeyです。私はWrikeのサンクトペテルブルクオフィスでフロントエンド開発者として働いています。今日は、AngularAttack hackathonに参加した方法についてお話したいと思います。

それが何であり、どのように始まったかについて

インスピレーションは、昨年のアンドレイの例であり、私たちも同じチームで働いています。

さらに、参加に参加するためには、調整された作業環境以外には何も必要ありません...そして、睡眠と休息なしで週末に48時間コードを書く準備ができています。

原則として、優秀な開発者には最初の問題や2番目の問題はありません。



ハッカソンの条件は基本です。 すべてはリモートで発生します。 開始-グリニッジ標準時の土曜日、土曜日、終了-月曜日の深夜、1〜4人のチームで、イベントの開始前に電子コンテンツを作成することはできません（コード、アセットなし）。 -好きなだけ。 各参加者にはGitHubのプライベートリポジトリが与えられ、そこでコードを記述します。 前提条件は、Angularフレームワークを使用するWebアプリケーションでなければならないことです。 アプリケーション内の自由に配布されたコンテンツとライブラリは、ライセンスの条件（作成者へのリンクなど）に従って使用できます。 それだけです

しかし、あなたは何を書きますか？

開始の数週間前のどこかで、私はそのアイデアについて考え始めました。 将来のアプリケーションに関する考えは次のように生じました。

• それは使いやすいはずです-多くの仕事があり、裁判官は普通の人であり、数十秒の人がアプリケーションの使用方法を理解していない場合、彼はおそらくそれ以上理解しません。
• 開発しやすいはずです。 私は一人で参加するつもりでしたが、アイデアはこれらの48時間でなんとか実現するのは簡単なことです。 そのため、バックエンドなどについてのあらゆる種類の考えはすぐに消えました-単一ページのアプリのみ、前面のみ、純粋なAngularのみ。
• それはあまり平凡ではないはずです-あなたはキャッチするためのアイデアが必要です。 繰り返しますが、審査員はコードのクールさではなく、作業と外観を評価します。 したがって、ゲームを「絞首台」と書くことができます（ちなみに多くの人がそうしました）が、一度プレイしたことがある人はゲームに戻ることはありません（評価基準の1つはいわゆるユーティリティ/楽しい-どれだけ便利で楽しい、そして、一般的に、何度も何度も使用したいという欲求を引き起こします）。

一般的に、3つのポイントすべてを満たす完全に新しいアイデアを思いついた場合、あなたは大富豪になりやすいでしょう。 私は最後には成功しませんでした-DOSで動作し、学生として学生といちゃつくという、すでによく知られている古い論理パズルの独自の実装に集中することにしました。



その本質は比較的単純です：6つのセルからなる6行のフィールドがあり、各行には、たとえば、最初の行の顔、2番目の黄道帯の記号、3番目の数字、など。 ゲームの開始時に、プレイヤーが知らないすべての要素の位置の特定の正しい組み合わせがボード上で作成されます。ゲームの目標は、提案された一連のヒントを使用して、ボード上の各要素の正しい位置を決定することです。







ゲームの開始時に、いくつかの要素が既に開いている場合があります（たとえば、ボードの一番下の行にある文字L-これはまさにここにあることを意味します）。 正しい要素がまだ正確に決定されていないセルでは、残りの可能なオプションが表示されます。 たとえば、下の行の残りの各セルでは、現在の位置に基づいて、文字H、O、M、E、およびSのバリアントが引き続き可能です。



次に、ヒントを見ていきます。 ゲーム自体では、マウスカーソルをツールチップの上に置くと、その説明とともにツールチップが表示されます（ただし、英語ではありますが、これはKhabrovitesにとっては問題ではないと思います）。ここでは、ゲームボードの下の行の各ツールチップがその上に示されている両方の要素が同じ列にある必要があります。



たとえば、左の7番目のプロンプトを見ると、文字Lは数字5と同じ列にあるはずです。Lは既に開いています。つまり、自信を持ってその5を開いています（左クリック）。 次に、左側の5番目のプロンプトを見てみましょう（Eと同じ列の牡羊座の星座）。 牡羊座もEもまだ開いていませんが、Lは開いています。つまり、その上に牡羊座は絶対にありません。 したがって、文字Lの上のセルから牡羊座記号を削除できます（右クリック）。



したがって、明確に決定できる位置の画像を開くためのヒントを適用し、対応するセルに確実に存在できない要素を削除することで、徐々に不確実性を減らし、最終的にパズルの唯一の真の解決策に到達します。 さて、または私たちは来ません-スキルが磨かれるまで、ソリューションで簡単に間違った方向に進むことができますが、この場合は、最後の正しい位置に元に戻すunningなボタンが役立ちます。

ラッシュ！、またはアルゴリズムについて少し

イベントの開始前の金曜日の夜に、環境をセットアップしました。 私は言語としてGoogle Dartを選択しました-TypeScriptがAngularの開発の主な傾向であるという事実にもかかわらず、当社のフロントエンドのほぼ全体がDartで記述されているため、車輪を再発明しないことに決めました。 彼はgitとホスティングの設定も行いました-今年は主催者は仕事の場所を提供しませんでした。参加者のそれぞれがこの問題を決定することを望んでいました。 私はホスティングを利用しましたが、これは問題を引き起こしませんでしたが、おそらく誰かがそのようなことを事前に知る必要があります。



土曜日、3泊のハッカソンの開始時に、彼は起きないことに決め、朝の6時に起きました。 私は決断しました-今日は明日ロジックを書いています-UI。 その日の論理に合わない場合、明日の朝、私はそれがまったく継続する意味があるかどうかを決定します。



しかし、この非常に論理的な部分では、ところで、かなり興味深い課題がありました。



パズルでは、1）ボード上の正しい位置、2）元々開いていた位置、そして最も重要なこととして、3）開いた位置を正しい位置に変換するための一連のヒントを生成する必要がありました。 さらに、理想的には一連のヒントが必要かつ十分である必要があります-タスクを解決すると同時に、独自の方法で行う必要があります。



もちろん、ランダムな正しい位置の生成に問題はなく、最初はいくつかの写真をランダムに開いていましたが、特定の位置に一連のヒントを作成する方法はすぐには考えられませんでした。 問題を正面から解決しようとして、ボードを完全に開くことができるようになるまで、ランダムなヒントをセットに追加しようとしました（これには、このヒントのセットで位置を解決しようとする方法が必要でした-解決するか、それについて何をするかを報告します）不可能）、しかし、セットはしばしば冗長であることが判明し、重複の問題でさえなかったという事実に直面しました（それらは単に追跡することができました）-プロンプトの特定のサブセットが、同じ要素を持つ別のサブセットによって完全に複製されたときに発生しました そうではなく、最終セットはまだボードを完全に開くには不十分でした。



最終的に、私は次のことを行うことにしました。最初に意図的に冗長なヒントのセットを作成し、それらの位置を解決しようとします。 うまくいかなかった場合はセットを再作成しますが、うまくいった場合は1つのプロンプトで再帰的に破棄し、解決策を見つけようとします。 ある時点で、タスクは解決されなくなり、解決策が見つかった最小限のヒントを取得し、最終的なものとして宣言します。 うまくいきました。



これらの再帰的な構造はすべて残酷に遅くなる恐れがありました（すべての計算はクライアントのブラウザで行われ、アルゴリズムが動作している間、プログラムでパズルを数百回解決しようとし、解決手順には独自の再帰があります...など）少し最適化した後、非常に高速に動作しました。 現代のマシンでは、プロンプトのあるポジションがほぼ瞬時に構築されます。低速で古いマシンでは、約1秒です。



当然、最初はうまくいきませんでした。 私はすぐにいくつかのことを考慮しませんでした。UIなしでテストするのは非常に困難だったため、2、3のユニットテストを記述する必要があり、その結果、2、3のエラーも見つかりましたが、事実は、土曜日の夜遅くにゲームの論理的な部分です私は、グラフィックパーツの実装とユーザーインタラクションを開始することができました。

グラフィックス？ すべてがすでに私たちに引き付けられています！

ゲームボードの場合は、条件を満たす6枚のセットが6セットあり、各セットは特定の属性によって結合されているという条件を満たす写真が必要でした。 私自身はそれらを行うために拷問されていたでしょう-残念なことに、熊が私の耳、手、足の指を含むすべての指を踏みにじったことを描いていました。 しかし、ここでは、Emojioneの顔文字のセットを保存しました。これは最近、Photoshop CCの供給に自由に含まれています。これは、写真家向けのAdobeプランの一部として完全に公式サブスクリプションを持っているため、ライセンス条件が満たされています。 ただし、サブスクリプションがなければ、すべてがうまくいくと思います：Emojioneは自由に配布されるライブラリです。



ちなみに、もちろん、画像はレスポンシブバックラウンドスプライトcssを使用してスプライトにパックされました-これにより、要素のクラスを設定するだけで画像を表示することが可能になり、さらに必要に応じてサイズを簡単に変更できます。 テクノロジー自体についてはすでに多くのことが書かれています-例えば、 ここで読むことができます 。









はい、ヒントの矢印、ヘルプページの丸いボタン、箱の中の紙をシミュレートする競技場の背景、ゲームの読み込み時に表示されるロゴなど、いくつかの絵を自分で描く必要がありました。 ただし、ここでは標準のPhotoshopテクスチャとシェイプが使用されており、これに関して解決できない問題はありませんでした。



ただし、チームに通常のデザイナーがいる場合は、すでに非常に幸運であることを知っておいてください。

失敗の危機にStしているスターリッツ

日曜日は、UIを作成してなめるのに時間がかかりました。 最もシンプルなプレイ可能なバージョンは正午頃に用意されていましたが、それでも快適なゲームとはほど遠いです-元に戻す機能も、位置が正しく/誤って解決されたという通知も、難易度もありませんでした。 最初の2つの機能は純粋に技術的なものでしたが、最後の方法では、それを行いました。最初に開いたセルの数のみが異なる3つのレベル（ライト、ミディアム、ヘビー）を作成しました。 Easyの場合、Mediumの場合は常に10-5、Hardの場合は0から2です。 はい、一部のハードカードでは、最初に単一のセルが開かれませんでした。 さらに、この場合のタスクも解決されています！



ある時点で、各ツールチップにはそれがどのようなものであるかを詳細に説明するツールチップが必要であることに気付きました。 インターネット上のAngular Dartのコンポーネントで利用可能なライブラリをスキャンした後、このツールチップが利用可能なAngular Materialに決めました。 1つの問題-ライブラリはベータ版であり、Angularの最後のベータ版が必要でした。 さて、私たちのものは消えませんでした-アセンブリを安定したAngular 2.2.0からベータ3.0.0にアップグレードし、何も壊れていないように見え、すべてが正常に機能し、喜んで、プロンプトに美しいツールチップを添付し始めました。



約2時間かかりましたが、最終的には次のようになりました。









Dart言語に慣れていない人のための小さな余談。 そこに書かれたコードは、通常のブラウザで直接実行することはできません。特別なコマンドによってJavascriptでコンパイルする必要があります。 しかし、開発のために、GoogleはChromiumブラウザの特別バージョン-Dartiumをリリースします。これには、純粋なDartコードを実行できる統合仮想マシンが含まれています。 すべての開発がこの特別なブラウザで行われていることは明らかです。はるかに高速で、最終バージョンはどこかに配置する必要がある場合にのみコンパイルされます。



だから-ツールチップが得られた、と思った-それは外部ホスティングに中間バージョンを置く時間です。 コンパイルされ、リモートサーバーにアップロードされ、Chromeでそれを開こうとしました。Angularの奥深くでアプリケーションがエラーでクラッシュすることに非常に驚きました。 Stektreysは何も言わなかった。 2時間前、ツールなしで以前のバージョンをアップロードしたとき、それは完全に機能しました。 Dartiumで実行されているコンパイルされていないコードも問題なく機能しました。 しかし、組み立て-いいえ。



そして、それが明らかになりました-Angularベータ版への移行は、おそらく最初はそうであったように、あまり良いアイデアではないでしょう-誰もそのパフォーマンスを保証しません。 2日目の夕方までに時間が非常に速く動いていることに突然気づき、ツールチップをゼロからやり直す必要があり、時間の浪費にめちゃくちゃ残念でした。



最後の手段として、私は30分ほどプロファイルフォーラムを読みました。あるアカウントで、私と同じ問題を持つ参加者からの質問を突然見つけました。 さらに、彼らは彼に答えました-20分前（！）、数時間前にリリースされたDart SDK自体を最新バージョンに更新するように彼にアドバイスしました。



ローカルマシンでDartを必死に更新し、パッケージを収集し、サーバーに配置して、チェックします-動作します。



私は息を吐きます-今度はそれが過ぎ去りました。



深刻な教訓-すべてを考慮することはおそらく不可能ですが、ハッカソンを開始する前に、可能な限り何をどのように使用するか、どのライブラリー、相互に互換性があるか、これらすべての落とし穴がある可能性があるかを考える必要があります。 ツールチップがAngular素材のベータ版のみであることにすぐに気付いたら、おそらくリスクを冒さずに、自分で書く必要があることをすぐに知ったでしょう。 または、別のライブラリを探します。

フィニッシュラインで...

夕方の残りは、ヘルプページの作成に進みました。 そのときまでに、彼の目はすでに山に集まっていました.1日あたりのコーヒー消費量は数十杯で測定されていましたが、いわゆるオンボーディング（ユーザーがアプリケーションに慣れるプロセス）が可能な限り効果的であることを本当に望みました。 実装に費やす時間が限られていることを考えると、それはおそらくあまりよくありませんでしたが、それでも、何よりも優れています-少なくともユーザーは、彼らが世話をしていることを見て、彼にいつも直感的ではないアプリケーションを見せます当然のことながら、彼を待っていることを説明しようとしています。







もうすぐ夜に近くなって、数時間かけてスペルや文体の誤りをキャッチしました。その後、さらに改善しようとするのは無意味だと判断しました。頭が非常にきついと思っていました。ホスティングし、ワークカードに記入し、レビュー用に送信しました。



合計すると、コードを記述するプロセス全体に30時間強かかりました（はい、私はまだ寝ていたことがあります）。さらに、チャートで数時間かかりました。 そして一般的に、Angularベータストーリーを除いて、開発全体が非常にスムーズに進みましたが、すべてが順調に終わり、次回はさらに経験を積むことになります。

...および予期しない結果

評価と議論のプロセスは1週間続きました。 ゲームは多くのフィードバックを収集しませんでした（裁判官だけでなく、イベントの他の参加者も意見や意見を表明できました）。ただし、このフィードバックはほとんど肯定的で、裁判官からの評価はほとんど常に高かったです。 しかし、正直なところ、結果が発表された日に、数百人の参加者の作品の中で私のゲームが最初の場所にあると想像するのは困難でした。 私にとっては、まず最初に、この形式での興味深いプログラミングエクスペリエンスでした。2日間、アイデア、実装、出力での既製の競争力のある製品でしたが、最終的な勝利は確かに楽しいボーナスでした。



そして、2日間コーヒーと食べ物をコンピュータにドラッグしてくれた妻だけが、この勝利を疑いませんでした。 彼女に感謝します。



ゲームの動作バージョンはこちらです： http : //sherlock.netmafia.ru/ （フルHDモニター解像度を強くお勧めします）。



ソースコードリポジトリはhttps://github.com/izolenta/sherlockにあります 。おそらく、誰かがGoogle Dart言語に精通したいと思うでしょう。



読んでくれてありがとう-そして幸運を！