This stack might not be perfect if you work in a large corporation or something. You might want to use Cursor and other tools as well. Here’s the breakdown, tool by tool.

OpenAI – Codex and Research

OpenAI powers my core ideation phase with Codex for rapid code generation and research tools for deep dives into algorithms or APIs. It’s like having a tireless co-pilot that turns vague concepts into functional prototypes, saving hours on boilerplate and letting me focus on the fun, innovative bits.

Gemini App – Visuals and Infographics

For visuals and infographics, Gemini App is my go-to—it’s intuitive for whipping up charts, diagrams, and UI mockups that make complex data pop. Whether I’m explaining a new feature or prepping client decks, its drag-and-drop magic ensures polished outputs without the Photoshop slog.

GitHub – Project Management and Deployment Pipeline

GitHub handles all project management and deployment pipelines with its robust repo features, Actions for CI/CD, and seamless collaboration tools. It’s the central hub where ideas branch, merge, and ship, keeping everything versioned and automated for zero-downtime releases.

Heroku – Hosting

Heroku simplifies hosting with one-click deploys and auto-scaling, ideal for spinning up full-stack apps without server wrangling. Its free tier for testing and easy add-ons for extras like logging make it a no-brainer for quick iterations and reliable uptime.

MariaDB – Database for Dynamic Web Apps

MariaDB anchors my dynamic web apps as a robust, open-source database that’s MySQL-compatible but faster and more feature-rich. It excels at handling relational data for user auth, content management, or e-commerce backends, with easy scaling for growing traffic.

FastSpring – Payments (VAT and Sales Tax Handling)

Payments flow through FastSpring for its global compliance magic, auto-handling VAT, sales tax, and subscriptions across 200+ countries. It’s plug-and-play for monetizing apps, reducing legal headaches so I can prioritize product over paperwork.

Namecheap – Domains

Namecheap locks in domains with affordable, straightforward registration and privacy protection. Quick WHOIS guards and easy transfers keep my online presence secure and branded, without the upsell drama of bigger registrars.

Feel free to subscribe to my vibe coding newsletter – the goal is to help you be on the right side of change.

You don’t need much for this tutorial:

1. Basic understanding of HTML, CSS, and JavaScript.
2. A modern web browser.

We’ll create a single HTML document that includes inline JavaScript and CSS. This approach ensures that you can easily copy, paste, and run the example without managing multiple files.

Execution: To run the Bitcoin price checker, copy the entire HTML code into a file with a .html extension. Open this file in any modern web browser to see the live Bitcoin price updating every few seconds.

You can see it live right here:

Here’s the full HTML document with embedded CSS and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Bitcoin Price Chart</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #chartContainer {
            height: 300px;
            width: 100%;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="chartContainer"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script>
        let priceDataPoints = [];

        function updateChartData() {
            fetch('https://api.binance.com/api/v3/ticker/price?symbol=BTCUSDT')
                .then(response => response.json())
                .then(data => {
                    const btcPrice = parseFloat(data.price);
                    const currentTime = new Date();
                    priceDataPoints.push({ x: currentTime, y: btcPrice });
                    if (priceDataPoints.length > 20) {
                        priceDataPoints.shift();
                    }
                    updateChart();
                }).catch(error => console.error("Error fetching BTC price:", error));
        }

        function updateChart() {
            let chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Live Bitcoin Price"
                },
                axisX: {
                    title: "Time",
                    valueFormatString: "HH:mm:ss",
                    labelAngle: -30
                },
                axisY: {
                    title: "Price (USD)",
                    includeZero: false,
                    prefix: "$"
                },
                data: [{
                    type: "line",
                    xValueType: "dateTime",
                    dataPoints: priceDataPoints
                }]
            });
            chart.render();
        }

        updateChartData(); // Initial call to populate the chart
        setInterval(updateChartData, 5000); // Update chart every 5 seconds
    </script>
</body>
</html>

The code works as follows:

HTML Structure: We have a div element where the chart will be displayed.

CSS Styling: Simple styles are applied to ensure the chart container is visually defined.

JavaScript for Live Data:

• Fetching Data: The JavaScript uses the fetch API to pull live Bitcoin prices from Binance’s public API endpoint.
• Updating the Chart: We use CanvasJS (a third-party library) to render the price chart. New data points are added every 5 seconds, and the oldest data points are removed to keep the chart clean and readable.
• CanvasJS Library: This is a powerful and easy-to-use chart library, which we include from a CDN. It simplifies drawing the live chart.

Be it shaping an intuitive dashboard for data analysis, architecting an easily navigable API, or constructing straightforward web interfaces for blockchain applications, a grasp on basic design principles separates the forgettable from the functional.

This chapter examines the impactful principle of minimalism in design and user experience (UX).

Previous Chapter: The Art of Clean Code — 14 Unix Principles

Transformative Minimalism in Tech’s Evolution

Reflect on the mobile phone’s trajectory—from the cumbersome ’80s bulk to the sleek smartphones of the 21st century. Through Nokia’s iterative shedding of weight and size, and the eventual rise of the iPhone, a pattern emerges: elegance in tech aligns with the pursuit of less.

This narrative is not exclusive to phones. Google’s search homepage offers a masterclass in minimalism—billions of users are welcomed daily by simplicity incarnate.

In stark contrast, competitors like Yahoo muddied their interfaces with ads and news, a move that cost them users and market dominance.

Google’s Material Design philosophies reinforce this commitment to intuitive, minimalist interfaces that resonate with users through familiarity and ease of interaction. These design choices aren’t solely about aesthetics; they are strategic, optimizing the most valuable resources:

• user time,
• interface space, and
• financial investment.

Crafting Minimalistic Design: Principles and Practices

Prioritizing Whitespace

Whitespace may wrongly be deemed wasted space—when it’s quite the contrary. Google and Apple leverage it to maintain user focus and clarity. An uncluttered interface may be the divider between retaining users and losing them to confusion.

The figure shows a simple design idea for an online pizza delivery service. The whitespace supports the focus on the main thing: getting customers to order pizza. Unfortunately, seldomly will a pizza delivery service be bold enough to use whitespace in such an extreme way.

Whitespace also helps increasing clarity with text:

The left side of the figure is far less readable.

The right side injects whitespace to improve readability and UX:

• margins on the left and right around the text block,
• indentation of paragraphs,
• an increased line height,
• top and bottom margins around paragraphs, and
• increased font size.

The costs of this additional space are negligible: scrolling is cheap, and we don’t have to physically cut more trees for paper when the publication is digital.

On the other hand, the benefits are very real: the UX of your website or application improves significantly!

Eliminating Redundant Elements

In the quest for simplicity, question every element’s utility. Discard the superfluous, maintain the essential. The goal is not just good design; it is great design, one that prioritizes user needs over decorative features.

Here’s how you can think about it:

This shows an idealized editing process in which you classify each element according to its importance regarding the UX.

For example, does a menu item referring to your company’s blog help the user in the checkout process when ordering a product? No, so it should be classified as not important.

Amazon has stripped all unnecessary design elements from the ordering process, for instance, by introducing the one-click buy button.

Story: When I first learned about this method in a scientific writing workshop, it completely transformed the way I thought about editing. Removing unimportant and less important design elements guarantees improved usability with little risk. But only truly great designers have the boldness to remove important design elements and leave only very important elements. Yet, this is what separates great from merely good design.

Here’s another example where many design elements have been successfully removed to accomplish greater quality and superior design:

Cutting Down on Features

Just as an author must kill their darlings, a developer must curb feature creep. The success stories of tech—think of Microsoft’s apparent bloated offerings—are actually narratives of ruthless feature prioritization.

But you don’t see the features that have been removed or not pursued further. To keep learning about this, check out our lesson on MVPs:

The Art of Clean Code – Minimum Viable Product (MVP)

Streamlining Design Variations

Cognitive ease should guide design choices. Limit font variations, color uses, and sizes to reduce complexity. Consistent, focused use of these elements leads to a more coherent user experience.

Consistency Across Interfaces

Uniformity across app interfaces isn’t merely about aesthetics—it’s about creating a cohesive and instantly recognizable user experience. Adherence to brand guidelines ensures this consistency.

The Future of Design: Simplicity Reigns

As we look ahead, the essence of minimalism in design seems poised to deepen with advancements in voice recognition and virtual interfaces.

The trend suggests an evolution toward even more streamlined user experiences. We’re moving towards an era where the ultimate design may well be an ‘invisible’ interface, integrated seamlessly into our daily lives.

Through examples from giants like Apple and Google, we’ve observed the powerful impact minimalism has in the tech world—a realm where the simplest interfaces are often the most successful. As technology continues to evolve, one truth remains clear: in the world of design, less indeed proves to be more.

Stay tuned for the next chapter, where we conclude with focus—its critical role and impact in the realm of programming.

Advanced Reading: For those eager to delve into the principles highlighted in this chapter, detailed insights can be found in Google’s Material Design guidelines (https://material.io/design/introduction/) and Apple’s Interface design documentation (https://developer.apple.com/design/human-interface-guidelines/).

Trying to parse a site when web scraping or calling APIs with Python requests, but getting slapped with a 403 Forbidden error. Ouch! The basic code looks like this:

import requests
url = 'http://example.com/'
result = requests.get(url)
print(result.content.decode())

And the server is like, “Nope, you’re not coming in” , showing a 403 Forbidden error.

Turns out, servers can be picky. They might block requests that don’t seem to come from a web browser. For example, Elon Musk decided to block bots from scraping Twitter content to maintain data sovereignty in the AI race.

The trick to do it anyways? Add a User-Agent header to your request. It’s like wearing a disguise to look like a regular visitor.

Here’s how you do it:

import requests
url = 'http://worldagnetwork.com/'
headers = {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36'}
result = requests.get(url, headers=headers)
print(result.content.decode())

Still getting the cold shoulder with a 403 error? Time to beef up your disguise with more headers, like Referer.

You can find these headers in your browser’s developer tools (F12 → Network → Headers → Request Headers).

Here’s an enhanced header example:

headers = {
    'User-Agent': 'Your User Agent',
    'Referer': 'https://example.com'
}

Finding User-Agent: Too lazy to dig through the Network tab? Just type navigator.userAgent in the Chrome developer console.

Headers Missing in Network Tab?: Refresh the page, check any HTTP request, and scroll down to see the request headers.

What is the 403 Forbidden Error?

Have you been a nasty boy (or girl)?

The 403 Forbidden Error is like a strict doorkeeper saying you can’t enter. When you try to access a webpage, your browser sends a request. If the website’s server decides you shouldn’t access that page, it responds with a 403 Forbidden Error. It’s like the server saying, “I understand what you want, but I won’t let you in.” This happens for various reasons, like access control settings or website configurations.

Here’s a handy table of common HTTP error codes and their meanings.

These codes are part of the HTTP protocol, and they help developers understand what’s happening when their application interacts with web servers. They’re like a universal language for communicating the status of web requests.

Solving the Python Request Forbidden Error 403 When Web Scraping

When you’re web scraping with Python and hit a 403 error, it’s like knocking on a door and being turned away.

To solve this, change your approach. Use headers in your Python requests to mimic a real browser.

Here’s an example:

import requests

url = 'https://example.com'
headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'}
response = requests.get(url, headers=headers)

This code tells the server, “Hey, I’m just like a regular browser, let me in!”

Python Requests Post Error 403

Facing a 403 error when sending a POST request in Python? This is like trying to submit a form on a website and being rejected.

To fix this, check if the website needs specific headers or cookies. Sometimes, including a ‘Referer’ header or a valid ‘User-Agent’ string helps:

import requests

url = 'https://example.com/post'
data = {'key': 'value'}
headers = {'User-Agent': 'Your User Agent', 'Referer': 'https://example.com'}
response = requests.post(url, data=data, headers=headers)

Here, you’re assuring the server that your request is legitimate.

Python Request Get 403 Error

When your Python GET request returns a 403 error, it’s like being denied entry when you ask for information. To bypass this, add headers that make your request look like it’s coming from a regular web browser:

import requests

url = 'https://example.com'
headers = {'User-Agent': 'Your User Agent'}
response = requests.get(url, headers=headers)

This code is your digital disguise to get past the server’s restrictions.

Python Requests Proxy Error 403

A 403 error when using a proxy in Python requests is like a bouncer blocking your disguised entry. Sometimes, servers block known proxies. Try using a different proxy or adding headers:

import requests

url = 'https://example.com'
proxies = {'http': 'http://10.10.1.10:3128'}
headers = {'User-Agent': 'Your User Agent'}
response = requests.get(url, proxies=proxies, headers=headers)

This approach is like changing your disguise and trying a different door.

Python urllib.request Error 403

Encountering a 403 error with urllib.request? It’s similar to using requests, but you’re using a different tool. Add a User-Agent in your request header:

import urllib.request

url = 'https://example.com'
req = urllib.request.Request(url, headers={'User-Agent': 'Mozilla/5.0'})
response = urllib.request.urlopen(req)

This method tells the server that your request is coming from a common web browser.

403 Forbidden Delete Request

A 403 error on a DELETE request means you’re trying to remove something from the server, but it’s not allowing you. Check if you have the right permissions and if your request headers are correctly set. Sometimes, you also need an authentication token.

Getting the Authentication Token

An authentication token in the Python context, or in any programming context really, is a digital key that allows you to access certain resources or services. Imagine it like a special pass that lets you into a VIP area; without it, you’re not getting in.

When you’re coding in Python, especially when dealing with web APIs or web scraping, you often need to prove who you are to access certain data or functionalities. This is where the authentication token comes in. It’s a string (a series of characters) that verifies your identity to the server or service you’re trying to access.

Here’s a simple breakdown:

1. Obtaining the Token: First, you need to get this token. This usually happens after you log in or send a request with your credentials (like your username and password). The server then gives you a token as a response.
2. Using the Token: Once you have the token, you include it in the headers of your subsequent requests. This is like showing your pass every time you try to access something.
3. Server Verification: The server checks the token to ensure it’s valid and corresponds to a user with the right permissions. If everything checks out, you get access.

In Python, using an authentication token might look something like this:

import requests

url = 'https://example.com/api/data'
token = 'your-authentication-token-here'
headers = {'Authorization': f'Bearer {token}'}

response = requests.get(url, headers=headers)

In this example, the Authorization header is used to pass the token with each request, and the format Bearer {token} is a common way to present the token. The server, upon receiving this request, checks the token and then allows access to the data or functionality you requested.

403 Error Reasons

Common reasons for a 403 error include:

• Incorrect URL: Like dialing a wrong number.
• Access Control: The server’s way of saying, “You’re not on the guest list.”
• Firewall Settings: A digital guard blocking your path.
• Outdated Cache: Old information leading you astray.

Is Web Scraping Legal?

Web scraping walks a fine line between being super helpful and potentially troublesome. It’s legal if you respect the website’s terms of service and don’t overburden their server.

Think of it like fishing: do it responsibly, without depleting the fish population! Always check the website’s robots.txt file to understand their scraping rules.

Is Web Scraping Legal?

Quick Fix: To solve a 500 error, start by examining the server-side logs for detailed error messages. If the server is within your control, review your server code for bugs. If you’re a client, check your request for correctness, or try again later, as 500 errors can be temporary. Occasionally, contacting the server’s support team can help diagnose and resolve the issue.

Problem Formulation

An HTTP request error 500, often referred to as an "Internal Server Error" is a general status code indicating that something has gone wrong on the server side, but the server cannot be more specific about the exact problem.

Here’s an example where a 500 error might occur during a Python requests session:

import requests

url = 'https://example.com/api/data'
data = {'key': 'value'}

response = requests.post(url, json=data)

if response.status_code == 500:
    print('Server Error: Status Code 500')

This error can occur due to various issues on the server, such as misconfigurations, faulty scripts, or server overload.

Unlike client-side errors (4xx), which are typically due to incorrect requests, a 500 error suggests a problem that needs to be resolved by the server administrator.

HTTP response status codes separate into five categories as defined by the first digit:

In practice, however, it could still be due to a bad request format.

Method 1: Verify Request Format

Idea: Confirm that the request body and headers are correctly formatted as per the API documentation.

Here’s a minimal example:

headers = {'Content-Type': 'application/json'}
response = requests.post(url, json=data, headers=headers)

The example includes a Content-Type header to indicate the type of the data being sent. This can resolve a 500 error if the issue was due to the server not understanding the request format.

Method 2: Handle Server Overload

Idea: Implement exponential backoff and retry logic to handle cases where the server might be temporarily overloaded.

Here’s a practical code example:

import time

for i in range(3):
    response = requests.post(url, json=data)
    if response.status_code == 500:
        wait = 2 ** i
        time.sleep(wait)
    else:
        break

If the server error is temporary due to overload, waiting before retrying the request may result in a successful response.

Method 3: Contact Server Administrator

Idea: If the server is not under your control, reach out to the server administrator for insight into the error.

Explanation: By contacting the admin, you might learn about ongoing issues or receive guidance on how to formulate your request to avoid the error.

Method 4: Update Endpoint Configuration

Idea: Ensure that the server’s endpoint configuration is correct, which may involve updating server-side code or settings. This will depend on the specifics of the server-side software.

Explanation: This is applicable if you have control over the server. Updating the configuration, such as increasing resource limits or fixing a server bug, can resolve the issue.

Method 5: Log and Debug Server Error

Idea: Increase server-side logging to capture detailed stack traces or error messages when the 500 error occurs. This will depend on the server-side language and framework but may involve adding error logging around potentially problematic code blocks.

With enhanced logging, you can pinpoint the cause of the error on the server, which is crucial for troubleshooting and fixing the issue.

Summary

Each method has its pros and cons:

• Method 1 (Request Format) often resolves client-side mistakes, but won’t help if the server error is unrelated to request syntax.
• Method 2 (Server Overload) is useful for temporary errors, but is only a workaround and doesn’t address underlying server capacity issues.
• Method 3 (Contacting Server Admin) can provide insights or a fix, but it relies on external communication and may not yield immediate results.
• Method 4 (Update Endpoint Configuration) directly resolves server configuration issues, but requires server access, which may not be possible for all clients.
• Method 5 (Log and Debug Server Error) provides a way to precisely address the root cause, but it’s time-consuming and only applicable for server administrators.

Embarking on your app development journey with Python can be an exciting venture, especially with the Kivy framework. Kivy is a free and open-source Python library that simplifies the process of building cross-platform applications. With this guide, you’ll set up your development environment and create your first basic application.

Setting Up the Development Environment

Before you dive into creating your first mobile app, you need to prepare your development environment. This setup is crucial for a smooth Kivy experience. Start by ensuring you have Python installed on your system. Kivy is compatible across Linux, Windows, and macOS platforms, and it’s vital to download the correct Python version for your operating system.

Once Python is set up, the next step is to establish a virtual environment. This is a sandbox that allows you to manage dependencies for different projects without conflicts.

You can create a virtual environment using python -m venv kivy_venv and activate it with

source kivy_venv/bin/activate

on Linux/macOS or

kivy_venv\Scripts\activate

on Windows.

Now it’s time to install Kivy. With your virtual environment active, use pip, the Python package installer, to add Kivy to your project by running pip install kivy.

Creating Your First Kivy App

After setting up your environment, you’re ready to create your inaugural Kivy app.

Begin by importing Kivy’s App class alongside other necessary components, like the Label class, which you’ll use to display text.

The outline of your first ‘HelloWorld’ app would look like this:

from kivy.app import App
from kivy.uix.label import Label

class HelloWorldApp(App):
    def build(self):
        return Label(text='Hello, World!')

if __name__ == '__main__':
    HelloWorldApp().run()

In this simple app, the build method of your HelloWorldApp class returns a Label with the text 'Hello, World!'.

When you run this script, a window should pop up displaying your message.

To add interactive elements, like a button, you would import the Button class and attach an event. The on_press event triggers a function whenever the button is pressed:

from kivy.uix.button import Button

class HelloWorldApp(App):
    def build(self):
        def on_button_press(instance):
            print('The button was pressed!')

        button = Button(text='Press me')
        button.bind(on_press=on_button_press)
        return button

With these steps completed, you’ve successfully built a Kivy application that responds to user interactions. As you grow more comfortable with Kivy’s components and event handling, you’ll be able to expand your ‘HelloWorld’ app into more complex projects.

Designing the User Interface

When you’re creating a mobile app with Kivy, the user interface (UI) is where users interact with your application. It’s important to make this experience intuitive and engaging.

Understanding Kivy Widgets

Widgets are the building blocks of your UI in Kivy. Each widget is an element such as a Button, Label, or TextInput, which users will interact with. It’s your job to decide where these widgets go and how they behave.

For example, a Button widget is not only defined by its size and color, but also by the events it triggers when touched. Here’s a quick list of common widgets you might use:

• Button: Triggers an action on press.
• Label: Displays text.
• TextInput: Allows text input from users.

Kivy allows you to customize these widgets with various properties, such as text, font_size, and background_color, to fit the design and functionality of your app.

Managing Layouts and Events

Managing Layouts: The layout of your widgets is vital for a polished UI. You’ll work with layouts like BoxLayout and GridLayout to structure your widgets.

BoxLayout arranges widgets in a horizontal or vertical line, based on the orientation property.

To arrange widgets in a matrix, you’d use GridLayout, configuring its cols or rows properties to set the number of columns or rows.

• BoxLayout: Simple linear arrangement, either vertical or horizontal.
• GridLayout: More complex matrix-style arrangements.

Managing Events: Widgets also have events that your app must handle. When a user presses a button, the button dispatches an ‘on_press‘ event. Here’s how you might bind a function to a Button’s event:

def on_button_press(instance):
    print('The button <%s> was pressed!' % instance.text)

btn = Button(text='Click me!')
btn.bind(on_press=on_button_press)

In this example, pressing the button will trigger the on_button_press function, which can contain the logic for what should happen next.

Structuring Your Kivy Project

When you start your Kivy project, remember that a solid structure is the backbone of any good application. Organize your files by separating your app logic from your app class, and make sure to follow object-oriented programming (OOP) principles. This approach not only makes your code cleaner but also easier to manage.

A common project structure might look like this:

• main.py: The entry point of your app which runs the app class.
• YourAppName/: A directory containing:
  • app_class.py: Defines your app class.
  • screens/: Contains different screen files for your app.
  • uix/: Custom widgets or user interface elements go here.
• assets/: All your images, fonts, and other static resources.
• data/: For non-static data files, like configuration or JSON files.

Refer to this tutorial on Python Kivy projects that can provide some excellent examples to get you started.

Debugging and Optimization

As you develop your application, you’ll inevitably encounter bugs. Use Kivy’s built-in debugging tools to help you troubleshoot issues in real-time.

Tools like the Kivy Inspector allow you to interactively alter widget properties to see immediate changes. For optimization, profile your application to identify bottlenecks. Remember to:

• Write efficient logic by reducing redundant operations.
• Use compile-time techniques, such as Cython to speed up performance.

Resource optimization is particularly critical; ensure that graphics and sound files are optimally compressed without losing quality.

Deploying to Mobile Platforms

With a stable and polished application in hand, you’re ready to deploy to mobile platforms like Android and iOS. You’ll utilize tools like Buildozer or Python-for-Android to package your Kivy application. It’s crucial to test on actual devices to ensure compatibility across different platforms and screen sizes. Here’s what you need to do:

• Install all necessary dependencies for compiling the app for your target platform.
• Configure your build specifications appropriately in your buildozer.spec file.
• Run the build command and fix any issues that arise during the compilation process.

For more details on the process, especially for Android, you can view this guide on building an Android application with Kivy Python framework.

By adhering to these project development and best practices, you’ll maximize the benefits of using Kivy in the mobile app development space and set your mobile applications up for success across various platforms.

Extended Learning and Community Resources

As you delve deeper into mobile app development with Python using Kivy, it’s valuable to connect with the community and enhance your skills through additional resources. Beyond just constructing a basic calculator application, you have the opportunity to contribute to a bustling open-source community and further your learning through comprehensive materials.

Contributing to Open Source

Kivy falls under the MIT License, making it a prime candidate for your contributions. You can give back and support Kivy, which remains open-source and relies on community efforts for growth and improvement. Begin by exploring Kivy’s official website, which includes detailed information on how to contribute, whether it’s by submitting patches for bugs or suggesting new features.

Beeware and PyQt are other Python GUI frameworks that welcome contributions as well. Each project has its own set of guidelines for contributors, which can typically be found on their respective websites or repositories.

Further Learning Resources

Tutorials and Examples:
For a structured approach to learning, consider diving into an in-depth video course such as the one found on Udemy for Python KivyMD. Courses like this provide hands-on examples, including building a graphical user interface and creating cross-platform applications.

Community and Packages:
Joining forums and discussions can provide real-world insights and help. The Kivy community can be found on platforms like Kivy’s Google Group or the Python Discord, where you can engage with other developers, ask questions, and share your experiences.

Web Development with Flask:
If you’re interested in extending your Python knowledge to web applications, explore Flask. Although not directly related to Kivy, Flask is a lightweight web application framework that can complement your understanding of Python in client-side and server-side environments. You’ll find extensive documentation and tutorials that can teach you the ropes of web development.

Remember, the purpose of these resources is to empower your learning journey—you’re not just passively consuming information, but actively engaging in the vibrant Python community.

Frequently Asked Questions

In this section, you’ll find common questions and clear answers to help you navigate mobile app development using Python and Kivy.

How can I create a mobile app using Kivy in Python?

To create a mobile app using Kivy in Python, you need to install Kivy on your machine, design your app’s layout using Kv language, and then add functionality with Python code. Kivy’s documentation provides a step-by-step guide on how to get started.

What are the benefits of using Python with Kivy for mobile app development?

Using Python with Kivy offers benefits such as cross-platform compatibility, allowing you to write your app once and deploy it on multiple platforms. Kivy’s use of Python makes it highly readable and maintainable, which can speed up development. For detailed benefits, you can refer to this informative article.

Where can I find examples of mobile apps built with Kivy?

You can find examples of mobile apps developed with Kivy by exploring projects shared in the Kivy community or by checking out showcase apps on the official Kivy website.

Can you provide a tutorial to help beginners start with Kivy for mobile app development?

Absolutely, for beginners looking to start with Kivy, there are tutorials available that guide you through building attractive mobile apps in Python. Here is one such Kivy Python tutorial that demonstrates the process.

Is the Kivy framework actively maintained and updated for developing mobile apps?

Yes, Kivy is an open-source framework that is actively maintained and frequently updated, ensuring it remains a relevant tool for mobile app development. You can follow their updates and contributions on the Kivy GitHub repository.

How do I download and set up the Kivy environment for Android app development?

To download and set up Kivy for Android app development, follow the instructions on their installation page, which includes steps for setting up your environment on various operating systems, including Android.

At the end of this article, I’ll provide an interactive Google Colab link for the interactive version of this article. But let’s start with the video:

The Coding Challenge

Upwork is seen to be a good platform for potential freelance jobs.

But there can be some challenges in getting to the jobs quickly enough. Early applications are frequently the ones accepted.

The job search interface is also not very well suited to the filtering and listing of jobs you are looking for.

And…
Freelancers need to actively search the jobs page!

This tutorial and video look at a way to accelerate that search and filter the jobs on preferred criteria.

Learning Objectives

By the end of this tutorial, you will have:

• Defined the project requirements
• Explored aspects of Data Scraping
• Explored RSS feeds and XML
• Followed a potentially useful and repeatable workflow
• Built a useful tool
• Developed some useful Python skills

Approach

As freelancers, it can be helpful to approach every task as a formal project.
It is good practise and you never know when project might become something more valuable.

A client may want something similar or it may become a product you can sell.
So, it is a good discipline and will save time in the long run to approach such projects professionally.

A Useful Workflow

This pattern of development has proven helpful for me:

• Set the project requirements
• Follow a sound process for data scraping
  • Investigate the data source
  • Acquire the data
  • Extract the data you want
  • Clean the data
  • Filter the data
  • Output the data
  • Use the data and confirm the information is valid
• Document the project
• Deliver to the client

And we’ll follow this process now.

Requirements Setting

Just like we do for our clients, we should have specific requirements.

I use the MoSCow approach to setting my requirements.

This identifies the parts that the project we:

• Must Do
• Should Do
• Could Do
• Won’t Do

And sets out clearly what will be delivered and equally as important, what will not be delivered.

Our requirements:

MUST:

1. Provide data from Upwork relevant to the Freelancer
2. Present the information in a readable format

SHOULD:

1. Allow filtering and manipulation of the data as needed by the user
2. Allow for rapid refresh

COULD:

1. Run from the command line with arguments
2. Could be automated

WONT:

1. Have a graphical interface

We are limited on time. So we will focus on the data-scraping aspect of the task. And we will only complete the Must and Should requirements.

Getting the Data

Investigation

We can see here on the Upwork ‘search page’, entering a search term will give you a large number of potential tasks. But we only want some of these and preferably the latest. And we want them filtered to our needs. So we need to defer from what is presented here.

This symbol identifies the Really Simple Syndication (RSS) feed that we shall be using that feed for our data.

If we click the link and select RSS, a new page opens with the job feed structured in the Extensible Markup Language (XML).

We can also see that the feed format is XML.

This is similar to HTML and is a markup language that is readable by the computer and by people (people who can look past the tags and format).

Apparently this dense text is ‘person’ readable!

Some of it seems ok but most is hard to read.

Let’s make this more readable.

Time is money for the Freelancer.
So let’s copy this data and use a web tool, an XML formatter to explore the RSS XML data.

Here we can see that the XML forms a tree. With 10 indiviual elements, one for each job in this field.

If we look in to the first few items, we can see the information about each job.

Observations

It looks like the feed has 10 elements and each element has the Title, Link to the Job and a Description. The description appears to be an HTML script that contains some of the information that we need.

So let’s scrape that data next!

Acquisition

There are Python packages that we can use to scrape data from such XML feeds.

And it looks like we will be able to extract data from the ‘description’ field too. It appears to be a long string object and we have Python mehtods for strings.

For the RSS feed with will use ‘feedparser’

Note: For simple data-scraping tasks, I like to use a Jupyter notebook. The notebook is useful because it holds the data in memory so it can be explored while we change the code.

This means we don’t need to capture the feed many times.

There is no reason you can’t use VSCode or Pycharm or any other editor.

Again as a freelancer, time is money, so use the tools you are familiar with.

Looking at the feedparser documents

We can learn here that the data is acquired by and then parsed by

import feedparser
data = feedparser.parse(UPWORK_RSS_FEED_URL)

and then we can extract our 3 elements of data using:

import feedparser
data = feedparser.parse(UPWORK_RSS_FEED_URL)

item_title = data.entries[0].title
item_title
item_link = data.entries[0].link
item_link
description  = data.entries[0].description
description

Note: This data will change frequently as the RSS feed is updated with the latest jobs. This is why the RSS feed is so useful to us Finxters.

Extraction

We have already extracted the Title and the Link of the job just from the feedparser entries data.

item_title = data.entries[0].title
item_link = data.entries[0].link

Now we need to extract the individual elements of information from the ‘description‘ string.

Let’s take a closer look at one of the ‘description‘ strings.

description: We are looking for a skilled developer who can create a mobile application and web application for a fitness app. The main feature of the app will be the integration of AI technology to detect the user&#039;s body, diet, and workout plan. The successful candidate will be responsible for designing and developing the app, ensuring it is user-friendly and has a modern, sleek design. The app should be able to track user progress and provide personalized recommendations based on the user&#039;s inputs and body data. Key skills required for this project include: <br /><br />
- Mobile app development <br />
- Web app development <br />
- AI integration <br />
- UX/UI design <br />
- Data analysis and interpretation<br /><br /><b>Hourly Range</b>: $8.00-$10.00
<br /><b>Posted On</b>: December 02, 2023 17:57 UTC<br /><b>Category</b>: Mobile App Development<br /><b>Skills</b>:iOS, Android, Smartphone, Python, Mobile App Development
<br /><b>Skills</b>: iOS, Android, Smartphone, Python, Mobile App Development <br /><b>Country</b>: United States
<br /><a href="https://www.upwork.com/jobs/Fitness-App-Development-with-Functionality_%7E01494dc445d89c9f7f?source=rss">click to apply</a>

Here we see 14 lines of text with HTML markup and tag and characters such as ‘br‘ and &# 039 ;

Then we see a selection of headings inside HTML bold tags.

So the general theme for the description block is:

• description – HTML code of variable lengths and with some HTML character codes and tags
• Hourly Range – b_tags and some text
• Posted On – b_tags and some text
• Category – b_tags and some text
• Skills – b_tags and 1 or more skills with commas and spaces in between
• Skills – a repeated line of skills
• Country – b_tags and some text
• Link – a repeat of the link

Knowing this data structure, we can now use Python to extract the information we need.

Let’s write some code!

First we need to import some packages.

• feedparser for the RSS feed.
• pandas for our data storage and filtering
• ssl to bypass some ssl elements of the feed broadcast.

import feedparser
import pandas as pd
import ssl

Now we need a function to create and return an empty and prepared Dataframe in Pandas.

As we’ve discussed, we need to store each jobs:

• Title
• Link
• Description
• Posted on
• Category
• Skills List
• Price Type (Hourly Range or Budget
• Price of budget of max Hourly Rate
• Country the job originates in

def make_dataframe():

    jobs_df = pd.DataFrame(columns=[
        'Title', 
        'Link',
        'Description', 
        'Posted',
        'Category',
        'Skills',
        'Price Type', 
        'Price', 
        'Country' ])

    return jobs_df

We need a function that steps through the feed and extracts our information.

Firstly, we set up a list of blank data so that if there are gaps in the information, we still have data to place in the DataFrame. Failure to do this would raise an error.

Then we ‘Parse the Feed’

Title and Job link we can get directly from the feed entry.

But for the ‘description‘, we need to use the ‘string.split‘ method and split the string into a list of elements using the ‘bold‘ tag as the separator.

This gives us:

• description[0] is the first item in the list and is the main description field we just need to stip this of HTML tags Here we use the ‘clean_string‘ function.
• ‘Posted On’ and ‘Category’ also get cleaned with ‘clean_string‘.

Notice that we slice off only that part we need to send to be ‘cleaned’ eg clean_string(b_tag[15:])

• ‘Hourly Range’ / Budget’ get special treatment in the ‘clean_price’ function where we return a float for the money value and a string for ‘Budget’ or ‘Hourly Rate’
• ‘Skills’ needs to be stripped into a list (for searching) and also cleaned.
• ‘Country’ also needs some special treatment

Once cleaned the data is assigned to a dictionary and added to a DataFrame and added to the master DataFrame.

def get_data(entry):  # entry is a job item from the RSS feed

    # Some data ends up Null so set those values just in case
    item_posted = ''
    item_cat = ''
    item_price_type = ''
    item_price = 0.0
    item_skills = []
    item_country = ''

    # Set from parsing the feed
    item_title = entry.title
    item_link = entry.link
    description  = entry.description
    description = description.split('<b>')
    item_desc = clean_string(description[0])
    for b_tag in description[1:]:
        if "Hourly Range" in b_tag or "Budget" in b_tag:
            item_price_type, item_price = clean_price(b_tag)
        elif "Posted On" in b_tag:
            item_posted = clean_string(b_tag[15:])
        elif "Category" in b_tag:
            item_cat = clean_string(b_tag[14:])
        elif "Skills" in b_tag and not item_skills :
            item_skills = clean_skills(b_tag[11:])
        elif "Country" in b_tag:
            item_country = clean_country(b_tag[10:])




    # build the DataFrame and return it

    new_job = {
    'Title': item_title, 
    'Link': item_link, 
    'Description': item_desc,
    'Posted': item_posted,
    'Category': item_cat, 
    'Skills': item_skills, 
    'Price Type': item_price_type, 
    'Price': item_price, 
    'Country': item_country}

    new_job_df = pd.DataFrame([new_job])

    return new_job_df

The ‘clean_string‘ function uses the ‘replace‘ method and takes each substring that isn’t required and either removes it or replaces it with the correct value.

Note: This is not the most pythonic approach, but it has been written for clarity for beginners in mind. How would you make it more Pythonic?

def clean_string(string):

    string = string.replace('<br />','')
    string = string.replace('</b>','')
    string = string.replace('&nbsp;','')
    string= string.replace('&#039;','\'')
    string = string.replace('&rsquo;','\'')
    string = string.replace('&ldquo;','\"') 
    string = string.replace('&rdquo;','\"') 
    string = string.replace('quot;','\'')
    string = string.strip()

    return string

The ‘clean_price‘ function splits the identifier (‘Hourly Range’ or ‘Budget’) into a new string.

It then extracts the number (also a string) and returns it as a float along wth the identifier.

def clean_price(item_Bud_HR):

    price_split = item_Bud_HR.split(':')
    item_price_type = clean_string(price_split[0]) 
    item_price = price_split[1] # Get and clean the value
    item_price = item_price.replace('$','')
    item_price = item_price.replace('<br />','')
    item_price = item_price.strip()
    if '-' in item_price:
        item_price = item_price.split('-') # If the price is an 'Hourly Range' we split, returning the number on the right of  '-'  
        item_price = item_price[1]
    item_price = float(item_price)

    return item_price_type, item_price

The ‘clean_country‘ function splits the string on '\n'. It then takes the first element, cleans off the white space and returns the Country name.

def clean_country(item_country):

    item_country = item_country.split('\n')
    item_country = clean_string(item_country[0])
    item_country = item_country[1].strip()

    return item_country

The ‘clean_skills‘ function is a little more complex.

We create a new empty list, ‘item_skills_list‘.

We then clean the string by removing HTML tags.

We split the string on the ',' character and step through the list that is created, cleaning each string and then appending it to the list before it is returned.

def clean_skills(item_skills):

    item_skills_list =[]
    item_skills = item_skills.replace('<br />','')
    item_skills = item_skills.split(',')
    for skill in item_skills:
        item_skills_list.append(skill.strip())

    return item_skills_list

Once a new job DataFrame is created for each job, it is ‘concatenated’ to the master DataFrame for later filtering.

def join_dataframes(new_item_df,jobs_df):

    jobs_df = pd.concat([jobs_df, new_item_df], ignore_index=True)

    return jobs_df

The DataFrame jobs_df now holds all of the RSS feed jobs and their associated data. We can now filter it as required.

The ones I have presented here (commented out) offer examples for your own filters.

1. Strips out any duplicates based on the ‘Posted’ time.
2. Looks for budgets and hourly figures above 20.0 dollars
3. Looks for selected countries (United States and India)

What would you want to filter for?

def filter_output(jobs_df):


    # FILTER THE DATA USING Pandas

# 1. Strip out non unique values - Posted on is the pseudo-primary key
    # Uncomment if needed
    #jobs_df = jobs_df.drop_duplicates(subset=['Posted'], ignore_index=True) 

 #2. Only save for Price or budget greater than $10
    # Uncomment if needed
    #jobs_df = jobs_df[jobs_df['Price'] > 20] 

# 3. Only save for Specific Country 
    # selecting rows based on condition 
    # Uncomment below if needed
    #options = ['United States', 'India'] 
    #jobs_df = jobs_df[jobs_df['Country'].isin(options)]

    return jobs_df

Here we have the main() function that takes the Upwork RSS URL and feeds it to the function in turn.

# MAIN
def main():

# Why SSL
# Python is adding http verification in in the std library
# This bypasses the check for th moment
    if hasattr(ssl, '_create_unverified_context'):
        ssl._create_default_https_context = ssl._create_unverified_context


    url="https://www.upwork.com/ab/feed/jobs/rss?q=Python&sort=recency&paging=0%3B10&api_params=1&securityToken=6b9f07dc2632b4ac772d5daa37626af471b7d2526826c56a0c16aad6580245646f4e13804c72bd1ed3755f3bd552f5ba1d3f67a021987f714a1ff340ba7659dc&userUid=1215586676591329280&orgUid=1215586676603912193"

    #Get the Feed Data
    data = feedparser.parse(url)

    # Make the master dataframe
    jobs_df = make_dataframe()

    #Get the data for each item and add it to the DataFrame
    for entry in data.entries:
        new_job_df = get_data(entry)
        # join the new dataframe to the list
        jobs_df = join_dataframes(new_job_df, jobs_df)

Now we have the jobs from the RSS feed in a DataFrame, we can filter using the pandas methods.

    filter_output(jobs_df)

Once we have filtered the data to meet our needs, we use the pandas method to save the DataFrame to an Excel file.

It also prints out the top 3 entries to demonstrate the data has been captured.

    print(jobs_df.head(3))
    # Export to excel
    jobs_df.to_excel('jobs.xlsx', index=False)

                                          Title  \
0                AWS Python Consultant - Upwork   
1        1min Time Frame Forex Scalper - Upwork   
2  AI - driven crypto charting project - Upwork   

                                                Link  \
0  https://www.upwork.com/jobs/AWS-Python-Consult...   
1  https://www.upwork.com/jobs/1min-Time-Frame-Fo...   
2  https://www.upwork.com/jobs/driven-crypto-char...   

                                         Description  \
0  Fluent English speaking Python developer with ...   
1  If you scalp the forex market on the m1 time f...   
2  Scope of work\nThedevelopment of a crypto char...   

                        Posted            Category  \
0  December 02, 2023 20:13 UTC  DevOps Engineering   
1  December 02, 2023 20:13 UTC       Deep Learning   
2  December 02, 2023 20:03 UTC    Machine Learning   

                                              Skills    Price Type  Price  \
0  [Ubuntu, Amazon Web Services, Python, AWS Lamb...  Hourly Range   10.0   
1                                    [Forex Trading]  Hourly Range   40.0   
2  [Artificial Intelligence, Machine Learning, Bl...  Hourly Range   40.0   

          Country  
0  United Kingdom  
1  United Kingdom  
2         Nigeria  

That completes our exploration of the code.

I hope you have found some insight and value here.

Let us review.

Learning Objectives

This tutorial and video looked at how to read the RSS feed from Upwork, to accelerate your search and allow you to filter the jobs on your preferred criteria.

We have covered:

• Defining your project requirements
• Data Scraping
• RSS feeds and XML (briefly)
• A potentially useful workflow
• The building of a useful tool
• Some useful Python skills

Next Steps

This code is very flexible and so here are some options you might want to consider if you are extending its utility:

• You may want to run this code on a timer to give you frequent updates.
• You may also want to load the previous jobs scraped into the jobs_df DataFrame so that you can append new jobs.
• You may also want to have a ‘list of urls’ for different searches that you step through in order to cover lots of searches
• If you searches are very specific you might want to have the script email you when a job is posted.

What will you do?

Resources:

• https://jsonformatter.org/xml-formatter
• https://ascii.cl/htmlcodes.htm

You can also check out this guide on Google Colab using this link.

The need for speed and reliability in internet services is paramount. Enter RFC 9330, a groundbreaking document from the IETF that’s set to revolutionize how we experience the internet. This Low Latency, Low Loss, and Scalable Throughput (L4S) Internet Service Architecture is a solution designed to drastically reduce internet queuing delays and congestion losses.

Applications and Use Cases: The L4S architecture significantly enhances various applications, particularly those requiring low latency.

These include cloud-based gaming, VoIP, video conferencing, web browsing, adaptive video streaming, and instant messaging.

L4S’s low latency enables advanced cloud applications like interactive video and virtual/augmented reality, even on overloaded networks. It’s particularly beneficial for applications sensitive to latency, such as interactive remote presence and remote control of machinery.

L4S is applicable across diverse network types, including DSL, mobile, and satellite, and supports a range of transport controls like TCP/SCTP and RTP/RMCAT.

It’s not just about speed; it’s about consistency and reliability. The L4S architecture targets the root causes of network delays, integrating advanced congestion control mechanisms.

This means smoother video calls, faster file transfers, and a more responsive internet experience overall.

What sets RFC 9330 apart is its focus on scalable throughput.

It’s not just for the tech giants; this architecture benefits everyone from small startups to large ISPs, ensuring that the internet can keep up with our ever-growing data demands.

With its innovative approach to tackling internet congestion, RFC 9330 is poised to be a game-changer for tech enthusiasts and everyday users alike.

It delves into the intricacies of capacity-seeking congestion controllers and a modified ECN system, offering insights into the future of internet architecture.

The L4S architecture is a complex system for improving internet performance, consisting of three main components:

1. Scalable Congestion Control on Sending Hosts: This part involves sophisticated methods for sending data over the internet. It adjusts the data flow to avoid congestion, ensuring faster and more reliable transmissions.
2. Active Queue Management (AQM) at Network Bottlenecks: This component is deployed in network routers and switches. It intelligently manages data packets in busy network areas to reduce delays and prevent data loss.
3. Protocol Linking Senders and Network: This establishes a communication protocol between the sending hosts and the network. It ensures that the new methods of sending data are compatible with the network’s way of managing traffic.

How Is This Different Than TCP Congestion Control?

L4S differs from traditional TCP congestion control in its approach to handling network congestion.

TCP typically detects congestion through packet loss, leading to a series of adjustments like exponential backoff and retransmission of lost packets.

This often necessitates large router buffers, which can introduce additional latency.

In contrast, L4S enhances the communication between routers and end devices.

It utilizes an additional bit in IP packets, allowing routers to explicitly indicate congestion before packet loss occurs. This direct signaling enables more efficient congestion management without relying on exponential backoff or large buffers.

Consequently, L4S can reduce both the need for retransmissions and the latency associated with large buffers, offering a more efficient and responsive network experience.

Whether you’re a network engineer, a tech enthusiast, or just someone who loves a seamless online experience, RFC 9330 is a treasure trove.

When facing these questions, I considered these three methods (and personally implemented the first one):

Method 1: WordPress Plugin

A GPT is mostly a context prompt with context data (=embeddings), Avatar image, and potential actions. If you don’t badly need actions, i.e., external API calls such as weather data, and you run WordPress, I recommend the Meow Apps plugin (not affiliated).

Here’s a screenshot:

In the ‘Chatbots’ section, you can set the Context. Simply copy and paste the ‘Instructions’ prompt from the GPTs builder here.

In the ‘Chatbots > Visual Settings’ section, you can set the name and Avatar of your GPT so it feels the same.

In the ‘Chatbots > Embeddings’ section you can set the environment and add external data (e.g., using Pinecone).

I’m super happy with the plugin and can generally recommend it. You can see it live on any of our (bottom right) with what you may call a ‘custom GPT’.

Here are some alternative solutions for embedding a GPT model on a website, provided by the community in November 2023:

Method 2: Using Assistant API with an iFrame

Implement an iframe on your webpage to embed the GPT.

Integrate a chat widget in the base.html file, using JavaScript to navigate the conversation based on the activated page.

Set up a Flask backend to handle API requests and send responses​. Web developer Zorawar Purohit provided this code for the Flask backend:

# backend.py

from flask import Flask, request, jsonify
from flask_cors import CORS
import openai

app = Flask(__name__)
CORS(app)  # Enable CORS

openai.api_key = 'your-api-key'  # Replace with your OpenAI API key

@app.route('/ask', methods=['POST'])
def ask():
    data = request.json
    response = openai.Completion.create(
        engine="text-davinci-003",
        prompt=data['prompt'],
        max_tokens=150
    )
    return jsonify(response)

if __name__ == '__main__':
    app.run(port=5000)  # Run the Flask app on port 5000

​Include an HTML page setup with iframe, form, and JavaScript function to send messages to the AI and display responses​ (source):

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI Assistant</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        iframe {
            width: 100%;
            height: 500px;
            border: none;
        }
    </style>
</head>
<body>
    <iframe id="ai_frame" sandbox="allow-scripts allow-same-origin"></iframe>

    <form onsubmit="sendMessageToAI(); return false;">
        <input type="text" id="prompt" name="prompt" required>
        <input type="submit" value="Ask AI">
    </form>

    <script>
        function sendMessageToAI() {
            var prompt = document.getElementById('prompt').value;
            $.ajax({
                url: 'http://localhost:5000/ask',  // Point to the backend endpoint
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ prompt: prompt }),
                success: function(response) {
                    // Write the AI's response to the iframe
                    var iframeDocument = document.getElementById('ai_frame').contentDocument;
                    iframeDocument.open();
                    iframeDocument.write('<p>' + response.choices[0].text + '</p>');
                    iframeDocument.close();
                },
                error: function(xhr, status, error) {
                    // Handle error
                    console.error("Error: " + status + " - " + error);
                }
            });
        }
    </script>
</body>
</html>

Method 3: Creating an Assistant Instead of a GPT

Opt for creating an Assistant (using the Assistant API) instead of directly embedding a GPT model.

Consider having a chatbox integration built for you or waiting for a plugin builder (e.g., Meow) to add this functionality to their plugin.

Note that the Assistant API might interact differently than GPT models, potentially requiring more instructions and tweaking​.

Also, note that there may be additional solutions at the time you’re reading this – the space is rapidly evolving.

To stay updated with all the trends, consider subscribing to our email newsletter on the latest tech and trends in LLM and Python by downloading any of our cheat sheets:

Recommended: OpenAI Wants Us to Create GPTs, i.e., Miniature AI Agent Helpers

The beauty of using the later over the former is that all the heavy lifting has been done for us. By placing the link in your template, you can take advantage of all the available features. We have already demonstrated how to display charts using Highcharts.js in a Django web application.

In this tutorial, we will pay attention to Charts.js. Specifically, we will learn:

1. Another way to populate the database other than the ones mentioned while learning how to do so with Highcharts.js
2. How to query the database to display the data structured in such a way that Charts.js can understand.
3. How to display both bar chart and pie chart

The Model

For this project, we will use the data from Kaggle¹ that shows the richest people in the world as of 2022. The data contains several columns but we are only interested in just a few of them. Let us create a database model for the dataset.

from django.db import models

GENDER = (
    ('M', 'Male'),
    ('F', 'Female'),
)

class Richest(models.Model):
    name = models.CharField(max_length=100)
    gender = models.CharField(max_length=1, choices=GENDER)
    net_worth = models.IntegerField()
    country = models.CharField(max_length=100)
    source = models.CharField(max_length=100)

    def __str__(self):
        return self.name

The model contains names of the richest people in the world, their net worth, country of origin and their source of wealth.

Populating the database

In the previous tutorial project on creating a chart using Highcharts.js, I showed you one of the ways to populate a database. I wrote a script from the Django shell to populate the database. In this tutorial, we will learn a different method.

We will use Django’s BaseCommand class to create a custom management command that populates the database using the dataset.

Start by creating new folders inside the app folder. For example, assuming the name of your Django app is charts and is created in your current directory, run the following in your Ubuntu terminal:

mkdir charts/management/commands -p

The p flag makes it possible to create a nested folder in one command. Inside the commands folder, create a new file named populate_db.py:

nano charts/management/commands/populate_db.py

let’s first import the required modules:

from django.core.management.base import BaseCommand
from charts.models import Richest
import csv
import math

BaseCommand is a class provided by Django that serves as the base class for writing custom management commands. Management commands are scripts that can be run from the command line to perform various tasks related to your Django app.

The BaseCommand class provides several useful methods and attributes that make it easy to write custom management commands. When you create a custom management command by subclassing BaseCommand, you need to override the handle method to define the behavior of your command.

The handle method is called when the command is executed, and it receives any command-line arguments passed to the command as keyword arguments.

In addition to the handle method, the BaseCommand class provides several other methods and attributes that you can use when writing custom management commands.

For example, as we shall see, you can use the add_arguments method to define custom command-line arguments for your command, and you can use the stdout and stderr attributes to write output to the Ubuntu terminal.

class Command(BaseCommand):
    help = 'Populate the database using a CSV file'

    def add_arguments(self, parser):
        parser.add_argument('forbes_2022_billionaires.csv', type=str, help='The path to the CSV file')

    def handle(self, *args, **options):
        csv_file = options['forbes_2022_billionaires.csv']

        with open(csv_file, 'r') as f:
            reader = csv.DictReader(f)
            for row in reader:
                skip_row = False
                for value in row.values():
                    try:
                        if math.isnan(float(value)):
                            skip_row = True
                            break
                    except ValueError:
                        pass
                if skip_row:
                    continue
                net_worth = int(float(row['finalWorth']))
                obj, created = Richest.objects.get_or_create(
                    name=row['personName'],
                    gender=row['gender'],
                    net_worth=net_worth,
                    country=row['countryOfCitizenship'],
                    source=row['source']
                 )

        self.stdout.write(self.style.SUCCESS('Successfully populated the database'))

We define a new Command class that inherits from BaseCommand.

In the add_arguments method, we define a new command-line argument called csv_file that specifies the path to the CSV file. In the handle method, we read the data from the CSV file and use a conditional statement to check if any of the values in the current row are NaN.

If any value is NaN, we use the continue statement to skip this row and move on to the next one. Otherwise, we use the get_or_create method to add the data to the database. Finally, we use the self.stdout.write method to print a success message.

We use a nested loop to iterate over each value in the row. For each value, we use a try-except block to try to convert the value to a float and check if it is NaN. If a ValueError exception occurs, we catch it and ignore it using the pass statement.

If any value in the row is NaN, we set the skip_row variable to True and use the break statement to exit the inner loop. After the inner loop completes, we use an if statement to check if the skip_row variable is True. If it is, we use the continue statement to skip this row and move on to the next one.

However, a problem arises from the dataset. The net_worth field is an IntegerField. Whereas, the data type of the finalWorth column is float. To avoid errors, we first convert the value of the net_worth field in the current row to a float using the float function, and then convert it to an integer using the int function. We then assign this integer value to the net_worth field of the Richest model instance using the get_or_create method.

Make sure you have the forbes_2022_billionaires.csv file downloaded and placed in your current directory. Then, run the command we defined from the command line using the manage.py script like this:

python3 manage.py populate_db forbes_2022_billionaires.csv

Afterward, a success message will be displayed. We have populated our database. Open the admin interface to see it.

Displaying charts using Charts.js

Make sure you have included the Charts.js library in your template by adding the following script tag to the <head> section of your HTML file:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Next, add a <canvas> element to your template where you want to display the chart. Give this element an id so you can reference it in your JavaScript code.

Here’s an example:

<canvas id="myChart"></canvas>

In this demonstration, we will query the database to:

1. Calculate total net worth of each country
2. Get the top 10 richest people in the world
3. Get the top 10 richest women in the world
4. Get the distribution of wealth by gender

We will also include a pie chart. You can always check the source code for more details.

Displaying the total net worth of each country

from django.shortcuts import render
from django.db.models import Sum
from .models import Richest

def TotalNetWorth(request):
    # Query the database to get the data
    data = Richest.objects.values('country').annotate(total_net_worth=Sum('net_worth')).order_by('-total_net_worth')

    # Prepare the data for the chart
    chart_data = []
    for item in data:
        chart_data.append({
            'country': item['country'],
            'total_net_worth': item['total_net_worth']
        })

    # Render the template with the chart data
    return render(request, 'total_net_worth.html', {'chart_data': chart_data})

We group the data by country using the values method, and using the annotate method, we calculate the total net worth of each country.

Next, we prepare the data for the chart by creating a new list called chart_data and appending a dictionary for each item in the query result.

Each dictionary contains two keys: 'country' and 'total_net_worth', which represent the country and its total net worth, respectively.

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: {{ chart_data|safe }}.map(item => item.country),
            datasets: [{
                label: 'Total Net Worth',
                data: {{ chart_data|safe }}.map(item => item.total_net_worth),
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1	
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

Here, we create a new Chart object and pass it the context of the <canvas> element and an options object that specifies the type of chart and its data.

We use the chart_data variable passed as context to populate the chart with data.

Then, we use the map method to extract the country names and total net worth values from the chart_data and assign them to the labels and data properties of the chart’s datasets.

Check out the source code for a demonstration of a pie chart. It’s almost the same.

Displaying the top ten richest people in the world

def TopTenRichest(request):
    # Query the database to get the data
    data = Richest.objects.order_by('-net_worth')[:10]

    # Prepare the data for the chart
    chart_data = []
    for item in data:
        chart_data.append({
            'name': item.name,
            'net_worth': item.net_worth
        })

    # Render the template with the chart data
    return render(request, 'top_ten_richest.html', {'chart_data': chart_data})

The following code shows how to display a pie chart using Charts.js:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: {{ chart_data|safe }}.map(item => item.name),
        datasets: [{
            label: 'Net Worth',
            data: {{ chart_data|safe }}.map(item => item.net_worth),
            backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)',
                'rgb(153, 102, 255)',
                'rgb(255, 159, 64)',
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 205, 86)',
                'rgb(75, 192, 192)'
            ],
            hoverOffset: 4
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Top Ten Richest People'
        }
    }
});

This code creates a new Chart object and sets its type to 'pie'. The data for the chart is taken from the chart_data variable that was passed to the template from TopTenRichest view function.

The labels for the chart are set to the names of the richest people, and the data for the chart is set to their net worths.

The source code also contains the bar chart example.

Displaying the top ten richest women

def TopRichestWomen(request):
    data = Richest.objects.filter(gender='F').order_by('-net_worth')[:10]
    names = [item.name for item in data]
    net_worths = [item.net_worth for item in data]
    return render(request, 'top_richest_women.html', {
        'names': names,
        'net_worths': net_worths
    })

Distribution of wealth by gender

def WealthByGender(request):
    # Query the database to get the total net worth for each gender
    male_net_worth = Richest.objects.filter(gender='M').aggregate(Sum('net_worth'))['net_worth__sum']
    female_net_worth = Richest.objects.filter(gender='F').aggregate(Sum('net_worth'))['net_worth__sum']

    # Prepare the data for the chart
    data = {
        'labels': ['Male', 'Female'],
        'datasets': [{
            'data': [male_net_worth, female_net_worth],
            'backgroundColor': ['#36A2EB', '#FF6384']
        }]
    }

    # Render the chart using the Chart.js library
    return render(request, 'wealth_by_gender.html', {'data': data})

And this is the pie chart. Check the source code for more details:

Conclusion

In this project tutorial, we have learned various ways to query our database, structure the data and displayed them using charts.js, a JavaScript library for data visualization. We saw how Django interacts with charts.js to display charts on a template.

We also learned another way to populate the database by using Django’s BaseCommand class. Due to the nature of the dataset, we were restricted to only bar and pie charts. However, we can apply the process to create other charts.

Use the knowledge you learned to integrate charts in your Django web application.

• Forbes World’s Billionaires List 2022 | Kaggle

Recommended: The Math of Becoming a Millionaire in 13 Years