Blockly Web App Builder
Drag-and-drop block programming (such as Scratch) is commonly used for beginners and typically doesn’t produce directly executable applications. Some extended platforms can generate Arduino or MicroPython code, allowing programs to run on hardware. Node-App is different. It generates web applications that run directly in the browser.
Introduction to Node-App
Node-App is a web application development tool based on Blockly block programming and runs directly in the browser. It aims to make building and publishing web apps simple and intuitive.
By designing interfaces with blocks and integrating JavaScript for interactivity, users can quickly and easily build feature-rich web applications.
The app’s interface elements are built with the Bootstrap UI library. Its simple and consistent settings make it easy for beginners to grasp. Configurable widgets and network components make implementation more convenient. The flexible configuration options make it suitable for users of various skill levels.
Node-App is well-suited for building single-page applications, particularly those that interact with network-connected hardware, such as control panels for IoT devices.
Why develop this tool?
Makers usually focus on hardware. With the popularity of ESP32-based development boards, more and more maker projects now include network capabilities. User interfaces are no longer limited to traditional LCD, OLED, or TFT displays, they have expanded to include flexible web-based interfaces.
Here’s the challenge: a network interface not only requires implementing functions on the hardware but also requires building a client-side app. These two environments require different implementation approaches. Makers who are proficient in hardware may not have the same level of experience in developing client-side apps. A tool that simplifies the creation, publishing, and access of web-based client-side apps would be useful.
Node-App was built to address this need. It generates web applications that are directly accessible via a browser. Neither developers nor end users need to install additional tools or apps, they just use a browser.
Node-App encapsulates commonly used HTTP, WebSocket, and MQTT client functionalities into easy-to-use blocks, making it simple to achieve hardware interaction. For example, an app that sends and receives MQTT messages through Bemfa Cloud:
Or a hardware-independent app, such as a calculator:
Node-App’s design focuses on simplicity, intuitiveness, and code readability. The concepts and techniques it promotes are also applicable to traditional code-based web development. Along with comprehensive documentation, Node-App can also serve as a learning tool for web programming.