Submind YouTube summaries
Thumbnail for Building a standalone app using electron and flask - Adil Addiya

Building a standalone app using electron and flask - Adil Addiya

Watch on YouTube

Video summary

Adil Addiya, a software developer at Autodesk, shares his experience building a standalone desktop application designed to consolidate marketing data for non-technical users. The project aimed to provide Key Performance Indicators (KPIs) by aggregating information from various sources such as Milan, direct mail, and digital campaigns, which previously arrived in disparate formats. To achieve this, the team chose Python with the Flask framework for its backend capabilities, leveraging a simple app structure to handle data collection and analysis efficiently. The primary challenge was creating an interface that anyone could understand, leading to the integration of Electron, a Node.js-based framework developed by GitHub, which allows web technologies to be used for building cross-platform desktop applications. The development process involved compiling the Flask application into a portable executable using PyInstaller, a tool that bundles the Python runtime and necessary packages into a single file. However, since PyInstaller does not provide a graphical user interface or native desktop features, Electron was utilized to wrap the compiled script and add essential functionality. This combination allowed the team to create a splash screen during the loading phase, manage window controls, and implement a custom menu system that enabled interaction with the Flask backend via Ajax calls or command-line arguments. Additionally, the setup included mechanisms to detect the operating system and place extra data files in the correct directories, ensuring the application ran smoothly across different environments. To finalize the distribution, the team used Electron Packager to compile the entire project into a standalone executable file. This step was crucial for protecting the source code from unauthorized access while allowing for specific configurations like adding custom icons and ignoring unnecessary files to reduce the application's size. Although compiling with PyInstaller alone ensures portability, it lacks native features; therefore, Electron provided the necessary UI enhancements and security protections. The final product offered a robust solution that not only safeguarded intellectual property but also delivered a polished user experience without requiring users to install Python or manage complex dependencies manually. In conclusion, the integration of Flask and Electron proved to be an effective strategy for creating professional desktop applications from web technologies. Adil highlights that while PyInstaller handles the bundling of Python code reliably across various systems, Electron fills the gap by providing native operating system features and a user-friendly interface. The resulting application successfully transformed raw, multi-format marketing data into actionable insights for non-technical stakeholders, demonstrating how combining these two powerful tools can overcome the limitations of standalone Python scripts. This approach ensures that developers can build secure, portable, and feature-rich applications that are ready for immediate deployment without compromising on performance or user accessibility.
Read the full video transcript
hi everybody my name is Adil I'm a software developer at Autodesk as Jeff mentioned what is Jeff yeah I can attest to the fact that it's a great place to work this something that you can be sure of it there is lunch and everything so yeah so my talk today is about something that I built before I was hired by Autodesk it's pretty much before we start talking that I'm gonna mention something this talk is two part the flask part and the electrode part the flask part we're gonna run it to which fast because I assume that everybody pretty much is really familiar with flask so we were gonna go through it quickly the this is was with what we built for this project don't worry if it's a little bit fuzzy just because there was some kind of number that I wants you not very visible but the idea was that we needed a KPI for the for our market in a fortune is a way to be sure that each one of the marketing action what's given some form of results the problem was were getting lot of information from a lot of sources and lots of different formats we have Milan we have direct mark we have congressional marketing digital marketing and this data was getting was getting in in a saw so many formats we needed a way to be able to to gather it together and to analyze analyzed so we this is why we chose Python and we used the test framework to be able to to congregate this data and make it work together and this project was aimed to on non-technical users so we needed a user a user interface that that was wasn't just understandable by anybody everybody so for for the flask part we use the simple flask app with with the large app structure as recommended by flask and we did some tweaking on it and once we have the core functionality up and running we needed a way to package it and this is when electron comes to come to work electron is a is a node.js I'm work by built by github when they were building the atom idea at my da they needed a way to use web technology to create desktop application so they come out with this idea and once this figure out that it was good immediate public and available to everybody some of the apps that are build electron are flour Skype slack all these things more and more apps that are more with the interaction with the web they're using electron to build it the just starts with the electron it's very simple on what you need is two files a package the JSON file we're going to declare the the app teachers and the main process or a mint at J's file to to declare the app and run the the the unwound the the the main window so once we had it the the the electrons cobalt we needed to to compile the flask app in a way is better I'm sorry we need to compile the flask app in a way to make it portable and Python has already a great package for that it's called pi installer it's a really simple to run you just have just islets and run the command in a way to precise that's exactly this is my file I want to run and this is the extra data I would I want to add the the F flag here is going to allow the BIOS dollar to compile everything into a single app and the the add data is going to add the the rest of the of the information and using the the child processor a child process in an electron you can call the the the flask executable and I'm running it and we have a structure like you see in the in the Left hood with with the flask app already compiled and the electron data already the flask app is going to take some time to to to run so we created a loading page and this is when electron is is good because it's allowing to show a for control over the windows you show if you want to lose a fourth a splash windows form is going to show you exactly the right windows without without any any additional information the electron at itself it doesn't allow users to compile the app to an executable you need another package called electron packager that is going to check all the code to the with the assets the and the the the app itself and compile it to an executable the torrent the electron per unit some flags for example - do you not you have to specify the icons so that the app is is run in the right way you know also to have some form of - to ignore all the file that you don't need this is so that you reduce the size of the of the app and there is some form of compression using the other method so allow you to protect your source code for example if you have if you have lots of files that you'll not protect and nobody do you don't want people to have access to them you just turn it - in that and and it it compile it the once the app is compiled the good news is it's protected nobody can access your source code the bad news is you can't add any data to it so if you have some activation K or something you will have a hard time tor on it and this is where the Python and and electron have a good way to detect in which operating system you are and to push the the extra data exactly in the indoor right folder and you can access it and and deal with it the electron app usually come without the doctor menu so you need to declare a menu so that you can add extra functionality to the flask app interacting with the flask app using the menu can be done either by by Ajax calls or a by command-line this is it's quick there is lots of extra documentation and an electron in the in the documentation and it's going to allow you to have more information about the auto-update and the the the native functionality any question yeah yes yes what what spy installer does exactly it gets you a like a reduced copy of the the the the Python runtime besides all the all the packages that you your app is gonna be needed to run and it puts everything in a simple executable the this executable as it is it's good for under AB the only problem is not giving you any UI this is why compiling a package in it using electron was good so that we can add not GS functionality to the app and show you I you I for for that which ride multiple time but having doing it that way will Google it will give a lot of variables that we can't account for for most of them and that gives a problem with the time bundling the app using PI installer was the only way that's ensured that it's gonna run no matter where in which environments are you run it thank you [Applause]