Week14: Interface and Application Programming¶
Group Assignment
- Compare as many tool options as possible.
- Document your work on the group work page and reflect on your individual page what you learned.
This group assignment document was written by Shintaro Ito.
How we approached the group work¶
Each member used different tools to perform Interface and Application Programming.
| Name | Programming Language(s) | Tools Used |
|---|---|---|
| Shintaro Ito | Python | Google Colaboratory, matplotlib, seaborn, plotly |
| Naoki Hayashi | Arduino, Processing | - |
| Yuya Tokuyama | Javascript | node.js ,Dart ,Flutter |
Python¶
Python is a general-purpose programming language with a simple and readable syntax, used in a wide range of fields from web development to AI and data analysis. It is also actively used in the fields of data science and machine learning due to its rich libraries in these areas.
Note
Please download the code from the link at the end of the page.
Google Colaboratory¶
This is a cloud-based Jupyter Notebook environment provided by Google. It allows you to run Python code in your browser and is widely used in the fields of machine learning and data science. It is free to use if you have a Google account.
Jupyter Notebook is an open source development environment that allows you to interactively execute Python and other code in a browser and record and share results and descriptions in the same document. Since the behavior of the described code can be checked each time, it is very useful when you want to perform data visualization and formatting in Python in an exploratory manner.
For more details, please see: https://colab.research.google.com/?hl=en
matplotlib¶
Matplotlib is one of the most widely used graph drawing libraries in Python. It is suitable for visualizing data and analytical results, and is used in a variety of fields such as research, education, and business.
For more details, please see: https://matplotlib.org/
Create a bar chart in matplotlib¶
The graph above shares the mid-term results of Fab Academy 2025, expressing the assignment progress status and graduation prospects using a matplotlib bar chart.
seaborn¶
Seaborn is a high-level data visualization library based on Matplotlib that allows you to create beautiful statistical charts with less code. Furthermore, Seaborn extends the functionality of Matplotlib, making it easier to integrate with statistical plots and data frames.
For more details, please see: https://seaborn.pydata.org/
Create a heatmap in seaborn¶
The graph above shares the mid-term results of Fab Academy 2025, expressing the assignment progress status and graduation prospects using a seaborn heatmap.
plotly¶
Plotly is a data visualization library that makes it easier to create interactive and dynamic graphs compared to Matplotlib and Seaborn.
Plotly specializes in creating interactive graphs on a web browser, allowing users to explore data dynamically, such as by zooming and hovering on the graph.
For more details, please see: https://plotly.com/
Create a treemap in plotly¶
The video above shares the mid-term results of Fab Academy 2025, expressing the assignment progress status and graduation prospects using a plotly treemap. You can see that the treemap changes interactively when you click on the graph. Also, by selecting the pull tab, the target group is colored. This makes it easier to judge how many members of the whole are targeted.
Arduino¶
Arduino probably needs no explanation. Arduino is a set of open-source microcontroller boards and development environments that are easy for beginners to use, allowing simple control of electronic components such as sensors and motors. For more details, please see: https://www.arduino.cc/
Processing¶
Processing is a Java-based programming language and development environment designed for beginners to easily create visual art and interactive works. For more details, please see: https://processing.org/overview
Note
Please download the code from the link at the end of the page.
Create control buttons for motors in Processing¶
In the video above, a button is created on the PC using Processing, and pressing the button controls the motor.
Javascript¶
JavaScript is a programming language used to add dynamic behavior and user interaction features to web pages. It is typically used in combination with HTML and CSS. Currently, it is the most major language in web development. For more details, please see: https://developer.mozilla.org/en-US/docs/Web/JavaScript
node.js¶
Node.js is one of the technologies that revolutionized Javascript. It is an asynchronous event-driven JavaScript runtime designed to make server-side and network application development more efficient by enabling JavaScript to be executed outside of web browsers. This allows developers to use the same language for both frontend and backend. In other words, it’s extremely convenient. For more details, please see: https://nodejs.org/en/
Displaying dynamic objects in the browser with Node.js¶
Environment setup (macOS only)
brew install node
npm install
Start the server.
node index.js
Note
Please download the code from the link at the end of the page.
The above video shows the operation of a program that creates a random value and reflects this information as the size of a circle in the browser. This program was inspired by Nadieh’s doc of Fab Academy 2021.
Flutter¶
Flutter is an open source UI framework developed by Google that enables the development of high-performance apps for multiple platforms including iOS, Android, Web, Windows, macOS, and Linux from a single code base as a cross It is a cross-platform development tool that allows you to develop high-performance apps for multiple platforms including iOS, Android, Web, Windows, macOS and Linux from a single code base. For more details, please see: https://flutter.dev/
Note
Please download the apk file from the link at the end of the page.
Developing Smartphone Apps with Flutter¶
The video above shows the launch of an android app that displays a map of selected lunches that were eaten during Fab Academy 2025. The map shows the wide variety of restaurants visited. All of the restaurants were carefully researched in advance, and we actually went in and tasted the food. If you are in Kannai Lab and are in need of a place to have lunch, we hope you will make use of this app.
How to Install an APK File (Android 10 or Later)¶
- Save the APK file on your device
- Open the file using a file manager
- Tap the file to start installation
- If prompted, allow installation from “unknown sources”
- After installation, turn off the “unknown sources” setting
Download link¶
This link contains all the program code listed above.