Forem: Arsey Kun

BrilliantAfrica2G: Building 2G AI Education for Low‑Connectivity Africa

Arsey Kun — Wed, 17 Dec 2025 11:30:09 +0000

This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux

What I Built

BrilliantAfrica2G is a web-based, offline-first AI tutoring platform designed for African students with limited or no internet access. It delivers AI-powered learning through SMS and USSD, enabling students to ask questions, take quizzes, and receive explanations using basic phones.

My Pitch Video

Demo

Here is our Brilliant Africa2G Github Repo

I currently have no demo, but I hope the video explains it all.

The Story Behind It

Many students in rural Africa lack access to smartphones, reliable internet, or modern educational technology (edtech). As a student myself, I believe education quality shouldn’t depend on location or device. After speaking with students in local communities—including my own cousins—I realized some had never even heard of AI due to limited access. BrilliantAfrica2G was built to meet students where they are and make learning more accessible and inclusive.

Technical Highlights

BrilliantAfrica2G is built as a web-based platform with SMS and USSD as the primary user interfaces, ensuring accessibility in low-connectivity environments.

The backend is developed using Django, which handles request routing, user sessions, message state, learning logic, and analytics. Africa’s Talking is integrated to manage inbound and outbound SMS and USSD interactions, enabling real-time communication with users on basic mobile phones.

AI-powered responses are generated using Gemini AI, which processes student questions, explanations, and quiz logic. To support long answers within SMS character limits, the system uses multi-step messaging, allowing responses to be delivered progressively with simple (NEXT) commands.

The platform follows an offline-first design philosophy, prioritizing low bandwidth usage, short request cycles, and graceful handling of unstable networks.

Sensitive credentials such as API keys are securely managed using environment variables, ensuring safe configuration across development and deployment environments.

This architecture allows BrilliantAfrica2G to scale across regions while remaining reliable, secure, and accessible to students with limited devices or connectivity.

FLET VS KIVY: WHICH ONE SHOULD YOU USE FOR YOUR NEXT PYTHON GUI APP

Arsey Kun — Mon, 13 Oct 2025 22:21:51 +0000

Python has become one of the most popular languages in a variety of fields from scripting, web applications and AI/ML, and now desktop application a soon-to-be conquered or at least as it seems to be.

When it comes to Graphical User Interface (GUI) development, two frameworks have been gaining attention: Flet and Kivy.

But which one should you choose?

Here’s the dilemma:

Both are powerful, yet they shine in different arenas.

Let’s explore each, break down their strengths, and discover which one fits your next project best..

Kivy The OG Python GUI Framework

If Python GUI frameworks were superheroes, Kivy would be the seasoned warrior — reliable, flexible, and everywhere at once.

Kivy is our OG open-source python GUI framework for building and distributing beautiful python cross-platform GUI apps with ease.
Kivy runs on Android, iOS, Linux, macOS and windows, making it one of the few true cross-platform options for Python developers.

I myself have used it to build somewhat personal tools like my own music player, a code editor for mobile phones. it's suprisingly wild with what you can build with it.

This means with kivy you can develop apps that run on:

Desktop computers: macOS, Linux, BSD Unix, Windows.
Android devices: tablets, smart phones
IOS devices: iPad, iPhone
Any other touch enabled professional/homebrew devices supporting TUIO (Tangible User Interface Objects) Kivy is best for apps that require touch support and custom UI

Example of a kivy application

Let's have a look with a simple application of kivy displaying a button.

from kivy.app import App
from kivy.uix.button import Button


class MyApp(App):
    def build(self):
        return Button(text="Hello Kivy!", on_press=self.say_hello)

    def say_hello(self, instance):
        print("Hello User how are you today. Let's build something cool together!")

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

This simple app runs beautifully on desktop and mobile.

But wait, the button is not that beautiful at all. it's dull. Before you go in the comments and blurst, i have a solution.

Say, you need something more Appy like beautiful modern buttons and other native App elements like Floating Action Buttons, NavBars and Drawers.

This is where Kivy's stylish sibbling comes in.

KivyMD - Kivy Material Design

Imagine you're building a mobile app and want it to look clean, modern just like Android apps built with flutter or Kotlin.
That's exactly what KivyMD does.

KivyMD is a library that extends Kivy with Google's Material Design components — buttons, dialogs, navigation drawers, app bars, and more.

Think of it as a design upgrade pack that gives your Kivy app that "premium" aesthetic without touching CSS or HTML.

Example of a kivyMD application

Let's have a look with a simple application of kivy displaying a button.

from kivymd.app import MDApp
from kivymd.uix.button import MDRaisedButton
from kivymd.uix.screen import Screen


class MyApp(MDApp):
    def build(self):
        screen = Screen()
        btn = MDRaisedButton(text="Hello Kivy!", on_release=lambda x: print("Hello User how are you today. Let's build something cool together!"))
        screen.add_widget(btn)
        return screen


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

Result:
A smooth responsive button with shadows, color effects, and animatios all out of the box.

“With KivyMD, your app stops looking homemade and starts looking professional.”

⚙️ The `KV` Language — Kivy’s Secret Weapon

Kivy comes with its own markup language — the KV Language — which separates your UI from your app logic.
It’s like HTML and CSS for your Python code.

This makes it easier to manage large projects and keeps your app structure clean.

Example: Counter Application

main.py

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.properties import NumericProperty


class CounterWidget(BoxLayout):
    count = NumericProperty(0)

    def increase(self):
        self.count += 1

    def decrease(self):
        self.count -= 1

    def reset(self):
        self.count = 0


class CounterApp(App):
    def build(self):
        return CounterWidget()

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

counter.kv

<CounterWidget>:
    orientation: 'vertical'
    padding: 30
    spacing: 20

    Label:
        text: "Welcome to Kivy"
        halign: "center"


    Label:
        text: f"Vote for Kivy:{root.count} times"
        font_size: 60
        halign: "center"

    BoxLayout:
        size_hint_y: None
        height: 60
        spacing: 15

        Button:
            text: "+"
            font_size: 24
            on_press: root.increase()

        Button:
            text: "-"
            font_size: 24
            on_press: root.decrease()

    BoxLayout:
        orientation: "horizontal"
        width: 50
        spacing: 10
        padding: 5

        Button:
            text: "reset"
            font_size: 18
            on_press: root.reset()

Result

Note:

kivy automatically looks for a .kv file that matches your App class name in lower case, without 'App'

For example:

If your app class is

class CounterApp(App):

kivy expects the file name to be:

counter.kv 
# note that it starts with a small 'c'(referencing your CountApp class) and does not end like counterapp.kv

Make sure it's exactly counter.kv, not Counter.kv, not CounterApp.kv

Or if you prefer not to rely on kivy's auto-detection, you can manual load the .kvfile.

For example:

from kivy.lang import Builder # 👈 add this line

class CounterApp(App):
    def build(self):
        Builder.load_file("counter.kv") # 👈 and this line
        return CounterWidget()

The KV language gives your UI a clear structure and flow - perfect for developers who love visual separation of design and logic.

But what if your goal is to build modern desktop or web app, fast, clean, and Pythonic?

Let's talk about Flet.

Flet — Flutter-Inspired Python Library.

if Kivy was the veteran, Flet is the cool new prodigy.

Flet is a python framework inspired by Flutter. it lets you build wen, desktop, and mobile applications all usng pure python.
No javascript, No HTML. No Frontend frameworks.

Your entire app is written in python, both frontend and backend.

Example of a simple Flet app

import flet as ft

def main(page: ft.Page):
    page.title = "App for Fun"
    page.vertical_alignment = page.horizontal_alignment = "center"
    page.theme_mode = ft.ThemeMode.LIGHT

    def on_click(e):
        page.add(ft.Text("Hello, Flet!"))

    page.appbar = ft.AppBar(
        leading=ft.Icon(ft.Icons.PALETTE),
        leading_width=100,
        title=ft.Text("Flet", style=ft.TextStyle(
            size=16,
            color=ft.Colors.BLUE_ACCENT_100,
            weight=ft.FontWeight.BOLD
        )),
        center_title=True,
        actions=[
            ft.IconButton(
                icon=ft.Icons.PERSON,
                icon_size=32,
                icon_color=ft.Colors.WHITE
            ),
            ft.PopupMenuButton(
                items=[
                    ft.PopupMenuItem("Settings", icon=ft.Icons.SETTINGS),
                    ft.PopupMenuItem("Privacy", icon=ft.Icons.PRIVACY_TIP, disabled=True),
                    ft.PopupMenuItem("Exit", icon=ft.Icons.LOGOUT)
                ],

            )
        ],
        bgcolor=ft.Colors.BLUE_100,
    )

    # add widgets to the page
    page.add(
        ft.Column(
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[
                ft.ElevatedButton(
                    "Click Me", 
                    on_click=on_click, style=ft.ButtonStyle(
                        padding=ft.padding.all(10),
                        mouse_cursor=ft.MouseCursor.CLICK,
                    ),
                    width=100, 
                )
            ]
        )
    )

# Run the app
ft.app(target=main)

Run it, and voilà — you have a clean, modern UI that works in your browser or as a local desktop app.

Flet’s syntax feels like React or Flutter, but entirely Pythonic — declarative, simple, and elegant.

Flet is perfect for developers who love Python but want the beauty and responsiveness of web apps.

⚖️ Flet vs Kivy — Head-to-Head Comparison

Feature	Kivy	Flet
Platforms	Desktop + Mobile	Desktop + Web (mobile via web)
UI Style	Custom, touch-friendly	Declarative, web-style
Learning Curve	Moderate	Very easy
Best For	Games, multimedia, mobile apps	Dashboards, tools, web apps
Community	Mature, large	Growing rapidly
Performance	Great for graphics	Great for UI-based apps
Design System	KivyMD (Material Add-on)	Built-in Material UI
Packaging	Supports Android/iOS builds	Focused on web and desktop
Development Speed	Moderate	Very fast

🧠 Conclusion

So which one should you choose — Kivy or Flet?

At the end of the day it depends on your goal.

🖥️ Use Flet if you want to build modern desktop or web apps fast, without touching frontend frameworks.
📱 Use Kivy (or KivyMD) if you’re targeting Android/iOS, need touch support, or want to create custom graphics-heavy apps.

Both framworks are powerful, and Python-first.

The real question is:

“Do you want a cross-platform powerhouse or a sleek Python-first UI toolkit?”

Whatever your answer, Python’s GUI scene has never looked more exciting. 🚀

Thanks for reading🙃 C'ya

From Code to Conversation: Mastering Africa's Talking Voice API

Arsey Kun — Mon, 18 Aug 2025 09:55:48 +0000

Imagine sitting in a coffee shop in Kampala, laptop open, as the city hums outside. Suddenly, your phone rings. It’s an automated call from your bank, reading out your account balance in a clear, professional voice.

As a developer, you might wonder: “How do they do that? Could I build something similar?”

The answer is yes — and it’s easier than you think.

With Africa’s Talking Voice API, you can create voice-powered applications that transform how businesses communicate with customers across the continent.

Why Voice Still Matters in Africa
While internet access is growing, mobile phone usage still reaches far deeper across Africa. In many regions, voice remains the most reliable way to connect people — whether it’s farmers receiving weather alerts, patients getting appointment reminders, or customers interacting with banks.

Africa’s Talking (AT) Voice API allows you to tap into this reality. With it, you can integrate voice features into your applications and build solutions tailored to African markets — from Lagos to Nairobi, Accra to Kampala.

Getting Your Hands Dirty: The Prerequisites

Before we dive into the code, let's set up your development environment. You'll need:

PHP 7.0 or higher (though PHP 8.x is recommended)
Composer for dependency management
An Africa's Talking account, which is free
Replit account (for hosting your project easily)
A real phone number for testing and a testing number (the sandbox doesn't support voice currently, as I wrote this blog)

Step 1: Creating Your Africa's Talking Account

Head over to africastalking.com and sign up for an account. The process is straightforward:

Sign up with your email and basic information
Verify your account through the email confirmation
Complete your profile with business details
Add credit to your account, because voice calls cost real money, even in testing.
Ensure you have a Replit account and create an app. Read this guide on mastering SMS programming with PHP using Africa's Talking to get familiar with the basics.

Step 2: Getting Your API Credentials

Once your account is active:

Navigate to your Dashboard
Look for the API Key section in the sidebar
Generate a new API key if you haven't already
Copy both your username (usually your app name) and API key
Keep these secure – treat them like passwords!

Pro Tip:

Create separate API keys for development, staging, and production environments. This practice will save you headaches down the road.

Setting Up Your Development Environment

Let's get our hands dirty with some code. First, create a new PHP project:

mkdir voice-app-tutorial
cd voice-app-tutorial
composer init

Now let's install the Africa's Talking SDK:

composer require africastalking/africastalking

Your First Voice Call: Breaking Down the Magic
Now comes the exciting part – making your first programmatic phone call. Here's the complete code with detailed explanations:

<?php
require 'vendor/autoload.php';
use AfricasTalking\SDK\AfricasTalking;


// Set your app credentials
$username = "secureauth";  // Your app username
$api_key   = "YOUR_LIVE_APIKEY";

// Initialize the SDK
$AT = new AfricasTalking($username, $api_key);

// Get the voice service
$voice = $AT->voice();

// Set your Africa's Talking phone number in international format
$from = "+256323200896"; // the number provided by AfricasTalking

// Set the numbers you want to call to

$to = "+256707758612"; // Your real phone number goes here.

// International format is crucial and mandatory.
// your end user, you can query a database from a real app.

try {
    // Make the call
    $results = $voice->call([
        'from' => $from,
        'to'   => $to
    ]);

    print_r($results);
} catch (Exception $e) {
    echo "Error: ".$e->getMessage();
}
?>

Understanding Each Line

Line 4-6: We're importing the Africa's Talking SDK and setting up our credentials. The username is typically your app name, while the API key is your secret sauce for authentication.

Line 9: This initializes the Africa's Talking SDK with your credentials, creating your gateway to all AT services.
Line 12: We're specifically requesting the voice service from the broader AT platform.

Line 15-18: These are the phone numbers involved in our call. The $from number must be one you've purchased or been assigned by Africa's Talking, while $to is your recipient.

Line 20-26: This is where the magic happens. We're making the actual call and handling any potential errors gracefully.

The Reality Check: Live Testing Only

Here's something crucial that trips up many developers: Africa's Talking Voice API doesn't work in sandbox mode. Every call you make during development will be a real call that costs real money and rings a real phone.

This means:

Start small: Test with short calls to avoid unexpected charges Use your own number initially: Don't annoy friends and colleagues during testing.
Monitor your account balance: Keep track of spending as you develop Plan your testing strategy: Write comprehensive unit tests for everything except the actual API calls

Expanding Your Voice Horizons

The basic call we just made is just the tip of the iceberg. The Voice API offers several powerful features.

For example:

Text-to-Speech Integration: Reading out custom messages dynamically

$results = $voice->call([
    'from' => $from,
    'to'   => $to,
    'clientRequestId' => 'unique-call-id-123',
    'callStartUrl' => 'https://yourdomain.com/voice/start',
    'callNotificationUrl' => 'https://yourdomain.com/voice/notification'
]);

Conference Calls: Connect multiple participants in one call.

$results = $voice->call([
    'from' => $from,
    'to'   => [$phone1, $phone2, $phone3], // Multiple recipients
    'callStartUrl' => 'https://yourdomain.com/conference/start'
]);

Note

The Waiting Game: API Key Activation

Before we dive into error handling, let me address something that catches many developers off guard.

API key activation delays.
You've just created your shiny new API key, copied it carefully into your code, double-checked your credentials, and... you get an "Invalid Authentication" error.

Don't panic!

Cool down, This is completely normal.

The Reality of API Key Propagation
When you generate a new API key from your Africa's Talking dashboard, it doesn't become active instantly across all their systems. Think of it like updating your address with the postal service – it takes time for the information to propagate through all the networks.

What to expect:

Sometimes it's instant (lucky you!)
Usually takes 5-15 minutes (most common)
Occasionally, up to 30 minutes (rare, but it happens)
Very rarely, up to an hour (grab a coffee)

Managing Your Excitement (and Frustration)

I know the feeling – you're excited to see your first programmatic call in action, you've set everything up perfectly, and then... authentication error. Here's how to handle this gracefully:

// Add a helper function to test API connectivity
function testApiConnection($voice, $from, $to) {
    try {
        $results = $voice->call([
            'from' => $from,
            'to'   => $to
        ]);
        return ['success' => true, 'message' => 'API key is active!'];
    } catch (Exception $e) {
        if (strpos($e->getMessage(), 'authentication') !== false || 
            strpos($e->getMessage(), 'invalid') !== false) {
            return ['success' => false, 'message' => 'API key still activating...'];
        }
        return ['success' => false, 'message' => 'Other error: ' . $e->getMessage()];
    }
}

// Test before your main application logic
$connectionTest = testApiConnection($voice, $from, $to);
if (!$connectionTest['success']) {
    echo $connectionTest['message'] . " Please wait a few minutes and try again.\n";
    exit;
}

Pro Tips for New API Keys

Generate your API key first, then go grab a coffee or work on other parts of your application

Use the time productively – set up your webhook endpoints, write your business logic, or plan your user interface
Test with a simple call first – don't start with complex IVR flows when testing API connectivity
Keep your old API key active (if you have one) until the new one is confirmed working

When to Worry

If you're still getting authentication errors after an hour, then it's time to:

Double-check your API key was copied correctly (no extra spaces!) 😏 sometimes CTRL+V might ruin your day.
Verify your username matches your account
Contact Africa's Talking support – they're quite responsive

Remember☝️:

This initial wait is a one-time thing. Once your API key is active, it stays active, and subsequent calls will work immediately.

Error Handling and Best Practices

Real-world applications need robust error handling. Here's an enhanced version of our basic call:

try {
    $results = $voice->call([
        'from' => $from,
        'to'   => $to,
        'clientRequestId' => uniqid('call_', true), // Unique identifier
        'callNotificationUrl' => 'https://yourdomain.com/webhooks/voice-status'
    ]);

    // Log successful call initiation
    error_log("Call initiated: " . json_encode($results));

    // Check if call was queued successfully
    if (isset($results['status']) && $results['status'] == 'Queued') {
        echo "Call queued successfully!";
    }

} catch (Exception $e) {
    // Log the error for debugging
    error_log("Voice API Error: " . $e->getMessage());

    // Handle different types of errors
    if (strpos($e->getMessage(), 'insufficient balance') !== false) {
        echo "Please top up your account to make calls.";
    } elseif (strpos($e->getMessage(), 'invalid phone number') !== false) {
        echo "Please check the phone number format.";
    } else {
        echo "An error occurred: " . $e->getMessage();
    }
}

Real-World Applications: Where Voice API Shines

Now that you understand the mechanics, let's explore some exciting use cases where the Voice API can transform businesses and user experiences:

Interactive Voice Response (IVR) Systems Imagine building a customer service system for a telecom company:

// When a call comes in, redirect to your IVR handler
$results = $voice->call([
    'from' => $from,
    'to'   => $customerNumber,
    'callStartUrl' => 'https://yourdomain.com/ivr/welcome'
]);

Your IVR webhook could then:

Greet customers in their local language
Provide menu options (Press 1 for billing, Press 2 for support...)
Route calls to appropriate departments
Collect customer information through DTMF inputs

2. Automated Appointment Reminders

Healthcare facilities can reduce no-shows significantly:

// Daily cron job to send appointment reminders
$appointments = getUpcomingAppointments(); // Your database query

foreach ($appointments as $appointment) {
    $voice->call([
        'from' => $clinicNumber,
        'to'   => $appointment['patient_phone'],
        'callStartUrl' => 'https://clinic.com/voice/reminder/' . $appointment['id']
    ]);
}

3. Emergency Alert Systems

Government agencies or organizations can broadcast critical information:

// Emergency broadcast to multiple recipients
$emergencyContacts = getAllEmergencyContacts();

$voice->call([
    'from' => $emergencyNumber,
    'to'   => $emergencyContacts,
    'callStartUrl' => 'https://emergency.gov/voice/alert/flood-warning'
]);

4. AI-Powered Customer Support

Integrate with AI services for intelligent call handling:

$results = $voice->call([
    'from' => $from,
    'to'   => $customerNumber,
    'callStartUrl' => 'https://yourdomain.com/ai/voice-assistant',
    'callNotificationUrl' => 'https://yourdomain.com/ai/call-analytics'
]);

Your AI endpoint could:

Use speech-to-text to understand customer queries
Process requests through natural language processing
Respond with synthesized speech
Escalate complex issues to human agents

Voice-Enabled IoT Applications

Smart home or agricultural monitoring systems:

// When the sensor triggers an alert
if ($soilMoisture < $threshold) {
    $voice->call([
        'from' => $systemNumber,
        'to'   => $farmerNumber,
        'callStartUrl' => 'https://agritech.com/voice/irrigation-alert'
    ]);
}

6. Financial Services and Banking

Banks can enhance security and customer experience:

// Transaction verification
$voice->call([
    'from' => $bankNumber,
    'to'   => $customerNumber,
    'callStartUrl' => 'https://bank.com/voice/verify-transaction/' . $transactionId
]);

Webhooks: The Secret Sauce

The real power of the Voice API lies in webhooks – endpoints that Africa's Talking calls during various stages of your voice interaction.

Here's a simple webhook handler:

// webhook-handler.php
<?php
header('Content-Type: text/xml');

// Get the POST data
$isActive = $_POST['isActive'] ?? '0';
$callerNumber = $_POST['callerNumber'] ?? '';
$callSessionState = $_POST['callSessionState'] ?? '';

// Basic IVR response
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<Response>';

if ($callSessionState == 'new') {
    echo '<Say>Welcome to our service. Press 1 for support, press 2 for billing.</Say>';
    echo '<GetDigits timeout="10" finishOnKey="#" callbackUrl="https://yourdomain.com/handle-input">';
    echo '<Say>Enter your choice followed by the hash key.</Say>';
    echo '</GetDigits>';
} else {
    echo '<Say>Thank you for calling. Goodbye!</Say>';
}

echo '</Response>';
?>

Note

Ensure you request a testing number before anything and set your callback URLs.

To set callback URLs using Replit, read this guide on mastering SMS programming with PHP using Africa's Talking.

Testing Strategy: Maximizing Value, Minimizing Cost

Since every call costs money, here's a smart testing approach:
Unit Test Everything Else: Test your business logic, webhook handlers, and data processing without making actual calls
Use a Test Phone: Dedicate one number for development testing

Implement Call Logging: Track every call for debugging and optimization
Start with Short Interactions: Test basic functionality before building complex flows

Use Staging Environment: Test complete flows in a controlled environment before production.

Wrapping Up: Your Voice-Powered Future

The Africa's Talking Voice API opens up a world of possibilities for developers across the continent. From simple notification systems to complex AI-powered customer service platforms, voice technology is reshaping how businesses connect with their users.

As you embark on your voice development journey, remember:
Start simple and iterate:

Test thoroughly (but cost-effectively)
Think about user experience in local contexts
Consider multilingual support for broader reach
Plan for scale from day one

The next time you receive that automated call from your bank or get a voice reminder about your appointment, you'll know exactly what's happening behind the scenes.

☝️More importantly, you'll have the tools and knowledge to build the next innovative voice solution that could transform someone's business or improve lives across Africa.

So go ahead, fire up that code editor, and start building. The voice revolution is calling – literally – and it's waiting for your innovative solutions to answer.

Wrapping Up

Africa’s Talking Voice API is a powerful tool for building voice-powered applications in Africa. Whether you’re sending reminders, building an IVR, or experimenting with AI-driven support, you now have the foundation to get started.

The key is to start small, test carefully, and iterate. Soon enough, the next time someone gets an automated call in Africa, it might just be powered by your code.
Your first call is only a few lines of PHP away

Master SMS Programming with PHP: From Zero to Hero Using Africastalking

Arsey Kun — Sat, 26 Jul 2025 00:32:03 +0000

Send Professional Text Messages with Code - A Complete Beginner's Guide

Picture this: your e-commerce website automatically sends order confirmations, your appointment booking system reminds clients of upcoming meetings, or your authentication system sends secure verification codes - all through simple text messages. This is the power of SMS APIs, and today you'll learn to wield it.

SMS (Short Message Service) remains one of the most reliable and immediate ways to reach people. With a 98% open rate and messages typically read within 3 minutes, SMS is a developer's secret weapon for critical communications.

In this comprehensive tutorial, we'll build your first SMS-sending application using PHP and AfricasTalking SMS API, right in your browser using Replit. No complex setups, just pure coding magic.

And I know you love coding😉

Why SMS Matters in Today's Digital World

Before we dive into code, let's first understand why SMS programming is a must for every developer to master.

Real-World SMS Use Cases

Security & Authentication
1. Two-factor authentication (2FA) codes
2. Password reset confirmations
3. Login alerts from new devices
4. Account security notifications
E-Commerce & Business
1. Order confirmations and shipping updates
2. Abandoned cart reminders
3. Flash sale notifications
4. Customer support ticket updates
Scheduling & Reminders
1. Medical appointment reminders
2. Bill payment due dates
3. Event notifications
4. maintenance alerts
Critical Alerts
1. System downtime notifications
2. Emergency alerts
3. Server monitoring alerts
4. Payment failures

The Power of 98% Open Rates

Unlike emails that might sit unread in inboxes, SMS messages are:

Immediately visible on lock screens
Platform independent (works on any phone)
Reliable even with poor internet connectivity
Personal and attention-grabbing

What's an API? (Simpler Than You Think!)

Never heard of an API before? Perfect! Let's start with something you already know.

APIs are like restaurant Waiters

Imagine you're at a restaurant:

You(Your PHP code) want to order some food
The kitchen (AfricasTalking Servers) does the staff for you, like preparing and packaging your food.
The waiter (the API) who takes your order to the kitchen and brings back your meal

You don't need to know how the kitchen works, what ingredients they use, or how they cook. You just have to tell the waiter what you want, and they handle everything else.

So, in techinal terms this is the request-response cycle where your code sends a request to the API.

The API will read and reach out to the Servers. When the validation is correct.

The server will then send a response back to the API, the API will forward it to you Application and you'll see a message pop on your screen.

Good now?

Wait... what? You didn't get it.

Alright,

Your code says, "I want to send this message to this phone number."

The API says, "Got it! I'll handle the complicated stuff."

The Server then says, "Alright, let's process and send back the message."

brings your meal to the table.

Why This Matters for SMS

Without an API, sending an SMS would be like. It will be chaos, doable but tiresome.

You need to:

Connect directly to mobile phone towers
Understand different network protocols
Handle international routing
Deal with carrier-specific requirements
Manage delivery reports and errors

That's incredibly complex! But with an API, most of the heavy work is lifted, you just need to say "send the message" and it handles all the complicated staff for you.

Now that you know what an API is, let's see how SMS APIs work specifically:

The SMS Journey: From Code to Phone

Your Application → Creates a message and sends it to the API
SMS Gateway → Receives your request and validates it
Mobile Network → Routes the message to the correct carrier
Recipient's Phone → Receives and displays your message

✨ Why Africa’s Talking

Africa’s Talking isn't just another SMS provider - it's the leading communuication platform for Africa, offering:

99.9% deleivery rates acros 54+ African countries
Developer-freindly APIs with excellent documentation
Affordable pricing starting at $0.01 per SMS
Instant setuo with sandbox testing
Multiple channels: SMS, USSD, Voice, Airtime, Data, and WhatsApp

🔧 What You’ll Build Today

By the end of this tutorial, you'll have:

Understanding of how SMS APIs work under the hood
Code you can adapt for real world projects
Confidence to build communication features into your apps
A working SMS application that can send messages to any phone.

🚀Prerequisites: What You Need to Get Started

I've kept the requirements minimal and friendly

Required Accounts(Both Free!)

Replit Account: Sign up at Replit.com
AfricasTalking Account: Sign up at africastalking.com

Development Tools

A Web browser chrome or your favorite one

Getting API Credentials

After signing up for Africa's Talking, you need to get some credentials like username and api_key:

AfricasTalking API key , this will give us the authorization to access AfricasTalking SMS API.

To get one,

Navigate to your sandbox dashboard (usually orange themed)
You'll see the app username which is by default and always sandbox for testing purposes befoe going to production level apps.

Note: in real world apps, a usename must be unique. You need to create a live app for that.

Copy your api_key from the settings, usually you must follow steps to create one.
Keep these handy because you'll need them soon.

Important:

Make sure to copy and paste the api key before it disappears, takes around 3-5 minutes to disappear, still active but disappeard.

🚀 Building Your SMS Application: Step-by-Step

Step 1: Setting Up Your Coding Environment

Let's start by creating your development workspace:

Go to Replit and click "Create Repl"
Choose "PHP Web Server" from the templates
Name your project something memorable like "my-sms-app"
Click "Create App" and wait for the magic to happen

You'll see a familiar code editor with index.php already created. This is your canvas!

Step 2: Installing the SMS Superpowers

Now we need to add SMS capabilities to our project.

Open the Shell tab,

Then run,

composer require africastalking/africastalking

So in replit it looks something like this,

What's happening here?

Composer is PHP's package manager (like npm for JavaScript or pip for python)
We're downloading the official Africa's Talking SDK
This gives us pre-built functions to send SMS easily
No need to write complex HTTP requests from scratch!

You'll see a vendor/ folder appear — this contains all the SMS magic we need.

Step 3: Writing Your First SMS Script

Replace the contents of index.php with this powerful script:

<?php

require 'vendor/autoload.php';

use AfricasTalking\SDK\AfricasTalking;

// Set your Africa's Talking app credentials
$username   = "sandbox";    // Replace with your Africa's Talking username
$apiKey     = "YOUR_API_KEY_HERE";     // Replace with your Africa's Talking API key

// Initialize the SDK
$AT = new AfricasTalking($username, $apiKey);

// Get the SMS service
$sms = $AT->sms();

// Set the recipient(s) in international format
$recipients = "+256707522509";  // Replace with real numbers
// Or query from a database

// Compose your message
$message = "I'm a lumberjack and it’s ok, I sleep all night and I work all day.";

// Optionally, set your senderId or shortCode (must be approved on your account)

// $from = "YourSenderID";  // Can also leave empty to use default

try {
    // Send the SMS
    $result = $sms->send([
        'to'      => $recipients,
        'message' => $message,
        'from'    => $from  // Optional
    ]);

    echo "Response:\n";
    print_r($result);
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
}

🔧 Code Breakdown: Understanding Each Part

Let's demystify what's happening:

Loading Dependencies: require __DIR__ . '/vendor/autoload.php'; loads our SMS toolkit
Credentials Setup: We tell the API who we are with username and API key
Service Initialization: $AT->sms() gives us access to SMS functions
Message Configuration: We specify recipient and message content
Sending Logic: $sms->send() does the heavy lifting
Error Handling: We catch and display any issues gracefully

Step 4: Customization Time

Before running, update these crucial details:

$apiKey   = "YOUR_ACTUAL_API_KEY";     // From your Africa's Talking dashboard
$recipients = "+254YOUR_PHONE_NUMBER"; // Your phone number with country code

// Ensure the phonenumber in your code is the same as the one you used in the Simulator
$message    = "Your custom message here!"; // Make it personal!

📱 Phone Number Format Tips:

Always include the country code (e.g., +256 for Uganda)
Remove any leading zeros
Example: +254712345678 (not 0712345678)

Step 5: The Magic Moment — Launch

Click the big green "Run" button or type php index.php in the shell.

Callbacks and Simulator

When you run your code, click on the provided Replit URL and copy that URL. This will be your callback URL.

AfricasTalking uses callback urls(also known as webhooks) to send your application real-time HTTP POST notifications depending on which API product you're using.

in our case, SMS API callback URLs:

Inbound messages: whenever someone sends SMS to your shortcode, AT will post details (sender, message, timestamp) to your callback URL.

You might register it under

SMS --> SMS Callback URLs --> Inbox messages on your AT Dashboard.

Paste your previously copied URL and save for the changes to take effect.

Here is it more visually.

You can also check out Delivery reports, Premium SMS / Subscriptions, and more about SMS Features and use cases.

Note

A callback URL must be publicly accessible over HTTPS (or HTTP where allowed)
Must accept POST requests and return appropriate HTTP response codes.
Preferably secure (valid SSL, allow AT IPs, correct permissions)

After configuring our callback, launch the simulator. A simulator is a virtual phone that will allow us to test how the application works before going live.

Launch your simulator and register a phone number.

Ensure the phone number matches the one in your code or otherwise you won't see the magic.

Then go back to Replit and rerun your application, or stop and run the server again.

Within seconds, you should see:

Success message in your Africastalking Simulator

Delivery report with message details in the Replit webview

Here is your message,

🔧 Advanced Features: Taking Your SMS Game Further

Adding Multiple Recipients

Want to send to multiple people? Easy:

$recipients = ["+254700000001", "+254700000002", "+254700000003"];
// You can just query from you database for safer faster messages and bulk sms delivery.

Dynamic Message Personalization

$userName = "John";
$orderNumber = "ORD-2024-001";
$message = "Hi {$userName}! Your order {$orderNumber} has been shipped. Track it here: bit.ly/track123";

Scheduling SMS (Pro Tip)

While Africa's Talking doesn't have built-in scheduling, you can combine it with cron jobs:

// save this as scheduled_sms.php
if (date('H:i') === '09:00') {
    // Send morning reminder
    $message = "Good morning! Don't forget your 10 AM meeting.";
    $sms->send(['to' => $recipients, 'message' => $message]);
}

🚨 Troubleshooting: Common Issues & Solutions

Issue 1: "Invalid API Key"

Solution: Double-check your API key from the dashboard. Copy-paste to avoid typos.

Issue 2: "Invalid Phone Number"

Solution: Ensure international format (+254...) and remove spaces/dashes.

Issue 3: "Insufficient Credits"

Solution: Add credits to your Africa's Talking account or use sandbox mode.

Issue 4: SMS Not Received

Solutions:

Check if the number is blacklisted
Verify network coverage
Try a different phone number
Check spam/blocked messages folder

🎯 Real-World Implementation Ideas

Now that you've mastered the basics, here are some project ideas to try:

🛍️ E-commerce Integration

// After successful order
$message = "Order confirmed! {$orderTotal} paid. Delivery in 2-3 days. Order ID: {$orderId}";

🔐 Security System

// For login verification
$code = rand(100000, 999999);
$message = "Your verification code is: {$code}. Valid for 5 minutes.";

📅 Appointment Reminder

// Day before appointment
$message = "Reminder: You have an appointment tomorrow at {$time} with Dr. {$doctorName}.";

🌟 Best Practices for Professional SMS

Message Quality Guidelines

Keep it concise: 160 characters is the sweet spot
Be clear and direct: No ambiguity in critical messages
Include context: Who you are and why you're messaging
Add value: Every message should serve the recipient

Technical Best Practices

Always validate phone numbers before sending
Implement rate limiting to avoid spam flags
Handle errors gracefully with meaningful messages
Log all SMS activities for debugging and analytics
Use environment variables for sensitive credentials

Compliance & Ethics

Always get consent before sending marketing messages
Provide opt-out options (reply STOP)
Respect time zones for non-urgent messages
Follow local regulations (GDPR, TCPA, etc.)

📈 Monitoring & Analytics

Track your SMS performance:

// Enhanced logging
$result = $sms->send(['to' => $recipients, 'message' => $message]);

// Log the result
error_log("SMS sent to {$recipients}: " . json_encode($result));

// Check delivery status
foreach ($result['SMSMessageData']['Recipients'] as $recipient) {
    echo "Number: {$recipient['number']} - Status: {$recipient['status']}\n";
}

🚀 Scaling Your SMS Application

Database Integration

// Store messages for tracking
$pdo = new PDO($dsn, $username, $password);
$stmt = $pdo->prepare("INSERT INTO sms_log (recipient, message, status, sent_at) VALUES (?, ?, ?, NOW())");
$stmt->execute([$recipients, $message, $status]);

Queue System for High Volume

// For sending thousands of messages
// Use Redis or database queues to process SMS in batches

🎉 Conclusion: You're Now an SMS Wizard

Congratulations! You've just unlocked one of the most powerful communication tools in a developer's arsenal. In just a few minutes, you've learned to:

✅ Send SMS messages from code to any phone worldwide

✅ Understand SMS APIs and how they work behind the scenes

✅ Handle errors gracefully like a professional developer

✅ Implement real-world features that users love

✅ Follow best practices for reliable, scalable applications

What Makes This Achievement Special?

You didn't just copy and paste code — you built a foundation. The script you wrote today can evolve into:

A customer notification system serving thousands
A security layer protecting user accounts
A marketing tool driving business growth
An emergency alert system saving lives

Your Next Adventure

The SMS world is vast and exciting. Consider exploring:

Voice calls with Africa's Talking Voice API
USSD applications for feature phone users
Payment integrations for mobile money
Advanced message formatting with rich content

A Personal Note

When I first sent an SMS through code, I felt like I had superpowers. There's something magical about writing a few lines and watching your phone light up with your creation. You've experienced that magic today, and I hope it inspires you to build amazing things.

Remember: every expert was once a beginner. Every complex system started with a simple "Hello World" message. You've taken that crucial first step, and the possibilities are limitless.

📚 Continue Your Journey

Essential Resources

Africa's Talking Documentation - Deep dive into all features
Replit Community - Connect with other developers

Connect & Share

Found this helpful? Here's how to spread the knowledge:

⭐ Star this tutorial if it helped you
🔄 Share with fellow developers on social media
💬 Join our community and show off your SMS creations
📝 Write about your experience and inspire others

Support & Questions

Stuck on something? Don't worry — every developer has been there:

📧 Email support: support@africastalking.com
💬 Community forum: developers.africastalking.com/forum
📱 Twitter: @AfricasTalking

Happy coding, and welcome to the world of SMS programming! 🚀📱

The power to reach anyone, anywhere, anytime is now in your hands. Use it wisely, and build something amazing.

Building an AI Chatbot with Google AI Studio & Flask. And how you can create one yourself.

Arsey Kun — Thu, 13 Mar 2025 16:15:29 +0000

Hello there, nerds! Arsey here.

I've always wanted to build and integrate AI into my projects, but the lack of resources made it quite a hassle. However, as the saying goes, "your imagination is the limit!"

So, I took up the challenge and successfully built an AI-powered chatbot using Flask, HTML, CSS, and JavaScript—and guess what? I did it using only my smartphone! Impressive, right? Well, this was made possible thanks to Google AI Studio, a platform that allows developers to easily build and integrate Google’s state-of-the-art generative model, Gemini.

In this tutorial, I'll guide you step by step on how I built this chatbot so you can do it too. Let’s get coding!

Prerequisites
Before we begin, I assume you have some basic knowledge of:

✅ Python (especially Flask)
✅ JavaScript, HTML, and CSS

If you're comfortable with these, you're good to go! You can also check out the source code for this project on my GitHub.

Part 1: Setting Up the Environment

Install Python
First, ensure you have Python installed. If you haven't installed it yet, download it here and follow the installation steps.
Install Required Libraries
Now, let's install the necessary dependencies. Run the following command:

pip install flask markdown google-generativeai

Get Your Google AI Studio API Key Open Google AI Studio in your browser. Sign up or log in.

Navigate to the side panel.
Click on "Get API Key" and follow the steps to create a new API key.

Testing the API Key
Let's verify that our API key works by running this simple script:

import google.generativeai as genai

genai.configure(api_key="YOUR_GEMINI_API_KEY")
model = genai.GenerativeModel("gemini-2.0-flash")
response = model.generate_content("Explain how AI works")

print(response.text)

Breaking it Down:
✅ We import the google-generativeai library.
✅ We configure the AI model using genai.configure(api_key="YOUR_GEMINI_API_KEY").
✅ We choose Gemini 2.0 Flash as our model.
✅ We generate a response using model.generate_content("Explain how AI works").
✅ Finally, we print the response to see Gemini's answer.

If everything is set up correctly, you should see an AI-generated explanation of how AI works! 🎉

Making Our Chatbot Interactive

Right now, we have to manually change the prompt and rerun the script every time. That’s boring! Let’s make it interactive by allowing users to input their questions in real time.

import google.generativeai as genai

genai.configure(api_key="YOUR_GEMINI_API_KEY")
model = genai.GenerativeModel("gemini-2.0-flash")

user_input = input("Ask Gemini: ")
response = model.generate_content(user_input)

print(response.text)

What Changed?
🔹 We added input("Ask Gemini: ") to let users type their questions.
🔹 The chatbot generates a response based on user input.

But wait! There's still one problem—the script ends after one question. Let's fix that!

Building a Continuous Chat Loop
We want the chatbot to run infinitely until the user decides to exit. We’ll use a while loop for that:

import google.generativeai as genai

genai.configure(api_key="YOUR_GEMINI_API_KEY")
model = genai.GenerativeModel("gemini-2.0-flash")

# Start the chatbot loop
while True:
    user_input = input("You: ")

    # Check if the user wants to exit
    if user_input.lower() == "exit":
        print("Exiting the chatbot. Goodbye!")
        break

    # Get the model's response
    response = model.generate_content(user_input)

    # Print the response
    print("Gemini:", response.text)

Key Improvements:
✅ The chatbot now runs indefinitely until the user types "exit".
✅ We added if user_input.lower() == "exit": break to stop the chatbot gracefully.
✅ Now, it feels like a real conversation! 🚀

Wrapping Up
🎉 And that’s it! We just built an AI-powered chatbot using Google AI Studio and Flask!

In Part 2, we’ll integrate this chatbot into a Flask web application with a clean UI. Stay tuned!

Next Steps:
✔️ Check out the full Flask project on my GitHub.
✔️ Drop your questions, comments, and suggestions! Want to learn more about APIs, AI integration, or something else? Let me know, and I’ll cover it in future blogs.

With that said, I love you nerds. 🤓

C'YA in Part 2! 🚀

BUILDING AN IMAGE GENERATOR USING FLET WITH PYTHON

Arsey Kun — Mon, 25 Nov 2024 21:41:36 +0000

Introduction

Hello there software developers 👨‍💻, Arsey here👋,

Sorry for the late update, i'm a student and was working on some personal projects, but i'll be keeping up and keeping you update from now on.

So in my last tutorial someone commented if we can use GenAI in python frameworks such as kivy and flet, my answer was yes, you can build GenAI apps with them. It might not be the most scalable ones but for a side project with these frameworks are quiet a go to.

In this tutorial, we will be building a simple Image Generator App in python with flet and an image generation model known as flux.dev.

Since flux is a powerful image generator model it requires high computing power to run on your machine, my machine is that powerful so here we will be using replicate, a platform that will provide us an API endpoint for flux such that we focus on user experience, and the image generation will be handled by the API, so no system crush downs or lags, though you can use huggingsface which also has the flux API but follow along we will go with replicate. what are we waiting for, let’s dive in.

Prerequisites

Before we start building our application, I recommend that you have a basic knowledge with python basics such as functions and some oop concepts, and make sure you have the necessary packages installed in your system, we will using the following packages:

flet for building the user interface, for those who don't know Flet. Flet is a python library based on flutter one of the most loved mobile frameworks. Flet allows us to build quick and beautiful user interfaces in real-time and can run cross-platform.
replicate Replicate is a platform as a service (PAAS), a platform that will provide us pre-made models that we can use without installing them. What I mean here is that, replicate will provide the API endpoints that we will hit from our application. Replicate will handle the requests and response in the cloud as for you focus on the functionalities of your application without worrying.
requests for our API endpoint here we will be able to send request and receive responses from and to replicate.
Oh even os for file management, this will be allowing us to save our image on our local system.

Project setup (environment setup)

Install required packages,

pip install flet replicate request

Once installed, and ready to mess with your keyboard; you need to create an account with replicate from here create replicate account make sure to authenticate and authorize using your GitHub credentials.

After creating your account, you’ll now be redirected to the replicate dashboard, here you’ll be able to see different models, but for this tutorial we’ll be using flux.dev. find and use the flux.dev model, any other modek chosen could also work.

Reminder install replicate to able to use their API. All done, then head over to replicate and create an API token, this will set up an endpoint from replicate to our client side app.

Note: the dev version is not used in production or commercial purposes, and be aware that you have limited tokens to use the free version of the model, so do not get excited and generate random images or else you’ll lose all your free credits.

Now where were we, oh well i think you have everything setup to this point, let's go play with the their API.

Building the user interface

Firstly we will be building the User Interface, by the end of this part you'll have a mock UI, ready now, open up your favorite IDE/code editor and type in this code.

import os
import flet as ft
import replicate
import requests

# Set the Replicate API token in the environment
os.environ["REPLICATE_API_TOKEN"] = "YOUR_API_TOKEN"

# Function to interact with Replicate API for image generation
def generate_image(prompt):
    pass

# Function to save the image locally
def save_image(image_url, filename="generated_image.webp"):
    pass

# Main function to define the Flet app
def main(page: ft.Page):
    page.title = "ArseyGen"
    page.horizontal_alignment = 'center'
    page.scroll = ft.ScrollMode.AUTO
    page.theme_mode = ft.ThemeMode.DARK

    page.appbar = ft.AppBar(
        title=ft.Text("REPLICATE IMAGE GENERATOR"), center_title=True
    )

    # Placeholder image to avoid missing src error
    result_image = ft.Image(
        src="https://via.placeholder.com/512", width=512, height=512
        )

    # Define the save button (initially disabled)
    save_image_button = ft.ElevatedButton(text="Save Image", disabled=True)

    # Function to handle image generation
    def generate_and_display_image(e):
        pass

    prompt_input = ft.TextField(label="Enter a text prompt")
    generate_button = ft.ElevatedButton(
        text="Generate Image", on_click=generate_and_display_image
        )

    # Add components to the page
    page.add(
        ft.SafeArea(
            content=ft.Column(
                [
                    prompt_input,
                    generate_button, result_image,
                    save_image_button,
                ],
                horizontal_alignment=ft.CrossAxisAlignment.CENTER
            )
        )
    )

# Run the Flet app
if __name__ == '__main__':
    ft.app(target=main)

Output
you'll have soemthing like this for this step,

Code Explanation

Here is what we have done, we first import our required modules.
we then set our api_token provded by replicate.
then here we set our placeholder functions which will be used later, we used a pass statement
to ignore them.

The main function then describes and builds our UI, here we set the page title, alignment,
scroll behavour so that our page is scrollable. and the rest are UI elements, as You can see we have the AppBar, Image which will allow us to display images in our UI, and finally we
add TextField to capture user's prompts; Generate and Save buttons to handle image generation and saving respectively.

Finally we add our components to the page, notice we used the SafeArea, this will help us provde suffcient padding and avoid intrusions by the operating system, In our case it will indent
the Column widget to avoid the AppBar from interpolating, as for the Column widget, allows us to display UI elements in a vertical array.

Integrating replicate

I can feel your excitement, this is the most crutial step, so make sure you make no mistakes or you'll end breaking the code, and end up debugging, oh well debugging is a good skill cause it took me 2days to fix the ui and 3days to debug the api endpoint where I had an invalid token.

Frustrating right, so if you encounter any bugs/errors in the process try to debug and see the results, I'll do my best able to assist you, so ask questions may be I or other devs will help.

Okay now let's integrate the model, head over to replicate and such for flux.dev.
copy the code provided and we'll make some changes to it, okay! done.

Update the generate_image function so it looks something like this,

 def generate_image(prompt):
    try:
        # Make the API call to Replicate to generate an image
        output = replicate.run(
            "bingbangboom-lab/flux-dreamscape:b761fa16918356ee07f31fad9b0d41d8919b9ff08f999e2d298a5a35b672f47e",
            # "black-forest-labs/flux-dev",
            input={
                "model": "dev",
                "prompt": prompt,
                "lora_scale": 1,
                "num_outputs": 1,
                "aspect_ratio": "1:1",
                "output_format": "webp",
                "guidance_scale": 3.5,
                "output_quality": 80,
                "prompt_strength": 0.8,
                "extra_lora_scale": 0.8,
                "num_inference_steps": 28
            }
        )
        # Return the generated image URL
        return output[0]
    except Exception as e:
        print(f"Error: {e}")
        return None

what this function does is, it interacts with the Replicate API to generate an image base on the text prompt provided by the user.
it then sends the prompt and other model parameters
to the API and returns the URL of the generated image, and if soemthing goes wrong, it handles the error by returning None.

Paste your API token copied from replicate. so it looks something like this,

os.environ["REPLICATE_API_TOKEN"]="r8_KhysOWTKUjRsagyyyLNIWvvg2K78qrE48RwTh"

Ensure you have the token, you can get your API Token from get your api token here

Applying the generate and display image function

Once done, let's also update the generate_and_display_image function, type in this code below,

def generate_and_display_image(e):
        prompt = prompt_input.value
        if prompt:
            page.splash = ft.ProgressBar()  # Display progress bar while generating image
            page.update()

            # Generate image based on user's prompt
            image_url = generate_image(prompt)
            page.splash = None  # Hide progress bar

            if image_url:
                # Update image source only if we have a valid URL
                result_image.src = image_url
                result_image.update()

                # Enable save button after image is generated
                save_image_button.disabled = False
                save_image_button.update()

                # Define save button's functionality (save the image locally when clicked)
                def save_image_click(e):
                    save_image(image_url, "anime.webp")

                save_image_button.on_click = save_image_click

            else:
                # Display an error message if image generation fails
                page.dialog = ft.AlertDialog(
                    title=ft.Text("Error"),
                    content=ft.Text("Failed to generate image. Please try again."),
                    actions=[
                        ft.TextButton(
                            "OK",
                            on_click=lambda _: page.dialog.close()
                            )
                        ]
                    )

                page.dialog.open = True
                page.update()

At this point, when you run the application, try entering a prompt and click the generate button, you'll see a progress bar and within seconds you'll see the image generated in your UI. And remember don't over generate or you'll lose your credits. and i promise you it won't be fun.

Code Explanation

This function here manages the workflow of generating and displaying the imge in the our application. it takes the user's prompt, calls the generate_image() to
generate the image_url and updates the App UI with the result_image. if the process fails, it shows an error dialog. and also t Enables the "Save Image" button after the image is successfully generated.

Applying the save_image function

Getting tired already save your energy, take some coffee and complete the project cause we are now gonna add the saving function.

So far we have the basic User interface and we can now generate images successfully, but we have a problem, what if we want to save our images on our system, cause now our current application just generates and...
its done, to solve this we have to add the save function.

So in your code update the save_image function to look something like this:

def save_image(image_url, filename="generated_image.webp"):
    try:
        response = requests.get(image_url)
        if response.status_code == 200:
            with open(filename, 'wb') as f:
                f.write(response.content)
            print(f"Image saved successfully as {filename}")
        else:
            print(f"Failed to download image. Status code: {response.status_code}")
    except Exception as e:
        print(f"Error saving image: {e}")

Code explanation

Now what have done here, let's break it down.
This function allows us to download and save the generate_image to the local system. it takes the image_url and an optional filename, retrieves the image data via an HTTP request, and writes it to file.
it ensures error handling in case the download fails.

Conclusion

Well! that's it fellow deveolopers, a simple image generator using python, flet and flux.
It has been fun working on this project and would like to here from you.

Here is my final output,

I haven't been uploading since i was in a recent hackathon and I'm also writing a book for students, as well as working professions and it has been a headache embrace thus paused some programming and rest for a while.

But now I'll be uploading content from now.

Thanks for being patient, I'll upload more for you devs.

Building a calculator using Flet with python

Arsey Kun — Thu, 29 Aug 2024 11:08:23 +0000

Introduction

Hello there, Arsey here, a Python speaker, this is my first blog and I'll guide you to build this simple calculator app using Flet. I'm so excited to share this with you and here we go.

In today’s digital era, creating cross-platform applications is a necessity. With a plethora of frameworks available, selecting the right one can be challenging. One such framework is Flet, a Python library that enables developers to effortlessly build web, desktop, and mobile apps using Flutter, but for Python.

In this blog, we’ll explore how to create a basic calculator app using Flet, illustrating how simple and efficient this framework can be.

WHY FLET?

When I started programming, my goal was to build mobile applications. Without a clear guide, I chose Python as my first language. It was fun to learn but as I gained more experience, I realized that Python is traditionally not suitable for app development, it’s more commonly used for data analysis and related tasks.

Now learning Android development with Kotlin for native development and Dart with Flutter for cross-platform, my goal comes a step closer thanks to this library flet.

This realization was disheartening until I discovered frameworks like Kivy, Tkinter, Flet, etc., that allow Python to be used for building apps. Unlike Kivy or Tkinter, these frameworks are good but need a lot of customization to develop a good-looking mobile application that works well for Android and iOS. And that’s where flet shines.

Flet is a Python framework inspired by Flutter, a popular UI toolkit by Google. The results you can achieve with flet are impressive, and I’m excited to share more.

WHAT is flet?

Flet is a python package that allows developers to build user interfaces directly using Flutter’s UI toolkit.

Flet’s primary advantage is that it combines Python’s simplicity and Flutter’s rich UI capabilities, enabling rapid development of cross-platform application without requiring extensive front-end experience.

Flet is a batteries-included library, so no need for SDKs and can be easily extended with Flutter’s SDK.

Note: It's beneficial to have a basic understanding of some front-end concepts, such as the box model, layout structures like Flexbox and Grid, and positioning. While you can still follow along without this knowledge, I highly recommend familiarizing yourself with these concepts.
Now, with that out of the way, let’s dive into building our calculator!

SETTING UP THE ENVIRONMENT

Before diving into coding, ensure you have Python installed on your machine. Then, follow these steps to set up your environment for Flet.

Install Flet: You can install Flet using pip. You can just open your terminal or command prompt, type in this command, and run it.

pip install flet

Create a new Python file: after a successful install, open up your favorite code editor like VS-Code, Pycharm, etc.) and create a new Python file, name it main.py or what you best prefer. Feeling excited? I bet you are! Let’s first test our installation worked with the most beloved phrase in the developer community, “Hello World!”

In our Python file, type in this code

import flet as ft

def main(page: ft.Page):
    page.add(ft.Text(value="Hello, World!"))

ft.app(target=main)

Run the code to see if everything works. If you see “Hello, World!” displayed, you’re ready to move on to building our calculator.

output

CREATING THE LAYOUT

In this section, we’ll be focusing on the structure of the calculator; here we’ll use the column widget to stack our display and buttons. The display will show the current input, and the buttons will allow user interaction. That’s odd I never noticed that UI can mean User Interface to User Interaction.

Now write the code below as follows.

from flet import (
    app, Page, Container, Column, Row,
    TextField, colors, border_radius, ElevatedButton, TextAlign, TextStyle
)


def main(page: Page):
    page.title = "Calculator"
    result = TextField(
        hint_text='0', text_size=20,
        color='white', text_align=TextAlign.RIGHT,
        hint_style=TextStyle(
            color=colors.WHITE, size=20
        ),
        read_only=True
    )

    def button_click(e):
        pass

    button_row0 = Row(
        [
            ElevatedButton(text='C',  on_click=button_click),
            ElevatedButton(text='^',  on_click=button_click),
            ElevatedButton(text='%',  on_click=button_click),
            ElevatedButton(text='/',  on_click=button_click),
        ]
    )
    button_row1 = Row(
        [
            ElevatedButton(text='7',  on_click=button_click),
            ElevatedButton(text='8',  on_click=button_click),
            ElevatedButton(text='9',  on_click=button_click),
            ElevatedButton(text='*',  on_click=button_click),
        ]
    )
    button_row2 = Row(
        [
            ElevatedButton(text='4',  on_click=button_click),
            ElevatedButton(text='5',  on_click=button_click),
            ElevatedButton(text='6',  on_click=button_click),
            ElevatedButton(text='-',  on_click=button_click),
        ]
    )
    button_row3 = Row(
        [
            ElevatedButton(text='1',  on_click=button_click),
            ElevatedButton(text='2',  on_click=button_click),
            ElevatedButton(text='3',  on_click=button_click),
            ElevatedButton(text='+',  on_click=button_click),
        ]
    )
    button_row4 = Row(
        [
            ElevatedButton(text='0',  on_click=button_click),
            ElevatedButton(text='.',  on_click=button_click),
            ElevatedButton(text='=',  on_click=button_click),
        ]
    )
    container = Container(
        width=350, padding=20,
        bgcolor=colors. BLACK,
        content=Column(
            [
                result,
                button_row0, button_row1, button_row2,
                button_row3, button_row4
            ]
        )
    )
    page.add(container)


if __name__ == '__main__':
    app(target=main)

After running the above code, you’ll see the output of the calculator layout, it might not look good but that’s okay! We’ll enhance it by adding some spacing, radius on the container, and theme to make our calculator look more polished.

Output

CODE EXPLANATION

Okay, we have built the layout, right? Well, still I know some of you there didn’t understand what we’ve just done here. Just sit, no questions, and let me explain what the code does.

In the first line, we import our controls. Flet controls are widgets used to lay out our application into a meaningful User Interface. But here we have imported app, Page, Container, Column, Row,
TextField, colors, border_radius, ElevatedButton, TextAlign, TextStyle.

Even though some of them are not entire widgets, like app, colors, border_radius, TextAlign, and TextStyle. These are classes and methods that provide us with extra functionalities of our application, for example
The app, allows us to launch our app in a standalone mode targeting to the main instance of our application.* colors* allow us to style our controls that support the color and bgcolor attribute without us struggling to define their names and border_radius allows us to curve the corners of our containers.

In line 7 we define the main app instance to Page; a page is a container for View Controls. So here I won’t go deep into views since it’s beyond the scope of this tutorial, but you reference here.

We now give the title to our page, with the page.titleattribute, the title on the title bar of our app.

In lines 9-16 is the result control with its required attributes, though it has many, we are gonna use these ones for this project, as you can see we have add a place holder of 0, giving it a size of 20, color to white, align text to right, and the read-only to true so we don’t allow external of soft keyboards to work directly in it.

Line 18 we defined our event handler, button_click this is where we will apply the logic to function our application, eventually making it a working calculator, but for now I just used a pass statement as a placeholder.

From lines 21 – 59, we defined our rows using the Row Widget, the row widget is a control that displays its children in a horizontal array or layout from left to right, similar to the linear layout in Android development, or inline elements in CSS the row controls works in the same way as them, it lays out controls in a horizontal axis or linearly.

Then the ElevatedButton_will represent buttons on the calculator’s UI, but notice we have given it the text and _onclick attributes, the text defines the data that will be displayed on the results when clicked using the onclick attribute that will call for the function button_click to handle events accordingly.

We have the container, the container is a control that will allow us to decorate a control with background color, spacing, applying borders and border radius, and position it with padding, margin, and alignment.

A container follows the box-model concept like the one for CSS as in the figure below,

The column control, like the Row control, this one displays its children in a vertical array or layout from top to bottom, this will allow us to vertically lay our buttons in the right order.

Now after defining our UI elements, we need to display them to our application and then call it. We do that by using the page.add() method which allows us to add and build our UI logically.

Then we have to call our app in the stand-alone mode, and that’s what lines 74-75 accomplished.

Adding functionality

Update your button click function to match this code below.

def button_click(e):
        if e.control.text == "=":
            try:
                result.value = str(eval(result.value))
            except Exception:
                result.value = "Error"
        elif e.control.text == "C":
            result.value = ""
        # elif e.control.text == "^":
        # logic for powers
        # pass
        else:
            result.value += e.control.text
        result.update()

CODE EXPLANATION

Okay, what does this code do under the hood; the button_click function is designed to handle various button click events within our calculator app.
Save to apply our current changes then run the calculator and see the results.
Here is a breakdown of how the code works

Retrieving the button text: when a button is clicked, the function retrieves the button’s text (e.g., ‘1’, ‘2’, ‘+’, ‘-‘, ‘C’, ‘=’) through the e.control.text. this tells the functions which button the user has interacted with
Clearing the display: when the user clicks the ‘C’ button, the calculator’s input is cleared. The result is set to an empty string (“”), and the display is reset to 0. This effectively clears the display making the calculator ready for a new input. Talk but a fresh number meal.
Evaluating expressions: if the user clicks the “=” button, the calculator needs to evaluate the current mathematical expression, here we used the str() and eval() functions, and the str() function houses the eval() function so that the result is directly converted into a string and theeval() function will compute the result of the expression, then displayed as a string to our calculator’s display. Or else if the expression is invalid, an exception is caught, and the “Error” message will be displayed instead.
For the rest of the buttons like numbers and operators: the function will append the button’s text to the display (which is initially “0” or when cleared), it replaces “0” with the button value, otherwise it adds button value to the end of the display.
After processing the button click, the page is updated via page.update() method call to refresh the UI and show the updated input or result on the calculator's display. So every time you click the button and see the value on the display or a result, this is what the page.update() does.

NOTE: The eval() function is a quick way to evaluate expression but it can be risky with un-trusted input because it executes/evaluates any Python code. In a more secure app, you’d use a safer method for evaluating mathematical expressions.

Exercise: test your knowledge, of how would you handle the exponent ‘^’ expression so that if the user clicks the exponent button it returns the required output. For example, if the user inputs 2^2 the output will be 4, 5^5=25, and 3^4=81. You get the idea.

Let me know how you approached to this problem in the comments, okay, all done, let’s continue.

Improving our UI

Previously the user interface did not look that catchy and awesome, so let’s improve it, and update the buttons to match the following code.

button_row0 = Row(
    [
        ElevatedButton(text='C', expand=1, on_click=button_click,
                       bgcolor=colors.RED_ACCENT, color=colors.WHITE),
        ElevatedButton(text='^', expand=1, on_click=button_click,
                       bgcolor=colors.BLUE_ACCENT_100,
                       color=colors.RED_900
                       ),
        ElevatedButton(text='%', expand=1, on_click=button_click,
                       bgcolor=colors.BLUE_ACCENT_100,
                       color=colors.RED_900
                       ),
        ElevatedButton(text='/', expand=1, on_click=button_click,
                       bgcolor=colors.BLUE_ACCENT_100,
                       color=colors.RED_900
                       ),
    ]
)
button_row1 = Row(
    [
        ElevatedButton(text='7', expand=1, on_click=button_click),
        ElevatedButton(text='8', expand=1, on_click=button_click),
        ElevatedButton(text='9', expand=1, on_click=button_click),
        ElevatedButton(text='*', expand=1, on_click=button_click,
                       bgcolor=colors.BLUE_ACCENT_100,
                       color=colors.RED_900
                       ),
    ]
)
button_row2 = Row(
    [
        ElevatedButton(text='4', expand=1, on_click=button_click),
        ElevatedButton(text='5', expand=1, on_click=button_click),
        ElevatedButton(text='6', expand=1, on_click=button_click),
        ElevatedButton(text='-', expand=1, on_click=button_click, 
                       bgcolor=colors.BLUE_ACCENT_100
                       ),
    ]
)
button_row3 = Row(
    [
        ElevatedButton(text='1', expand=1, on_click=button_click),
        ElevatedButton(text='2', expand=1, on_click=button_click),
        ElevatedButton(text='3', expand=1, on_click=button_click),
        ElevatedButton(text='+', expand=1, on_click=button_click, 
                       bgcolor=colors.BLUE_ACCENT_100,
                       color=colors.RED_900),
    ]
)
button_row4 = Row(
    [
        ElevatedButton(text='0', expand=1, on_click=button_click),
        ElevatedButton(text='.', expand=1, on_click=button_click),
        ElevatedButton(
            text='=', expand=2, on_click=button_click,
            bgcolor=colors.GREEN_ACCENT, color=colors.AMBER
        ),
    ]
)

What have we changed exactly, hmm!

For the buttons, we could have used the width attribute but that won’t work as we want it would break the UI, feel free to test it.
But we have this expand attribute which allows only a Boolean and an int data type value.

For the normal buttons like the operators, numbers, and the clear button we expanded them to 1, and for the equals button, we expanded it by 2.

Now what does the expand attribute do, the expand attribute allows a control to fill the available space in a given container.

So the buttons with expand 1 will have an equal size of width and for the equals button it will expand 2, or in simple terms span two buttons or will equal two buttons in width.

Notice that we have added colors and background colors to some of our buttons to make them stand out from the numbers buttons.
Understand, great.

In the container add these attributes, just after the padding attribute to make it look more appealing and user friendly.
border_radius=border_radius.all(20),

Output

Now, you have a fully functional calculator built with Flet! Feel free to customize it to your liking or add more features. You can even package it as a standalone APK, AAB to launch on Google Play Store or Apple App Store

Here is the full code,

from flet import (
    app, Page, Container, Column, Row,
    TextField, colors, border_radius, ElevatedButton, TextAlign, TextStyle
)
from flet_core import ThemeMode


def main(page: Page):
    page.title = "Calculator"
    page.theme_mode = ThemeMode.DARK
    page.horizontal_alignment = page.vertical_alignment = 'center'
    result = TextField(
        hint_text='0', text_size=20,
        color='white', text_align=TextAlign.RIGHT,
        hint_style=TextStyle(
            color=colors.WHITE, size=20
        ),
        read_only=True
    )

    def button_click(e):
        if e.control.text == "=":
            try:
                result.value = str(eval(result.value))
            except Exception:
                result.value = "Error"
        elif e.control.text == "C":
            result.value = ""
        # elif e.control.text == "^":
        # logic for powers
        # pass
        else:
            result.value += e.control.text
        result.update()

    button_row0 = Row(
        [
            ElevatedButton(text='C', expand=1, on_click=button_click,
                           bgcolor=colors.RED_ACCENT, color=colors.WHITE),
            ElevatedButton(text='^', expand=1, on_click=button_click,
                           bgcolor=colors.BLUE_ACCENT_100,
                           color=colors.RED_900
                           ),
            ElevatedButton(text='%', expand=1, on_click=button_click,
                           bgcolor=colors.BLUE_ACCENT_100,
                           color=colors.RED_900
                           ),
            ElevatedButton(text='/', expand=1, on_click=button_click,
                           bgcolor=colors.BLUE_ACCENT_100,
                           color=colors.RED_900
                           ),
        ]
    )
    button_row1 = Row(
        [
            ElevatedButton(text='7', expand=1, on_click=button_click),
            ElevatedButton(text='8', expand=1, on_click=button_click),
            ElevatedButton(text='9', expand=1, on_click=button_click),
            ElevatedButton(text='*', expand=1, on_click=button_click,
                           bgcolor=colors.BLUE_ACCENT_100,
                           color=colors.RED_900
                           ),
        ]
    )
    button_row2 = Row(
        [
            ElevatedButton(text='4', expand=1, on_click=button_click),
            ElevatedButton(text='5', expand=1, on_click=button_click),
            ElevatedButton(text='6', expand=1, on_click=button_click),
            ElevatedButton(text='-', expand=1, on_click=button_click, 
                           bgcolor=colors.BLUE_ACCENT_100
                           ),
        ]
    )
    button_row3 = Row(
        [
            ElevatedButton(text='1', expand=1, on_click=button_click),
            ElevatedButton(text='2', expand=1, on_click=button_click),
            ElevatedButton(text='3', expand=1, on_click=button_click),
            ElevatedButton(text='+', expand=1, on_click=button_click, 
                           bgcolor=colors.BLUE_ACCENT_100,
                           color=colors.RED_900),
        ]
    )
    button_row4 = Row(
        [
            ElevatedButton(text='0', expand=1, on_click=button_click),
            ElevatedButton(text='.', expand=1, on_click=button_click),
            ElevatedButton(
                text='=', expand=2, on_click=button_click,
                bgcolor=colors.GREEN_ACCENT, color=colors.AMBER
            ),
        ]
    )
    container = Container(
        width=350, padding=20,
        bgcolor=colors.BLACK, border_radius=border_radius.all(20),
        content=Column(
            [
                result,
                button_row0, button_row1, button_row2,
                button_row3, button_row4
            ]
        )
    )
    page.add(container)


if __name__ == '__main__':
    app(target=main)

Conclusion

Building this calculator has been a fun experience for me and a learning experience for you, and I hope you enjoyed it too.

Let me know what kind of project you’d like to build using this framework or any other like PyQt, Kivy, or Tkinter. I’d be glad to make a tutorial on it. Or even web design and development tutorials, also are allowed.

Feel free to ask questions, I’ll do my best to answer them.
If you've read this far, thank you—I appreciate it!

Forem: Arsey Kun

BrilliantAfrica2G: Building 2G AI Education for Low‑Connectivity Africa

What I Built

My Pitch Video

Demo

The Story Behind It

Technical Highlights

FLET VS KIVY: WHICH ONE SHOULD YOU USE FOR YOUR NEXT PYTHON GUI APP

Kivy The OG Python GUI Framework

KivyMD - Kivy Material Design

⚙️ The KV Language — Kivy’s Secret Weapon

Flet — Flutter-Inspired Python Library.

⚖️ Flet vs Kivy — Head-to-Head Comparison

🧠 Conclusion

From Code to Conversation: Mastering Africa's Talking Voice API

Getting Your Hands Dirty: The Prerequisites

Step 1: Creating Your Africa's Talking Account

Step 2: Getting Your API Credentials

Setting Up Your Development Environment

Understanding Each Line

Expanding Your Voice Horizons

Pro Tips for New API Keys

When to Worry

Error Handling and Best Practices

Real-World Applications: Where Voice API Shines

2. Automated Appointment Reminders

3. Emergency Alert Systems

4. AI-Powered Customer Support

6. Financial Services and Banking

Webhooks: The Secret Sauce

Testing Strategy: Maximizing Value, Minimizing Cost

Wrapping Up: Your Voice-Powered Future

Wrapping Up

Master SMS Programming with PHP: From Zero to Hero Using Africastalking

Send Professional Text Messages with Code - A Complete Beginner's Guide

Why SMS Matters in Today's Digital World

The Power of 98% Open Rates

What's an API? (Simpler Than You Think!)

Why This Matters for SMS

The SMS Journey: From Code to Phone

✨ Why Africa’s Talking

🔧 What You’ll Build Today

🚀Prerequisites: What You Need to Get Started

Required Accounts(Both Free!)

Development Tools

Getting API Credentials

🚀 Building Your SMS Application: Step-by-Step

Step 1: Setting Up Your Coding Environment

Step 2: Installing the SMS Superpowers

Step 3: Writing Your First SMS Script

🔧 Code Breakdown: Understanding Each Part

Step 4: Customization Time

Step 5: The Magic Moment — Launch

Callbacks and Simulator

🔧 Advanced Features: Taking Your SMS Game Further

Adding Multiple Recipients

Dynamic Message Personalization

Scheduling SMS (Pro Tip)

🚨 Troubleshooting: Common Issues & Solutions

Issue 1: "Invalid API Key"

Issue 2: "Invalid Phone Number"

Issue 3: "Insufficient Credits"

Issue 4: SMS Not Received

🎯 Real-World Implementation Ideas

🛍️ E-commerce Integration

🔐 Security System

📅 Appointment Reminder

🌟 Best Practices for Professional SMS

Message Quality Guidelines

Technical Best Practices

Compliance & Ethics

📈 Monitoring & Analytics

🚀 Scaling Your SMS Application

Database Integration

Queue System for High Volume

🎉 Conclusion: You're Now an SMS Wizard

What Makes This Achievement Special?

Your Next Adventure

A Personal Note

📚 Continue Your Journey

⚙️ The `KV` Language — Kivy’s Secret Weapon