W

wddng - 有技术支持的婚礼

2025-06-10

wddng - 有技术支持的婚礼

这篇文章最初发布在我的个人博客上

它可能会让我获得“本月书呆子”奖,但我想告诉你我是如何(以及为什么)为自己的婚礼构建 PWA 的。:)

首先要说的是一些确凿的事实:

  1. 我结婚了。耶!
  2. 几年前,当我的伴郎结婚时,我最初有了这个想法。
  3. 乍一听这可能很奇怪,但我认为我这样做的理由是合理的。

不,真的,为什么有人会这样做?

我的伴郎结婚的时候,我最初萌生了一个想法,想为他们做一个应用程序/网站,让婚礼宾客可以上传照片和短信,记录下他们婚礼当天的点滴,让别人也能感受到他们的婚礼。
可惜的是,当时我得完成硕士论文,还要住院一段时间(所以我最后也错过了他的婚礼)。但这个想法不知怎么地就在我的脑海里挥之不去。

几周前,我也快要结婚了。说实话,是老婆让我重新考虑结婚的。

除了我喜欢通过动手做东西来学习这个显而易见的原因之外,我也很喜欢允许宾客私下分享他们的感受。现在有很多社交媒体平台可以分享类似的东西,但我认为,只有提供一种私密的数据分享方式,才能捕捉到活动“真正”的精髓(比如搞笑的表情、有趣的故事等等)。你知道,那些你不会在Facebook、Twitter等平台上发布的内容。而且,我也不希望我的婚礼照片在社交媒体上流传。

此类应用程序/网站的另一个好处是可以为我们的客人提供信息,例如时刻表、膳食计划、积分等等。

以下是我们要求的总结:

向我们的客人提供一个应用程序/网站:

  • 保存事件数据
  • 允许他们上传短信和/或图像
  • 有点“反社会”。访客只能看到自己上传的内容,只有我和妻子可以看到所有内容。
  • 看起来还不错
  • 可在各种设备上运行,范围从“这应该在博物馆里!”“它昨天才出来!”,包括各种操作系统

好吧,听起来没那么蠢。你是怎么做到的?

最初,我萌生了用Flutter构建跨平台原生应用的想法。它在 Alpha 测试阶段的时候,我开发过一些小型演示应用,并且非常喜欢它。所以,如果要开发原生应用,这本来是我的首选方案。但是原生应用需要合适的分发方式,这就需要一个 Apple 开发者账户,而这每年要花费我 100 美元,所以我放弃了这个原生应用的想法。

听到了很多关于渐进式 Web 应用 (PWA) 带来的各种好处后,我决定提升一下我的前端 Web 开发技能。由于我的前端 Web 开发技能几乎为零,所以我决定用最难的方法,只使用简单的 JS、HTML 和 CSS。

听起来很合理,但是您从构建应用程序中学到了什么?

我以前没有(有意)使用过的东西,因此也不知道:

  • Polyfills
  • 承诺
  • 获取 API
  • 交叉路口观察器 API
  • 服务人员
  • 媒体查询
  • CSS 变换

我想尝试的事情:

  • Auth0用于身份验证

我已经知道的事情,但仍然增加了我的知识

为了更好地理解而自己构建的东西

  • 一种非常基本的单页应用程序
  • 路由,包括特定路由的身份验证
  • 图像延迟加载
  • 通过服务工作者定制缓存

有照片否则就没发生!

登陆页面

菜单抽屉

时间表

菜单

图像流

结论

  • 学习新事物的最好方法是实际使用它们!
  • 有一个固定的截止日期和相当多的人展示你的工作确实会增强你的动力(同时也会增加你对失败的恐惧)!
  • 我从零开始构建了一个响应式、移动优先、材料设计的网站,该网站支持现代浏览器(Chrome、FireFox、Samsung Internet、Safari)
  • 学习了很多关于响应式设计、浏览器特性和前端开发的知识
  • 希望结果看起来不会太糟糕,欢迎评论!
  • 我比想象中更喜欢设计部分(稍后会详细介绍)
  • 成功了!:)

这篇文章略过了所有技术细节,应该能概括我的动机以及一个高层次的概述。之后会写一篇更技术性的文章,但现在我太累了。

如果您对此感兴趣,请随时通过评论、邮件、Twitter 等方式与我联系。

这么久

西蒙

鏂囩珷鏉ユ簮锛�https://dev.to/s1hofmann/-wddng---a-wedding-with-tech-support-hpc
PREV
如何使用 GitHub Actions 通过计划事件保持简历更新
NEXT
开发人员的时间管理和生产力