So I have a spare iPad mini Gen 1 laying around and I decided to build a View — Controller system that I can play youtube video, show a clock, embed some string like cpu status, etc.
This is the story about my journey of 5 days work on a prototype built from a stack that I really enjoy to use — Firebase ❤️ VueJS / NuxtJS.
TL;DR
- All web-browser based, no app installation
- Realtime Controller for a remote View
- Fast prototype
Demo
And this is the product, version 1.0.1
A video worths a thousand words so here it is
The Result
View
This is what I see on my iPad. It shows a youtube view, the time, my main machine status and a calendar.
Controller
The View will be controlled by well you guessed it, a Controller. I can control things like what video is playing, Play/Pause, Seek forward/backward, Volume up/down, etc.
If you see above in the View I have a section that show my main machine stats like CPU — MEM — BAT. Those are pushed from a separate python script to the database.
Then the layout, it will switch between the 4 rectangle View and a Fullscreen View.
And then we go, the journey began 5 days ago.
Choosing the tech
NUXT
It come easily that I will use NuxtJS. It is a framework built on top of VueJS with all the battery included.
Before I come to this decision, I code a prototype on VueJS but when I put it to the hosting and access it through my iPad, I was scratching my head with a blank white page. Turn out VueJS use very modern Javascript and my iPad just refuse to make sense of it.
So NUXT is the answer with the following settings:
Notice the Deployment target is Static here. This will make your life dealing with browser support much much easier.
Then we can generate the site with
yarn generateThat will give us a dist folder that we can push to my hosting.
FIREBASE
I use firebase for most of my projects.
Their documents is very easy to read and the community is great with all the support you can find on Stack Overflow.
I quickly sprint up a project in just a few minutes.
I use Firebase Hosting, Firebase Auth and Firebase Realtime Database.
Firebase Hosting
Only note here is their new feature
Which will only keep 10 release and delete others. This come handy as I make a lot of changes during the development and need to push the generated code to the hosting to check it with my iPad. In average, I push 10 to 20 times a day with very small changes for the layout.
Firebase Auth
Of course I don’t want anyone can change my view. So I have to authenticate my self into the site and create security rule for my database to only allow me to read and write to it.
The rule is simple. Only the authenticated user can read or write his data.
The test data is shared. Anyone can read or write to have a demo for anyone to visit the site.
Which bring us to the database.
Firebase Realtime database
I choose this one over the Firestore. The reason is Realtime database charge by the amount of data being transferred compare to Firestore which charge over the read/write counts.
The drawback is Realtime Database has less features for querying but well, we don’t need those for this project.
Cloud Functions
This is one interesting piece of the puzzle. Well at the start I already mention I’d like to have my CPU-MEM-BAT stats pushed to the View.
Then how should I do it securely and conveniently.
At first, I thought of Firebase Auth with getIdToken() function to allow me to send request to Firebase realtime database Rest API.
It works.
But with a huge drawback, the token expire every hour. Oh no, that’s defeat the whole monitoring stuff, how can a monitor be a monitor if I have to monitor it every hour. :(
But the token give me ideas combine with Cloud Functions, I create an API that accept a secret token that can be easily generated by user, then he/she can use it to push data to the database.
The secret is long lived and if it is exposed, I can regenerate it. And that is my solution for the CPU-MEM-BAT section.
Refine the prototype
All the above was set up in 3 days. Everything are connected and works as intended.
But then comes the bugs and bad layout. I showed my wife and my cousins the product. All say it difficult to understand, difficult to operate.
Early version: https://www.youtube.com/watch?v=U8CjHpvgs-E
At first you can see my early version which doesn’t care much about the layout, how I copy and paste by long press the field, how it only has 1 function is to change the current youtube video.
Then I spent the next 2 days working on features. And it come naturally as the product formalize. Here is the list:
- Change the layout: 4 rectangle <=> Fullscreen
- Pause and Play
- Seek the video back and forward
- Sync up status play/pause and volume
- Added a Calendar
- Show CPU-MEM-BAT
Then come the bugs. Bugs that scratch my head the most are iOS related. I could not understand why some feature can works on my laptop but does not on my iPad.
And those are hard to debug as I do not have a console view of my iPad browser so I had to build/generate new version every time I need to see the change effected. But then this is how I should thank Firebase hosting for giving a great experience when it comes to pushing new version. The deploy process took me seconds.
Conclusion
The last 5 days was interesting. I was able to sprint up a prototype with some simple technology freely available to any developers.
I really happy with what it turn out to be and I hope to improve this small project further with more features.
And as a web developer, I’m really glad I what I can do for such simple prototype. Imagine if I have to learn Swift and buy Apple developer ticket to make this. I will be 100 buck poorer with slower speed.
