Этот пост изначально был размещен на Мой личный блог
Это может заработать мне «Nerd месяца» приз, но я хочу сказать вам, как (и почему) я построил PWA для моей свадьбы.:)
Некоторые твердые факты первых:
- Я вышла замуж. Ура!
- Я изначально придумал эту идею несколько лет назад, когда мой лучший мужчина женился.
- Сначала это может звучать Super странно, но я думаю, что мои причины, по которым я сделал это законно.
Нет, на самом деле, почему кто-нибудь сделает это?
Вернувшись, когда мой лучший мужчина женился, я изначально придумал эту идею, чтобы предоставить им приложение/веб-сайт, который позволил бы свадебными гостями загружать фотографии и текстовые сообщения в течение дня до того, как документируют свой день свадьбы, так как воспринимаются другими. К сожалению, потом я должен был закончить свой магистерский диплом, а также пришлось провести некоторое время в больницах (именно поэтому я в конце также пропустил свою свадьбу). Но идея как-то застряла в моей голове.
Быстро вперед до нескольких недель назад я близок, чтобы выйти замуж себя. И, честно говоря, это была моя жена, которая вернула мою идею на стол.
Помимо очевидной причины, которую я просто люблю учиться, создавая вещи, мне также понравилась идея позволить нашим гостям поделиться своими впечатлениями в частном порядке. Есть десятки платформ в социальных сетях, которые должны поделиться такими вещами, как это, но на мой взгляд, вы поймаете только « истинные » дух (глупые лица, веселые истории, вы называете его) события, если вы предоставляете способ делиться данными в частном порядке. Вы знаете, материал, которые вы не будете публиковать на своем Facebook, Twitter и т. Д. Также я не хочешь много фотографий из Мой Свадьба бродят через социальные сети.
Еще одним приятным побочным эффектом такого приложения/веб-сайта будет возможность предоставить нашим гостям инфо. Вещи, как таблицы времени, план питания, кредиты и так далее.
Так вот резюме наших требований:
Укажите приложение/веб-сайт нашим гостям, которые:
- Держит данные события
- Позволяет им загружать текстовые сообщения и/или изображения
- Это рода ” анти социальный “. Гости только видят свои собственные загрузки, только моя жена, и я вижу Все контент
- Не выглядит тоже sh ****
- Работает на различных устройствах от «Это должно быть в музее!» к «Это только что вышло вчера!» , в том числе различные операционные системы
Хорошо, это не звучит тупой. Как вы его построили?
Сначала я придумал идею построения кроссплатформенного нативного приложения, используя Флаттер Отказ Я построил маленькие демонстрационные приложения, когда он был в альфа-государстве и действительно понравился, поэтому в случае нативного приложения это было бы мое решение GOTO. Но нативные приложения требуют надлежащего способа распределения их, что, в свою очередь, потребует бы счета разработчика Apple, которая, в свою очередь, обойдется мне 100 $ в год, поэтому я откинул свою собственную идею приложения.
Слышав много положительных вещей о возможностях, предоставленных прогрессивными веб-приложениями (PWA), я решил почистить свои навыки развития веб-разработки Frontend. И поскольку мои навыки веб-разработки Frontend были в основном не существуют, я решил сделать это сложно, используя только простой JS, HTML и CSS.
Звучит разумным, но что вы узнали из строя приложения?
Вещи, которые я не имел (сознательно) использовал раньше и, следовательно, никакой подсказки к:
- Полифилл
- Обещания
- Api
- Пересечение API наблюдателя
- Работники обслуживания
- СМИ
- CSS преобразует
Вещи, которые я хотел попробовать:
- AUTH0 для аутентификации
Вещи, которые я уже знал, но все-таки увеличили свои знания
- Python бакэнду с помощью Колбы
Вещи, которые я построил, чтобы получить лучшее понимание
- Очень основной вид приложения
- Маршрутизация, включая аутентификацию для определенных маршрутов
- Ленивая загрузка изображений
- Пользовательская кэширование на заказ через сервисный работник
Фотографии или этого не произошло!
Заключение
- Лучший способ узнать новые вещи, чтобы на самом деле их использовать!
- Имея фиксированный крайний срок и несколько человек, чтобы показать свою работу, чтобы действительно повысит вашу мотивацию (а также повышает ваш страх неудачи)!
- Я построил отзывчивый, Mobile First, веб-сайт дизайна материала, который поддерживает современные браузеры (Chrome, Firefox, Samsung Internet, Safari) с нуля
- Узнал много о отзывчивом дизайне, особенностях браузера и опытному развитию в целом
- Я надеюсь, что результат не выглядит слишком плохо, комментарии приветствуются!
- Я наслаждался дизайной частью больше, чем я думал (больше на этом позже)
- Это сработало!:)
Этот пост пропустил все технические детали и должен изобразить мою мотивацию, а также обзор высокого уровня. Более технический пост будет следовать, но сейчас я слишком устал.
Если это заинтересовало вас, не стесняйтесь связаться со мной через комментарии, почта, Twitter и т. Д.
Пока
Симон
Оригинал: “https://dev.to/s1hofmann/-wddng—a-wedding-with-tech-support-hpc”