Creating a flash card game with ABAP and Teachable Machine

[albanleong]

I'd like to share a small little personal project that I've created to get some hands on with Google's Teachable Machine. If you've not heard of Teachable Machine, just head on over to their website. It's basically a web-based tool for you to create your own ML model directly in the browser without any coding experience.

I've recorded a short video below that explains the game and the development including how to set it up - if you are interested in trying it out.

You can get the source code for this project on Github - https://github.com/albanleong/abapteachablemachine

https://youtu.be/IJkO86XX00Y

Instead of repeating what I had written on the Github repository's README file in this post, I'm just going to put a link to it - README. There you'll find some more information on how to set it up and how to play the game.

I'd like to make a note that I am not recommending anyone to go learn creating BSP applications now and I am aware that a lot of the "personal" development that I've shared were somehow created with BSP but I am definitely not advocating anyone to go make a career out of it. Clearly that time has passed and there are more modern and better ways on creating and hosting web based applications today.

Could I have done this with UI5 and Fiori? Most likely but the Materialize CSS framework is extremely easy to use and has most of the basic effects that I'd wanted in the game - eg: the scale in and out effect of the flash cards, pulsing buttons, etc.

Conclusion

I had fun designing and developing this little project. Takes me a little out of my comfort zone to code Javascript as I definitely still consider myself as a newbie with it. I'm pretty sure I have made a lot of mistakes in the code and broke all sort of rules...

I had my kids (5 years old and 3 years old) try out the game and they seemed to like it. Next thing for me is to make some more flash card images for different games and have them train their own audio model (that's going to be fun... 🙂 ) and then set it up.

Hope you've found this to be interesting and HAPPY THANKSGIVING!