DEV Community
·
以产品思维进行工程设计
内容提要
在假期中，我开发了一个简化的汽车选择游戏，解决了截图分享的问题。通过Algolia API获取实时数据，创建了一个移动友好的网页，方便朋友讨论。项目采用静态生成，并利用GitHub Actions定时更新，提升了效率。
关键要点
-
假期中开发了一个简化的汽车选择游戏，解决了截图分享的问题。
-
通过Algolia API获取实时数据，创建了一个移动友好的网页，方便朋友讨论。
-
项目采用静态生成，并利用GitHub Actions定时更新，提升了效率。
-
游戏的初衷是让朋友们讨论梦想中的汽车，最初通过截图分享拍卖列表。
-
游戏复杂化后，手动截图变得耗时，决定自动化或简化这个过程。
-
目标是展示12辆汽车供讨论，数据来自Collecting Cars的实时拍卖页面。
-
通过Algolia获取拍卖数据，成功以JSON格式访问。
-
使用Astro和Tailwind CSS构建了简化版的Collecting Cars页面。
-
创建了“简单模式”，限制选择为3辆车，使选择更容易。
-
游戏主要在移动设备上进行，因此进行了移动友好的设计调整。
-
项目采用静态生成，利用GitHub Pages进行托管，避免了SSR的复杂性。
-
使用GitHub Actions定时触发重建，确保数据每天更新一次。
-
强调选择合适工具的重要性，避免过度依赖熟悉的技术栈。
延伸解读
项目背景与动机
作者在假期中开发了一个汽车选择游戏，旨在简化朋友们讨论梦想汽车的过程。最初通过截图分享拍卖列表，但随着游戏复杂化，手动截图变得耗时，因此决定自动化这一过程。这个背景为项目的技术选择和设计思路提供了重要的上下文。
技术选择的重要性
文章强调了选择合适工具的重要性，避免过度依赖熟悉的技术栈。作者通过使用Astro和Tailwind CSS，结合GitHub Actions进行静态生成，展示了如何根据项目需求灵活选择技术，以提高效率和用户体验。
移动优先设计
随着用户主要通过移动设备访问游戏，作者调整了设计以适应移动端。这一变化不仅提升了用户体验，也反映了在开发过程中对用户行为的敏感性，强调了在设计时考虑目标用户的重要性。
延伸问答
这个汽车选择游戏的主要功能是什么？
游戏的主要功能是展示12辆汽车供朋友们讨论，简化了截图分享的过程。
如何获取汽车拍卖的实时数据？
通过Algolia API获取实时数据，成功以JSON格式访问拍卖数据。
为什么选择静态生成而不是服务器端渲染？
选择静态生成是因为游戏每天只玩一次，SSR没有优势，且静态生成更简单。
游戏的“简单模式”有什么特点？
“简单模式”限制选择为3辆车，使选择变得更容易，提升了游戏的乐趣。
项目是如何确保数据每天更新的？
使用GitHub Actions定时触发重建，确保数据每天更新一次。
在开发过程中遇到了哪些挑战？
最初手动截图耗时，且需要过滤不相关的内容，决定自动化简化这个过程。
