EloCute的写作和重写:NativeScript
开发人员通过创建在Web上的Vue.js和移动设备上的NativeScript上运行的应用程序来分享她的经验(和代码)。
对于某些人来说,学习一个新的框架需要经过精心梳理的书籍,Udemy视频以及逐步构建todo应用程序,有条不紊地遍历每个变化。我,我是那些喜欢通过构建我打算尽快转向生产的应用程序来学习的怪人之一。虽然我确实通过了Udemy课程并阅读了相当数量的入门博客文章,并阅读了Vue.js文档,但我很早就决定通过构建一个应用程序来真正进入Vue.js我们一直梦想建立:为第二语言的教师和学生提供的应用程序,帮助数字化测试口语技能的痛苦任务,如语言清晰度和第二语言的口音完美。
作为一名前法语语言和文学教师,以及作为几种第二语言的学生,我总是发现从20世纪80年代(或更早的时候)坐在其中一个古老的语言实验室,使用笨重的耳机和设备非常痛苦。麦克风练习口语技巧。有些程序无法访问这种昂贵的硬件,似乎忽视了口语技能的实践 - 例如,汉语学校往往完全无法满足新语言学习者获得语言熟练程度的需求。缺乏即时反馈和孤立的经验似乎为语言实验室的动员解决方案而哭泣。
Elocute
Elocute是一款面向教师的网络应用程序和一款面向学生的移动应用程序。学生在移动应用程序上创建帐户,教师在Web应用程序中搜索这些学生并将其添加到教室。一旦注册课堂,学生就可以看到教师在网络应用上创建的作业。教师可以输入文本供学生在移动应用程序中讲话,并为学生提供一个很好的界面来观看语音识别插件(由插件大师Eddy Verbruggen!)在他们大声朗读时转录文本。算法根据转录文本和教师书面文本之间的匹配快速给学生一个分数。鉴于界面,你会明白我为什么命名应用程序Elocute - 这是一个可爱的应用程序的elocution!我也喜欢竖琴海豹。
构建Web应用程序
对于双重应用程序的首次推出,我决定不创建monorepo,因为我们目前在Web和移动应用程序之间共享代码的能力并不像我们的Angular代码共享故事那样成熟。所以我首先通过构建教师的网络应用程序来学习Vue.js。几个工具立即证明了它们的价值
Vue CLI:使用Vue CLI轻松支持Web应用程序。当我们等待CLI 3.x版的最终版本时,您可以使用当前版本(现在为2.9.3)快速上手。有几个模板可供选择; 我想掉毛和端到端的测试,所以我选择了标准的WebPack模板(https://github.com/vuejs-templates/webpack),所以脚手架我的应用程序的命令vue init webpack elocute中web我回购的文件夹中。Firebase UI库:我知道我需要身份验证,并且知道我想使用Firebase,但是当我开始这个项目时,VueFire项目还没有更新。所以我决定简单地将Firebase本身用于Web以及用于身份验证的帮助程序库:Firebase UI。在Web上,该库解决了大量的UI和验证问题; 我强烈推荐它。只需几行代码,您就可以构建一个值得尊敬的身份验证例程。Vuetify:Vuetify是网络的另一个问题解决者。我想要一个具有可预测UI的响应式网站,Vuetify符合要求。Vuetify构建为用于为Vue.js构建语义,材料设计风格UI的库,提供了一种构建站点的简洁方法。
重写的时间!
虽然Groceries模型能够很好地启动并运行Webpack友好模板,但这是一个代码库,它提供了一些具有挑战性的开发人员体验,通常需要在两个终端不同步时重启模拟器。是时候尝试一种新型模板,一种是在我最初的Vue.Conf阿姆斯特丹的Elocute演示之后开发的:Vue CLI模板。这个惊人的模板是由Pascal Martineau(Slack上的“LeWebSimple”)开发的,很快就被用作NativeScript-Vue的官方“入门”模板。
在此实现中,路由更稳定,并且代码库被简化(例如,在src文件夹中编辑文件,并且在template文件夹中添加诸如图标和启动屏幕之类的资产)。NPM命令处理在模拟器中运行您的应用程序:npm run watch:ios甚至只是npm run watch让iOS和Android模拟器同时运行,如果它们在您运行命令之前打开。Vue CLI模板是一种快速,简洁的构建方式。
走向未来
在未来,围绕这个项目的社区正在仔细研究真正的代码共享选项,例如创建一个同时构建iOS,Android和Web功能的monorepo,尽可能多地共享代码。当在网络上使用Vuex然后再在移动设备上工作时,很明显两个代码库之间存在惊人的相似之处。为什么不努力将它们合二为一?
这个项目显示了巨大的希望,但它绝对是一项正在进行中的工作!我希望再次使用它来重建Elocute,这次使用适当的共享代码 - 和像Vuex商店一样的相同部分。有兴趣帮助推动这个项目的进展吗?跳上NativeScript Slack频道或#vue房间的论坛,让我们聊聊吧!