During my BCIT Technical Arts course, I had the opportunity to work on a pipeline software designed to manage project files and folders. Going above and beyond the requirements, I implemented a user-friendly UI application using ElectronJS. To integrate this interface with the pipeline software, I set up a Flask.py server that received command requests from the UI.
Project Overview
The primary goal of this application was to assist in the creation and organization of folders, metadata, files, and metafiles for various show projects within a entertainment company. I approached this project as a valuable exercise within the BCIT curriculum, and it became an opportunity to apply my skills in software development and UI design.
Technical Implementation
The heart of this application's functionality was executed through a Python application I designed. It integrated a Flask server into the architecture, and I was surprised by how straightforward it was to set up the Flask script with all the necessary server routes. This addition introduced minimal complexity to my application, demonstrating the elegance of Flask for such purposes.
Furthermore, the architecture of my UI program adhered to a Model-View-Controller (MVC) pattern. This design ensured a clear separation of concerns and enhanced maintainability. The UI application solely acted as the View and Controller, sending requests to the Flask server to perform various tasks. It never directly managed or manipulated data. Once the Flask-based Python application finished processing a user's request, it seamlessly communicated the updated information back to the UI, allowing for real-time updates and a smooth user experience. This MVC pattern as usual proved to be an effective approach in keeping the application organized and highly responsive.
On the left is the flask server's routes and on the left postman's test calls to the server.
UI Design
For the user interface design, I initially chose to work with Google's Materialize and JQuery. However, I found that my experience with JQuery did not align with my expectations. While I initially believed it would provide a straightforward way to bind the user interface, I encountered challenges that led to code bloat and complexity, which didn't align with my preferences.
In hindsight, I recognize that there may be more suitable frameworks for future projects. I am inclined to explore alternatives such as Angular or React for their robust and structured approaches to UI development. These frameworks offer a more organized and efficient way to create dynamic and responsive interfaces, and I believe they would better align with my development preferences in future endeavors.
Future Endeavors
As I reflect on this project, I am enthusiastic about expanding my horizons and delving into new front-end development technologies. Particularly, I am keen on exploring Flutter for future projects. Flutter's flexibility, synergy with Materialize, and potential for cross-platform development are intriguing prospects when compared to ElectronJS.
Moreover, in the future, I aspire to implement a Houdini TOPs (Task Operator) network that seamlessly communicates with a standalone pipeline application of my design. This integration promises to bring an added layer of sophistication and efficiency to my work in pipeline development.
In summary, my experience working on this UI program for my BCIT Technical Arts course has been a valuable learning journey. It challenged me to effectively integrate ElectronJS and Flask.py, resulting in a specialized file manager application. Looking ahead, I am excited to continue my exploration of technology and further enhance my skill set.
Comments