I set up an EC2 instance and prepared it for web app deployment.
I worked on web app frontend and made UI for user to set time and choose from a list of ringtones. Feel free to try it out here (note this might be updated to display new UI next week). If you clicks on the ringtone name, it plays a short ringtone that is defined by an array of notes, and each note consists of pitch and duration. I implemented a “fast selecting” feature(user can choose “weekdays” to auto-select all five weekdays, and vice versa) which is also pretty neat.
I wrote a short script for Pi to communicate with the web app on EC2 instance and receives sample ringtone data.
I also worked on some portions of design review report(overall & subsystem architecture, etc).
Other work I did:
- I looked into using AWS Amplify(versus EC2) as a choice of hosting the web app. It can allow me to deploy and publish my web app every time I update it using one console command. However in the end, I decided against it because I am not sure if and how to implement the alarm scheduling using Amplify (2) it requires using GraphQL and DynamoDB which I am less familiar with, hence longer time to ramp up.
- I checked out Typescript as a possible option for frontend framework language, and ultimately decided it is not worth since the frontend framework I chose lacks documentation for Typescript.
- I decided on Ant Design as the frontend framework since it covers all UI widgets I would need.
- I looked at a few node packages for playing audio from midi files. I realized I had some misunderstanding about what midi is and how some of the “midi player” packages work. In the end I decided to use a different package for playing audio than I previously planned.
- I used this for playing audio by specifying notes: https://www.npmjs.com/package/soundfont-player
- It is a lighter version of https://github.com/gleitz/midi-js-soundfonts
- I was gonna use https://github.com/grimmdude/MidiPlayerJS but it turns out it just translate a midi file into a sequence of json data, but not play the audio
- I was gonna use sample-player package but decided other packages have a bigger user base
- I used this for playing audio by specifying notes: https://www.npmjs.com/package/soundfont-player
- I realized the user might not want to create a new ringtone every time they set an alarm, so I made a new page that is not previously on the mockup for design presentation for users to make ringtones and then the ringtones will be updated on create alarm page.
Currently on schedule. My own updated timeline (before integration) is as follows:
- week 7(here):
- web app build and deployment set up
- spike on communication between web app and Pi
- create alarm UI
- alarm schedule UI
- week 8:
- create ringtone UI
- pass alarm data from create alarm page to alarm schedule page
- pass ringtone data form create ringtone page to create alarm page
- week 9:
- backend set up
- connect UI with backend
- connect web app with Pi
- week 10(demo)