[APP] UTS My timetable -w- 开发大杂烩

关于此记事

Well,我也不知道改叫他啥,反正这里应该会包含关于 UTS My timetable -w- 在开发过程中的各种经历吧,例如想法,吐槽,不满,卖萌~ 嘛,反正我也不清楚具体有啥hhh

关于UI界面技术支持

作者不提供对使用任何深度定制安卓,(例如:花瓣,蓝绿大厂、等),以及使用各种异端屏幕(刘海屏,水底屏,全面屏)出现的任何UI布局BUG不提供技术支持!

关于iOS平台

本app是基于react-native开发,理论上,是支持Android & iOS 平台,但是由于Apple对开发者的不友善的态度(你要发布App就要交$149 Aud),暂时不考虑提供iOS平台配布

主旨

最近利用假期的时间,开发一个针对我学校用的timetable课程表的软件,因为我学校的timetable软件是在的太难用了,特别是手机的完全自适应就是有毒。所以我就突然脑子一热,想开发个针对Android & Ios 可用的timetable app,也为了方便后辈们的生活。

为什么要选择手机版本的app

首先我认为大部分学生应该在学校看课表的时候应该基本上都在路上的,所以这时候手机的话比起pc端应用就有更好的便携性了,虽然我也可以选择开发和web版本的(这样不是任何平台都基本通吃了么?)但是情况是这样的,我也纠结过是否要做web版。首先,学校的mytimetable planner本来就是web版,但是由于用户交互(ux)设计的太狗屎了,所以基本上在手机浏览器上用起来简直了,你懂的(你想,既然在pc浏览器用起来都不是很舒服)。所以在做一个web版也没啥意义。其次,对于手机版app,本地化体验肯定是比web好的,虽然web端不需要安装任何东西就能用,但是有个问题是每次用的时候,学生肯定要输入网址,然而大部分人会想起来看课表的时候一般都是在去某个班级的路上,他们主要看的不是课名而是班级的位置,所以,在这种情况在边走在边输入一个网址我认为则是个非常不友好的用户体验,因为这时候的重点应该是要快速的显示出信息才对。还有点就是对于用户体验来说,web肯定没有手机native app要来的流畅,卡顿啥的不免会有的,还有个问题就是,web类应用特别依赖于网络,所以如果在一个没有网络的情况下,或者是网络环境不好的地方,用户体验则会大打折扣,所以做成手机端app的话,这样学生们认为重要的信息都保存在了他们的手机里面,而且这部分信息根本不需要网络连接,所以则可以离线浏览。加上在路上的话我觉得重点应该能够是快速的找到我想要的班级位置信息,而不是去在重新登录一次web版本的系统,然后在等它转出我的课表来,然后再选进去看班级,这样我觉得用起来特别frustrating,和annoying,我凭着我自己是个学生的角度来说起码是这样的,也许其他人感觉不同也不一定hhh

更新日志:

修正了无限重登问题(可能发生)和加入了一些方便的小功能 #03-31-2019 (対応 Ver: 1.0.6 dev)

关于无限自动从登BUG(发生几率很小)

这个BUG的触发条件比较苛刻点

  • 1. 他需要UTS服务器如果是在维护的状态下(注意,是UTS服务器在维护的状态,而不是你网络不通的问题)
  • 2. 你在这个时候尝试刷新任何一门课的数据

这样的话,APP会认为你的Login Session是timeout的,导致自动无限从新登录的BUG,因为我之前的写法是没有加入登录尝试次数的判断(因为这个BUG触发的条件几率非常小)

不过作为一个负责人的开发者,还是顺便修复一下这个极其不容易触发的BUG,所以在这次更新之后,你的MyTimetable -w-只会自动尝试登录3此(如果Session 超时)。

关于新加入的方便的小功能

  • 1. 本次更新PATCH顺便加入了在你的收藏夹可以向上拉刷新你的目前Enrolled的科目(如果你的Timetable发生变化了,你不需要手动退出在重新登陆了)
  • 2. 在科目详细页面,也加入了上拉刷新信息的功能(这个是Follow Majority App Consistency)

加入了周目数显示 #03-31-2019 (対応 Ver: 1.0.6 dev)

这次更新添加了一个好用的小功能,现在你的日程表会显示是第几周拉(方便计划你的Assignment Task)

TIM截图20190331023956.png

反扁平布局修正 #03-30-2019 (対応 Ver: 1.0.6 dev)

默认的react-native-wix-calendars的样式太扁了,果然我最终还是忍受不了这种不用任何阴影的UI,所以还是没忍住准备魔改。

TIM截图20190330184039

看起来还行,但是如果稍微往下拉一点点就会变成这样

这个看起来太恶心了,是我最讨厌的扁平样式的情况,由于这个APP我日常经常用,于是还是忍不住去折腾他的样式首先想吐槽的是就是 react-native-calendars 作者并没有提供修改这一部分主题的方法!!!!!!,而且这个UI组件库也没做详细的定制主题方面的文档于是强迫症的我只能自己想法去解决,先看一下这个库提供的可以修改主题的几个参数(在他源码的的 src/style.js 文件里面,则是他提供给开发者可以定制的全部关于样式的参数)

于是我并没有找到我想修改的地方,因为我想在Agenda的week header 那里加一个border,这样起码看起来不会扁平。所以,只能继续深挖下去,看看我想修改的地方在他源码哪里(说实话我真的很讨厌去挖别人源码)于是最快找这个东西的思路就是去看他agenda组件的实现,所以初步可以定位从src/agenda/index.js 开始看起

于是有一行引用特别瞩目,这个引用一看就是导入主题样式的,不过,可能大部分参数我猜应该是作者写死的,并没全部开放给开发者自定义,所以在接着折腾这个styleConstructor之前,先确认下这个显示当前周的组件用的是啥先,方便快定位到他主题的位置。

于是我在391行发现了个headerStyle,突然有个知觉这个可能是我要修改的东西,所以我们来看看他是怎么实现的hhh

这里可以看到它是concate了style引用里的header,而且下面有个translateY,看到这里,就知道应该是这个了,因为我记得那个agenda 的week header,是可以展开的,而且如果要展开的话,他肯定要translate y的,所以确定了这个应该是我要折腾的地方之后,那就知道了他修改week header的样式应该是写在style.header下面,好,马上去duang一下看看

保存后编译下app看看效果hhh

果然成功了~!!フゥーハハハハハ!!!!!!!!不过呢,还有个头疼的问题,一般来说,直接修改node_modules下的源码是个极其不优雅的事情,因为呢,这样即使修改了,如果在其他机子上yarn install 或者 npm install 之后,修改并不会生效,所以,后面有空还是想办法找个优雅点的方法解决这个问题,目前只要够满足我的去强迫症则好 =w=备份魔改后的 style.js

全てはシュタインズゲートの選択だ エルプサイコングルゥ

截图一览

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください