Modern GUI Development - Python (Software Development)

Name: Modern GUI Development - Python (Software Development)
Rating: 4.6 (27 reviews)

Building real time system application using Python Flask, Google Firebase, Node Js, Tailwind CSS

Highest Rated

Created byVetrivel Ravi

Last updated 10/2022

English

What you'll learn

How to build modern GUI using python?
How to build material designs using tailwindcss?
How to create GUI using python flask?
How to use Google Cloud Firestore Collection?

Course content

7 sections • 26 lectures • 1h 53m total length

Introduction1:19

Python Installation1:27
Python : https://python.org/
Creating Virtual Environment for Python Project2:36
To install virtualenv package in mac
pip3 install virtualenv

To install virtualenv package in win
pip install virtualenv

To create virtualenv in mac
python3 -m venv env

To create virtualenv in win
python -m venv env
How to activate and deactivate the Virtual Environment1:35
To activate virtualenv in mac
source ./env/bin/activate

To activate virtualenv in win
./env/scripts/activate

To deactivate virtualenv in mac & win
deactivate
Installing Required Packages3:29
To install packages in Mac
pip3 install flask flaskwebgui firebase-admin pyinstaller
To install packages in Win
pip install flask flaskwebgui firebase-admin pyinstaller
Exporting Python Packages list1:33
To get the list of installed packages
In Mac : pip3 freeze
In Win : pip freeze

To export it into an requirements.txt
In Mac: pip3 freeze > requirements.txt
In Win: pip freeze > requirements.txt

Creating Python Flask Application5:55
To start the the app in mac
python3 app.py

To start the the app in windows
python app.py
Python Project Folder Structure1:24
Node Initialization2:34
To install yarn
npm install -g yarn

To initialize the node packages
yarn init
Integrating Tailwind CSS6:21
To constantly watch the tailwindcss add the following line in the package.json
"scripts": {
"watch": "yarn tailwindcss -i ./static/src/css/input.css -o ./static/dist/css/styles.css --watch"
}

Tailwind Configurations
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./templates/**/*.html",
"./static/src/**/*.js",
"./static/dist/**/*.js",
],
theme: {
extend: {
width: {
150: "150px",
190: "190px",
225: "225px",
275: "275px",
300: "300px",
340: "340px",
350: "350px",
375: "375px",
460: "460px",
656: "656px",
880: "880px",
508: "508px",
},
height: {
80: "80px",
150: "150px",
225: "225px",
300: "300px",
340: "340px",
370: "370px",
420: "420px",
510: "510px",
600: "600px",
650: "650px",
685: "685px",
800: "800px",
"90vh": "90vh",
},
minWidth: {
210: "210px",
350: "350px",
620: "620px",
},
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
},
colors: {
card: "#A2A1A1",
smallcard: "#666666",
},
},
},
plugins: [],
};

Flask App Main Background5:35
Python Flask APP Custom UI rendering blocks4:38
Learn to build a reusable layout by rendering dynamic blocks in a base index.html. Extend with a home.html as the main file and define head and body blocks for content.
Header Component3:25
ToDo- Task Input Section9:49
ToDo- Empty Task List UI6:04
Build an empty task list UI by creating a dedicated division, adding a placeholder SVG image, and using Python logic to show the list or the empty-state graphic.
ToDo: Task List UI5:38
Design and implement a dynamic to-do task list UI with card-based layout, precise padding, icons from box icons, and a delete action, rendering tasks from firebase.

Creating a route for Adding new Task4:11
Create a new route to add tasks, configure the Firebase db client, handle post and get requests, and enable front-end form submission via jQuery to store tasks in Firebase.
Passing data from front-end to back-end using JQuery10:36
Pushing the data to Firestore Cloud Collection5:40
Fetching data from Firestore Cloud Collections4:06
Fetches data from Firestore cloud collections, orders by id in descending order, converts to dictionaries, and passes a data array to the frontend for rendering in the home view.
Integrating the Firestore data with our UI3:18
Adding Delete Operation5:09
Create a delete route that accepts an id, removes the corresponding document from the database collection, and redirects to the home route to refresh the task list.

Converting Web UI into GUI0:11
Converting GUI into EXE8:15
To export the GUI into exe in mac
pyinstaller --name="ToDo" --paths=env/lib/python3.10/site-packages --onefile --add-data="templates:templates" --add-data="static:static" --add-data="config:config" app.py --noconsole --noconfirm

To export the GUI into exe in win
pyinstaller --name="ToDo" --paths=env/Lib/site-packages --onefile --add-data="templates:templates" --add-data="static:static" --add-data="config:config" app.py --noconsole --noconfirm

To get pyinstaller commands details, run the command pyinstaller in the terminal

Requirements

Need basic fundamental knowledge about python

Description

In this course we are going to learn about Python Flask application and Google Firebase. We are going to build a realtime ToDo System application with realtime cloud database and with modern graphical user interface. We are using Tailwindcss to create a nice material UI.

Technologies Used

Python Flask
Google Cloud Firestore
NodeJs
TailwindCSS
Editor: Visual Studio Code
Extensions : Python, Tailwindcss, DJango Template editor

What is Python Flask?

Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.

Whats is Firebase?

Firebase is a set of hosting services for any type of application. It offers NoSQL and real-time hosting of databases, content, social authentication, and notifications, or services, such as a real-time communication server.

Whats is Tailwindcss?

Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.

What is NodeJs?

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on a JavaScript Engine and executes JavaScript code outside a web browser, which was designed to build scalable network applications.

Who this course is for:

Beginner Python developers curious about building modern application GUI

Modern GUI Development - Python (Software Development)

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Configuraitons5 lectures • 11min

Python Flask App4 lectures • 16min

Python Flask UI Components6 lectures • 35min

Python Flask App Backend Setup & Configurations2 lectures • 9min

Creating Action Routes6 lectures • 33min

Working with GUI2 lectures • 8min

Requirements

Description

Who this course is for: