Это может принести мне приз "Ботан месяца",
но я хочу рассказать вам, как (и почему) я создал PWA для собственной свадьбы. :)

Сначала несколько неопровержимых фактов:

  1. Я вышла замуж. Ура!
  2. Впервые я пришла к этой идее несколько лет назад, когда мой шафер женился.
  3. Сначала это может показаться очень странным, но я думаю, что мои причины, по которым я это сделал, вполне законны.

Нет, действительно, зачем кому-то это делать?

Когда мой шафер женился, мне изначально пришла в голову идея предоставить им приложение/веб-сайт, которые позволили бы гостям на свадьбе загружать фотографии и текстовые сообщения в течение дня, чтобы задокументировать день своей свадьбы так, как его воспринимают другие.
К сожалению, тогда мне пришлось заканчивать магистерскую диссертацию, а также пришлось провести некоторое время в больницах (поэтому я в конце концов пропустил и его свадьбу).
Но эта мысль как-то засела в моей голове.

Перенесемся на несколько недель назад, я сам скоро женюсь.
И, честно говоря, это моя жена вернула мою идею на стол.

Помимо очевидной причины, по которой мне просто нравится учиться, создавая вещи, мне также понравилась идея позволить нашим гостям делиться своими впечатлениями в частном порядке.
Существуют десятки социальных сетей, где можно делиться подобными вещами, но, по моему мнению, вы уловите «истинный» дух события (глупые лица, забавные истории и т. д.) события, только если предоставите возможность делиться данными в частном порядке.
Ну, знаете, что вам нужно не стал бы публиковать в твоём Facebook, Twitter и т. д.
Также я не хотел/не хотел, чтобы многие фотографии с моей свадьбы бродили по соцсетям.

Еще одним приятным побочным эффектом такого приложения/веб-сайта будет возможность предоставлять нашим гостям информацию. Такие вещи, как расписание, план питания, кредиты и так далее.

Итак, вот краткое изложение наших требований:

Предоставьте нашим гостям приложение / веб-сайт, которые:

  • Содержит данные о событиях
  • Позволяет им загружать текстовые сообщения и / или изображения
  • Отчасти «антиобщественный». Гости видят только свои собственные загрузки, только я и моя жена видим весь контент
  • Не выглядит слишком дерьмово
  • Работает на различных устройствах от "Это должно быть в музее!" до "Это только вчера вышло!", включая различные операционные системы.

Хорошо, это не звучит так уж глупо. Как вы его построили?

Сначала мне пришла в голову идея создать кросс-платформенное нативное приложение с помощью Flutter.
Я создавал небольшие демо-приложения, когда оно было в альфа-версии, и оно мне очень нравилось, так что в случае нативного app это было бы моим решением для перехода.
Но нативные приложения требуют надлежащего способа их распространения,
для чего, в свою очередь, потребуется учетная запись разработчика Apple,
что, в свою очередь, обойдется мне в 100 $ в год,
поэтому я отказался от идеи нативного приложения. Услышав много положительного о возможностях, предоставляемых прогрессивными веб-приложениями (PWA), я решил освежить свои навыки веб-разработки. И так как мои навыки веб-разработки интерфейса практически отсутствовали, я решил пойти сложным путем, используя только простые JS, HTML и CSS.

Звучит разумно, но чему вы научились при создании приложения?

Вещи, которые я (сознательно) не использовал раньше и, следовательно, понятия не имею о:

  • Полифиллы
  • Обещания
  • Получить API
  • API наблюдателя за перекрестком
  • Работники сферы обслуживания
  • Медиа-запросы
  • CSS-преобразования

Что я хотел попробовать:

  • Auth0 для аутентификации

Вещи, которые я уже знал, но все же расширил свои знания

  • Бэкэнд Python с использованием Flask

Вещи, которые я построил сам, чтобы лучше понять

  • Очень простой вид одностраничного приложения
  • Маршрутизация, включая аутентификацию для определенных маршрутов
  • Ленивая загрузка изображений
  • Кастомизированное кеширование через сервис-воркер

Вывод

  • Лучший способ узнать что-то новое — это использовать его на практике!
  • Наличие фиксированного срока и довольно много людей, которым можно показать свою работу, действительно повышает вашу мотивацию (а также увеличивает ваш страх перед неудачей)!
  • Я с нуля создал адаптивный, ориентированный на мобильные устройства веб-сайт с материальным дизайном, который поддерживает современные браузеры (Chrome, FireFox, Samsung Internet, Safari).
  • Узнал много нового об адаптивном дизайне, особенностях браузера и фронтенд-разработке в целом.
  • Надеюсь результат не плохой, комментарии приветствуются!
  • Мне понравилась часть дизайна больше, чем я думал (подробнее об этом позже)
  • Это сработало! :)

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

Если вас это заинтересовало,
не стесняйтесь обращаться ко мне через комментарии, почту, Twitter и т. д.

Пока

Саймон