8 классных идей для тех, кто решил заняться приложениями

Начали изучать какой-то язык программирования? Может, пора заняться реальными приложениями? Сделали подборку простых идей для новичков.

Cтать профессионалом можно, лишь совершенствуя себя практически. К примеру, вы же не сможете улучшить физическое состояние, прочитав много фитнес-советов, но так ничего и не попробовав. Такая же схема работает и с программированием.

Проект #1: Клон Trello

Демонстрация

С чем будете работать

  • маршрутизация;
  • drag&drop;
  • создание новых объектов (доски, карточки, листы);
  • обработка и валидация входных данных;
  • использование локального хранилища, сохранение данных и их чтение;
  • использование базы данных, сохранение данные и их считывание.

Проект #2: Пользовательская панель управления

GitHub-репозиторий

Простое CRUD-приложение, в самый раз для отработки фундаментальных навыков.

Что вы узнаете в процессе

  • создание и управление пользователями;
  • взаимодействие с базой данных — создание, чтение, редактирование, удаление;
  • валидация входных данных и способы работы с формами.

Проект #3: Мобильное приложение для контроля за курсом криптовалют

GitHub-репозиторий

Что вы узнаете

  • как работают нативные приложения;
  • получение данных из API;
  • как работают макеты;
  • как работать с мобильными эмуляторами.

Советуем использовать эти API. Но если у вас есть варианты получше, делитесь в комментариях. Перед реализацией приложения, советуем посмотреть вот этот туториал.

Проект #4: Настройка собственной webpack-конфигурации с нуля

Чисто технически, это не приложение, но проект позволит понять, что под капотом у webpack. Когда с этим разберётесь, webpack больше не будет казаться чем-то сложным.

Что нужно сделать

  • сделайте компиляцию es7 в es5 (ну, это уж совсем основы);
  • скомпилируйте jsx в js или .vue в .js (вы узнаете о загрузчиках);
  • установите сервер webpack dev и перезагрузите модуль (vue-cli и create-react-app используют оба);
  • запустите процесс и разверните его с помощью страниц Heroku, now.sh или Github (узнаете, как развертывать веб-пакеты);
  • настройте наиболее удобный препроцессор для компиляции на css - scss, less, stylus;
  • узнайте, как использовать изображения и svgs с помощью webpack.

Вот отличная инструкция для чайников.

Проект #5: Клон Hackernews

Иногда кажется, что каждый стартапер создавал собственную версию Hackernews — наверное это и впрямь занятно.

Что вы изучите

  • взаимодействие с API Hackernews;
  • создание одностраничников;
  • как работать с комментариями и личными профилями;
  • маршрутизация.

По ссылке документация Hackernews.

Проект #6: Приложение для составления списка дел

TodoMVC

Вы можете спросить: «Серьёзно? Заниматься to-do приложениями? Их же очень много!». Да, мы всё знаем. Но ведь их большое количество — следствие популярности.

Между тем, создание подобного приложения — идеальный способ приступить к работе над реальным проектом с базовыми знаниями. Попробуйте создать его с простым Javascript, а затем с вашим любимым фреймворком/библиотекой.

О чём вы узнаете

  • создание новых задач;
  • проверка полей;
  • фильтрация задач по статусу (завершена, активна). Здесь будут применены функции filter и reduce;
  • немного больше о Javascript.

Проект #7: Драг-н-дроп листы

GitHub-репозиторий

Вообще, drag&drop — крайне полезная штука. По крайней мере, это выделит вас из массы новичков, которые создают совсем уж простые приложения.

Чему вы научитесь

  • работа с drag and drop API;
  • создание качественного UI.

Проект #8: Работаем над приложениями-мессенджерами

Снова про работу с нативными приложениями. Умение работать с ними — это очень круто для новичка.

Что вы узнаете

  • веб-сокеты (мгновенный обмен сообщениями);
  • как работают нативные приложения;
  • маршрутизация для собственных приложений.

Короче, всё это довольно реально и требует не так много времени. Так что удачи в разработке и дальнейшем развитии.

Статьи по теме

Оригинал: Indrek Lasn on freeCodeCamp

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ