Must read
103.ua клон
Всем привет! Сегодня хочу рассказать вам об идеи создания приложения по поиску докторов и клиник, как наша команда разрабатывала это приложение, и с какими трудностями мы столкнулись, и что в итоге получилось.
Предисловие, или как все начиналось…
Меня зовут Дмитрий, мне 34. Работал ранее управляющим крупного ресторана. Имею два высших образования (математика и экономика).
Программирование выбрал для себя как единственный вариант, который позволяет постоянно развиваться и “не сидеть на месте”. Поскольку на моей предыдущей должности расти было уже некуда, т.к. уже прошел в этом деле “огонь и воду” %)!
Начал изучать программирование в январе 2020 года. Предпочитаю всего достигать самостоятельно, так что занимался по доступным ресурсам: MDN, EdEra, Learn JS, Freecodecamp, CodeWars, W3School, Udemy.
О школе The Rolling Scopes School узнал случайно в чате, когда проходил курсы в компании Andersen. Окончив мех-мат “Каразина” — я всегда мечтал заниматься программированием, но из-за различных обстоятельств — мне там было делать нечего. И в феврале 2019г. я решил перевернуть свою жизнь “с ног на голову”! После открытия нового успешного ресторана, начал изучать практически с “0” JavaScript. Главной проблемой в процессе изучения JS для меня было отсутствие конкрентной практики с четко поставленными задачами!
Я просто не знал и не понимал: — “Что такое реальный проект!”. И как на нем распределяются задачи. И реально: “Я не верю в лозунги платных курсов: “Стань успешным FrontEnd разработчиком за 1 месяц.”
Обучение в школе RS-School было для меня местами очень трудным и было желание все бросить. Но, RS-School, я могу назвать, без преувеличения, лучшими курсами и лучшим источником знаний. У нас есть четкая программа курса, со своими deadline для каждой task’i, есть список материала, который относится к теме задания, и есть четкое ТЗ, по которому вам необходимо выполнить реальный проект, и критерии оценки. Помимо заданий также проводят live-coding действующие разработчики из EPAM, на котором вы сможете задать интересующие вас вопросы. Проводятся тесты по завершенным темам.
И вообще! зедсь вы узнаете что такое: Webworker-ы, ES6, CoreJS, Promise, a11y, etc…
Для общения в рамках школы созданы каналы в Discord и Telegram.
Особое внимание стоит уделить, что в процессе обучение у вас будет ментор, который проводит code-review, созвоны, дает подсказки, и в целом показывает реальную логику построения приложения!
За время обучения я выполнил следующие проекты:
- верстку сайта по макету pixel perfect (где использовался достаточно сложный алгоритм сортировки элементов)
- виртуальную клавиатуру (работа с ивентами клавиатуры и мыши).
- игра “Пятнашки” (первая реальная игра на чистом JS)
- приложение по изучению css-селекторов
- приложение Covid Dashboard (первая командная работа, работа с API, Webpack, Sass, eslint-config-airbnb-base, ES6)
- и финальный командный проект Rsclone 103.ua
О проекте
В качестве финального задания Rsclone было предложено на выбор: сделать игру или приложение для работы в командах по 2–4 человека, с рекомендацией использовать практически все доступыне средства для разработки (TypeScript, React, Angular, RestfulAPI …). Это задание для всех нас было самым сложным, поскольку ни у кого из нас не было опыта в использвании фреймворков, и это была отличная возможность попробовать себя в новом направлении и технологиях.
Небанальная идея
Когда стал вопрос о выборе идеи для выполнение задания, основным критерием было:
- интересное, социально-значимое приложение, которое поможет удовлетворять существующие потребности
- приложение, в котором мы сможем реальзовать необходимое количество фич
- приложение, которое не будет чисто коммерческим проектом. В процессе выбора оригинального сайта (для примера), рассматривались приложения: pn.com.ua, tabletki.ua.
Основная проблема, которую решает наше приложение для основного пользователя:
- общедоступный ресурс для потребителя
- честные отзывы о клинике и специалистах
- возможность самостоятельно выбрать специалиста из интересующей области медицины
- возможность выбрать клинику/специалиста в зависимость от локации пользователя, найти ближайщее учреждение
- возможность осуществить бронирование приема в выбранной клинике, выбранного специалиста на удобное время
Работа в команде
Rsclone — это командный проект. Вместе со мной в команде работали: Настя, Андрей и Андрей :) Для командных созвонов был создан чат в skype. В первый день мы созвонились для решения следующих задач: какую идею выбираем для приложения, какие глобальные задачи для реализации приложения перед нами стоят, составили список этих задач, как будет организована наша командная работа, структура проекта. Было решено вести разработку на React, с ипользованием Webpack, eslint-config-airbnb-base, ES6, TypeScript, React Hooks и styled-components.
Для отслеживание процесса разработки и выполнения поставленных задач была создана доска в Trello, которая была интегрирована с GitHub и распределены задачи между участниками:
Работа в команде строилась по следующим правилам:
- отметить в Trello задачу, над которой начинаешь работу, если необходимо выделить в ней подзадачи;
- разработка ведется в отдельной ветке;
- по окончанию работы создать Pull Request и добавить участников команды в Reviewers для CodeReview;
- когда PR одобрен, смержить новый функционал с develop;
- отметить задачу в Trello как выполненную и приступить к следующей.
Какие фичи были реализованы
- поиск города по вводу пользователя и вывод подсказки с городом, среди всех существующих городов (API)
- авторизация и регистрация пользователя в Google Firebase
- кабинет пользователя, где можно редактировать регистрационные данные, добавить аватар, сменить пароль
- возможность восстановления доступа к аккаунту, путем сброса пароля, после подтверждения действия у пользователя на почте по ссылке.
- сохранение и загрузка данных пользователя в Google Storage
- работа с базой данных MongoDB
- чат-бот react-simple-chatbot
- подключение YandexMap
- подключение формы поделиться через социальные сети Yandex
- обработка форм, отправка данных на email emailjs
- slider-swiper react
- сохранение данных в LocalStorage
- создание сервера node.js и express.js
Скриншоты интерфейса:
https://rsclone-103.netlify.app/
https://www.youtube.com/watch?v=oEGh1lw3x3w
Ход разработки:
Для реализации компонентов использовалась связка React.js + TypeScript. TypeScript помогает избежать ошибок сразу на этапе разработки, типизируя данные. Разработку вели с использованием React Hooks и styled-components. Хуки — позволяют использовать состояние и другие возможности React без написания классов. Хуки предоставляют более прямой доступ к API: пропсов, состояния, контекста, рефов, и жизненного цикла, что позволяет сделать наш код менее громоздким и более доступным. Styled-components — были выбраны, поскольку позволяют писать нам весь код компонента в одном файле.
Скриншот из вкладки Insight/Contributors на GitHub (не знаю почему, но здесь не отображается вклад Насти)
Вклад каждого участника:
Я, Дима Литвинов, и остальные ребята из команды, Настя Федотова, Андрей Знак и Андрей Шамрей, ниже рассказываем о своём вкладе в проект, задачах и результатах.
Дима Литвинов:
Задачи, которые я решал:
- реализация компонента header, который состоит из следующих компонентов: лого, поиск города пользователя, переход на страницу авторизации;
- реализация компонента авторизация, который состоит из компонентов: регистрации нового пользователя, авторизация существующего пользователя, страницы восстановления доступа, и формы регистрации через социальные сети. Для этой задачи была выбрана Google Firebase (имеет доступную документацию, хорошие отзывы, интегрирована с React);
- реализация компонента кабинет пользвателя, в котором пользователь имеет возможность персонализировать информацию о себе (заменить фото, изменить регистрационные данные);
- реализация чат-бота. Который обеспечивает автономную связь пользователя с мед учреждением, либо специалистом. Для примера в проекте реализована отправка введенных пользователем данных на почту администратора, что легко можно заменить на почту больницы из БД. Также чат бот поддерживает голосовой ввод;
- реализация компонента футер, в котором у пользователя есть возможность поделиться нашим приложением в социальных сетях;
- реализация компонента Журнал, компонента Форма регистрации отзывов пользователя, страницы всех отзывов;
- реализация компонента Информация о специалисте;
- реализация компонента “Забронировать онлайн”, после заполнения формы, письмо с указанной информацией отправляется на почту выбранного специалиста для регистрации;
- роутинг;
- подготовка статьи
- подготовка файла Readme.md с четким ТЗ
Настя Федотова:
Задачи, которые я решала:
- работа с БД. Для этой задачи была выбрана MongoDB, которая удобна в хранении данных в формате JSON, отсутствии схемы, т.е.
mongoDb основана на коллекциях различных документов. Количество полей, содержание и размер этих документов может отличаться. Т.о. различные сущности не должны быть идентичны по структуре;- заполнение базы данных, формирование api, было создано 8 апишек;
- реализация компонентов, связынных с запросами на БД (создание клиник, карта расположения клиник);
- создание сервера node.js и express.js
- видео-ролик на youtube
- deploy back-end приложения на heroku
Андрей Знак:
Задачи, которые я решал:
- навигация по приложению. Данный элемент состоял из двух компонентов и сложность состояла в том, что необходимо вызывать второй компонент по клику на один из пунктов первого компонента навигации, со своими категориями, а также правильно организовать структуру БД, для удобной работы с ней;
- компонент слайдер;
Андрей Шамрей:
Задачи, которые я решал:
- компонет врачи
- компонент клиники
С какими сложностями мы столкнулись:
Трудности с которыми мы столкнулись были примерно одинаковыми для всех участников команды:
- освоение TS, работали с ним в первый раз.
- трудности в объединении компонентов и договоренности между участниками команды.
- подбор формата для сохранения фотографии пользователя, поскольку firebase имеет ограничения при загрузке файлов. Решено было путем перевода в бинарный массив
Uint8Array - освоение логики React
Скриншот с историей коммитов:
Итоги
За месяц работы наша команда изучила для себя новый востребованный фреймворк React. Каждому удалось поработать с бэкендом приложения, разобраться с TypeScript, роутингом, поработать с render-props и state. В результате получилось достаточно функциональное приложение, которое может уже быть прототипом нашей идеи. Важной частью проекта была работа в команде, которая отображает реальный процесс разработки приложения.
That’s all Folks!” 🐷
