コーディングスキルをレベルアップするために構築できるアプリのアイデアをいくつか紹介します。

何かを作りたいと思ったことがありますが、どうしたらよいかわかりませんでしたか?著者が時々「ライターズブロック」を持っているように、それは開発者にも当てはまります。

友人のジムと一緒に、この問題を完全に解決することを目的としたアプリケーションのアイデアのコレクションを作成しました。

これらのアプリケーションは次のとおりです。

  • コーディングスキルを向上させるのに最適
  • 新しいテクノロジーを試すのに最適
  • あなたの次の雇用者/クライアントを感動させるためにあなたのポートフォリオに追加されるのは素晴らしいことです
  • チュートリアル(記事またはビデオ)の例として使用するのに最適です
  • 完了が簡単で、新機能で簡単に拡張できます

これは単なるプロジェクトのリストではなく、各プロジェクトを十分に詳細に説明したコレクションであるため、ゼロから開発することができます。

各プロジェクト仕様には、次のものが含まれています。

  1. 明確で説明的な目的
  2. 実装する必要のあるユーザーストーリーのリスト(これらのストーリーは、To-Doの強制リストよりもガイドラインとして機能します。必要に応じて独自の機能を追加してください)
  3. 基本プロジェクトだけでなく、スキルも同時に向上させるボーナス機能のリスト
  4. プロジェクトを完了するために必要なものを見つけるのに役立つすべてのリソースとリンク

プロジェクト

すべてのプロジェクトは、プロジェクトを完了するために必要な知識と経験に基づいて3つの層に分けられます。これらの層は次のとおりです。

  1. 初心者—学習の旅の初期段階にある開発者。通常、ユーザー向けアプリケーションの作成に重点を置いている人。
  2. 中級—学習と経験の中間段階にある開発者。彼らはUI / UXに慣れており、開発ツールを使用し、APIサービスを使用するアプリを構築しています。
  3. 上級—上記のすべてを持ち、バックエンドアプリケーションやデータベースサービスの実装などのより高度な技術を学んでいる開発者。

以下に、各層に5つのプロジェクト合計15)がありますが、このGitHubリポジトリには(現在)30を超えるプロジェクトがあります。今後、さらにプロジェクトを追加する予定ですので、ぜひチェックしてみてください。あなたは助けて大歓迎です!(これについては、以下の「貢献」セクションで詳しく説明しますか?)

1.ノートアプリ

Tier: 1 —初心者

説明:後で使用するためにメモを作成して保存します。

ユーザーストーリー

  • ユーザーはメモを作成できます
  • ユーザーはメモを編集できます
  • ユーザーはメモを削除できます
  • ブラウザウィンドウを閉じるとメモが保存され、ユーザーが戻るとデータが取得されます

ボーナス機能

  • ユーザーは、マークダウン形式でメモを作成および編集できます。保存時にMarkdownをHTMLに変換します
  • ユーザーはメモを作成した日付を確認できます

便利なリンクとリソース

  • ローカルストレージ
  • マークダウンガイド
  • Marked —マークダウンパーサー

サンプルプロジェクト

2.クリスマスライト

Tier: 1 —初心者

説明:クリスマスライトアプリケーションは、魅力的なライトディスプレイを作成するために開発の才能に依存しています。あなたの仕事は、7つの色付きの円を連続して描画し、タイマーに基づいて各円の強度を変更することです。円が明るくなると、その前の円は通常の強度に戻ります。

これは、クリスマス休暇中に表示されるものと同様に、一連の波打つライトの効果をシミュレートします。

ユーザーストーリー

  • ユーザーはボタンを押して表示を開始および停止できます
  • ユーザーは強度の変化を制御する時間間隔を変更できます

ボーナス機能

  • ユーザーは、各円の塗りつぶしに使用する色を選択できます
  • ユーザーは強度値を指定できます
  • ユーザーは行内の任意の円のサイズを変更できます
  • ユーザーは、表示に含める行数を指定できます。1行から7行まで選択できます

便利なリンクとリソース

  • サンプル画像
  • AdafruitLEDマトリックス

サンプルプロジェクト

3. FlipImage

Tier: 1 —初心者

説明:リッチWebアプリケーションはユーザーインターフェイスとユーザーエクスペリエンス(UI / UX)に付加価値を与えるために画像に依存しているため、Web開発者は画像操作の基本を理解することが重要です。

FlipImageは、画像操作の1つの側面である画像の回転について説明します。このアプリは、2x2マトリックスで表示される単一の画像を含む正方形のパネルを表示します。各画像に隣接する上向き、下向き、左向き、右向きの矢印のセットを使用して、ユーザーは画像を垂直方向または水平方向に反転させることができます。

このアプリを実装するには、ネイティブHTML、CSS、およびJavascriptのみを使用する必要があります。イメージパッケージとライブラリは許可されていません。

ユーザーストーリー

  • ユーザーは、2x2マトリックスで繰り返される単一の画像を含むペインを見ることができます
  • ユーザーは、画像の横にある上向き、下向き、左向き、右向きの矢印のセットを使用して、画像のいずれかを垂直方向または水平方向に反転できます

ボーナス機能

  • ユーザーは、入力フィールドに別の画像のURLを入力することにより、デフォルトの画像を変更できます
  • ユーザーは、入力フィールドの横にある[表示]ボタンをクリックして、新しい画像を表示できます。
  • 新しい画像のURLが見つからない場合、ユーザーにはエラーメッセージが表示されます

便利なリンクとリソース

  • 画像を反転する方法
  • CSSフリッピングアニメーションを作成する

サンプルプロジェクト

4.クイズアプリ

Tier: 1 —初心者

説明:クイズアプリケーションで質問に答えて、知識を練習してテストします。

開発者は、他の開発者のコ​​ーディングスキルをテストするためのクイズアプリケーションを作成できます。(HTML、CSS、JavaScript、Python、PHPなど…)

ユーザーストーリー

  • ユーザーはを押すとクイズを開始できます button
  • ユーザーは4つの可能な回答で質問を見ることができます
  • 回答を選択したら、次の質問をユーザーに表示します。クイズが終了するまでこれを行います
  • 最終的に、ユーザーは次の統計を見ることができます。
  1. クイズを終えるのにかかった時間
  2. 彼はいくつの正解を得ましたか
  3. passedまたはfailedクイズかどうかを示すメッセージ

ボーナス機能

  • ユーザーはソーシャルメディアでクイズの結果を共有できます
  • アプリケーションに複数のクイズを追加します。ユーザーはどれを取るかを選択できます
  • ユーザーはアカウントを作成し、すべてのスコアをダッシュ​​ボードに保存できます。ユーザーはクイズを複数回完了することができます

便利なリンクとリソース

  • 雑学クイズデータベースを開く

プロジェクトの例

Reactで構築されたクイズアプリ(Herokuでホストされているため、ロードされるのを待ちます)

5.ローマ数字から10進数へのコンバーター

Tier: 1 —初心者

説明:ローマ数字で表される記数法は古代ローマで始まり、中世後期までヨーロッパ全体で数字を書く通常の方法でした。今日使用されているローマ数字は、それぞれが固定整数値を持つ7つの記号を使用しています。

以下の表を参照してください。記号—値のペア:

  • I — 1
  • V — 5
  • X — 10
  • L — 50
  • C — 100
  • D — 500
  • M — 1000

ユーザーストーリー

  • ユーザーは入力フィールドに1つのローマ数字を入力できる必要があります
  • ユーザーは、ボタンを押して入力したローマ数字に相当する10進数(基数10)を含む単一の出力フィールドに結果を表示できます。
  • 間違った記号を入力すると、ユーザーにエラーが表示されます

ボーナス機能

  • 入力すると、ユーザーは自動的に変換が行われることを確認できました
  • ユーザーは10進数からローマ字に(またはその逆に)変換できる必要があります

便利なリンクとリソース

  • ローマ数字の説明

サンプルプロジェクト

ローマ数字コンバーター

6.ブックファインダーアプリ

Tier: 2 —中級

説明:ユーザーがクエリ(タイトル、著者など)を入力して本を検索できるようにするアプリケーションを作成します。結果の本を、対応するすべてのデータとともにページのリストに表示します。

ユーザーストーリー

  • ユーザーはinputフィールドに検索クエリを入力できます
  • ユーザーはクエリを送信できます。これにより、対応するデータ(タイトル著者公開日写真など)を含む書籍の配列を返すAPIが呼び出されます。
  • ユーザーはページに表示されている本のリストを見ることができます

ボーナス機能

  • リスト内の各アイテムに、本に関する詳細情報がある外部サイトにユーザーを送信するリンクを追加します
  • レスポンシブデザインを実装する
  • ロードアニメーションを追加する

便利なリンクとリソース

GoogleブックスAPIを使用できます

サンプルプロジェクト

BookSearch-React

7.カード-記憶-ゲーム

Tier: 2 —中級

説明:カードメモリは、カードをクリックしてその下にある画像を確認し、他のカードの下にある一致する画像を見つけようとするゲームです。

ユーザーストーリー

  • ユーザーはnxnカード(n整数)でグリッドを見ることができます。最初はすべてのカードが裏向きになっています(hidden状態)
  • ユーザーはボタンをクリックしてゲームを開始できます。このボタンをクリックするとタイマーがスタートします
  • ユーザーは任意のカードをクリックして、その下にある画像を表示できます(visible状態に変更します)。ユーザーが2枚目のカードをクリックするまで画像が表示されます

ユーザーが2枚目のカードをクリックしたとき:

  • 一致する場合、2枚のカードはゲームから排除されます(それらを非表示/削除するか、visible状態のままにします)
  • 一致するものがない場合、2枚のカードは元の状態(hidden状態)に戻ります
  • すべての一致が見つかると、ユーザーは、ゲームを終了するのにかかった時間を表示するカウンターを備えたおめでとうメッセージを示すダイアログボックスを見ることができます。

ボーナス機能

  • 使用は、難易度の複数のレベル(Easy、Medium、Hard)から選択できます。難易度の増加とは、完了までの時間を短縮したり、カードの数を増やしたりすることを意味します。
  • ユーザーはゲームの統計を見ることができます(勝った/負けた回数、各レベルに最適な時間)

便利なリンクとリソース

  • ウィキペディア

プロジェクトの例

フリップ—カードメモリゲーム

SMB3メモリカードゲーム

8.マークダウンテーブルジェネレータ

Tier: 2 —中級

説明:ユーザーから提供されたデータを含む通常のテーブル(オプション)をMarkdown形式のテーブルに変換するアプリケーションを作成します。

ユーザーストーリー

  • ユーザーはHTML table、指定された数のでを作成できます
  • ユーザーは、の各セルにテキストを挿入できます。 HTML table
  • ユーザーMarkdown formatted tableは、からのデータを含むを生成できます。HTML table
  • ユーザーはプレビューできます Markdown formatted table

ボーナス機能

  • ユーザーはMarkdown formatted tableボタンを押すことでクリップボードにコピーできます
  • ユーザーは、指定した場所に新しいまたはを挿入できます
  • ユーザーはまたは列を完全に削除できます
  • ユーザーは、セル、またはテーブル全体を(右、または中央に)配置できます。

便利なリンクとリソース

  • マークダウンガイド
  • Marked —マークダウンパーサー
  • クリップボードにコピーする方法

サンプルプロジェクト

テーブルジェネレータ/マークダウンテーブル

9.ストリングアート

Tier: 2 —中級

説明:ストリングアートの目的は、単純なアニメーショングラフィックを作成し、アニメーションアルゴリズムでジオメトリを使用し、視覚的に見やすいものを作成する練習を開発者に提供することです。

ストリングアートは、一方の端が囲んでいるウィンドウの側面に触れるまでスムーズに移動する単一の多色の線を描画します。その時点で、「バウンス」効果に触れて方向を変更します。

波及効果は、線が移動するときに10〜20枚の線の画像のみを保持することによって作成されます。古い画像は、消えるまで徐々にフェードします。

アニメーションライブラリは許可されていません。Vanilla HTML / CSS / JavaScriptのみを使用してください。

ユーザーストーリー

  • 囲んでいるウィンドウの境界内のランダムな位置に色とりどりの線を描くことから始めます
  • 20ミリ秒ごとに、軌道に基づいて新しい位置に線の新しいコピーが描画されます—端点に基づいて前の線からの増分距離
  • 線のいずれかの端点が囲んでいるウィンドウの境界に触れると、その方向を変更し、ランダムに角度を変更します
  • 古い線の強度を徐々に弱めて、最新の10〜20本の線だけが見えるようにして、動きや「波紋」の感覚を作り出します。

ボーナス機能

  • ユーザーは線の長さとその速度を指定できます
  • ユーザーはウィンドウ内の複数の線を指定でき、すべてが異なる軌道と速度に沿って移動します

便利なリンクとリソース

  • マルチステップアニメーションとトランジションの使用
  • アニメーションの基本

サンプルプロジェクト

このプロジェクトは非常に近いですが、小さな囲い窓があり、単色です。ダニエル・コルテス

10.To-Doアプリ

Tier: 2 —中級

説明:ユーザーが達成したいすべてのことを書き留めることができる古典的なTo-Doアプリケーション。

ユーザーストーリー

  • ユーザーは、inputやること項目を入力できるフィールドを見ることができます
  • Enterキー(またはボタン)を押すと、ユーザーはTo Doアイテムを送信し、それがToDoのリストに追加されていることを確認できます。
  • ユーザーはやることを次のようにマークできます completed
  • ユーザーは、ボタン(またはTo Doアイテム自体)を押すことで、ToDoアイテムを削除できます。

ボーナス機能

  • ユーザーはやることを編集できます
  • ユーザーは、完了したすべてのToDoのリストを表示できます
  • ユーザーは、アクティブなすべてのToDoのリストを表示できます
  • ユーザーは、ToDoを作成した日付を確認できます
  • ブラウザウィンドウを閉じると、やることが保存され、ユーザーが戻ると、データが取得されます。

便利なリンクとリソース

  • ローカルストレージ

プロジェクトの例

Reactで構築されたTodoアプリ

11.戦艦ゲームエンジン

Tier: 3 —上級

説明:バトルシップゲームエンジン(BGE)は、従来のターンベースのボードゲームを、プレゼンテーション層から分離されたパッケージとして実装します。これは、任意の数のアプリが同じサービスを利用できるため、多くのアプリケーションで役立つアーキテクチャパターンの一種です。

BGE自体は、直接結合されたエンドユーザーアクションではなく、一連の関数呼び出しによって呼び出されます。この点で、BGEの使用は、APIまたはWebサーバーによって公開される一連のルートの使用に似ています。

この課題では、BGEと、エンジン自体とは別のテスト用の非常に薄いテキストベースのプレゼンテーション層を開発する必要があります。このため、以下のユーザーストーリーは、BGE用とテキストベースのプレゼンテーション層用の2つのセットに分けられます。

BGEは、ゲームの状態を維持する責任があります。

ユーザーストーリー

BGE

  • 呼び出し元は、startGame()関数を呼び出して1人用のゲームを開始できます。この関数は、幅が1マス、長さが次の3隻の船で構成される8x8のゲームボードを生成します。
  1. 駆逐艦:2マス
  2. 巡洋艦:3つの正方形
  3. 戦艦:4マス

startGame() これらの船を任意の方向にランダムにボードに配置し、船の配置を表す配列を返します。

  • 呼び出し元はshoot()、ゲームボード上のターゲットセルのターゲット行と列の座標を渡す関数を呼び出すことができます。shoot()ショットがヒットまたはミスにつながったかどうか、残っている船の数(つまり、まだ沈んでいない)、船の配置配列、および更新されたヒットとミスの配列を表すインジケーターを返します。

ヒットとミスの配列内のセルには、まだターゲットOにされていない場合、ターゲットにされているが船の一部がその場所にないX場合、またはセルが船の一部で占められている場合、スペースが含まれます。

テキストベースのプレゼンテーション層

  • ユーザーは、startGame()関数によって返されるゲームボードの2次元文字表現として表示されるヒットとミスの配列を確認できます。
  • ユーザーは、ゲームボード上のターゲット正方形の座標を入力するように求められます。
  • ユーザーは、ショットを撮った後、更新されたヒットとミスの配列表示を見ることができます。
  • ユーザーは、各ショットの後に、ショットがヒットしたかミスしたかを示すメッセージを見ることができます。
  • 最後に残った船を沈めるショットの後、ユーザーはおめでとうメッセージを見ることができます。
  • ユーザーは、各ゲームの終了時に再度プレイするように求められます。再度プレイすることを拒否すると、ゲームが停止します。

ボーナス機能

BGE

  • 呼び出し元は、startGame()関数のパラメーターとしてゲームボードの行と列の数を指定できます。
  • 呼び出し元はgameStats()、現在のゲームのメトリックを含むJavascriptオブジェクトを返す関数を呼び出すことができます。たとえば、プレイされたターン数、現在のヒット数とミス数などです。
  • 発信者は、呼び出し時にプレイヤーの数(1または2)を指定できます。これにより、startGame()ランダムに船が配置されたプレイヤーごとに1つのボードが生成されます。

shoot()ショットの座標とともに、ショットが作成されているプレーヤー番号を受け入れます。返されるデータはそのプレーヤーのものになります。

テキストベースのプレゼンテーション層

  • ユーザーはstats、ターゲット座標の代わりにフレーズを入力することで、いつでも現在のゲームの統計を見ることができます。(これgameStats()にはBGEの機能が必要であることに注意してください)
  • ユーザーは、2人のプレーヤーのゲームをプレイするように指定でき、各プレーヤーは同じターミナルセッションで交互にターンします(これには、BGEの対応するボーナス機能が必要です)。
  • ユーザーは、各ターンの入力に関連付けられたプロンプトでプレーヤー番号を確認できます。
  • ユーザーは、各ターンの終わりに両方のプレイヤーのボードを見ることができます。

便利なリンクとリソース

  • 戦艦ゲーム(ウィキペディア)
  • 戦艦ゲームルール(ハスブロ)

プロジェクトの例

このYouTubeビデオは、テキストベースの戦艦ゲームがどのようにプレイされるかを示しています。

次の例は、戦艦ゲームに慣れていない場合のデモンストレーションとして提供されています。テスト用にテキストベースのプレゼンテーション層を実装することを忘れないでください。クリスブロディによる戦艦ゲーム

12.チャットアプリ

Tier: 3 —上級

説明:複数のユーザーがメッセージを送信して相互に対話できるリアルタイムチャットインターフェイス。

MVP(Minimum Viable Product)として、チャットインターフェイスの構築に集中できます。リアルタイム機能は後で追加できます(ボーナス機能)。

ユーザーストーリー

  • ユーザーは、チャットアプリにアクセスすると、ユーザー名の入力を求められます。ユーザー名はアプリケーションに保存されます
  • ユーザーはinput field、新しいメッセージを入力できる場所を確認できます
  • 押すとenterキーのまたはをクリックしてsendテキストを内に表示されるボタンchat boxと一緒に彼のユーザ名(例John Doe: Hello World!

ボーナス機能

  • メッセージは、チャットアプリを使用しているすべてのユーザーに表示されます(WebSocketを使用)
  • 新しいユーザーがチャットに参加すると、既存のすべてのユーザーにメッセージが表示されます
  • メッセージはデータベースに保存されます
  • ユーザーは、適切に表示される画像、ビデオ、およびリンクを送信できます
  • ユーザーは絵文字を選択して送信できます
  • ユーザーはプライベートでチャットできます
  • ユーザーはchannels特定のトピックに参加できます

便利なリンクとリソース

  • Socket.io
  • 10分でReact.jsチャットアプリを構築する方法—記事

サンプルプロジェクト

Chatty2

13.GitHubタイムライン

Tier: 3 —上級

説明:APIと情報のグラフィック表現は、最新のWebアプリケーションの特徴です。GitHubタイムラインは、この2つを組み合わせて、ユーザーのGitHubアクティビティの視覚的な履歴を作成します。

GitHubタイムラインの目標は、GitHubユーザー名を受け入れ、各リポジトリを含み、リポジトリ名、作成日、および説明で注釈が付けられたタイムラインを作成することです。タイムラインは、将来の雇用主と共有できるものでなければなりません。読みやすく、色やタイポグラフィを有効に活用できる必要があります。

公開されているGitHubリポジトリのみを表示する必要があります。

ユーザーストーリー

  • ユーザーはGitHubユーザー名を入力できます
  • ユーザーは「生成」ボタンをクリックして、指定されたユーザーのリポジトリタイムラインを作成および表示できます。
  • GitHubユーザー名が有効なGitHubユーザー名でない場合、ユーザーに警告メッセージが表示されることがあります。

ボーナス機能

  • ユーザーは、作成された年ごとに集計されたリポジトリの数の概要を確認できます

便利なリンクとリソース

GitHubは、リポジトリデータへのアクセスに使用できる2つのAPIを提供します。NPMパッケージを使用してGitHubAPIにアクセスすることもできます。

GitHub APIのドキュメントは、次の場所にあります。

  • GitHub REST API V3
  • GitHub GraphQL API V4

GitHubAPIの使用方法を示すサンプルコードは次のとおりです。

このCURLコマンドを使用して、リポジトリのV3 RESTAPIによって返されるJSONを確認できます。

curl -u "user-id" //api.github.com/users/user-id/repos

プロジェクトの例

14.スペルイット

Tier: 3 —上級

説明:綴り方を知ることは、あらゆる言語に堪能であるための基本的な部分です。あなたが綴り方を学ぶ若者であろうと、練習できる新しい言語を学ぶ個人であろうと、あなたの言語スキルを固めるのに役立ちます。

Spell-Itアプリは、ユーザーがコンピューターのキーボードを使用してスペルする必要のある単語の音声録音を再生することにより、ユーザーがスペルを練習するのに役立ちます。

ユーザーストーリー

  • ユーザーは「再生」ボタンをクリックして、入力する単語を聞くことができます
  • ユーザーは、キーボードで入力すると、単語入力テキストボックスに表示された文字を見ることができます
  • ユーザーは「Enter」ボタンをクリックして、単語入力テキストボックスに入力された単語を送信できます。
  • 正しい単語を入力すると、ユーザーは確認メッセージを見ることができます
  • スペルが間違っていると、単語の再入力を要求するメッセージが表示されます。
  • ユーザーは、正しいスペルの数、試行された単語の総数、および成功したエントリの割合の集計を確認できます。

ボーナス機能

  • 単語のスペルが正しいと、ユーザーは確認音を聞くことができます
  • 単語のスペルが間違っていると、ユーザーに警告音が聞こえます
  • ユーザーは「ヒント」ボタンをクリックして、単語入力テキストボックス内の誤った文字を強調表示できます
  • ユーザーはキーボードの「Enter」キーを押して入力した単語を送信するか、アプリウィンドウの「Enter」ボタンをクリックできます

便利なリンクとリソース

  • テキサスインスツルメンツのスピークアンドスペル
  • WebオーディオAPI
  • クリックして話す

プロジェクトの例

iOS用ワードウィザード

GooglePlayでNスペルを話す

15.調査アプリ

Tier: 3 —上級

説明:調査は、開発者ツールボックスの貴重な部分です。これらは、アプリケーションの満足度、要件、今後のニーズ、問題、優先順位、単純な悪化など、さまざまなトピックについてユーザーからフィードバックを得るのに役立ちます。

調査アプリは、ツールボックスに追加できるフル機能のアプリを開発することで学習する機会を提供します。調査を定義し、ユーザーが事前定義された時間枠内に回答できるようにし、結果を表にして提示する機能を提供します。

このアプリのユーザーは2つの異なる役割に分けられ、それぞれに異なる要件があります。

  • 調査コーディネーターは、調査を定義および実施します。これは、通常のユーザーが使用できない管理機能です。
  • 調査回答者調査を完了し、結果を表示します。アプリ内での管理者権限はありません。

商用の調査ツールには、調査回答者に調査を大量に電子メールで送信する配布機能が含まれています。簡単にするために、このアプリは、回答のために開かれている調査がアプリのWebページからアクセスされることを前提としています。

ユーザーストーリー

一般

  • 調査コーディネーターと調査回答者は、共通のWebサイトから調査と調査結果を定義、実施、表示できます。
  • 調査コーディネーターはアプリにログインして、調査の定義などの管理機能にアクセスできます。

調査の定義

  • 調査コーディネーターは、1〜10の多肢選択問題を含む調査を定義できます。
  • 調査コーディネーターは、各質問に対して1〜5の相互に排他的な選択を定義できます。
  • 調査コーディネーターは、調査のタイトルを入力できます。
  • 調査コーディネーターは、「キャンセル」ボタンをクリックして、調査を保存せずにホームページに戻ることができます。
  • 調査コーディネーターは、「保存」ボタンをクリックして調査を保存できます。

調査の実施

  • 調査コーディネーターは、以前に定義された調査のリストから調査を選択することにより、調査を開くことができます。
  • 調査コーディネーターは、開いている調査のリストから調査を選択して閉じることができます
  • 調査回答者は、開いている調査のリストから調査を選択することで調査を完了することができます
  • 調査回答者は、チェックボックスをクリックして調査質問への回答を選択できます
  • 調査回答者は、別の回答をクリックすると、以前に選択した回答のチェックが自動的に解除されることを確認できます。
  • 調査回答者は、[キャンセル]ボタンをクリックして、調査を送信せずにホームページに戻ることができます。
  • 調査回答者は、[送信]ボタンをクリックして調査への回答を送信できます。
  • [送信]をクリックすると、調査回答者にエラーメッセージが表示されますが、すべての質問に回答しているわけではありません。

調査結果の表示

  • 調査コーディネーターと調査回答者は、クローズされた調査のリストから表示する調査を選択できます
  • 調査コーディネーターと調査回答者は、質問に対する可能な選択肢ごとの回答数を示す表形式で調査結果を表示できます。

ボーナス機能

  • 調査回答者はアプリで一意のアカウントを作成できます
  • 調査回答者はアプリにログインできます
  • 調査回答者は同じ調査を複数回完了することはできません
  • 調査コーディネーターと調査回答者は、調査結果のグラフィック表現を表示できます(例:円グラフ、棒グラフ、縦棒グラフなど)。

便利なリンクとリソース

調査を構築するためのライブラリ:SurveyJS

いくつかの商用調査サービスには、SurveyMonkeyとTypeformが含まれます。

サンプルプロジェクト

貢献

GitHubリポジトリでプロジェクトに貢献することを歓迎します!どんな貢献も大歓迎です。

あなたは2つの方法で貢献することができます:

  1. 問題を作成し、あなたのアイデアを教えてください。この場合、必ず新しいアイデアラベルを使用してください。
  2. プロジェクトをフォークし、PRを提出します。その前に、コントリビューションガイドを読んでそれに従うようにしてください(リポジトリにあります)。

独自の例を追加する

プロジェクトを完了した後、プロジェクトに独自の例を追加することもできます。あなたが作った素晴らしいものを他の人に見せてくれるので、これを行うことを強くお勧めします!?

言葉を広める!

この記事とレポからの情報が何らかの形であなたに役立った場合は、必ずスターを付けてください。そうすれば、他の人もそれを見つけて利益を得ることができます!一緒に私たちは成長し、私たちのコミュニティをより良くすることができます!

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

主な貢献者??

フローリンポップ:ツイッターとウェブサイト。

ジムメドロック:ツイッターとミディアム

毎週のコーディングチャレンジ?

ボーナスとして、実際のプロジェクトでスキルを練習することでより多くを学ぶことができるウィークリーコーディングチャレンジがあります。参加方法については、完全ガイドをお読みください。?

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