DEV Community
·
从初学者到开发者：我作为非开发者创建开源应用的旅程
💡
原文英文，约1000词，阅读约需4分钟。
📝
内容提要
2015年，我因对语言学习工具的热爱开始编程，开发了开源工具iSpeakerReact。通过多次改版和技术挑战，我学习了React和Electron，增加了离线支持和本地化功能。尽管没有正式培训，我的坚持和好奇心让我不断进步。
🎯
关键要点
- 2015年，我因对语言学习工具的热爱开始编程，开发了开源工具iSpeakerReact。
- 最初的工具名为iSpeaker，源自牛津高级学习者词典的CD-ROM版本。
- 我没有编程经验，但通过修改代码尝试让应用在浏览器中运行，获得了第一次实践经验。
- 2023年，我决定现代化界面，使用Bootstrap 5，并首次添加了暗黑模式支持。
- 意识到AngularJS已被弃用，我决定从头重新思考应用。
- 尝试现代Angular和Vue，但都遇到困难，最终放弃了Vue。
- 2024年3月，我获得了ChatGPT的帮助，开始使用React构建应用，取得了重大进展。
- 在iOS 16上遇到音频播放问题，经过一个月的修复后，因忙碌而搁置了5个月。
- 回归后发现Create React App即将被弃用，转而使用Vite，效果更佳。
- 为使应用支持离线使用，添加了Electron支持，显著减小了应用体积。
- 初始的React版本仅支持英语，后来添加了本地化支持，使用Weblate替代Crowdin。
- 重建设计时使用Tailwind CSS和daisyUI，选择绿色作为主色调，创造了独特的设计系统。
- 新增了Word部分，帮助学习者练习重音和音节，提供实时音节高亮和慢速播放功能。
- 构建iSpeakerReact不仅是编程项目，更是学习、重建和坚持的旅程，鼓励他人勇于尝试和学习。
❓
延伸问答
iSpeakerReact是如何开始开发的？
iSpeakerReact的开发始于2015年，最初是基于牛津高级学习者词典的CD-ROM版本的iSpeaker工具，作者通过修改代码尝试让应用在浏览器中运行。
在开发过程中遇到了哪些技术挑战？
开发过程中遇到的挑战包括AngularJS的弃用、音频播放问题、以及在不同框架（如Vue和现代Angular）中的学习曲线。
作者是如何实现应用的离线支持的？
作者通过添加Electron支持，使应用能够离线使用，并显著减小了应用体积，从超过3GB减少到约700MB。
iSpeakerReact的界面设计是如何演变的？
界面设计经历了多次改版，最初使用Bootstrap 5，后来转向使用Tailwind CSS和daisyUI，以创造独特的设计系统。
如何为iSpeakerReact添加本地化支持？
最初使用Crowdin进行本地化，但因项目被暂停，作者转向Weblate，这是一种更适合小型项目的开源解决方案。
作者对初学者有什么建议？
作者鼓励初学者勇于尝试和学习，强调不需要学位也能创造真实的项目，关键在于开始和坚持。
➡️
