私たちの反ハッカソンは、ストリーミングのための寄付を受け入れるためのソリューションを備えた経済学部の学生チームによって獲得されました。 しかし何よりも素晴らしいのは、YaStreamサービスの創設者である Maxim Dyakovがプロジェクトについて話すことです-マイクを作者に渡します。

カットの下では、ChromeAppsとElectronの間にはいくつかのスローイングがあり、Yandex SpeechKitサンプルからの印象と、一般的にアンチハッカソン形式の開発に関する印象があります 。

雨の多い夏の夕方、仲間と私はYandex.Moneyの反ハッカソンに参加することにしました。 理由は適切でした。長い間、ストリームサービスと寄付の送信プロセスに関連するアプリケーションを作成したかったからです。 私たちのチームは4人で構成されました。デザイナーNaumov Alexanderは、モバイルアプリケーションの責任者Javid Khalilov、チーフPCクライアントのAlexander Kobrinと私、バックエンド開発者およびイデオロギーのインスピレーションを担当しました。

それは活発に判明しました-2週間後、最小限の実行可能な製品YaStreamが登場しました。

なぜ誰もがストリームにお金を払うのでしょうか

一般的な理解のために、寄付がどのように送られるか、そして最も重要なことには、なぜ寄付が必要なのかについて少しお話しします。

この記事では、ストリーミングとはゲームのストリーミングを指します。 つまり、誰かが自分のゲームプレイをネットワークにブロードキャストし、同時にこれすべてについてコメントするときです。 人気のあるストリーマーには、新しい「エピソード」のリリースをフォローし、コメント、メッセージ、またはお金を送る視聴者の視聴者がいます。 もちろん、観客にとって実用的な目的のない自発的なすべてのものは、純粋に楽しみのためだけです。

視聴者へのストリーミングは楽しむための単なる方法であるため、誰かに50ルーブルを支払う理由は明らかではありません（これは映画ではなく、接続時にチケットを要求しません）。 しかし、オンラインストリーミング業界はブログよりも勢いを増しています。つまり、良好なキャッシュフローなしでは実現できません。 一般に、そのような明確な答えはありません。 地下鉄の若いミュージシャンにコインを投げて、私たちはサービスや商品を受け取りませんが、パフォーマーの創造性に感謝するだけです-同じことがここにあります。

ストリームの編成の技術面については、画面からビデオをキャプチャしてブロードキャストするための製品が長い間知られていますが、賢明な寄付収集システムはありません。 説明的なものは次のとおりです。

1. ユーザーが最小限の労力で一定量をストリーマーに転送できるようにします。
2. 送金の過程でユーザーからストリーマーへのメッセージ（テキストまたは音声）の送信をサポートします。
3. ストリーマーにメッセージを表示し、特定のユーザーからお金を受け取ることについて警告します。
4. オンエアでユーザーメッセージを声に出して読むことができ、マットを「ザッピング」するための設定や、ストリーマーに適さない言葉が含まれています。
5. ストリーマーが使い慣れた環境を放棄することを強制しないように、あらゆるストリーミングソフトウェアと連携できます。

少なくともこれらの要件を満たし、独自の手数料を払わない製品はありません。 さらに、彼ら自身の開発は、ほとんどの製品のお金の転送に責任があり、それは消費者の疑いを増します。 また、賢明な製品は存在しないため、スタートアップの理由があることを意味します。

寄付を転送する製品を1つだけ構築することは意味がありません。これにより、機能が制限され、開発の可能性がほぼゼロになります。 そのため、ビデオでご覧いただけるアルファ版の包括的なソリューション「 YaStream 」を作成することにしました。

したがって、ストリーマーはYaStreamインターフェイスを認識します。

競合他社に対するこのプロジェクトの主な利点は、YaStreamがスクリーンキャプチャとブロードキャストのために通常のストリーマーアプリケーションとの統合を必要としないことです。 代わりに、必要なインターフェイスとユーザーメッセージを画面に表示するだけで、ストリーミングアプリケーションによってキャプチャされます。

ストリーマーの幸せを築く

私は市場をもっとカバーし、同時に反ハッカソンで何か新しいことを学びたいと思っていたので、ソリューションはクロスプラットフォームであると想定されていました-すべてのストリーミングプラットフォームと関連ソフトウェアをサポートします。 最初は、Chrome Appsがベースとして選択されました。これは、APIのデバッグと開発にほぼ理想的なツールのように見えました（特に、Chromeで書かれたPostmanのアプリケーションのデバッグが好きでした）。 その後、多くのプラットフォームでデスクトップクライアントをChromeアプリですぐに作成できます。

私の意見では、Web APIを開発するための最高のツール（Chrome用バージョンのPostman）に触発されて、Google Chromeアプリをベースとして使用することにしました。 このプラットフォーム用に作成されたアプリケーションは、クロムエンジンを使用してGoogle Chromeや他のブラウザで動作します。これにより、簡単なクロスプラットフォームソリューションが実現します。

動機付けの要因は次のとおりです。

• Google ChromeやChromiumエンジンを搭載したその他のブラウザは市場の大部分を占めているため、ソリューションは「雑食」になります。

  
  
  
  
  
  
  
• このプラットフォームでの開発は、Marc Rochkindの240ページの本に収まるニュアンスのある典型的なWebフロントエンドです。

バックエンドについては、ASP.NETという選択肢が明確です。 Ubuntuでサーバーを設定した経験の後、素敵なAzure UIを理解したら、後戻りすることはできません。 私たちの疑問の最後の釘は、1か月間の無料のAzureサブスクリプションによってもたらされました。これは、アンチハッカソンの条件ではまさにそれです。

もちろん、この便利さと無料の領域全体では、いくつかの無限の瞬間がありました。

アラン・クーパーによる「患者の手による精神科病院」という本に感銘を受けたという事実を共有したいと思います。 この本はインタラクションデザインの理論に焦点を当てているため、2番目のコンポーネントである観客については、戦闘でのキャラクター形成などのテクニックを試してみたかったのです。

製品の主要コンポーネント（デスクトップアプリケーション、Webフォーム、モバイルアプリケーション）を決定すると、フロントエンド開発者は、GoogleがWindows、Mac、LinuxのChromeアプリのサポートを停止していることに突然気付きました。 厄介な一時停止、失望、resみ、受け入れ。

King is dead、long liveキングエレクトロン

Electronのオープンソースフレームワークは素晴らしい代替手段でした。 もちろん、プラットフォームの斬新さは警戒されていましたが、人気の高まりが懸念を相殺しました。 モバイルアプリケーションについては、これを言ってみましょう。モバイルチームのチームにはAndroid開発者しかいませんでした。 YaStreamのアーキテクチャは、クライアントサーバーとして選択され、Microsoft SQLがバックエンドデータベースとして選択されます。

アーキテクチャを詳細に分析したり、ブロック図を描いたりすることは意味がないと思います。 -それは退屈で、特定のプロジェクトに固有のものです。 私自身の試行錯誤の経験に関するいくつかのヒントを共有したい：

• 将来的には、識別子としてグローバルにユニークなものを選択することをお勧めします。 たとえば、オンラインブロードキャストのIDとして、URLを選択しました。これにより、100万の問題を一挙に解決できました（一意性、クイックアクセス、APIストリーミングプラットフォームでの作業を継続する機能）。
• 将来のサービスのプラットフォームを徹底的に検討します。これにより、より高いレベルの実装で多くの時間を節約できます。 最終段階ですべてを途中で書き直す必要があることを確認するよりも、プラットフォームで数日過ごす方が良いです。
• それがハッカソンであり、将来性のないプロジェクトでない限り、すべてのエンティティ、ロジック、相互作用などをすぐに文書化します。 これがすべて先送りになるほど、より多くの情報を覚えておく必要があります。 大規模なプロジェクトでは、すべてを覚えておくのは簡単ではないため、すぐに行うのが最善です。

次に、サービスのWEB APIの開発フェーズが始まりました。主なタスクは、ストリーマーのセキュリティを確保することでした。誰かが寄付の設定を変更したり、ロゴを変更したり、不親切な何かを開始したりします。

そのため、次の保護ツールがプラットフォームに登場しました。

• 転送ごとに、ラベルフィールドに特別なラベルが入力され、トランザクションID（取得できる場合）が寄付データに分類されます。 これは、ストリーマー側のYandex.Money APIとの便利な作業、および支払いシステムでの転送の存在を確認するために必要でした。
• YaStreamが行った寄付に関するデータを受け取ると、ユーザークライアントはYandex.Moneyに同じIDの操作またはラベルフィールドに一致するすべての操作を要求します。 Donatは、トランザクションが見つかった場合にのみストリームに表示されます。
• ユーザークライアントとストリーミングプラットフォーム間のすべての通信は、支払いシステムの認証段階で発行される特別なYaStreamトークンを使用して行われます。
• それとは別に、経験がなかったため、写真のアップロードをいじらなければなりませんでした。APIの操作を簡単にするために、写真のホスティングが少し必要でした。

このすべての研究の結果は、「バックエンド作品」として説明することができ、私の意見では、初期のプロトタイプを完全に特徴づけています。 次に、リファクタリング、リファクタリング、そして再び魅力的なリファクタリングがまだ先にあります。

エキサイティングな組み立て段階

動作するビルドを作成するとき、Reactを接続できませんでした。その結果、アプリケーションは起動時にワイルドエラーを生成しました。

ビルドしようとしたときにキャッチしたものの例。

私たちのチームはStackoverflowとGitHubの問題を掘り下げたので、新しいトピックを開いて知識のある人を探すだけです。 そこで、Electronと@akashnimareの開発者に会いました。彼は適切な経験を持ち、それを共有する準備ができていました。 さらに、彼らはこのプラットフォームを使用するつもりの人が行くべきロシア電子コミュニティを発見しました。

ファイルの保存に伴い、問題も発生しました。そこから、アプリケーションの基礎にさらに注意を払うためのアドバイスが生まれました。 怠beである必要はありませんでしたが、mainからのlocal-storageが利用できないことが判明したときにコードを書き換えないように、電子ストレージライブラリまたはelectron-storage-jsonライブラリを最初から接続する必要がありました。

Yandex SpeechKitは、見慣れないフレームワークの暗黒の王国で光線となり、優れた結果を生み出しただけでなく、ドキュメントの調査に最小限の時間を必要としました。 実際、ユーザーの寄付からメッセージを音声で送信するための望ましいオプションは、次の3行のコードの後に​​判明しました。

const tts = new ya.speechkit.Tts({ apikey: 'ffffffff-2222-4444-0000-1111111111', emotion: 'good', speed: 1.2 }) ... tts.speak(donate.text_data, { speaker: 'zahar' })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

個人のAPIキーを示し、音声（zahar）、速度、感情的な色（良い）を選択するだけで十分です-これで完了です。

あなたの背後には数リットルのパワーエンジニアと3週間の厳しい開発があります

要約すると、私はスタートアップとして私たちは最初の段階にさえいません。 しかし、最初の目標の観点から、私たちは主なことを達成しました：ほぼすべての機能を実装することができました（音声メッセージを除き、実際のプロジェクトの若い開発者にはほとんど不可能です）。 この場合、誰も口論をせず、4人全員がボートに乗っており、成功を信じ続けています。 したがって、達成はロック解除されますが、まだ先は長い道のりです。

私たちの経験があなたにとって興味深いと思われるなら、私はコメントで質問に答えたいです。

YaStreamプロジェクトのページ 。