フロントエンドトレーニング:Discord、Jira、SoundCloud、Apple Stock、チェス、声優、通貨レートのクローンを作成

私たちはあなたの注目を集め、自己学習とスキルを磨くためのアイデア/タスク(解決策ではない)をもたらします。



画像



SoundCloudクローン



SoundCloudは、オンラインオーディオ配信および音楽共有プラットフォームです。このサイトでは、好きな曲をダウンロードして共有することができます。



画像



SoundCloudクローンを作成して学習する内容:



  • データベースに曲をロードして保存する方法。
  • メディアプレーヤーでの作業のすべての基本-トラックの再生、巻き戻し、一時停止などの方法
  • 友達とトラックを共有する方法。
  • 曲の継続時間と進行状況を示すグラフを表示する方法。


ジラクローン



Jiraは、バグ追跡、問題追跡、およびプロジェクト管理に使用されます。「ジラ」という名前は、実際には「ゴジラ」を意味する日本語の「ゴジラ」に由来しています。



画像



Jiraクローンを作成して学習する内容:



  • HTMLでのドラッグアンドドロップAPI
  • 役割とユーザー権利の形成。
  • 異なるユーザー間でのタスクの割り当てと再割り当て。
  • タスクに完了のマークを付け、さまざまなタスクをアーカイブ、削除、および編集します。


アップル株クローン



Apple Stocksを使用すると、株式や株式市場を簡単に追跡できます。カスタマイズ可能なリストで見積もりと毎日のダイナミクスを表示し、任意の項目をクリックして、インタラクティブなグラフと主要な詳細を表示します。



画像



Apple Stocksのクローンを作成することによって学習する内容:



  • APIを介して非同期に株価を取得する方法。
  • 株価チャートの作成方法。
  • 価格通知を送信しています。たとえば、株価が10%上昇または下降した場合は、アラートを送信します。
  • あなたが積極的にフォローしているお気に入りの株のリスト。


このAPI使用して、株価に関する情報を取得します。株式市場向けの無料の公開APIをご存知の場合は、下のコメント欄に投稿してください。



チェスクローン



チェスは、8x8グリッドに配置された64個の正方形のチェッカーボードでプレイされる2プレーヤーの戦略ボードゲームです。



画像



チェスのクローンを作成して何を学びますか:



  • 8x8グリッドを表示する方法。
  • 各駒には、チェス盤の周りをどのように移動できるかを規定する特定のルールがあります。したがって、ゲームを従来のチェスのルールに準拠させるためには、ゲームにとって重要なロジックを実装する必要があります。チェスのルールは次のとおりです。
  • HTMLでのドラッグアンドドロップAPI
  • ポイントを追跡し、勝ち、負け、引き分けを追跡する方法。結果をPostgreSQLデータベースに保存する方法


ボイスオーバーテキスト



音声障害を持つ人々のためのテキスト読み上げアプリ。テキスト読み上げソリューションは、製品やサービスをさまざまなユーザーグループにとってより魅力的なものにします。



画像



テキストリーダーのクローンを作成することによって学習する内容:



  • Web Speech APIの使用方法
  • レスポンシブユーザーインターフェイスを作成する方法。
  • 異なる声やアクセントを切り替える方法。


通貨レート計算機



Currency Rate Calculatorは、2つ以上の通貨とそのレートの差を計算します。



画像



通貨計算機のクローンを構築することで学習する内容:



  • APIから通貨レートを取得する方法-このAPIを使用します
  • 両方の通貨のコストと為替レートを表示する方法。
  • 通貨の値の変化に応じてリアルタイムで値を更新する方法。


Discordクローン



Discordはゲーマー向けのオールインワンのボイスおよびテキストチャットですが、無料で安全で、デスクトップとスマートフォンの両方で機能します。Discordは、開発者、ゲーマー、カジュアルユーザーの間のコミュニケーションで非常に人気があります。



画像



Discordクローンを構築することで学習する内容:



  • Websocket APIWebSocketは、チャットルームでリアルタイム通信に使用されます。
  • さまざまなユーザーの役割と権限の形成(たとえば、管理者、コンテンツモデレーター、通常のユーザー)。
  • マイクをアクティブにして、音声通信を開始します。
  • 複数のチャットを作成し、複数のWebSocketを使用する。


画像


SkillFactoryの有料オンラインコースを受講して、スキルと給与の注目の職業をゼロから取得する方法の詳細をご覧ください。












All Articles