8 образователни проекта

„Майсторът прави повече грешки, отколкото начинаещият прави опити“

Ние предлагаме 8 варианта на проекти, които могат да бъдат направени „за забавление“, за да придобиете истински опит в разработката.

Проект 1. Клонинг на Trello

Клонинг на Trello от Indrek Lasn.

Какво ще научите:

• Организация на маршрутите за обработка на заявки (Routing).
• Дръпни и пусни.
• Как да създадете нови обекти (дъски, списъци, карти).
• Обработка и проверка на входните данни.
• От страна на клиента: как да използвате локално хранилище, как да записвате данни в локално хранилище, как да четете данни от локално хранилище.
• От страна на сървъра: как да използвате бази данни, как да запазвате данни в базата данни, как да четете данни от базата данни.

Ето пример за хранилище, направени в 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 и презареждане на горещ модул. (vue-cli и create-react-app използват и двете)
• Използвайте Heroku, now.sh или Github, научете как да внедрявате проекти за webpack.
• Настройте любимия си препроцесор за компилиране на css - scss, less, stylus.
• Научете как да използвате изображения и svgs с webpack.

Това е невероятен ресурс за напълно начинаещи.

Проект 5. Клонинг на Hackernews

От всеки джедай се изисква да създаде свой собствен Hackernews.

Какво ще научите по пътя:

• Как да взаимодействаме с API на hackernews.
• Как да създадете едностранично приложение.
• Как да внедрите функции като преглед на коментари, индивидуални коментари, профили.
• Организация на маршрутите за обработка на заявки (Routing).

Проект 6. Тудушечка

TodoMVC.

Сериозно? Тудушка? Те са хиляди. Но повярвайте ми, има причина за тази популярност.
Приложението Tudu е чудесен начин да сте сигурни, че разбирате основите. Опитайте да напишете едно приложение във ванилен Javascript и едно в любимата си рамка.

Уча:

• Създавайте нови задачи.
• Проверете дали полетата са попълнени.
• Филтриране на задачи (завършени, активни, всички). Използвайте filter и reduce.
• Разберете основите на Javascript.

Проект 7. Сортируем списък с плъзгане и пускане

Github хранилище.

Много полезно за разбиране API за плъзгане и пускане.

Да научим:

• API с плъзгане и пускане
• Създавайте богати потребителски интерфейси

Проект 8. Клонинг на Messenger (родно приложение)

Ще разберете как работят както уеб приложенията, така и нативните приложения, което ще ви отличи от сивата маса.

Какво ще изучаваме:

• Уеб сокети (незабавни съобщения)
• Как работят собствените приложения.
• Как работят шаблоните в собствените приложения.
• Организиране на маршрути за обработка на заявки в собствени приложения.

Това ще ви е достатъчно за месец-два.

Преводът е извършен с подкрепата на фирмата Софтуер EDISONкойто е професионално ангажиран разработване на приложения и уеб сайтове в PHP за големи клиенти, както и разработка на облачни услуги и мобилни приложения в Java.

Източник: www.habr.com