Введение

Некоторое время и дольше, чем я мог бы признаться, я тратил все свое свободное время на побочный проект. Система онлайн-бронирования, которая управляет расписанием занятий через простой веб-интерфейс. Это началось как обучающий проект, но постепенно превратилось в признанный продукт.

Самостоятельно строить что-либо непросто. Но инструменты, доступные сегодня, делают индивидуальную разработку более реалистичной. Это обзор технологий и инструментов, которые я использовал для создания https://tomorrowapp.io, и, в частности, рабочего процесса, используемого при работе в одиночку или в небольшой команде.

Инструменты SaaS

Сосредоточьтесь на функциях, которые делают ваше приложение уникальным. Передайте все остальные функции третьей стороне. Tomorrow App интегрируется с рядом сервисов для обеспечения основных функций, таких как инфраструктура, платежи и аутентификация.

Stripe: все платежи, включая управление подпиской и отдельные транзакции, осуществляются через Stripe. Благодаря чистой документации опыт разработчика здесь просто фантастический. Платформа полностью бесплатна для разработки, поскольку использует модель оплаты по мере использования. Хотя API великолепен, он также требует большого количества кода для интеграции, включая управление множеством веб-перехватчиков. Если вы ищете что-то самоуправляемое, вы можете найти Chargebee лучшей альтернативой.

Auth0: вы можете управлять аутентификацией / авторизацией самостоятельно, и сначала это может показаться простым, но когда вы рассматриваете управление регистрацией, входом в систему, сбросом пароля, социальным входом и управлением ролями, это может быстро стать трудоемким зверьком. Использование Auth0 помогает мне лучше спать по ночам.

Heroku, Netlify: Tomorrow App - это приложение JAMstack. Хостинг разделен между Heroku для основного API и Netlify для всех интерфейсных приложений. Эти инструменты сделали инфраструктуру и DevOps почти смехотворно простыми и позволили мне сосредоточиться исключительно на разработке приложений.

Стек разработчиков

В центре внимания Tomorrow App была сама система бронирования. Я также хотел потратить много времени на UI / UX, поскольку это могло оказаться основным уникальным аргументом в пользу продажи по сравнению с более устаревшими платформами.

Проект разделен на 5 основных частей.

GraphQL API

Инструменты: Узел, Экспресс, Apollo Server, Prisma2, Postgres, RRule

Apollo был очевидным выбором для GraphQL API, и, поскольку весь проект написан на Typescript, было важно иметь полную поддержку типов во всех приложениях. Для управления этим я использовал GraphQL Codegen, который автоматически генерирует типы на основе вашей схемы GraphQL, обеспечивая безопасность типов между клиентом и сервером. Для взаимодействия с базой данных я использовал Prisma2, который автоматически генерирует типы на основе схемы вашей базы данных. Эта комбинация упростила рефакторинг.

Интегрированная касса

Инструменты: React, Apollo Client

Оформление заказа выполняется через iframe или путем перенаправления на размещенную страницу. Касса управляет платежами через Stripe и реализует специализированную UI-библиотеку.

UI-библиотека

Инструменты: React, Storybook, TSDX.

UI-библиотека разработана в Storybook, чтобы лучше изолировать каждый компонент. Разработка компонентов вне приложения-потребителя обеспечивает отличную мысленную модель повторного использования компонентов. Но создание пуленепробиваемого пользовательского интерфейса занимает очень много времени. Оглядываясь назад, я бы, вероятно, использовал установленную библиотеку и изменил тему.

Панель администратора

Инструменты: React, Apollo Client, AntD.

Панель администратора содержит гораздо больше экранов и взаимодействий с пользователем, чем оформление заказа. Расширение пользовательской UI-библиотеки заняло бы вечность, поэтому я выбрал Ant Design. В отличие от большинства библиотек пользовательского интерфейса, которые предоставляют компоненты низкого уровня, такие как вводы, кнопки и списки, AntD делает еще один шаг вперед с компонентами высокого уровня, такими как календари, диаграммы и формы загрузки. Это резко сократило время разработки.

Веб-сайт

Инструменты: Реагировать, Гэтсби.

Учитывая, что веб-сайт полностью статичен, я нашел Гэтсби отличным предложением. Фреймворк устраняет сложность создания вашего сайта быстрым и отзывчивым, включая оптимизацию пакетов и изображений прямо из коробки. Данные извлекаются во время сборки, поэтому вы можете легко отказаться от использования бесплатного уровня услуг, таких как Contentful, для управления своим контентом.

Управление проектом

Я использовал приложение под названием MeisterTask для управления проектом, которое предоставляет интерфейс, похожий на Trello. Я обнаружил, что в нем есть все необходимые инструменты, при этом он прост и удобен в использовании. Корпоративные инструменты, такие как Jira, были бы излишними при работе в одиночку.

-

В настоящее время я работаю в Лондоне подрядчиком по программному обеспечению. Если вы хотите поболтать больше, вы можете найти меня в LinkedIn :)
https://www.linkedin.com/in/warren-day-86b0a15a/