コーディングスキルを向上させるためのその他のプロジェクトのアイデア

2週間前に、コーディングスキルをレベルアップするために構築できる15のプロジェクトアイデアを含む記事を公開しました。人々はそのリソースに非常に興奮していました。

また、私がその記事を公開して以来、app-ideasリポジトリはほぼ3000の星を獲得しています。それは非常識です!?

どうもありがとうございました!?

この投稿では、それ以降にリポジトリに追加されたいくつかの新しいプロジェクトについて説明します。

簡単に言うと、すべてのプロジェクトは、プロジェクトを完了するために必要な知識と経験に基づいて3つの層に分けられます。リポジトリの階層の説明を確認してください。

以下に、2つの初級、4つの中級、3つの上級プロジェクトのアイデアを示します。

1.電卓

Tier: 1 —初心者

電卓は、利用できる最も便利なツールの1つであるだけでなく、アプリケーションのUIとイベント処理を理解するための優れた方法でもあります。この問題では、整数の基本的な算術計算をサポートする電卓を作成します。

スタイリングはあなた次第ですので、あなたの想像力を使って創造的になってください!また、基本的な機能とエッジケースをよりよく理解するために、モバイルデバイスで電卓アプリを試してみる価値があるかもしれません。

制約

  • このeval()関数を使用して計算を実行することはできません

ユーザーストーリー

  • ユーザーは、入力された現在の番号または最後の操作の結果を示すディスプレイを見ることができます。
  • ユーザーは、0〜9の数字のボタン、操作— '+'、 '-'、 '/'、および '='、 'C​​'ボタン(クリア用)、および 'AC'ボタンを含む入力パッドを見ることができます。 (すべてクリアするため)。
  • ユーザーは、入力パッドの数字をクリックして、最大8桁のシーケンスとして数字を入力できます。8を超える数字の入力は無視されます。
  • ユーザーは操作ボタンをクリックして、その操作の結果を次の場所に表示できます。_前の操作の結果と最後に入力された番号OR_最後に入力された2つの番号OR *最後に入力された番号
  • ユーザーは「C」ボタンをクリックして、最後の番号または最後の操作をクリアできます。ユーザーの最後のエントリが操作であった場合、表示はその前の値に更新されます。
  • ユーザーは「AC」ボタンをクリックして、すべての内部作業領域をクリアし、表示を0に設定できます。
  • 操作が最大8桁を超える場合、ユーザーには「ERR」が表示されます。

ボーナス機能

  • ユーザーは「+/-」ボタンをクリックして、現在表示されている数字の符号を変更できます。
  • 入力パッドに小数点(。)ボタンが表示され、最大3桁の浮動小数点数を入力したり、任意の1つの数値に入力した小数点以下の最大桁数まで操作を実行したりできます。

便利なリンクとリソース

  • 電卓(ウィキペディア)
  • MDN

プロジェクトの例

2.レシピアプリ

Tier: 1 —初心者

あなたはこれに気付いていないかもしれませんが、レシピは料理のアルゴリズムにすぎません。プログラムのように、レシピは一連の必須のステップであり、正しく従えば、おいしい料理になります。

レシピアプリの目的は、ユーザーが簡単にレシピをフォローできるようにレシピを管理できるようにすることです。

制約

  • このアプリの初期バージョンでは、レシピデータがJSONファイルとしてエンコードされている場合があります。このアプリの初期バージョンを実装した後、これを拡張して、ファイルまたはデータベースにレシピを維持することができます。

ユーザーストーリー

  • ユーザーはレシピタイトルのリストを見ることができます
  • ユーザーはレシピのタイトルをクリックして、レシピのタイトル、食事の種類(朝食、昼食、夕食、または軽食)、提供する人数、難易度(初級、中級、上級)、材料のリストを含むレシピカードを表示できます。 (金額を含む)、および準備手順。
  • ユーザーが新しいレシピのタイトルをクリックして、現在のカードを新しいレシピに置き換えます。

ボーナス機能

  • ユーザーは、準備が整った後のアイテムの外観を示す写真を見ることができます。
  • ユーザーは、検索ボックスに食事の名前を入力し、[検索]ボタンをクリックすることで、レシピのタイトルのリストにないレシピを検索できます。任意のオープンソースレシピAPIをレシピのソースとして使用できます(以下のMealDBを参照)。
  • ユーザーは検索語に一致するレシピのリストを見ることができます
  • ユーザーはレシピの名前をクリックして、そのレシピカードを表示できます。
  • 一致するレシピが見つからなかった場合、ユーザーには警告メッセージが表示されます。
  • ユーザーは、APIを介して検索されたレシピのカードの[保存]ボタンをクリックして、このアプリのレシピファイルまたはデータベースにコピーを保存できます。

便利なリンクとリソース

  • フェッチの使用
  • Axios
  • MealDB API

プロジェクトの例

3.描画アプリ

Tier: 2 —中級

ウェブ上のキャンバスにデジタルアートワークを作成してオンラインで共有したり、画像としてエクスポートしたりできます。

ユーザーストーリー

  • ユーザーcanvasはマウスを使用して描画できます
  • ユーザーは色を変更できます
  • ユーザーはツールのサイズを変更できます
  • ユーザーはボタンを押してクリアすることができます canvas

ボーナス機能

  • ユーザーが画像としてアートワークを保存することができます(.png.jpg、などのフォーマット)
  • ユーザーが別の図形を描画することができます(rectanglecirclestar、など)
  • ユーザーはソーシャルメディアでアートワークを共有できます

便利なリンクとリソース

  • p5jsを使用して描画アプリケーションを作成する方法を学ぶ

プロジェクトの例

4.絵文字翻訳者

Tier: 2 —中級

絵文字は現代社会の共通語になっています。それらは楽しくて速いコミュニケーション方法ですが、感情や反応を伝えるための非常に表現力豊かなメカニズムでもあります。

Emoji Translatorアプリの目的は、ユーザーが入力したテキストを、元のテキストの1つ以上の単語、および対応する絵文字がない単語から翻訳された同等の絵文字文字列に翻訳することです。

ユーザーストーリー

  • ユーザーは、単語、数字、句読点の文字列をテキストボックスに入力できます
  • ユーザーは「翻訳」ボタンをクリックして、入力したテキスト内の単語を対応する絵文字に翻訳できます。
  • 「翻訳」がクリックされたが、入力テキストボックスが空であるか、最後の翻訳から変更されていない場合、ユーザーには警告メッセージが表示されます。
  • ユーザーは、入力されたテキストのテキスト要素を、出力テキストボックスで同等の絵文字に翻訳して確認できます。絵文字がないテキスト要素は変更されません。
  • ユーザーは「クリア」ボタンをクリックして、入力テキストボックスと出力テキストボックスをクリアできます。

ボーナス機能

  • 開発者は絵文字の同義語機能を実装して、アプリがさまざまな単語を絵文字に翻訳できるようにします。
  • ユーザーは、入力テキストが入力された言語を言語のドロップダウンリストから選択できます。

便利なリンクとリソース

完全な絵文字リストv12.0

プロジェクトの例

絵文字翻訳

5. MEME GENERATOR APP

Tier: 2 —中級

ユーザーが画像の上にテキストを追加してカスタムミームを生成できるようにします。

ユーザーストーリー

  • ユーザーはキャンバスに表示される画像をアップロードできます
  • ユーザーは画像の上部にテキストを追加できます
  • ユーザーは画像の下部にテキストを追加できます
  • ユーザーはテキストの色を選択できます
  • ユーザーはテキストのサイズを選択できます
  • ユーザーは結果のミームを保存できます

ボーナス機能

  • ユーザーはテキストのフォントファミリーを選択できます
  • ユーザーはソーシャルメディア(twitter、reddit、facebookなど)でミームを共有できます
  • ユーザーはテキストをドラッグして、画像の上に好きな場所に配置できます
  • ユーザーは画像の上に図形を描くことができます(円、長方形、またはマウスを使った自由な描画)

便利なリンクとリソース

キャンバスの操作は、p5jsライブラリによって非常に簡単になります。

プロジェクトの例

imgflipによるミームジェネレータ

6.タイピングの練習

Tier: 2 —中級

いくつかのことは非常に明白であり、簡単に見落とされる可能性があります。開発者として、すばやく正確に入力する能力は、開発の生産性に影響を与える1つの要因です。タイピング練習アプリの目的は、進捗状況を測定できるように、指標とともにタイピング練習を提供することです。

タイピングの練習では、特定の時間間隔内に入力する必要のある単語が表示されます。単語が間違って入力された場合、それは画面に残り、時間間隔は同じままです。ただし、単語が正しく入力されると、新しい単語が表示され、時間間隔がわずかに短縮されます。

うまくいけば、この繰り返しの練習はあなたがあなたのタイピング速度と正確さの両方を改善するのを助けるでしょう。

ユーザーストーリー

  • ユーザーは、アプリウィンドウに表示される単語を入力する必要がある時間間隔を確認できます。
  • ユーザーは、成功した試行の数と合計試行の数をスコアボックスで確認できます。
  • ユーザーは「練習開始」ボタンをクリックして練習セッションを開始できます。
  • ユーザーは、テキストボックスに表示されたプロンプトワードを見ることができます。
  • ユーザーは、テキスト入力ボックスに単語の入力を開始できます。
  • 間違った文字を入力すると、入力した文字が点滅し、テキスト入力ボックスがクリアされます。
  • ユーザーは、テキスト入力ボックスの横に、間違った文字が入力された場合に再試行する必要があることを示すメッセージが表示されます。
  • ユーザーは、スコアボックスで増分された合計試行回数を確認できます。
  • 単語が正しく入力されている場合、ユーザーはおめでとうメッセージを見ることができます。
  • ユーザーは、単語が正しく入力されている場合、単語を少しずつデクリメントして入力する必要があることを確認できます。
  • 単語が正しく入力された場合、ユーザーはスコアボックスに増分された成功した試行の数を確認できます。
  • ユーザーは「練習の停止」ボタンをクリックして練習セッションを停止できます。

ボーナス機能

  • ユーザーは、新しい単語が表示されたとき、単語が正しく入力されたとき、または単語に間違った文字が入力されたときに、固有の可聴音信号を聞くことができます。
  • ユーザーはアプリにログインできます
  • ユーザーは、すべての練習セッションにわたる累積パフォーマンス統計を確認できます。

便利なリンクとリソース

  • キーダウン
  • setInterval

プロジェクトの例

Twiddlerタイピングチューター

7.エレベーター

Tier: 3 —上級

エレベーターのない世界を考えるのは難しいです。特に、毎日20段の階段を上り下りする必要がある場合。しかし、考えてみれば、エレベーターは、Webアプリケーションが登場するずっと前から、イベントとイベントハンドラーの元々の実装の1つでした。

Elevatorアプリの目的は、エレベーターの操作をシミュレートすることです。さらに重要なのは、建物の居住者がエレベーターを使用するときに生成されるイベントを処理する方法です。このアプリは、どの階からでもエレベーターを呼び、エレベーター内のボタンを押して行きたい階を示す乗員をシミュレートします。

制約

  • 各フロアの上下ボタンに単一のイベントハンドラーを実装する必要があります。たとえば、4つのフロアがある場合、8つではなく1つのイベントハンドラーを実装する必要があります(フロアごとに2つのボタン)。
  • 同様に、エレベータのコントロールパネルのすべてのボタンには、ボタンごとに一意のイベントハンドラではなく、単一のイベントハンドラを実装する必要があります。

ユーザーストーリー

  • 1階にエレベータシャフト、エレベータ、上ボタン、2階と3階に上ボタンと下ボタン、4階に下ボタンの4階建ての建物の断面図を見ることができます。
  • ユーザーは、図の横にある各フロアのボタンが付いたエレベータのコントロールパネルを見ることができます。
  • ユーザーは、任意のフロアの上下ボタンをクリックして、エレベーターを呼び出すことができます。
  • ユーザーは、任意のフロアの上下ボタンをクリックしてエレベータを要求すると、クリックされた順序でキューに入れられ、サービスが提供されることを期待できます。
  • ユーザーは、エレベータが呼び出された床までシャフトを上下に移動するのを見ることができます。
  • ユーザーは、エレベータのコントロールパネルをクリックして、移動先のフロアを選択できます。
  • ユーザーは、エレベータが5秒間一時停止し、コントロールパネルのフロアボタンがクリックされるのを待つことができます。その時間内にフロアボタンがクリックされない場合、エレベータは次のコールリクエストを処理します。
  • ユーザーは、処理の要求がない場合、エレベータが1階に戻ることを期待できます。

ボーナス機能

  • エレベータ要求の数が許可されている最大数を超えると、ユーザーは警告通知を見ることができます。この制限は開発者に任されています。
  • エレベータが床に到着すると、ユーザーは音を聞くことができます。
  • ユーザーは、乗員がランダムにフロアに到着するのを確認して、そのフロアのエレベータ呼び出しボタンを上下にクリックするタイミングを示すことができます。
  • ユーザーは、エレベータを呼び出すために到着する新しい乗員間の時間間隔を指定できます。

便利なリンクとリソース

先入れ先出しキュー(ウィキペディア)

プロジェクトの例

8.ファーストフードシミュレーターアプリ

Tier: 3 —上級

ファーストフードアプリは、シンプルなテイクアウトレストランの運営をシミュレートし、開発者がPromisesとSOLIDの設計原則に関する知識を活用できるように設計されています。

このアプリは、テイクアウトレストランの顧客が注文を出し、準備が整い、集荷カウンターに配達されるのを待つ様子をシミュレートします。注文後、顧客は注文が発表されるのを待ってから、注文を受け取り、ダイニングエリアに進みます。

このアプリを構成するユーザーストーリーは、次の4つの異なる役割を中心にしています。

  • ユーザー—アプリケーションを使用するエンドユーザー
  • 顧客—シミュレートされた顧客
  • Order Taker —シミュレートされたOrder Taker
  • クック—シミュレートされたクック
  • サーバー—シミュレートされたサーバー

このアプリにはかなりの数のユーザーストーリーがあります。しかし、圧倒されないでください。時間をかけて、UIだけでなく、さまざまなアクター(役割)がどのように相互作用し、アジャイルの原則に従ってアプリを段階的に構築するかをスケッチします。

制約

  • 注文チケットは、2つの異なるタイプのPromiseとして表すことができます。1つはCookが注文を準備している間サーバーが待機し、もう1つは顧客がサービスラインにいる間待機します。
  • 開発を選択した言語で、JS Promisesと同等のネイティブを使用します。JS開発者は、ではなくネイティブPromisesを使用する必要がありますasync/await
  • 母国語の機能を使用してこのアプリを作成します。シミュレーションパッケージまたはライブラリを使用することはできません。
  • 新規顧客は、一定の時間間隔で注文ラインに到着します。言い換えれば、新規顧客は一定の割合で到着します。
  • 注文チケットも一定の時間間隔で履行されます。それらは一定の速度で完了します。

ユーザーストーリー

アプリケーション操作

  • ユーザーは、顧客の到着の時間間隔と料理人による注文チケットの履行の時間間隔を入力できる入力領域を見ることができます。
  • 顧客の到着間隔または注文履行間隔が誤って入力された場合、ユーザーはカスタマイズされた警告メッセージを見ることができます。
  • ユーザーは、[開始]ボタンをクリックしてシミュレーションを開始できます。
  • ユーザーは、注文を待っている顧客の数を示すテキストボックスを含む注文明細領域を見ることができます。
  • ユーザーは、現在行われている注文番号を示すテキストボックスを含む注文領域を見ることができます。
  • ユーザーは、準備中の注文番号を示すテキストボックスと、待機中の注文を順番に一覧表示するテキストボックス、および待機中の注文のを含むキッチンエリアを見ることができます。
  • ユーザーは、顧客が現在集荷できる注文番号を示すテキストボックスと、サービスラインで待機している顧客の数を示すテキストボックスを含む集荷エリアを見ることができます。
  • ユーザーは、[停止]ボタンをクリックして、いつでもシミュレーションを停止できます。

ボーナス機能

  • ユーザーは、受注者が注文チケットを作成するのにかかる時間を指定できます。
  • ユーザーは、サーバーが顧客に注文を配信するのにかかる時間を指定できます。
  • ユーザーは、[開始]ボタンがクリックされてからシミュレーションを実行する合計時間を指定できます。
  • ユーザーは、ワークフローを移動するときに顧客と注文のアニメーションビューを見ることができます。

便利なリンクとリソース

  • ファーストフードシミュレーター—論理ワークフロー
  • アジャイルマニフェストとアジャイルソフトウェアの12の原則
  • すべての開発者が知っておくべき確かな原則
  • Promisesの使用
  • 約束する

9.シェルゲーム

Tier: 3 —上級

シェルゲームは、古代ギリシャにまでさかのぼる古典的なギャンブルゲームです。それをプレイするには、3つのシェル、エンドウ豆、オペレーターによる手の器用さ、およびプレーヤー側の鋭い観察スキルが必要です。オペレーターがプレイヤーを騙しやすいので、これは古典的な詐欺ゲームでもあります。後者はこのアプリの意図ではありません。

このシェルゲームは、古典的なシェルゲームへのグラフィカルインターフェイスを提供し、プレイヤーに正直なゲームを提供することを目的としています。私たちのゲームは、エンドウ豆と一緒にキャンバス上に3つのシェルを描画し、エンドウ豆を1つのシェルの下に移動し、特定の時間間隔でシェルをシャッフルします。次に、ユーザーはエンドウ豆が隠れていると思うシェルをクリックする必要があります。ユーザーは、エンドウ豆が見つかるまで推測を続けることができます。

ユーザーストーリー

  • ユーザーは、3つのシェルとエンドウ豆のあるキャンバスを見ることができます。
  • ユーザーは、エンドウ豆が隠されるシェルをクリックできます。
  • ユーザーは、クリックされたシェルの下でエンドウ豆が動くのを見ることができます。
  • ユーザーは「シャッフル」ボタンをクリックして、シェルのアニメーションによるシャッフルを5秒間開始できます。
  • ユーザーは、アニメーションが停止したときにエンドウ豆が隠れていると信じているシェルをクリックできます。
  • ユーザーは、クリックされたシェルが上昇して、エンドウ豆がその下に隠れているかどうかを確認できます。
  • ユーザーは、エンドウ豆が見つかるまでシェルをクリックし続けることができます。
  • エンドウ豆が見つかると、ユーザーはおめでとうメッセージを見ることができます
  • ユーザーは、エンドウ豆を隠すシェルをクリックして新しいゲームを開始できます(上記のステップ2)。その後、上記の手順が繰り返されます。

ボーナス機能

  • ユーザーは、勝利数とプレイしたゲーム数を含むスコアパネルを見ることができます。
  • エンドウ豆が殻の下に隠されていると、プレイされるゲームの数が増えることがわかります
  • ユーザーは、最初の推測でエンドウ豆が見つかったときに増加した勝利数を確認できます。
  • ユーザーは、クリックすると、エンドウ豆を隠してアニメーション化するシェル(色、サイズ、またはその他の効果)を確認できます(正しい推測)。

便利なリンクとリソース

  • シェルゲーム(ウィキペディア)
  • Javascript HTMLDOMアニメーション
  • p5jsアニメーションライブラリ

プロジェクトの例

結論

より多くのアプリケーション/プロジェクトのアイデアを見つけたい場合は、前の記事とリポジトリをチェックすることを忘れないでください。

また、この記事とリポジトリからの情報が何らかの形で役に立った場合は、必ずスターを付けてください。このようにして、他の人もそれを見つけて利益を得ることができます!ありがとうございました!

このプロジェクト全体をどのように改善できるかについて何か提案はありますか?我々に教えてください!フィードバックをお待ちしております。

あなた自身のアイデアで貢献することを歓迎します!アプリのアイデアに関しては、このリポジトリを頼りになるリソースにすることができます。

もともとwww.florin-pop.comで公開されました。