Я изучал веб -разработку в течение года, и я только что доставил свой самый первый MVP для клиента, это огромный шаг вперед в моем путешествии, чтобы стать разработчиком реального мира.
В этой статье я напишу о процессе строительства и дизайнерском мышлении в целом. Это не учебник в любом случае, я просто поделюсь своим опытом с любым заинтересованным.
- Введение проекта
- Технологический стек
- Каркас и дизайн
- Моделирование данных
- Проектная организация
- Sprint 01: Frondend
- Спринт 02: Бэкэнд
- Спринт 03: Реализация функций
- Sprint 04: исправить и развернуть
- Вывод
Позвольте мне сначала представить проект. Мы должны создать MVP для мобильного приложения, которое работает на обоих Android и Ios Анкет Имя этого приложения Аллергио и стремится облегчить жизнь людей с пищевой аллергией.
Спасибо Аллергио Вы можете создать профиль для своих родственников, зарегистрировать их аллергию и поделиться своими профилями со своими контактами.
Основной особенностью является сканер. Откройте переднюю камеру телефона, укажите ее на любой продукт питания, и будет отображаться список потенциальных аллергенов.
Чтобы выполнить эту миссию, я объединился с моим другом Валидом. Он талантливый растущий разработчик JavaScript, и приятно поделиться с ним этим опытом.
Чтобы построить это приложение, мы решили полагаться на очень популярную Mern стек, который включает в себя: ➡ Mongodb ➡ Экспресс ➡ Реагировать родной ➡ Узел
Хотя это технологии, с которыми я знаком, я никогда не работал с Реагировать родной И я не знаю много о концепциях мобильного развития.
Мы рассматриваем AWS и Хероку Для размещения бэкэнд -детали и для управления файлами, но я предоставлю более подробную информацию в Исправить и развернуть раздел.
Это уже звучит как отличный и захватывающий вызов 🤩
Вот список инструментов, с которыми я обычно работаю, чтобы улучшить свой опыт программирования: ➡ OS: Macos ➡ терминал: iterm2 ➡ IDE: VSCODE ➡ Версия: Git ➡ Менеджер пакетов: Npm ➡ Эмулятор iOS: Xcode ➡ Эмулятор Android: Android Studio ➡ Коммуникация: Слаб ➡ Организация проекта: Трелло
Наш клиент Ксавье предоставил простые каркасы, и мы немного переработали их, чтобы сделать его «современным» и улучшить пользовательский интерфейс/ux.
Мы в основном работали с Figma Это отличный инструмент, который я на 100% рекомендую. Позвольте мне показать вам несколько примеров.
Заставка:
Экран входа в систему:
Конечно, мы перепроектировали приложение в соответствии с соглашениями о мобильной разработке 2020 года, и мы черпали вдохновение из известных приложений, таких как Юка , Шазам , Spotify , …
Поскольку мы создаем приложение с полным стеком, мы должны хранить и управлять данными. Было бы безумно прыгать в процесс кодирования без четкого и хорошо разработанного плана действий.
С какими данными мы играем:
Пользователи 👤
{
email: { type: String, required: true, unique: true },
password: { type: String, required: true },
name: { type: String, required: true },
lastName: { type: String, required: true },
image: { type: String },
profiles: [{ type: mongoose.Types.ObjectId, ref: 'Profile' }],
allergens: [{ type: mongoose.Types.ObjectId, ref: 'Allergen' }],
contacts: [{ type: mongoose.Types.ObjectId, ref: 'User' }],
}
Профили 👨👩👧👦 (созданные пользователем для его родственников)
{
name: { type: String, required: true },
image: { type: String, required: true },
allergens: [{ type: mongoose.Types.ObjectId, ref: 'Allergen' }],
readers: [{ type: mongoose.Types.ObjectId, ref: 'User' }],
owner: { type: mongoose.Types.ObjectId, ref: 'User', required: true }
}
➡ аллергены 🥜
{
name: { type: String, required: true },
image: { type: String, required: true },
description: { type: String, required: true },
reaction: { type: String, required: true }
}
PS: Уникальные идентификаторы предоставляются MongoDB по умолчанию.
Потрясающе, теперь мы знаем, как выглядят наши данные Но этого недостаточно. Чтобы наше приложение было способным создавать, читать, удалять и обновлять данные, мы должны дать ему возможность общаться с нашим сервером.
Вы, возможно, уже знаете, Экспресс Облегчает создание API REST, и это именно то, что мы собираемся сделать!
Если вы не знакомы с архитектурой API, я рекомендую вам пропустить этот раздел.
Маршруты API:
Пользователи 👤 ⏩/api/users/➡ (get/: uid) Получите пользователя по ID. ➡ (пост/регистрация) Создайте учетную запись пользователя. ➡ (post/login) Пользователь журнала. ➡ (путем/) Редактировать информацию пользователя.
Профили 👨👩👧👦 ⏩/API/Профили/➡ (get/: uid/all) Получить все профили пользователя. ➡ (get/: pid) Получите профиль от id. ➡ (post/) Создайте новый профиль. ➡ (Поместить/: PID) Редактировать информацию о профиле.
Контакты 👥 ⏩/api/contacts/➡ (get/: uid) Получите контакты пользователя. ➡ (post/search) Поиск новых контактов. ➡ (пост/поделиться) Поделиться профилями с контактом. ➡ (post/) Добавить контакт. ➡ (удалить/) Удалить контакт. ➡ (post/unbare) Непрерывные профили с контактом.
Аллергены 🥜 ⏩/API/аллергены/➡ (get/: помощь) Получите аллерген от id. ➡ (получить/) Получите все аллергены. ➡ (get/name/: имя) Получите аллерген по имени.
Нам почти хорошо идти, прежде чем вы отправитесь в следующий раздел, я хочу быстро рассказать об управлении файлами.
Это одна из самых сложных тем, с которыми мы столкнулись при строительстве Аллергио И я подумал, что было бы интересно поделиться решением, которое мы придумали.
Вот проблема: как хранить изображения?
Загрузка изображений непосредственно в базу данных замедлит их, и большинство служб хостинга изображений требуют, чтобы вы платили ежемесячную плату.
Мы решили создать очень простую службу загрузчика пользователя, которая хранит изображения на самом сервере, и предоставляет URL -адрес их привлечение. Этот простой сервер размещен на Ubuntu экземпляр, работающий в облаке.
Это определенно не лучшее решение, но, учитывая огромное количество работы, которую мы должны выполнить за относительно короткий период времени, оно выполняет работу.
Killianfrappartdev/Image-Manager
Я никогда не расскажу об этом достаточно: организация – это ключ! 🔑
Организация полагается в основном на Agile Методология Потому что мы познакомились с этим во время нашего буткемпа кодирования.
Процесс строительства разделен на 4 спринта 5 дней (каждый спринт имеет свой собственный раздел), и каждый из них должен иметь четко определенные задачи.
В понедельник утром мы сгруппировали, чтобы составить исчерпывающий список задач на всю неделю. Мы использовали Трелло создавать маленькие карты для каждой задачи.
Каждую пятницу была встреча с нашим клиентом. Он всегда был счастлив иметь небольшую демонстрацию, и благодаря его еженедельным отзывам мы наконец -то смогли доставить продукт близко к его первоначальным ожиданиям.
Более того, мы пытались придерживаться ежедневной всталки с утренней и дневной ретроспективой около 17:30.
Есть еще один ключевой момент организации, когда вы начинаете новый проект, и это настройка рабочего процесса.
Мы работаем с GitHub Следуя рекомендациям GIT Flow как можно больше.
➡ Не знакомы с потоком GIT? Не беспокойтесь, посмотрите на мою статью! 🧐
Git flow введение 🌲
Killian Frappart ・ 23 сентября 20 ・ 3 мин читать
Наконец, позвольте мне показать вам структуру папок, с которой мы работали:
Аллергио 📂
Бэкэнд/ — Контроллеры/ — Модели/ ——– Маршруты/ ——– utils/ ——– Middlewares/
Frontend/ ——– Приложение/ ———– Активы/ ———– Компоненты/ ———– Экраны/ ———– Контекст/ ———– utils/ ———– Навигация/
Время наконец -то началось, чтобы начать кодирование! 🔥
Кричать Expo Эта буквально сделала этот проект возможным. Expo Это структура для приложений React, он предоставляет набор инструментов для начала создания вашего приложения за считанные минуты и скрывает большую часть сложности при настройке нового проекта.
Сначала было очень страшно работать с Реагировать родной Потому что мы никогда не использовали его раньше но Expo Документация хорошо написана, и я чувствовал себя как мобильный разработчик навсегда через пару дней.
После того, как мы инициализировали проект, настройка навигации в приложении является отличной отправной точкой. Очень похож на React Router для Интернета, React Navigation это отличная библиотека, с которой легко начать, и обеспечивает хорошее решение для всех вариантов использования.
Мы решили внедрить навигацию по вкладке для оптимального пользовательского опыта:
Другим важным шагом является настройка глобального контекста. Каждый разработчик React знает, насколько аккуратно может быть поднятие состояния через реквизит, когда вы проектируете, становится все больше.
Чтобы ответить на эту потребность в глобальном государстве, мы пошли на Реагировать контекст Главным образом для хранения пользовательской информации, такой как имя, фамилия, изображение и ли он регистрируется или нет.
Похоже, что до сих пор все работает нормально, давайте построим наши экраны и компоненты. У нас есть около 10 экранов для построения (для каждой вкладки существует внутренняя навигация) и примерно в два раза больше компонентов, таких как кнопки, карты, входы, нижние листы и многое другое.
На этом этапе мы работаем с фиктивными жестко закодированными данными. Наши компоненты в основном являются функциональными компонентами, и их состояние управляется с React Hooks Анкет
Надеемся, что у нас будет достаточно времени для реализации функций камеры и запроса на внешний API, чтобы собрать информацию о продуктах питания до конца первого спринта.
Как я уже упоминал ранее, бэкэнд этого проекта – API узла/экспресс REST, связанный с облаком Mongodb база данных.
Чтобы заставить его работать, мы начинаем с установки таких зависимостей, как cors , Body-Parser , мангуста , Nodemon , …
Работая с MongoDB, я настоятельно рекомендую вам работать с Монгуз также. Это делает вашу жизнь намного проще. Определите модели Mongoose для ваших данных, подключитесь к базе данных, и вы готовы идти ✅
Затем мы регистрируем маршруты, как я уже объяснил здесь, и подключаем каждый маршрут к специальному контроллеру.
Поведение каждого контроллера должно быть проверено, и для этого вы можете дать Почтальон Попробуй.
Наконец, мы улучшаем надежность нашего сервера с помощью надлежащего обработки ошибок и улучшать опыт разработки с переменными Nodemon и среды.
Это, безусловно, самая захватывающая неделя, когда мы, наконец, видим результат всего, что мы делали раньше.
Мы проводим всю неделю, подключая пользовательский интерфейс Frontend к контроллерам бэкэнд с помощью HTTP -запросов и обновлять базу данных в режиме реального времени.
HTTP -запрос выполняется с помощью Axios что является личным предпочтением.
На этой неделе есть много функций: ➡ Войдите в систему/регистрацию по электронной почте и пароля. ➡ Создать и обновить профили. ➡ Редактировать информацию пользователя. ➡ Добавить/удалить контакты. ➡ Поделиться профилями с контактами. ➡ Загрузите изображения из галереи телефона. ➡ Отправьте SMS, чтобы пригласить друзей. ➡ …
Нативная функциональность, такая как SMS, камера и фотогалерея, могут быть реализованы благодаря невероятному Док 🌟
На прошлой неделе этого невероятно обогащающего приключения. Я уже многому научился и потратил так много времени и энергии. Мы устали, но еще предстоит сделать работу, прежде чем мы отправим наш проект клиенту.
Тысячи строк ждут, чтобы быть рефактованными, и все еще остается множество небольших ошибок. Давайте начнем с очистки этого и исправить как можно больше проблем с стилем.
AWS Имеет облачный сервис под названием EC2. Мы создаем экземпляр Ubuntu и подключаем через SSH. После небольшого настройки вещей наш сервер и диспетчер изображений работают в облаке.
Прямо сейчас приложение доступно только через хостинг Expo, но мы надеемся развернуть его в App Store и Play Store в ближайшее время.
Прошло четыре интенсивных недели, мы устали, проект все еще немного глюка, но клиент счастлив, и это то, что важно больше всего.
По моему мнению, мой друг Валид и я проделали здесь отличную работу, впервые работая над настоящим проектом, и столкнувшись с препятствиями, которые сделали нас лучшими застройщиками.
Я хотел предоставить ссылку на демонстрацию или исходный код приложения с этой статьей, но, поскольку этот проект находится на фазе альфа, клиент хотел бы сохранить некоторую информацию конфиденциальной.
Большое спасибо за чтение!
Я хотел бы получить от вас отзывы, очень ценится любые советы по улучшению как разработчика или как блоггер 😇
Оригинал: “https://dev.to/killianfrappartdev/how-i-built-a-real-world-project-for-the-first-time-5gn5”