The Flutter framework with Dart programming allows developers to effortlessly build applications for both web and mobile from a single codebase. It enables efficient conversions to native codes for mobile apps and optimized JavaScript for web browsers. Since utilizing a wide range of widgets in Flutter ensures consistent experiences on various devices for users, it becomes crucial in programming education by providing a unified environment for learning app development while reducing the need for platform-specific knowledge. However, the setup of the Flutter environment is challenging for novice students due to its multiple steps, such as installing dependencies and configuring environments. To support independent learning for these students, it is essential to simplify the setup by providing user-friendly instructions and automated tools. In this paper, we present a Docker-based environment for Flutter app developments across Windows, Linux, and Mac through Visual Studio Code, ensuring a unified learning experience. This paper aims to simplify complex configurations and address the obstacles encountered by students when initiating Flutter projects. For the evaluation, we prepared three simple Flutter projects along with the setup environment in a Docker container. Then, we asked 24 Master’s students at Okayama University, Japan, to install the environment and modify the source codes in the projects independently by following the given instructions. The results show that all the students successfully completed the assignments, which confirms the efficiency and validity of our proposal.

Flutter has become popular for providing a uniform development environment for user interfaces (UIs) on smart phones, web browsers, and desktop applications. We have developed the Flutter programming learning assistant system (FPLAS) to assist its novice students’ self-study. We implemented the Docker-based Flutter environment with Visual Studio Code and three introductory exercise projects. However, the correctness of students’ answers is manually checked, although automatic checking is necessary to reduce teachers’ workload and provide quick responses to students. This paper presents an image-based user interface (UI) testing method to automate UI testing by the answer code using the Flask framework. This method produces the UI image by running the answer code and compares it with the image made by the model code for the assignment using ORB and SIFT algorithms in the OpenCV library. One notable aspect is the necessity to capture multiple UI screenshots through page transitions by user input actions for the accurate detection of changes in UI elements. For evaluations, we assigned five Flutter exercise projects to fourth-year bachelor and first-year master engineering students at Okayama University, Japan, and applied the proposed method to their answers. The results confirm the effectiveness of the proposal.

Programming has gained significant importance worldwide as societies increasingly rely on computer application systems. To support novices in learning various programming languages, we have developed the Programming Learning Assistant System (PLAS). It offers several types of exercise problems with different learning goals and levels for step-by-step self-study. As a personal answer platform in PLAS, we have implemented a web application using Node.js and EJS for Java and Python programming. Recently, the Flutter framework with Dart programming has become popular, enabling developers to build applications for mobile, web, and desktop environments from a single codebase. Thus, we have extended PLAS by implementing the Flutter environment with Visual Studio Code to support it. Additionally, we have developed an image-based user interface (UI) testing tool to verify student source code by comparing its generated UI image with the standard one using the ORB and SIFT algorithms in OpenCV. For efficient distribution to students, we have generated Docker images of the answer platform, Flutter environment, and image-based UI testing tool. In this paper, we present the implementation of a web-based answer platform for the Flutter Programming Learning Assistant System (FPLAS) by integrating three Docker images using Docker Compose. Additionally, to capture UI images automatically, an Nginx web application server is adopted with its Docker image. For evaluations, we asked 10 graduate students at Okayama University, Japan, to install the answer platform on their PCs and solve five exercise problems. All the students successfully completed the problems, which confirms the validity and effectiveness of the proposed system.

Currently, we are developing the user-PC computing (UPC) system based on the master-worker model as a scalable, low-cost, and high-performance computing platform. To run various application programs on personal computers (PCs) with different environments for workers, it adopts Docker technology to bundle every necessary software as one image file. Unfortunately, the Docker file/image are manually generated through multiple steps by a user, which can be the bottleneck. In this paper, we present a web-based Docker image assistant generation (DIAG) tool in the UPC system to assist or reduce these process steps. It adopts Angular JavaScript for offering user interfaces, PHP Laravel for handling logic using RestAPI, MySQL database for storing data, and Shell scripting for speedily running the whole program. In addition, the worker-side code modification function is implemented so that a user can modify the source code of the running job and update the Docker image at a worker to speed up them. For evaluations, we collected 30 Docker files and 10 OpenFOAM jobs through reverse processing from Docker images in Github and generated the Docker images using the tool. Moreover, we modified source codes for network simulations and generated the Docker images in a worker five times. The results confirmed the validity of the proposal.