フロントエンドのトレーニングタスク:doodle-place、Apple Podcasts、Site Blocker、CSVファイルの解析

Doodle-place clone



画像



doodle-placeは、落書きがアニメーションで表示されるオンラインの世界です。世界中を散策したり、世界中のユーザーが作成したDoodleを表示したり、投稿したりできます。



doodle-placeのクローンを作成して何を学びますか:



  • 使用するJavaScriptでのCanvas APIを画面上でいたずら書きのようなグラフィックスを描画します。
  • 2DグラフィックスとWebGL APIを操作するためのテクニック
  • 画像などのユーザー入力を操作し、結果をデータベースに保存します。


CSVファイルをJSONに解析する



このアプリケーションは、d3-dsv(クライアント側)を使用してCSVファイルを解析します。d3-dsvはd3(一般的なデータ視覚化ライブラリ)に含まれているユーティリティですが、ここに示すように、単体で使用することもできます。



画像



CSVからJSONへのパーサーを作成して何を学びますか。





サイトブロック拡張クローン



サイトブロッカーは、ドメイン名を追加して1つ以上のサイトをブロックできるWeb拡張機能です。気を散らすことなく効果的に時間を管理します。



画像



「サイトブロッカー」のクローンを作成することで学習する内容:





クローンの概念



Notionは、軽量で高速かつ注意散漫のないメモを取るアプリなどです。私は自分のタスクとアイデアを追跡するために使用します。Notionで私が気に入っているのは、Markdownマークアップ言語のサポートです。



制限はありません。モバイル版またはウェブ版だけでなく、デスクトップ版のNotionも作成できます。お気に入りの環境(または最も探索したい環境)を選択します。



画像



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



  • 先に進みたい場合は、CSSのグリッドを使用してくださいグリッドは、レイアウトの作成に最適です。
  • データベースでの作業。後でクエリできるデータベースにノートを保存する必要があります。
  • DevOps。完了したら、アプリをWebまたはアプリストアにデプロイします。あなたがしたことを世界に示しましょう。


アップルポッドキャストクローン



iOSおよびmacOS用のポッドキャストアプリでは、アプリの下部にあるナビゲーションアイコンを使用して、人気のポッドキャストや新興のポッドキャストに簡単にアクセスできます。



画像



ポッドキャストのクローンを作成することによって学習する内容:



  • APIからデータを取得する方法。このアプリケーションの場合、データはポッドキャストで表されます。このAPI使用して、すべてのポッドキャストを取得します。
  • Mac OSまたはiOSアプリ用のデスクトップアプリを開発し、アプリストアに展開する方法。あなたがウェブ用に構築するのが好きなら、それも素晴らしいです!
  • ネイティブインターフェイスの構築。たとえば、画面にデータを表示する方法を学習します。


画像


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












All Articles