8つの教育プロジェクト

「達人は初心者が試みるよりも多くの間違いを犯す」

実際の開発経験を積むために、「楽しみながら」実行できる 8 つのプロジェクト オプションを提供します。

プロジェクト 1. Trello クローン

Indrek Lasn の Trello クローン。

学ぶ内容:

• リクエスト処理ルートの編成 (ルーティング)。
• ドラッグアンドドロップ
• 新しいオブジェクト (ボード、リスト、カード) を作成する方法。
• 入力データの処理とチェック。
• クライアント側から: ローカル ストレージの使用方法、ローカル ストレージにデータを保存する方法、ローカル ストレージからデータを読み取る方法。
• サーバー側から: データベースの使用方法、データベースにデータを保存する方法、データベースからデータを読み取る方法。

リポジトリの例は次のとおりです, React+Reduxで作られています。

プロジェクト 2. 管理パネル

Github リポジトリ。

シンプルな CRUD アプリケーションで、基本を学ぶのに最適です。 学びましょう：

• ユーザーを作成し、ユーザーを管理します。
• データベースと対話します - ユーザーの作成、読み取り、編集、削除。
• 入力を検証し、フォームを操作します。

プロジェクト 3. 暗号通貨トラッカー (ネイティブ モバイル アプリケーション)

Githubリポジトリ。

何でも: Swift、Objective-C、React Native、Java、Kotlin。

勉強しましょう：

• ネイティブ アプリケーションの仕組み。
• API からデータを取得する方法。
• ネイティブ ページ レイアウトの仕組み。
• モバイル シミュレーターの操作方法。

この API を試してみる。 もっと良いものを見つけたら、コメントに書いてください。

ご興味がございましたら、こちらからどうぞ ここにチュートリアルがあります.

プロジェクト 4. 独自の Webpack 構成を最初からセットアップする

技術的には、これはアプリケーションではありませんが、Webpack が内部からどのように動作するかを理解するのに非常に役立つ作業です。 これからは「ブラックボックス」ではなく、わかりやすいツールになるでしょう。

要件：

• es7 から es5 をコンパイルします (基本)。
• jsx を js にコンパイルするか、.vue を .js にコンパイルします (ローダーを学習する必要があります)
• Webpack dev サーバーとホット モジュールのリロードをセットアップします。 (vue-cli と create-react-app は両方を使用します)
• Heroku、now.sh、または Github を使用して、Webpack プロジェクトをデプロイする方法を学びます。
• CSS をコンパイルするためのお気に入りのプリプロセッサ (scss、less、stylus) を設定します。
• Webpack で画像と SVGS を使用する方法を学びます。

これは完全な初心者にとって素晴らしいリソースです。

プロジェクト 5. Hackernews クローン

すべてのジェダイは、自分自身のハッカーニュースを作成する必要があります。

その過程で学ぶこと:

• ハッカーニュース API と対話する方法。
• シングルページアプリケーションの作成方法。
• コメントの表示、個別のコメント、プロフィールなどの機能を実装する方法。
• リクエスト処理ルートの編成 (ルーティング)。

プロジェクト 6. トゥドゥシェチカ

TodoMVC。

真剣に？ トゥドゥシュカ？ それらは何千もあります。 しかし、信じてください、この人気には理由があります。
Tudu アプリは、基本を確実に理解するのに最適な方法です。 XNUMX つのアプリケーションをバニラ Javascript で作成し、もう XNUMX つをお気に入りのフレームワークで作成してみてください。

学ぶ：

• 新しいタスクを作成します。
• フィールドが入力されていることを確認してください。
• タスクをフィルタリングします (完了、アクティブ、すべて)。 使用 filter и reduce.
• JavaScript の基本を理解します。

プロジェクト 7. 並べ替え可能なドラッグ アンド ドロップ リスト

Githubリポジトリ。

理解するのに非常に役立ちます APIをドラッグアンドドロップ.

学びましょう：

• ドラッグアンドドロップAPI
• リッチな UI を作成する

プロジェクト 8. メッセンジャー クローン (ネイティブ アプリケーション)

Web アプリケーションとネイティブ アプリケーションの両方がどのように動作するかを理解できるようになり、灰色の部分から区別できるようになります。

私たちが勉強する内容:

• Web ソケット (インスタント メッセージ)
• ネイティブ アプリケーションの仕組み。
• ネイティブ アプリケーションでのテンプレートの動作。
• ネイティブ アプリケーションでのリクエスト処理ルートの整理。

これでXNUMX～XNUMXヶ月は十分に使えます。

翻訳は会社の協力を得て行われました エジソン ソフトウェア専門的に従事している人 PHP でのアプリケーションと Web サイトの開発 大口のお客様だけでなく、 Java でのクラウド サービスとモバイル アプリケーションの開発.

出所： habr.com