Всем привет! Нас зовут Тимур и Артём, сейчас мы студенты первого курса, но незадолго до поступления мы окончили «IT Школу Samsung», разработали приложения для помощи учителю, заняли первое место в конкурсе «IT Школа выбирает сильнейших!» и опубликовали приложение в RuStore. И всё это в период ЕГЭ и поступления в институт — и сейчас мы расскажем, как это было!
Предыстория
История нашего проекта началась с нашего преподавателя, а именно с того, что он решил вести таблицу посещений и рейтинга учащихся. В начале занятия он отмечал посещения, а после – ставил баллы за активность. В процессе учебы мы начали соревноваться, но у этой системы был один существенный недостаток – преподаватель тратил много сил на ведение этой таблицы. Именно так и родилась идея нашего проекта…
Идея проекта
Так как же сделать эту систему практичной и лёгкой в использовании? Наша идея – сделать приложение, которое сохранит систему посещений и рейтинга, предложит удобный интерфейс и избавит преподавателя от рутинной работы. Главными фичами стали: отметка посещений по QR-кодам и рейтинговая таблица. Так и появилось приложение TutOn!
Из чего состоит проект?
Самое время переходить к реализации ;D. Наш проект состоит из сервера и двух приложений (учительского и ученического). И сервер, и приложения написаны на Java, что позже помогло удобно перенести DTO с бэкенда на фронтенд.
Чтобы не перегружать сервер, мы используем Firebase для хранения изображений.
Бэкенд развёрнут с помощью docker-compose – Spring-сервер и база данных PostgreSQL находятся в docker-контейнерах и общаются друг с другом по JDBC.
А самое интересное впереди…
Бэкенд
В нашем проекте сервер и приложения не могли бы существовать друг без друга, прямо как Инь и Ян. Именно поэтому внутренняя часть проекта также важна, как и та часть, которую видит пользователь. И я – Тимур, тимлид и Backend-разработчик TutOn (ну а позже я ещё и занимался разработкой ученического приложения) – хотел бы в этом блоке рассказать про процесс разработки серверной части.
Разработка сервера началась с изучения фреймворка Spring, и если бы не мастер-классы от IT Школы, то этот процесс мог бы затянуться на долгое время. То есть серия лекций буквально помогла освоить Spring и начать разрабатывать бэкенд самостоятельно. В основном всё шло гладко, но без интересных моментов не обошлось.
Первой серьёзной задачей стало проектирование базы данных. База данных должна была включать в себя следующие сущности: Ученик, Учитель, Группа, Урок, Посещение, QR-код. Позже к ним прибавился «Запрос на добавление в группу». Вроде бы ничего сложного, но…
Из-за особенностей Spring Security пришлось провести несколько манипуляций с сущностями Ученика и Учителя: сделать сущность User, которая содержала бы в себе только данные необходимые для аутентификации и работы с Spring Security, и «унаследовать» от неё сущности Student и Teacher, сохранив при этом уникальные поля для каждой из них. Благо Hibernate позволяет сделать это достаточно удобно.
Ну и куда без Docker Compose в современной разработке? Ну и мы просто не могли его не использовать. Не буду перечислять все плюсы, просто скажу, что Docker Compose экономит очень много времени благодаря возможности запустить весь бэкенд одной кнопкой, а позже ещё и очень удобно развернуть проект на удалённом сервере.
Дизайн
Во многом привлекательность приложения определяется не только решением актуальной проблемы, но и красивым внешним видом. Поэтому в данном блоке я — Артем, дизайнер и Мобильный-разработчик Tuton — хотел бы рассказать про процесс создания дизайна приложения.
Перед тем, как перейти к разработке дизайна, сначала нужно было определиться с функционалом приложения.
В учительском приложении было важно сохранить информативность и при этом максимально упростить процесс использования, поэтому оно получило следующие функции:
-
Управление уроками
-
Просмотр списка предстоящих уроков
-
Просмотр учеников, посетивших занятие
-
Генерация QR-кода для отметки посещения с возможностью быстро им поделиться
-
Управление группами (создание, удаление, приём заявок на вступление)
-
Просмотр таблицы посещений/баллов (а также фильтрация по месяцам)
-
Управление посещениями/баллами
-
Просмотр и редактирование профиля
В ученическом приложении было важно сделать процесс отметки посещения удобным, а также внедрить соревновательный элемент:
-
Сканер QR-кодов для отметки посещения
-
Просмотр таблицы посещений/баллов с отображением лидеров
-
Просмотр профилей одногруппников
-
Просмотр и редактирование профиля
Разработка макета проводилась в Figma. Помню день, когда все началось — я просто сел и начал накидывать экраны, расположения предполагаемых элементов, где-то подкрасил, поигрался с размерами.
Вообще, вдохновлялся своим же дизайном, который выставлял на конкурс в IT Школе Samsung и на котором занял второе место.
Да, название приложения было придумано в феврале (кстати, можете погадать в комментариях, что оно означает), когда мы с Тимуром ещё не работали вместе. Этот дизайн предполагался для приложения с задумкой, похожей на нашу, поэтому цвет и основные идеи были взяты оттуда.
Цвет был придуман случайно — я просто игрался в палитре и пытался подобрать приятный, но не слишком резкий цвет, который бы символизировал простоту и удобство, поэтому выбор пал на #5fb2ff.
Сверху представлена первая версия дизайна Tuton. Она была сыровата, потому что не до конца было понятно, какие функции будут у приложения. В дальнейших версиях появились новые экраны, и каждый раз дорабатывались старые. Всего есть 4 версии дизайна, и общая концепция сохраняется по мере изменения макетов.
Я не буду показывать все версии, а покажу только финальную, которая используется в самом приложении.
В этой версии экраны логина и регистрации были доработаны до максимально-возможного соответствия с пользовательским опытом. После финальной защиты и перед публикацией в RuStore мы перешли на новую систему создания группы и добавления учеников, соответственно, дизайн тоже был модифицирован. Был удален экран создания группы (его заменили на всплывающее окно), а также был добавлен макет дизайна для настроек группы.
Мобильные приложения
Что касается xml-разметки, то на момент начала непосредственной разработки frontend-части я и понятия не имел, как это делать. Пришлось все переносить ручками и попутно разбираться, как с этим в дальнейшем работать.
Обычно в проектах я всегда занимался бэком, а в фронтенд старался не лезть. Однако наш случай не позволял двум людям работать над бэком и забыть про второе, поэтому пришлось переквалифицироваться. И тут опять же хочется отметить, что мастер-классы от IT Школы Samsung это просто нечто. В кратчайшие сроки получилось разобраться в чистой архитектуре и практически без проблем написать клиент. В целом, когда делаешь все по науке, написание кода превращается из задачи в просто написание. Ты знаешь, что и где должно быть. Ты просто пишешь, не думая ни о чем. Из состояния дзена иногда вырывают критические ошибки, над решением которых нужно подумать, но это лишь малое неудобство на пути к цели.
Одна из главных фич приложения – отметка посещений по QR-кодам. Для работы с QR-кодами было принято решение использовать библиотеку ZXing (Zebra Crossing). По задумке, ученики отмечаются на занятии с помощью временного QR-кода, который им скинул учитель. После сканирования на экране ученика появляется информация о занятии, а в таблице «проставляется» посещение.
Сканирование QR-кода и таблица посещений
Реальные проблемы начались, когда настала пора переносить еще одну из главных фишек нашего приложения — таблицу. Накидать макет в фигме это одно, а вот перенести все в xml с задуманным функционалом — это уже задача посложнее. Что я только не пробовал — и GridLayout, и TableLayout, и вложенные RecyclerView… уже даже Тимур подключился к проблеме и мы стали смотреть готовые решения в интернете. Но в итоге нам пришлось разбираться с этим самостоятельно. Решили все-таки остановиться на вложенных списках. Где-то поигрались, где-то добавили новую разметку и вроде как даже получилось. И очень хорошо получилось. Прямо как изначально и задумывалось. Поэтому, если хочешь сделать что-то хорошо, сделай это сам, а если не получается — зови Тимура, и тогда получится.
Работа в команде
Разработка приложения – одно дело, но без грамотной организации процесс превращается в кашу. Поэтому сейчас Тимур расскажет, как происходило взаимодействие в команде разработки TutOn:
Конечно, наш проект был бы невозможен, если бы мы не работали слаженно. Именно поэтому мы использовали некоторые инструменты для этого:
Первый инструмент – это конечно же таск-менеджер. Мы использовали методологию Scrum с её спринтами, поэтому в начале каждого спринта мы планировали себе список задач, которые хотим выполнить в этот спринт. Это очень удобно, когда имеешь чёткий план спринта перед глазами, тогда абстрактное «сделать приложение» превращается во вполне понятные задачи.
Второй инструмент – это система контроля версий Git. Думаю, тут и так понятно, что без него невозможно представить современную разработку, поэтому вкратце расскажу про то, как мы использовали систему веток. Наши ветки разделялись на три типа: master, dev, feature (впоследствии feature превратились в личные ветки разработчиков из-за нехватки времени):
-
ветка master – некий священный таймлайн всех изменений, куда попадает только хорошо протестированный и стабильный код,
-
ветка dev, напротив, может содержать какие-то мелкие ошибки, которые должны быть устранены в процессе тестирования,
-
ветки feature (которые потом трансформировались в dev_{developer-name}) нужны для разработки нового функционала (фич), позже эти ветки «сливаются» с веткой dev.
Далее идёт не совсем инструмент, а подход Contract First. Что же это за зверь такой? При разработке продукта очень важно иметь возможность разрабатывать бэкенд и фронтенд параллельно, именно из-за этого мы использовали этот подход: мы заранее договорились, какие данные мы передаём и в каком формате. Получилось что-то вроде документации REST API и благодаря ей мы точно знали, какие «контракты» (или эндпоинты) и где используются. Позже был подключен Swagger для автоматической документации и процесс стал легче.
Во время такого интенсивного периода очень важно было не потерять настрой и не выгореть, поэтому вот несколько советов, которые помогут избежать этого:
-
Не забывайте про здоровый сон. Звучит банально, но это действительно важно.
-
Не забывайте про тимбилдинг. Это особенно полезно, когда команда только образовалась и ещё не сработалась. Например, мы с Артёмом играли в настольную ролевую игру Dungeons and Dragons
-
Не забывайте про отдых. Прогулка на свежем воздухе не только снижает уровень стресса, но и повышает креативность
Работа в команде, хоть и в небольшой, стала очень интересным опытом – с одной стороны, два человека могут параллельно выполнять разные задачи, но с другой стороны, возникает проблема синхронизации, ведь каждый видит свои пути решения. К счастью, мы быстро сработались и разные идеи способствовали развитию проекта.
Про обучение в «IT Школе Samsung»
Здесь мы хотим поговорить о нашем опыте обучения в IT Школе и возможностях, которые она даёт.
Обучение в IT Школе пришлось на 11 класс, это напрягало приближающимися экзаменами и последующим поступлением. Во время обучения проводились разные интересные активности, например, мастер-классы и Android Bootcamp. Последний, но не по важности, неплохо «забустил» разработку проекта не только благодаря лекциям, которые можно считать «библией» Android-разработки, но и благодаря двухдневному хакатону, за время которого нужно было реализовать мини-проект.
И это лишь малая часть возможностей, которые предоставляет IT Школа, ведь помимо этого ученики могут пообщаться с настоящими профессионалами, вырасти как специалисты, ну и, конечно же, получить неповторимые впечатления!
Обучение в «IT Школе Samsung» заканчивается созданием выпускного проекта и его защитой перед жюри. Но это ещё не все: с каждой площадки отбираются лучшие проекты, которые в дальнейшем выходят в финал ежегодного конкурса «IT Школа выбирает сильнейших!». В конкурсе участвуют ученики из России и Армении, а в этом году к традиционным площадкам присоединилась онлайн-площадка (кстати, именно здесь мы учились!).
Ну и нашим выпускным проектом, конечно же, стал TutOn!
Самая активная часть разработки проекта пришлась на май месяц. Большая часть времени уходила на подготовку к ЕГЭ, поэтому времени катастрофически не хватало и приходилось работать сверхурочно по ночам (так делать мы не рекомендуем, планируйте работу заранее!). Защита выпускного проекта выпала на следующий день после экзамена по математике. Помню, как мы в последние часы перед защитой доделывали презентацию и готовились рассказывать о проекте. Но через кровь и пот… мы вышли в финал!
Конкурс проектов «IT Школа выбирает сильнейших!»
На подготовку к финалу пришёлся масштабный фикс багов, добавление новых фич, а также создание промо-ролика и презентации.
Как вы уже догадались, для того чтобы показать хороший результат в финале, важна не только техническая часть приложения, но и убедительное выступление, поэтому к созданию презентации и промо-ролика мы подошли ответственно: Тимур взял на себя презентацию, постановку ролика и его монтаж, а Артём занимался подготовкой видеоматериалов и написанием сценария к ролику.
К финалу организаторы конкурса провели тренинг по навыкам презентации, который помог нам подготовить своё выступление. Там мы потренировали дикцию и жестикуляцию, а благодаря видеокурсу наша презентация стала «презентабельной».
И вот день финала… 20 минут до защиты – мы «заряжены» рассказывать про проект… И наше выступление проходит как по маслу! (Кстати, выступали мы вторыми)
И на следующий день… объявили результаты и… мы заняли первое место!
Как мы опубликовались в RuStore
В этом году IT Школа начала сотрудничать с RuStore и после завершения конкурса нам и другим участникам предложили опубликоваться в маркетплейсе RuStore. Ну и, конечно же, мы согласились!
Разумеется, нас не могли бросить одних, поэтому IT Школа совместно с RuStore подготовила серию мероприятий для улучшения наших приложений перед их публикацией. Первым из которых была доработка приложений вместе с кросс-тестированием – нас поделили на пары и на протяжении двух недель мы дорабатывали приложения и тестировали приложение напарника.
После этого начался второй этап – специалисты из RuStore записали мастер-классы про маркетплейс и его инструменты, но для публикации приложения нужно было правильно собрать apk, и в этом нам помог преподаватель IT Школы Владимир Шперлинг с его мастер-классами про создание релиз-сборки и автоматизации Github Actions. За всё это всем им огромное спасибо!
Ну а далее – публикация! Чтобы опубликоваться, нужно завести карточку приложения на платформе: прикрепить скриншоты, сделать описание и приложить apk (либо App Bundle), а после подождать, пока приложение пройдёт модерацию. К счастью, она проходит быстро.
Сейчас наши приложения доступны в RuStore по этим ссылкам: ученическое и учительское. Их уже использует наш преподаватель в своей группе и отзывается, что наши приложения заинтересовали ребят.
Страницы приложений в RuStore
Заключение
Никто не возвращается из путешествия таким же, каким он в него отправлялся. Так и здесь, пройдя через все трудности, мы приобрели ценные навыки и получили неповторимые впечатления.
Конечно, нам ещё предстоит много работы над приложением – разработка новых фишек и продвижение в маркетплейсе. Но в любом случае, мы довольны тем, что у нас получилось совместить разработку приложения со сдачей экзаменов и последующим поступлением в вузы.
IT Школа предоставляет очень много возможностей. Чтобы воспользоваться всеми, нужно приложить немалые усилия, но результат стоит того.
Конечно, это было бы невозможно без грамотного преподавателя, который поддерживал нас на всём пути и не давал нам с него сбиться. Поэтому мы выражаем огромную благодарность нашему преподавателю – Александру Непретимову! Именно благодаря нему у нас получилось занять первое место на конкурсе проектов «IT Школа выбирает сильнейших!».
Немного про Тимура
Всем привет, меня зовут Заруцкий Тимур, и я могу с радостью сказать, что прошедший год выдался крайне насыщенным.
Но начнём с небольшой предыстории, до IT Школы я уже хорошо программировал на Python и делал некоторые проекты, а также знал Java на базовом уровне.
Ещё в 10 классе я узнал про IT Школу Samsung от знакомого преподавателя (спасибо Олегу Юрьевичу Шелихову!). Я знал, что в 11 классе будет непросто, но любопытство меня пересилило, и я решил поступить в IT Школу.
Казалось бы, в выпускном классе очень тяжело совмещать подготовку к экзаменам с чем-то таким же объёмным, а особенно это начинает ощущаться, когда до экзаменов остаётся 2-3 месяца. Конечно, приходилось расставлять приоритеты, но моё желание изучать мобильную разработку и делать проект давало мне неугасающий запал сил.
Обучение в IT Школе мне понравилось – это не просто чтение теории, а интересно построенная программа и продуманный формат обучения – в конце обучения нужно сделать выпускной проект. Знаний даётся достаточно, чтобы продолжить самостоятельно изучать мобильную разработку. Особенно мне понравилось, что я познакомился с талантливыми людьми – моими одногруппниками и нашим преподавателем.
Я понимал, что подготовка к экзаменам отнимает очень много времени и я мог просто не успеть сделать выпускной проект. И поэтому я решил предложить Артёму объединиться, тем более он делал проект на похожую тему и тоже был в 11 классе.
Когда мы начинали делать проект, мы даже и подумать не могли, что будем участвовать в конкурсе. В процессе разработки мы поняли, что получается очень даже хорошо и наш проект может составить конкуренцию другим проектам, а потом получилось, что мы заняли 1 место в номинации «Социальные приложения» конкурса IT Школы.
Не могу не поблагодарить моего напарника Артёма, с которым мы делали выпускной проект, а позже пошли участвовать в конкурсе от IT Школы. Ну и конечно же хочу поблагодарить нашего преподавателя – Александра Евгеньевича Непретимова, который поддерживал нас на всех этапах, а также помогал не сбиться с пути!
Сейчас я студент 1 курса МАИ и продолжаю заниматься разработкой и делать различные проекты. Дальше – больше!
Контакты:
Немного про Артёма
Всем привет, меня зовут Добычин Артем, и я чуть с ума не сошел за прошедший год. 11 класс и так наполнен событиями под завязку — в основном все время забирают подготовка к ЕГЭ и сами экзамены.
Однако, вдобавок ко всему прочему, в месте, где я учился, добавляются обязательные предметы по выбору, и один из них — это курс мобильной разработки под Android.
Я знал, что под конец года будет тяжело, но хотел изучить что-то полезное и важное. Поэтому в начале 11 класса я поступил в IT Школу Samsung.
Обучение там мне очень понравилось — помимо того, что я получил фундаментальные знания и пощупал все стадии разработки проекта: от формирования идеи до публикации приложения, я познакомился с интересными и сильными ребятами (с одним из них я несколько месяцев безвылазно пилил проект). Также хочется выразить свою благодарность лучшему преподавателю IT Школы – Непретимову Александру Евгеньевичу, за то, что направлял нас от самого начала до самого конца и всегда помогал, когда возникали трудности.
Помню день, когда мне написал Тимур с предложением поработать вместе в команде. Я сначала хотел отказаться, мол экзамены, надо готовиться, но потом подумал: «а что плохого будет если я просто попробую?» Ну и так получилось, что мы заняли 1 место в номинации «Социальные приложения» конкурса «IT Школа выбирает сильнейших!».
Сейчас я уже студент 1 курса НИЯУ МИФИ, изучаю информатику в более широком плане — с экономической точки зрения. Напоследок хочется добавить, что только Java помогла мне накачать такой бицепс. Всем спасибо, всем удачи!
Контакты:
-
Telegram — @ogyrechik578
-
Почта — temdob-jp@mail.ru
В статье использованы кадры из кинофраншиз «Властелин Колец» и «Хоббит»
ссылка на оригинал статьи https://habr.com/ru/articles/891170/
Добавить комментарий