Block Programming Example 🧩

Project Overview 🚀

This project is an example of block programming, a visual and beginner-friendly way to introduce programming concepts. It demonstrates how to create a web-based block programming environment using Blockly, an open-source library that allows users to drag and drop code blocks to create programs. The project includes custom blocks and functionalities to showcase the power and versatility of block-based programming.

Technologies Used 💻

The project is built using the following technologies:

1. HTML (Hypertext Markup Language): HTML is the markup language used to create the webpage's structure, defining elements such as columns, the Blockly block-view area, and buttons.

2. JavaScript: JavaScript is the programming language responsible for implementing the project's logic, making the Blockly interface interactive. It handles block creation and execution, as well as data manipulation and chart visualization. The project utilizes libraries like Blockly (for block creation) and Chart.js (for chart visualization).

3. CSS (Cascading Style Sheets): CSS is used for styling the webpage, providing an appealing visual design. It defines layout, colors, fonts, and overall styling for the webpage. CSS is used to style Blockly blocks, buttons, and the general webpage formatting.

These technologies work together to create a web-based block programming environment, allowing users to visually create, execute, and view the results of their programs.

Inspirations 💡

• Blockly: The project draws inspiration from Blockly, a powerful library developed by Google that enables the creation of block-based programming environments. Blockly is used as the core technology for creating the visual programming interface.

• Programming Education: The primary aim of this project is to provide an educational resource for teaching programming concepts, logic, and problem-solving to beginners, students, and enthusiasts. Block programming makes it easy for users to understand and practice programming without writing complex code.

Features 🌟

• Custom Blocks: The project includes custom blocks for performing various tasks, such as displaying messages, generating random numbers, and more. These custom blocks expand the functionality of the block programming environment.

• HTTP Request Handling: The project demonstrates how to make HTTP requests (GET, POST, PUT, DELETE) and handle responses using custom blocks. This can serve as an introduction to web-based programming and data retrieval.

• Chart Visualization: Users can create bar charts based on the data generated from their Blockly programs. This feature adds a data visualization element to the learning experience.

• Dynamic Code Execution: The project allows users to execute their Blockly code and see the results in real-time. Users can switch between viewing text output and chart visualization as needed.

• Custom Loops and Conditionals: Custom loop and conditional blocks are defined, extending the capabilities of the block programming environment.

Getting Started 🛠️

1. Clone the repository to your local machine.
2. Open the HTML file in your preferred web browser to access the block programming environment.

Usage 💻

• Create and manipulate Blockly programs by dragging and dropping blocks.
• Click the "Execute" button to run your code.
• Switch between text output and chart visualization with the "Mostrar Gráfico" (Show Chart) button.

Contributing 🤝

If you want to contribute to this project, please follow the standard GitHub workflow for contributing to open-source projects. We welcome contributions and improvements to enhance the block programming experience.

Credits and Acknowledgments 🙏

• This project is built upon the foundation of Blockly, a powerful library for block-based programming by Google.

License 📝

This project is licensed under the MIT License.

Contact 📧

For questions or feedback, please feel free to reach out to RodolfoBrandao.

Happy block programming! 🎉