DEV Community: Damilola Oshungboye

How to use AI to identify and fix security vulnerabilities in your codebase

Damilola Oshungboye — Wed, 22 Apr 2026 09:40:52 +0000

Meta: Understand the common code-based security vulnerabilities, from SQL injection to XSS, and how AI simplifies the detection and resolution of these security vulnerabilities for improved code security.

With the average data breach now costing companies $4.45 million, securing your code has never been more urgent.

As development cycles accelerate, security vulnerabilities like SQL injections or cross-site scripting (XSS) are still common or discovered too late. AI is changing that. By scanning large codebases, learning from actual attack patterns, and offering targeted fixes, AI tools help you address code security flaws faster than ever.

This article explores where traditional approaches fall short, how AI can fill those gaps, and the practical steps to embedding AI code security into your development workflow.

Common security vulnerabilities in your codebase

When you look at the OWASP Top 10, you’ll notice how many serious threats come from your routine everyday coding patterns. Let’s examine a few of the most prevalent vulnerabilities:

1. SQL injection

SQL injection can be especially dangerous because it exploits the mechanism you rely on to store and retrieve data. An attacker essentially “injects” malicious SQL commands into an application’s inputs, potentially gaining unauthorized access to or altering the underlying data.

Here’s an example from a simple authentication routine:

# auth_service.py
def authenticate_user(username, password):
    query = f"""
        SELECT id, role FROM users 
        WHERE username = '{username}' 
        AND password = '{password}'
    """
    result = database.execute(query)
    return result.fetchone()

This code appears functional but is highly vulnerable to SQL injection attacks. The authenticate_user function constructs an SQL query using string concatenation, which allows an attacker to inject malicious SQL code. If an attacker inputs ' OR '1'='1 as the username, the query becomes:

SELECT id, role FROM users WHERE username = '' OR '1'='1' AND password = 'anything'

This query will always return true, allowing the attacker to potentially bypass authentication and access protected data. The consequences of SQL injection attacks can be severe, including loss of confidentiality, tampering with existing data, identity spoofing, and even gaining administrative access to the database server.

A more secure approach uses parameterized queries:

# auth_service.py (secure version)
def authenticate_user(username, password):
    query = """
        SELECT id, role FROM users 
        WHERE username = %s AND password = %s
    """
    result = database.execute(query, (username, password))
    return result.fetchone()

In this secure version, the SQL query uses placeholders (%s) for the user input, and the actual values are passed as parameters to the execute method. This approach ensures that the input data is properly escaped and cannot be used to manipulate the SQL query structure

2. Cross-site scripting (XSS)

XSS happens when attackers inject malicious scripts (often JavaScript) into web pages that other users view. Any spot in your application where user input is rendered onto the page can be a gateway for XSS.

The following example of a blog post display function is a common pattern in content management systems and is vulnerable to XSS attacks.

@app.route('/blog/<post_id>')
def display_post(post_id):
    post = get_post(post_id)
    return f"""
        <article>
            <h1>{post.title}</h1>
            <div>{post.content}</div>
        </article>

An attacker could inject malicious JavaScript through the post content, affecting every visitor.

In this example, an attacker could script malicious JavaScript through the post.content field. For instance, if an attacker submits a blog post with the following content:

<script>alert('XSS')</script>

This script will be executed by every visitor who views the blog post, allowing the attacker to steal session cookies, manipulate the user's browser, or perform other malicious actions.

To counter XSS, always sanitize and escape user-generated content:

from markupsafe import escape

@app.route('/blog/<post_id>')
def display_post(post_id):
    post = get_post(post_id)
    return render_template('post.html',
        title=escape(post.title),
        content=escape(post.content)
    )

The escape function from the markupsafe library is used to ensure that any user-provided content is properly sanitized, preventing malicious scripts from being executed in the user's browser.

3. Hardcoded secrets

Hardcoding sensitive information, like API keys or database credentials, into your code is a common mistake, often done for convenience. However, attackers can use these secrets to gain unauthorized access if this code ends up in a public repository or is leaked elsewhere.

Here is a simple but risky approach:

class StorageService:
    def __init__(self):
        self.aws_key = "AKIA1234567890ABCDEF"
        self.aws_secret = "jK8*2nP9$mB4#kL5"
        self.client = boto3.client('s3',
            aws_access_key_id=self.aws_key,
            aws_secret_access_key=self.aws_secret
        )

If these credentials appear in a publicly accessible repository, malicious actors can exploit them immediately. Instead, you can store secrets in environment variables or a secure secrets manager:

from decouple import config

class StorageService:
    def __init__(self):
        self.client = boto3.client('s3',
            aws_access_key_id=config('AWS_ACCESS_KEY'),
            aws_secret_access_key=config('AWS_SECRET_KEY')
        )

The decouple library from config is used to load the AWS credentials from environment variables, ensuring that sensitive information is not hardcoded in the application code. This approach significantly reduces the risk of credential exposure and subsequent security breaches.

Although these vulnerabilities may appear obvious individually, they become difficult to detect within large codebases, especially when many developers make multiple commits daily across various repositories. Manual reviews alone struggle to consistently catch security issues at scale.

Keeping these vulnerabilities in mind, let's examine how various types of security testing can help identify and prevent them.

Choosing static or dynamic code analysis?

It’s critical to identify vulnerabilities early. Two practical approaches to scrutinizing your code are:

Static Application Security Testing (SAST) – Analyzes your codebase without executing it, pinpointing issues like insecure coding patterns, hardcoded secrets, or known vulnerability signatures.
Dynamic Application Security Testing (DAST) – Interacts with your running application to spot real-time issues, such as misconfigurations or runtime injection paths.

Many security teams rely on both since SAST focuses on code structure, whereas DAST uncovers flaws that are only visible during runtime. Whichever approach you take, the idea is to catch issues well before affecting production users.

An AI-assisted approach to code security

Even if you’re vigilant about security, modern codebases constantly evolve, and it’s easy for vulnerabilities to slip through. AI code review tools help by quickly scanning large repositories, drawing on known attack patterns, and machine learning to spot issues you might otherwise miss.

They also offer practical suggestions for fixing those issues, reinforcing your overall security posture.

To see this in action, consider a Python Flask project that handles user profiles and file uploads (two areas where security oversights often hide). AI can highlight these hidden risks and guide you in resolving them before they become real problems.

Setting up an AI tool for automated code reviews for security vulnerabilities

If you’d like to explore AI-based reviews, you can try any tool that suits your needs; some include GitHub Copilot, Claude, and Perplexity. For this tutorial, we’ll use a popular AI tool like ChatGPT to review and examine common vulnerabilities with a Python Flask application that manages user profiles and handles photo uploads.

First, clone the Python project that handles user profile management.

git clone https://github.com/Tabintel/py-photo-lib.git

Navigate to the project directory and install dependencies.

cd py-photo-lib
python -m venv venv
venv\Scripts\activate
pip install -r requirements.txt

Then, create a branch for the new photo upload functionality:

git checkout -b feature/profile-uploads

After cloning the repository and creating the branch, copy the code from this GitHub gist into your app.py file.

This feature adds photo upload capabilities to the application, allowing users to upload profile images.

The changes include:

New route /upload for uploading images.
File upload handling using Flask's request.files.
Database query in /profile/<username> to fetch user details.
Configured API to handle profile image paths.

Before pushing the code to the main repository, you’ll first use an AI tool to review it for any vulnerabilities.

Give this prompt to your AI tool (we’re using ChatGPT in this case):

"Review the following code, which adds a new profile image upload feature to a Python Flask application. Identify any security vulnerabilities or potential risks in the implementation, briefly explain why, and suggest improvements where necessary."

In the review process, you would likely receive precise, line-by-line recommendations, such as these examples:

1. Exception handling enhancement

The review flagged broad exception handling, suggesting you implement more specific error tracking to prevent the exposure of sensitive information.

This is a critical security concern, as broad exception handling can make identifying and addressing potential issues difficult. To address this, you can implement a robust exception-handling mechanism that includes specific error messages and logging.

For example, instead of using a broad exception handler like this:

except Exception as e:

You can implement a more specific exception handler that includes error messages and logging:

try:
except ValueError as e:
    # Log the exception and return an error message
    logging.error(f"Invalid value: {e}")
    return {"error": "Invalid value"}
except Exception as e:
    # Log the exception and continue
    logging.error(f"An error occurred: {e}")

This approach ensures that each exception type is handled specifically, providing more detailed error logs and making diagnosing and fixing issues easier.

2. Undefined username

Another vulnerability identified is related to undefined model imports. Having undefined model imports in any codebase can make it difficult to ensure data integrity and prevent unauthorized access.

To address this, you can enhance the username validation to prevent undefined model imports.

from models import User
user = User.query.get(username)

When the User models are imported correctly, you prevent potential errors that could arise from undefined models, which can lead to data inconsistencies and prevent attacks like SQL injections.

3. Additional code vulnerabilities

From this particular review, you can see that the AI tool recognizes areas in the app.py code pull request and points out the exact lines of code that the changes need to be reviewed for security purposes. Let’s look at each of them:

4. Image format validation

The automated review flags the need to review image format validation. Currently, the application only allows png, jpg, jpeg, and gif formats for uploaded photos:

ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
MAX_FILE_SIZE = 5 * 1024 * 1024  # 5MB

While this approach is sufficient for basic use cases, it leaves the application vulnerable to limitations or potential misuse.

For example, if the project requires support for other formats (e.g., webp, tiff), the lack of validation for these could result in errors or even security risks when unexpected file types are uploaded.

Proper validation ensures that the system explicitly handles supported formats, mitigating risks from unverified file uploads.

5. Function usage documentation

Next, there’s a suggestion to clarify function usage in docstring. A short docstring for allowed_file could be helpful in describing its purpose and the expected parameter or return types.

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

Without documentation, you may misunderstand the purpose or behavior of this function. Adding a short docstring that specifies the function's role (validating file extensions) and details the expected parameters and return values would prevent miscommunication and misuse.

6. Image processing logging

There's a suggestion to validate and log image processing steps. The image processing logic is good but may benefit from explicit logging when conversions or resizing occur, especially to diagnose user-upload issues.

def process_image(image_path):
    with Image.open(image_path) as img:
        # Convert to RGB if necessary
        if img.mode != 'RGB':
            img = img.convert('RGB')
        # Resize if too large
        if max(img.size) > 2000:
            img.thumbnail((2000, 2000))
        # Save optimized version
        img.save(image_path, 'JPEG', quality=85, optimize=True)

Without logs, it becomes difficult to diagnose issues when image uploads fail. Logging each step would provide a clear trail for troubleshooting and prevent vulnerabilities caused by incomplete or incorrect processing. Logs also enhance accountability and allow developers to detect unexpected behavior during uploads.

Through this automated code review process, you've seen how AI tools comprehensively analyze the code, highlighting vulnerabilities in the photo upload feature. The review shows critical security gaps, from unhandled exceptions that could expose system information to unsecured file type validation that might allow malicious uploads and missing model imports that could compromise data integrity.

Once you've added the code from the review, commit and push the changes to your GitHub repository using the following commands:

git add app.py
git commit -m "feat: add profile photo upload functionality"
git push origin feature/profile-uploads

Implementing code security best practices

Security requires ongoing diligence. Here are some routines you can integrate into daily development:

1. Regular code reviews

Peer reviews remain indispensable for catching logical errors and sharing knowledge. To maximize coverage, combine them with automated scanning.

2. Secure coding standards

Avoid storing secrets in code.
- Enforce the least privilege for database connections.
- Use parameterized queries by default.
- These guidelines reduce the risk of common issues slipping through.

3. Frequent vulnerability assessments

Schedule periodic scans (e.g., monthly or quarterly) using SAST and DAST tools. Consider penetration tests for critical areas of your application.

4. Automate where possible

CI/CD pipelines can automatically run security tests before deployment, ensuring no commit merges without scrutiny. AI can assist in triaging results, making the process more efficient.

5. Embrace DevOps culture

Encourage open collaboration between development and operations, ensuring that security is baked in from the start rather than bolted on at the end.

6. Shift-Left security

Moving security checks to earlier stages of development (DevSecOps) reduces last-minute surprises. Addressing security vulnerabilities earlier in the development process significantly reduces the time and resources required for remediation.

Wrapping up: Securing your codebase

Applying thoughtful, ongoing code security practices and AI code review checks can significantly reduce your application’s vulnerability. Whether it’s preventing SQL injection, mitigating XSS, or ensuring secrets don’t leak, each layer of protection adds up.

As you refine these habits and explore AI code security solutions, you’ll discover more efficient ways to keep your applications secure, protect sensitive data, and maintain a reliable development pipeline.

Looking to optimize memory in your Go application? Check out this guide

Damilola Oshungboye — Sat, 01 Feb 2025 13:04:11 +0000

Damilola Oshungboye

Feb 1 '25

How to Manage Memory in Go Applications

#go #beginners #tutorial

Comments

10 min read

How to Manage Memory in Go Applications

Damilola Oshungboye — Sat, 01 Feb 2025 13:03:16 +0000

Go, also known as Golang, is known for its effective memory management system. While the language's garbage collector automates most tasks involving memory, understanding and implementing effective memory management techniques helps improve your Go applications' performance and resource usage.

So, in this tutorial, you’ll learn four effective techniques you can apply to manage memory even better in your Go application. Whether you are an experienced developer or just starting out, you will gain insightful knowledge that you can apply to make your Go code more memory-efficient.

Let’s get started!

Prerequisites

Before going any further, ensure you have the following:

Go installed on your system. You can download it from the official website.
A text editor or IDE of your choice to write and edit your Go code
A project directory for the tutorial's code

Go’s garbage collector

Go's memory management is primarily handled by its garbage collector (GC). The GC automatically allocates and deallocates memory, relieving developers from manual memory management tasks common in languages like C or C++.

Here’s an example to demonstrate how the GC works by tracking memory usage before and after garbage collection.

In your project directory, create a new file named main.go and paste the code below into it.

package main

import (

    "fmt"

    "runtime"

)

func main() {

    var mem runtime.MemStats

    runtime.ReadMemStats(&mem)

    fmt.Printf("Initial memory usage: %v KBn", mem.Alloc/1024)

    references := make([]*[1000000]int, 100)

    for i := 0; i < 100; i++ {

        references[i] = new([1000000]int)

    }

    runtime.ReadMemStats(&mem)

    fmt.Printf("Memory usage after allocation: %v KBn", mem.Alloc/1024)

    references = nil

    runtime.GC()

    runtime.ReadMemStats(&mem)

    fmt.Printf("Memory usage after garbage collection: %v KBn", mem.Alloc/1024)

}

In the code above, the initial memory usage is printed, followed by the allocation of 100 large arrays, which significantly increases memory usage. The references slice is then set to nil to remove all references to these arrays, and a manual garbage collection is triggered. Finally, the memory usage is printed again to show the current memory usage.

Run the below command in your terminal to execute the code.

go run main.go

You should see a result similar to the image below, indicating that the GC cleared the unused memory.

Memory management approaches in Go

In this section, you’ll learn about the approaches and techniques you can use to manage memory better in your Go application.

1. Design memory-efficient structs

In Go, structs are typed collections of fields. Each field in the struct can be of a different data type, making structs a flexible way of combining related data. Structs are commonly used to represent records or complex data structures.

While structs can be considered, in some respects, as being similar to classes in object-oriented languages such as Java and C++, Go does not support explicit inheritance as other languages do.

Here’s how you would define a struct in Go.

type StructName struct {

    field1 Type1

    field2 Type2

}

When using structs in Go, it's important to consider how the fields are aligned in memory. You should order struct fields from largest to smallest to minimize the amount of padding between fields.

Padding refers to the extra space added between struct fields to align them properly in memory. This alignment is necessary for the CPU to access the fields efficiently, but it can lead to wasted memory if fields are not ordered carefully. By organizing fields from largest to smallest, you can reduce the amount of padding, making the memory layout more compact.

Replace the content of the main.go file with the below code block to demonstrate this.

package main

import (

    "fmt"

    "unsafe"

)

func main() {

    type Inefficient struct {

        a bool

        b int64

        c bool

        d int32

    }

    type Efficient struct {

        b int64

        d int32

        a bool

        c bool

    }

    fmt.Printf("Size of Inefficient: %d bytesn", unsafe.Sizeof(Inefficient{}))

    fmt.Printf("Size of Efficient: %d bytesn", unsafe.Sizeof(Efficient{}))

}

The code above defines two structs: Inefficient and Efficient. The Inefficient struct arranges its fields in a way that increases memory usage due to extra padding between fields.

On the other hand, the Efficient struct organizes fields from largest to smallest, reducing padding and making the struct more memory-efficient. The difference in size is shown using the unsafe.Sizeof() function.

Run the command below in your terminal to execute the code.

go run main.go

You will see the result displayed below.

As shown in the image above, arranging your structs from largest to smallest fields causes it to use memory more effectively.

2. Use pointers for large data structures

Pointers in Go are variables that store the memory address of another variable. They allow you to reference and manipulate the value of a variable directly in memory rather than working with a copy of the value.

Key facts about pointers:

Declaration: A pointer is declared by placing an asterisk (*) before the type. For example, var p *int declares a pointer to an integer.
Address Operator (&): To get the address of a variable, you use the address operator. For example, p = &x assigns the address of x to the pointer p.
Dereferencing: To access or modify the value at the address stored in a pointer, you use the dereference operator (*). For instance, *p = 10 sets the value of x to 10 if p points to x.

Here’s a simple example to demonstrate pointers. Replace the contents of your main.go file with the below code block.

package main

import (

    "fmt"

)

func main() {

    number := 42

    fmt.Println("Initial value of number:", number)



    pointerToNumber := &number

    *pointerToNumber = 99



    fmt.Println("Value of number after pointer modification:", number)

    fmt.Printf("Memory address of number: %pn", pointerToNumber)

}

In the code above, the variable number is initialized to 42. A pointer named pointerToNumber is created and assigned the memory address of number. The value of number is then updated to 99 by modifying the value stored directly by the pointerToNumber pointer.

Run the below command in your terminal to execute the code.

go run main.go

You should see the result shown in the image below.

Using pointers is an effective way to save memory when working with large data structures. Instead of passing these data structures directly to a function, you can pass a pointer that holds their memory address. This allows the function to modify the original data without the overhead of creating a copy, which normally occurs when the value of an object is passed into a function.

However, you must be careful not to create references that can lead to memory leaks by setting the references to nil after the code is done. Replace the content of your main.go file with the code block below.

package main

import (

    "fmt"

    "runtime"

)

type LargeDataSet struct {

    values [8000000]int

}

func GenerateData() *LargeDataSet {

    data := &LargeDataSet{}

    for index := range data.values {

        data.values[index] = index % 1000

    }

    return data

}

func main() {

    fmt.Println("Memory usage before data generation:")

    DisplayMemoryStats()

    dataset := GenerateData()

    fmt.Println("nMemory usage after data generation:")

    DisplayMemoryStats()

    fmt.Printf("nFirst value in dataset: %dn", dataset.values[0])

    dataset = nil

    runtime.GC()

    fmt.Print("nMemory usage after removing dataset reference: ")

    DisplayMemoryStats()

}

func DisplayMemoryStats() {

    var memStats runtime.MemStats

    runtime.ReadMemStats(&memStats)

    allocatedMiB := memStats.Alloc / 1024 / 1024

    fmt.Printf("Allocated = %v MiB", allocatedMiB)

}

In the example above, the GenerateData() function creates a large data structure and returns a pointer to it, avoiding the overhead of copying the large data. After executing the function, the pointer is set to nil, allowing the garbage collector to reclaim the memory.

Run the below command in your terminal to execute the code.

go run main.go

You should see the result shown in the image below.

3. Manage variables scopes

The proper understanding and usage of variable scopes plays a vital role in memory management in Go. A variable's scope determines its visibility and lifetime within the program, impacting directly when the garbage collector can free up the memory associated with it.

Limit variables scopes

While writing your Go code, you should keep variable scopes as limited as possible so the garbage collector can free them as soon as possible.

To demonstrate this, replace the content of your main.go file with the code block below.

package main

import (

    "fmt"

)

func main() {

    message := "This is available throughout main"

    fmt.Println(message)

    {

        blockMessage := "This is only available in this block"

        fmt.Println(blockMessage)

        blockMessage = ""

    }

    fmt.Println(blockMessage)

}

In the example above, the message variable is declared at the top of the main() function and is accessible throughout the entire function, including all nested blocks. Conversely, the blockMessage variable is defined within a nested block inside the main() function. Consequently, its scope is limited to that block, making it inaccessible outside of it.

Therefore, accessing the blockMessage variable outside its scope will result in a compilation error, as shown in the image below. This is because the Go compiler detects that the variable is not defined in that context.

Use global variables cautiously

You can also manage memory more effectively by using global variables cautiously since they persist throughout the program's entire lifecycle and can result in memory leaks.

Replace the content of your main.go file with the below code block.

package main

import (

    "fmt"

    "runtime"

)

var globalStorage *Storage

type Storage struct {

    Elements [800000]int32

}

func initializeStorage() {

    var tempStorage Storage

    for i := 0; i < len(tempStorage.Elements); i++ {

        tempStorage.Elements[i] = int32(i % 1000)

    }

    globalStorage = &tempStorage

}

func main() {

    fmt.Println("Memory usage before initializeStorage:")

    displayMemoryStats()

    initializeStorage()

    fmt.Println("nMemory usage after initializeStorage:")

    displayMemoryStats()

    fmt.Println("nMemory usage after local variable out of scope (globalStorage still set):")

    displayMemoryStats()

}

func displayMemoryStats() {

    var memStats runtime.MemStats

    runtime.ReadMemStats(&memStats)

    allocatedMiB := memStats.Alloc / 1024 / 1024

    fmt.Printf("Allocated = %v MiB", allocatedMiB)

}

In the code block above, the initializeStorage() function creates a tempStorage variable and fills its Elements array with data. Then, the address of tempStorage is assigned to the global variable globalStorage.

Run the command below in your terminal to execute the code.

go run main.go

You will see the below results displayed in your terminal.

As seen in the image above, although tempStorage goes out of scope when initializeStorage finishes, the global variable globalStorage continues to hold a reference to it because it was defined globally. This prevents the garbage collector from reclaiming the memory.

4. Pool resources

Go has a technique for managing memory resource-intensive scenarios. It allows you to reuse resources, such as objects and memory, instead of allocating and deallocating them repeatedly.

You should use sync.Pool when dealing with scenarios that require frequent reuse of short-lived objects to reduce allocation costs and garbage collection overhead, especially during concurrency operations.

To demonstrate this, replace the content of your main.go file with the code block below.

package main

import (

    "fmt"

    "sync"

)

var syncPool = sync.Pool{

    New: func() interface{} {

        return &syncStruct{}

    },

}

type syncStruct struct {

    Object string

}

func main() {

    data := syncPool.Get().(*syncStruct)

    data.Object = "Pooling resources!"

    fmt.Println(data.Object)

    syncPool.Put(data)

    data2 := syncPool.Get().(*syncStruct)

    fmt.Println(data2.Object)

}

In the example above, sync.Pool is used to manage and reuse instances of the syncStruct type. When an object is requested from the pool using syncPool.Get(), if none are available, a new one is created. The object is then used, and after processing it is returned to the pool using syncPool.Put().

Run the command below in your terminal to run the code.

go run main.go

You will see the results displayed below.

Profile and monitor memory usage

Go provides in-built methods for identifying bottlenecks and memory leaks in your Go application using its profiler: pprof.

To profile memory usage, you will need to import the runtime/pprof package and write memory profiles to files for later analysis. Running these profiles through pprof helps identify inefficient memory usage in your application.

Below is an example of its usage. Replace the contents of your main.go file with the code block below.

package main

import (

    "log"

    "os"

    "runtime"

    "runtime/pprof"

)

func main() {

    runtime.MemProfileRate = 2048

    profileFile, err := os.Create("mem.prof")

    if err != nil {

        log.Fatal("Failed to create memory profile file: ", err)

    }

    defer profileFile.Close()

    generateDataStructures()

    if err := pprof.WriteHeapProfile(profileFile); err != nil {

        log.Fatal("Unable to write memory profile: ", err)

    }

    log.Println("Memory profile saved to mem.prof")

}

func generateDataStructures() []map[int]string {

    structures := make([]map[int]string, 800000)

    for i := range structures {

        structures[i] = map[int]string{

            0: "A", 1: "B", 2: "C", 3: "D", 4: "E",

        }

    }

    return structures

}

In the code above, Go’s runtime function runtime.MemProfileRate() is set to capture memory allocations in 2KB intervals. The program creates a profile file named mem.prof to store the profiling data. Finally, the profiling data is written to the mem.prof file for later analysis.

Run the code using the command below

go run main.go

You should see a prompt that indicates the profile data has been saved, as shown in the image below.

Next, run the code below in your terminal to begin the analysis of the profile data using pprof.

go tool pprof mem.prof

This will return the prompt, as seen in the image below.

![][image9]Explore the profile data with the top command, which displays the top memory-consuming functions.

Paste the below command in your terminal to see this command in action.

top

The top memory-consuming functions are displayed in the image above.

It’s also possible to check the particular lines in each function that consumes the memory using thelist <function_name> command. Use the command below to see this in action.

list generateDataStructures

The image above displays the memory allocation per line. It shows that line 32 consumes the most memory—64.15 MB.

That’s how to improve memory management in Go

In this article, you learned about Go's garbage collector and the best approaches for improved memory efficiency. You also learned how to use Go's built-in memory profiler to detect memory leaks in your code.

Effective memory management enhances application performance and reduces the risk of memory-related errors. By applying the techniques in this tutorial, you can confidently build memory-safe Go applications.

Cheers to more learning!

How to Build a Real-Time Chat App With Laravel, Vue.js, and Pusher

Damilola Oshungboye — Sun, 08 Sep 2024 21:10:54 +0000

Real-time chat applications like WhatsApp and Discord have witnessed a remarkable surge in popularity in recent years, revolutionising communication with instantaneous messaging. However, while building your own chat app with this functionality might seem daunting, it’s entirely achievable.

In this tutorial, you will learn how to build a real-time chat application using Laravel, Vue.js, and Pusher. You'll use the Laravel framework to build the back end of the chat application, a combination of Blade templates and Vue.js to develop the user interface and layout of the application, and the Pusher platform for the real-time chat functionality.

Prerequisites

To complete this tutorial, you will need the following:

PHP 8.3 (or higher) installed
Node and NPM installed
Composer installed globally
A Pusher account. Create a new account here
Basic knowledge of WebSockets
Basic knowledge of the Vue.js framework would be nice, but is not essential

Backend setup

Begin by setting up all the necessary backend configurations required for the chat application.

Scaffold a new Laravel project

To get started with building your chat application, you need to create a new Laravel project using Composer and change into the project directory by running the below commands in your terminal.


composer create-project laravel/laravel chat-app

cd chat-app

Next, install Laravel Breeze using the command below.


composer require laravel/breeze

Once the Laravel Breeze installation is complete, scaffold the authentication for the application. Do that by running the following commands one after the other.


php artisan breeze:install

npm install

npm run dev

When prompted, select the options below.

The final step in the scaffolding process is to add the necessary packages and config files for WebSocket and event broadcast. Run the command below in a new terminal instance or tab.


php artisan install:broadcasting

When prompted, select these options:

This command creates channels.php in the routes folder and broadcasting.php in the config folder. These files will hold the WebSocket configurations and install the necessary client libraries (Laravel Echo and pusher-js) needed to work with WebSockets.

With all of the scaffolding completed, start the application development server by running the commands below.


php artisan serve

Once the application server is up, open http://localhost:8000/ in your browser. You should see the default Laravel welcome page with options to log in or register for your chat app, as shown in the image below.

The next step is to open the project in your preferred IDE or text editor.

Configure Pusher

Pusher is a cloud-hosted service that makes adding real-time functionality to applications easy. It acts as a real-time communication layer between servers and clients. This allows your backend server to instantly broadcast new data via Pusher to your Vue.j s client.

Install the Pusher helper library by running the command below in a new terminal instance or tab.


composer require pusher/pusher-php-server

Then, in your Pusher dashboard, create a new app by clicking Create App under Channels.

Next, fill out the form, as in the screenshot below, and click Create app.

After creating a new channels app, navigate to the App Keys section in the Pusher dashboard where you will find your Pusher credentials: App ID, Key, Secret, and Cluster. Note these values as you will need them shortly.

Now, locate the .env file in the root directory of your project. This file is used to keep sensitive data and other configuration settings out of your code. Add the following lines to the bottom of the file:


PUSHER_APP_ID=<your_pusher_app_id>
PUSHER_APP_KEY=<your_pusher_app_key>
PUSHER_APP_SECRET=<your_pusher_app_secret>
PUSHER_APP_CLUSTER=<your_pusher_app_cluster>
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
BROADCAST_CONNECTION=pusher

Ensure you replace <your_pusher_app_id>, <your_pusher_app_key>, <your_pusher_app_secret>, and <your_pusher_app_cluster> with the actual values from your Pusher dashboard. Be careful to only replace the placeholder values with your actual credentials and do not alter the keys. This setup will enable your application to connect to Pusher's cloud servers and set Pusher as your broadcast driver.

Setup model and migration

After scaffolding the application, the next step is to create a model and a corresponding database migration. This will allow us to store chat messages and user information in the database. Run the following command in your terminal to create a model with a corresponding migration file.


php artisan make:model -m ChatMessages

This command will generate ChatMessages.php in the app/Models directory and a migration file in the database/Migrations directory.

Open app/Models and update the content of ChatMessages.php with this.


<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class ChatMessages extends Model

{

    use HasFactory;

    protected $fillable = ['sender_id', 'receiver_id', 'text'];



    public function sender()

    {

        return $this->belongsTo(User::class, 'sender_id');  

    }

    public function receiver()

    {

        return $this->belongsTo(User::class, 'receiver_id');

    }

}

In the code above, the $fillable property allows sender_id, receiver_id, and text to be mass-assigned. Additionally, the model defines two many-to-one relationships: the sender relationship links to the user model via the sender_id, and the receiver relationship links to the user model via receiver_id, representing the sender and receiver of the message, respectively.

Next, navigate to database/Migrations and update the file that ends with create_chat_messages_table.php with the following code.


<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

return new class extends Migration

{

    /**

     \* Run the migrations.

     \*

    public function up(): void

    {

        Schema::create('chat_messages', function (Blueprint $table) {

            $table->id();

            $table->foreignId('sender_id')->constrained('users');

            $table->foreignId('receiver_id')->constrained('users');

            $table->string('text');

            $table->timestamps();

        });

    }

    /**

     \* Reverse the migrations.

     \*

    public function down(): void

    {

        Schema::dropIfExists('chat\_messages');

    }

};

In the migration above, the database schema of the chat application is defined. This schema includes an id for each message, foreign keys sender_id and receiver_id that reference the users table, a text column to store the content of the message, and timestamp columns to record when each message is created and updated.

After updating the model and migration, the next step is to run the migration. Do that by running the command below in your terminal.


php artisan migrate

Setup the event broadcast

Next, set up the event broadcast by navigating to channels.php file in the routes folder and update it with the following.


<?php

use Illuminate\Support\Facades\Auth;

use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('chat', function ($user) {

    return Auth::check();

});

In the code above, a new broadcast channel named "chat" is defined, and a closure is passed to ensure that only authenticated users can subscribe to the channel.

After defining the channel, create a new event which will be broadcast to the client on the "chat" channel. Run the command below in your terminal to generate the event class.


php artisan make:event MessageSent

The command will create a new file called MessageSent.php in the app/Events directory. Open the MessageSent.php file and update it with the below content.


<?php

namespace App\Events;

use App\Models\ChatMessages;

use Illuminate\Broadcasting\Channel;

use Illuminate\Broadcasting\InteractsWithSockets;

use Illuminate\Broadcasting\PresenceChannel;

use Illuminate\Broadcasting\PrivateChannel;

use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

use Illuminate\Foundation\Events\Dispatchable;

use Illuminate\Queue\SerializesModels;

use App\Models\User;

class MessageSent implements ShouldBroadcast

{

    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user, $chatMessage;

    /**

     \* Create a new event instance.

     \*

    public function __construct(User $user, ChatMessages $chatMessage)

    {

        $this->user = $user;

        $this->chatMessage = $chatMessage;

    }

    /**

     \* Get the channels the event should broadcast on.

     \*

     \* @return array\<int, \\Illuminate\\Broadcasting\\Channel\>

     \*/

    public function broadcastOn(): array

    {

        return [

            new PrivateChannel("chat"),

        ];

    }

    public function broadcastWith()

    {

        return ['message' => $this->chatMessage];

    }

}

In the code above, the user and the message are passed into the constructor. The broadcastOn() method specifies that the event will be broadcast on a private channel named "chat", while the broadcastWith() method adds the chat message to the broadcast payload.

Create the controller

The next step is to create a controller class that will contain all the application logic. To create the controller, run the command below in your terminal.


php artisan make:controller ChatController

This command will create a new file called ChatController.php in the app/Http/Controllers folder.

Open the ChatController.php file and replace the content with the following.


<?php

namespace App\Http\Controllers;

use App\Events\MessageSent;
use App\Http\Controllers\Controller;
use App\Models\ChatMessages;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class ChatController extends Controller
{
    public function index(User $user)
    {
        $messages = ChatMessages::with(['sender', 'receiver'])
            ->whereIn('sender_id', [Auth::id(), $user->id])
            ->whereIn('receiver_id', [Auth::id(), $user->id])
            ->get();
        return response()->json($messages);
    }

    public function store(User $user, Request $request)
    {
        $message = ChatMessages::create([
            'sender_id' => Auth::id(),
            'receiver_id' => $user->id,
            'text' => $request->message,
        ]);
        broadcast(new MessageSent($user, $message))->toOthers();
        return response()->json($message);
    }
}

In the code above, the necessary imports required for the chat application are added. In the index() function, messages exchanged between the currently authenticated user and the specified user are retrieved while eager-loading the sender and receiver information using the relationships. In the store() function, a new message from the currently authenticated user to the specified user is saved to the database, and the MessageSent event is broadcasted on the chat channel.

Update the routes

Now, it's time to update the routing table. So, in the web.php file located in the routes folder, add the following imports at the beginning of the file.


use App\Http\Controllers\ChatController;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

Next, replace the dashboard route with the following*.*


Route::get('/dashboard', function () {
    return view('dashboard', [
      'users' => User::where('id', '!=', Auth::id())->get()
    ]);
})->middleware(['auth', 'verified'])->name('dashboard');

Route::get('/chat/{user}', function (User $user){
    return view('chat', [
        'user' => $user
    ]);
})->middleware(['auth', 'verified'])->name('chat');

Route::resource(
    'messages/{user}', 
    ChatController::class, ['only' => ['index', 'store']]
)->middleware(['auth']);

These routes set up the necessary endpoints for the chat application. The /dashboard route displays a list of users, excluding the current user. The /chat/{user} route loads the chat interface for a selected user. The Route::resource line sets up routes for retrieving and sending messages using the ChatController.

Frontend setup

Now that the backend part of the chat application is fully set up, it’s time to build the user interface of the chat application.

Install Vue.js

First, install Vue.js and the necessary plugin to detect .vue files by running the following commands:


npm install vue vue-loader  

npm install --save-dev @vitejs/plugin-vue

Create a new Vue.js component

Next, navigate to resources/js and create a new folder called components. In the newly created components folder, create a new file called ChatBox.vue. Update its content with the following.


<template>
    <div class="chat-box">
        <div ref="messagesBox" class="chat-messages">
            <div v-for="(message, index) in messages" :key="index" :class="['chat-message', { 'own-message': message.sender_id === sender.id }]">
                {{ message.text }}
                <span class="timestamp">{{ formatTimestamp(message.created_at) }}</span>
              </div>
            </div>
            <div class="chat-input">
              <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
              <button @click="sendMessage">Send</button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { nextTick, onMounted, ref, watch } from 'vue';
export default {
    props: {
        receiver: {
            type: Object,
            required: true,
        },
        sender: {
            type: Object,
            required: true,
        },
    },
    setup(props) {
        const messages = ref([]);
        const newMessage = ref("");
        const messagesBox = ref(null);
        const scrollToBottom = () => {
            messagesBox.value.scrollTop = messagesBox.value.scrollHeight;
        };
        watch(
            messages,
            () => {
                nextTick(() => {
                    scrollToBottom();
                });
            },
            { deep: true }
        );
        const sendMessage = () => {
            if (newMessage.value.trim() !== "") {
                axios
                    .post(`/messages/${props.receiver.id}`, {
                        message: newMessage.value,
                    })
                    .then((response) => {
                        messages.value.push(response.data);
                        newMessage.value = ""; 
                    });
            }
        };
        const formatTimestamp = (timestamp) => {
            const date = new Date(timestamp);
            return `${date.getHours()}:${date.getMinutes()}`;
        };
        onMounted(() => {
            axios.get(`/messages/${props.receiver.id}`).then((response) => {
                messages.value = response.data;
            });
            Echo.private('chat')
                .listen("MessageSent", (response) => {
                    if (response.message) {
                        const messageExists = messages.value.some(msg => msg.id === response.message.id);
                        if (!messageExists) {
                            if ((response.message.sender_id === props.sender.id && response.message.receiver_id === props.receiver.id) || 
                                (response.message.sender_id === props.receiver.id && response.message.receiver_id === props.sender.id)) {
                                messages.value.push(response.message);
                            }
                        }
                    }
            });
        });
        return {
            messages,
            newMessage,
            messagesBox,
            sendMessage,
            formatTimestamp,
        };
    },
};
</script>

<style scoped>
.chat-box {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0 auto;
    height: 500px;
}
.chat-messages {
    display: flex;
    flex: 1;
    flex-direction: column; 
    align-items: flex-start; 
    overflow-y: auto;
    padding: 15px;
}
.chat-input {
    display: flex;
    align-items: center;
    border-top: 10px;
}
.chat-input input {
    flex: 1;
    padding: 10px;
    margin-right: 5px;
}
.chat-input button {
    padding: 10px;
    border: 1px solid #0a0a0a;
}
.chat-message {
    display: inline-block;
    padding: 10px;
    margin: 5px 0;
    border-radius: 15px;
    word-wrap: break-word; 
}
.chat-message.own-message {
    align-self: flex-end;
    background-color: #d1e7ff;
    color: #0056b3;
    text-align: right;
}
.chat-message:not(.own-message) {
    align-self: flex-start;
    background-color: #e1e1e1;
    color: #333;
}
.timestamp {
    font-size: 0.8rem;
    color: #aaa;
    margin-left: 10px;
  }
</style>

The code above is a Vue.js component responsible for the chat functionality. The <template> section defines the HTML structure, including a div for displaying messages and an input area for sending new messages, with each message conditionally styled to distinguish between messages sent by the current user and others.

In the <script> section, the receiver and sender are passed as [props](https://v2.vuejs.org/v2/guide/components-props) to identify the two users currently chatting. Within the setup function, reactive references messages, newMessage, and messagesBox are defined. The scrollToBottom() function ensures that the chat view always scrolls to display the latest message, while the sendMessage() function handles sending new messages to the server and updating the chat view accordingly.

The formatTimestamp() function formats the message timestamps for display. The onMounted lifecycle hook fetches existing messages and listens for the MessageSent event on the “chat” channel using Laravel Echo. Finally, the <style> section adds CSS styles to define the layout, the appearance of the messages, and the input area.

Update the Echo.js and App.js file

After creating the chat components, the next step is to update the JavaScript files. In the resources/js directory, locate the echo.js file and replace the content of the file with the following.


import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

In the updated echo.js file, Echo is configured to use Pusher as the broadcaster for real-time events. It uses the key and cluster information specified earlier in our .env file to connect the application to the Pusher service.

Then, replace the content of the resources/js/app.js file with the content below


import './bootstrap';
import { createApp } from 'vue' 
import ChatBox from './components/ChatBox.vue' 

createApp({}) 
    .component('chat-box', ChatBox)
    .mount('#app')

In the updated app.js file, the Vue.js application is set up by importing the necessary dependencies and creating a new instance. The ChatBox component is registered to the alias chat-box, and mounted to the HTML element with the id app, enabling the chat functionality in your application.

Update the vite.config.js file

Vite is a build tool that is responsible for building and bundling your frontend assets. You’ll need to update its config file so it can detect and build Vue.js components.

To do that, in the root directory, open the vite.config.js and update it with the following content:


import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'; 

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({ 
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    }, 
});

In the updated vite.config.js, the laravel-vite-plugin\ is configured to handle the CSS and JS files for your Laravel application. The @vitejs/plugin-vue\ plugin is also included to enable support for Vue.js single-file components. Additionally, the resolve\ section sets up an alias to use the Vue ES module build, which is necessary for single-file component support. This configuration ensures that Vite can properly process and serve your application during the development and build stages.

Update the Blade templates

The final step in the frontend setup is updating the Blade templates. Navigate to resources/views and update dashboard.blade.php with the below content.


<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{Auth::user()->name}} 
        </h2>
    </x-slot>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($users as $user)
                            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                                <div class="p-6">
                                    <div class="flex items-center">
                                        <a href="{{ route('chat', $user) }}">
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                    {{ $user->name }}
                                                </div>
                                                <div class="text-sm text-gray-500 dark:text-gray-400">
                                                    {{ $user->email }}
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

In the updated dashboard.blade.php, the list of users profiled on the system is returned, such that a logged-in user can chat with any of them.

Also in resources/views, create a new file chat.blade.php and update it with the following content.


<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{$user->name}}
        </h2>
    </x-slot>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100" id='app'>                       
                    <chat-box
                        :receiver = "{{ $user }}"
                        :sender = "{{ Auth::user() }}"
                    />
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

This file holds the Vue.js component responsible for the chat functionality. It sets up the layout and includes the chat-box\ component, passing the authenticated user as the sender and the selected user as the receiver as props to it.

Test the chat application

It’s finally time to see your chat app in action. By default Laravel events are dispatched on queues, therefore you’ll need to start up a queue worker instance so your event can be processed. Run the command below in your terminal to start your queue.


php artisan queue:listen

Next, register two new users. Log in with one user in a regular browser tab, and log in with the other user in an incognito tab. Then, select each other on both tabs to start chatting.

Below is a video demonstration of the chat application.

That’s how to build a real-time chat application using Laravel, Pusher and, Vue.js

This tutorial has equipped you with the knowledge to effectively build a real-time chat application. You learned how to set up the backend logic and event broadcast using WebSockets with Laravel, handle real-time communication with Pusher, and build a dynamic frontend using Vue.js to listen for and display events.

With these skills, you can now create more complex real-time applications, or add additional features to your chat app. The possibilities are endless!

Keep building!

Rust vs Go? Which Should You Learn in 2026

Damilola Oshungboye — Tue, 27 Aug 2024 11:55:30 +0000

Introduction

Rust and Go are languages with applications in performance-critical applications. This article breaks down the main features and typical use cases for both languages.

Within the last decade, Rust and Go have grown quite popular. Memory-safe Rust is mainly used in systems programming. Go is favored because of its simplicity and built-in concurrency, which makes it perfect for building scalable web applications and APIs. Interestingly, the largest technology firms, such as FAANG and Fortune 100 companies, use both Rust and Go for different aspects of their applications.

In this article, you will discover the answer to the question "Should I Rust or Should I Go?". You'll learn how Rust and Go compare to each other in terms of concurrency, and memory safety among others. Also, you'll learn about the different scenarios best suited to each language.

By the end of this article, you will be well informed of key features and use cases of both languages, leading you to an informed decision in choosing the right one for your project.

Overview of Rust

Rust is a high-level programming language with a strong focus on memory safety created by Graydon Hoare, a former Mozilla employee as a personal project in 2006. Memory-safe languages like Rust have been recommended by the United States Department.

Key Features

Memory Safety: Rust enforces memory safety at compile time without using garbage collection.
Performance Comparable to C/C++: Rust’s is as fast as C and C++.
Ownership System: Rust supports concurrent operations using its ownership and borrowing system.
Strong Type System and Pattern Matching: Rust's type system and pattern matching features enhance code safety.

Overview of Go

Go is an open-source programming language created at Google by Robert Griesemer, Rob Pike, and Ken Thompson in 2009. It's statically typed and similar to C++ in syntax. In an interview, Rob Pike said Go was created because of the difficulty associated with concurrency operations in C++ at the time.

Key Features

Simplicity: Go has a moderate learning curve which makes it easier to work with.
Fast Compilation Times: Go compiles quickly, allowing for rapid development and iteration.
Built-in Concurrency: Go’s built-in goroutines and channels allow for concurrency operations.
Strong Standard Library: Go’s standard library is very robust.

Comparison: Rust vs Go

Performance

In this section, you'll learn how Rust and Go compare in terms of speed and memory usage.

1. Benchmark comparisons

Benchmarks Game compared the runtime and memory usage of both Rust and Go. For all the algorithms tested, it was discovered that the most optimized Rust code has a faster execution time compared to the most optimized Go code.

For the regex-redux and binary trees algorithms, Rust by far outperforms Go as shown in the images below. Rust code uses less memory and executes in a shorter time compared to Go.

2. Memory Management and Efficiency

Both Rust and Go are memory-safe languages although they achieve this in different ways. Rust by design favours fast execution while Go favours fast compilation. Rust's ownership and borrowing system prevent many common causes of memory leaks at compile time, while Go relies on automatic garbage collection to free up unused memory at runtime. However, both languages can still experience memory leaks under certain circumstances.

Concurrency and Parallelism

In this section, you'll learn about the unique approaches of Rust and Go to concurrency and parallelism.

1. Rust's Approach

Rust supports concurrency through the use of the async/await paradigm and the use of threads and channels.

Async/Await Paradigm in Rust

Rust's async/await paradigm allows you to write asynchronous code that is easier to read and maintain. Runtimes built on Rust's Future trait like Tokio or async-std are often used with the async/await paradigm. Here's an example of using async/await:

use tokio::time::{sleep, Duration};

async fn execute_task() {
    println!("Task has begun.");
    sleep(Duration::from_secs(2)).await;
    println!("Task is done.");
}

#[tokio::main]
async fn main() {
    let task_handle = tokio::spawn(async {
        execute_task().await;
    });

    task_handle.await.unwrap();
    println!("Main function completed.");
}

In the code above, the execute_task function simulates a task that takes some time to complete. The Rust Tokio runtime manages the main function's execution without blocking the thread, allowing other asynchronous tasks to proceed concurrently. The main function then waits for the task to finish before printing a completion message.

Here's the output:

Using Threads and Channels

Rust's standard library provides support for threads and message-passing concurrency with channels. Here's an example:

use std::sync::mpsc;
use std::thread;
use std::time::Duration;

fn main() {
    let (sender, receiver) = mpsc::channel();

    thread::spawn(move || {
        let messages = vec![
            String::from("greetings"),
            String::from("from"),
            String::from("the"),
            String::from("worker"),
        ];

        for message in messages {
            sender.send(message).unwrap();
            thread::sleep(Duration::from_secs(1));
        }
    });

    for received_message in receiver {
        println!("Received: {}", received_message);
    }
}

In the code above, a new thread which runs concurrently with the main thread is created using thread::spawn(). This thread sends a series of messages through a channel created using mpsc::channel(). As messages are sent from the spawned thread, they are received and printed by the main thread.

Here's the output:

2. Go's Approach

Go achieves concurrency through the use of goroutines and channels. Goroutines are lightweight threads managed by the Go runtime which allows functions to run concurrently. A regular function can be made into a goroutine by adding the go keyword in front of it.

Concurrency with Goroutines

package main

import (
    "fmt"
    "time"
)

func displayDigits() {
    for i := 1; i <= 5; i++ {
        time.Sleep(1 * time.Second) // sleep to demonstrate concurrency
        fmt.Printf("Digit: %d\n", i)
    }
}

func displayCharacters() {
    for i := 'A'; i <= 'E'; i++ {
        time.Sleep(1 * time.Second)
        fmt.Printf("Character: %c\n", i)
    }
}

func main() {
    // Launch the goroutines
    go displayDigits()
    go displayCharacters()

    // Wait for the goroutines to complete
    time.Sleep(6 * time.Second)
    fmt.Println("Finished")
}

In this code above, two goroutines are defined. The first goroutine prints digits from 1 to 5, while the second prints characters from A to E. The main function launches these goroutines and then waits for 6 seconds so the goroutines have enough time to run before printing "Finished".

Here's the output

Goroutines can communicate with each other using channels. Here's an example:

package main

import "fmt"

func transmitMessages(ch chan string) {
    msgs := []string{"Greetings", "Simplicity", "Concurrency"}

    for _, message := range msgs {
        ch <- message
    }

    // Properly close the channel after sending all messages
    close(ch)
}

func main() {
    ch := make(chan string)

    // Launch the transmission of messages concurrently
    go transmitMessages(ch)

    for message := range ch {
        fmt.Println(message)
    }
}

In the code above, the transmitMessages function, running as a separate goroutine, sends a series of messages through a channel. Then, the main function receives these messages and prints them.

Here's the output:

Learning Curve and Development Speed

Here, you'll learn about the learning curve of both languages and the development speed.

Rust has a much steeper learning curve compared to Go which has been hailed by developers worldwide for its simplicity and easy-to-understand syntax. Rust on the other hand takes a whole lot more time to understand as developers often struggle with important concepts like its memory safety rules, type conversions, and type checks.

The same can be said about development speed because Go is easier to understand, and developers can begin working with it faster as opposed to Rust which can take a bit of time because of the steep learning curve.

Safety and Reliability

In this section, you'll learn about the different measures both languages set to allow for safety and reliability.

1. Rust’s Ownership System

In Rust, when a value is assigned to a variable or moved to a function, the ownership is transferred, leading to the original variable being inaccessible. This is to prevent double-free errors and data races. Rust's ownership system ensures memory safety by managing the memory allocation and deallocation process.

fn main() {
    {
        let c2 = String::from("Ownership model");
        let c3 = c2;
        println!("{}", c3);
    }
}

In this example, we have a string c2. When we assign c2 to c3, Rust invalidates c2. If you try to print c2, you'll get a compile-time error as shown in the image below.

2. Go’s error handling

Unlike in most modern programming languages, errors in Go are not exceptions. They're simply values that implement the error interface. This approach allows for a more readable and maintainable code. Below is the error interface used by Go.

type error interface {
    Error() string
}

Ecosystem and Community

When comparing Rust and Go, it's important to consider their ecosystems, community sizes, and corporate support

1. Community size and activity

Both Rust and Go have active and vibrant communities. Although Go stands out with more GitHub stars and active users compared to Rust. Below is the GitHub Page and the number of Stack Overflow questions asked for both languages.

Rust
Below is the Rust Github page with 96k stars and Stack Overflow page with over 42k questions tagged [rust].

Rust GitHub Stars

Rust Stack Overflow Questions

Go
Below is the Go Github page with 122k stars and Stack Overflow page with over 73k questions tagged [go].

Go GitHub Stars

Go Stack Overflow Questions

According to a 2024 survey by Stack Overflow, developers voted Rust as the most admired programming language for 8+ years in a row.

2. Corporate support and adoption

Rust is backed by Mozilla, and now by the Rust Foundation. Tech companies like Dropbox, Cloudflare, and Meta are using Rust for performance-intensive services.

Go was created at Google, and it has substantial corporate support and adoption. Major companies like Google, Uber and Dropbox rely on Go for many of their backend services. Docker, a leading containerization technology was built mainly in Go.

3. Popular Frameworks and Libraries

Rust:

Actix: A powerful, fast web framework.
Rocket: A web framework focused on ease of use and safety.
Serde: A widely-used library for serialization and deserialization.
Tokio: A runtime for writing asynchronous applications with Rust.

Go:

Gin: A lightweight web framework that’s easy to use.
Beego: An open-source, high-performance web framework.
GORM: The most popular ORM for Go, making it easy to handle databases.
Cobra: A library for creating powerful CLI applications.

Here is a table summarizing the key differences between each language.

Aspect	Rust	Go
Memory Safety	Enforced at compile time without the need for garbage collection.	Relies on a garbage collector.
Performance	Comparable to C/C++.	Slightly lower than Rust but fast enough for many applications.
Concurrency Model	Utilizes an ownership model with threads and async tasks.	Built-in support with goroutines and channels.
Type System	Strong with pattern matching and type inference.	Statically typed with a simpler type system.
Compilation Times	Slower due to complex optimizations and safety checks.	Faster compilation.
Ease of Use	Steeper learning curve due to advanced features.	Easier to learn.
Standard Library	Rich but less extensive, focusing more on performance-critical and systems programming features.	Comprehensive, especially strong in networking, I/O, and web server support.
Community and Ecosystem	Rapidly growing, especially among systems programmers interested in safety and performance.	Large and mature, widely used in cloud infrastructure, networking, and DevOps tools.
Error Handling	Based on `Result` and `Option` types.	Uses the `error` interface, treating errors as values.

When to use Rust

Rust particularly excels in performance and memory-critical scenarios or scenarios where a large amount of data is being processed. You can use Rust in the following scenarios:

Systems programming: Rust because of its memory safety can be used to build system-level programs like operating systems.
High-Performance Computing: Rust is ideal for applications that require exceptional performance.
Large-scale distributed system: Rust memory safety and speed make it an excellent choice when building distributed systems.

When to use Go

Go can be used in a variety of scenarios. Its built-in concurrency makes it a great choice for applications handling multiple requests. Overall, Go is a good fit if you value code simplicity and readability over performance. You should use Go if you need:

Concurrent operations: Go allows for concurrent operations using its goroutines.
Fast development: Go has a straightforward syntax with a standard library which allows for speedy development.
Simplicity and readability: Go’s easy-to-understand syntax makes it ideal for large teams.

Conclusion

At the end of the day, both Rust and Go are great choices when it comes to building server-side applications. However, the correct choice will be based on the requirements of your application and what you want to achieve.

This article covered the key features, use cases and differences between the Rust and Go languages, equipping you with the knowledge to decide on the best one according to your project requirements.

Resources

Here are some resources for further reading.

Rust Ownersip Model

Bootstrap vs. Tailwind CSS: A Comparison of Top CSS Frameworks

Damilola Oshungboye — Fri, 16 Aug 2024 13:26:38 +0000

Introduction

There are numerous CSS frameworks available today, each with its unique offerings. Selecting the right CSS framework among these options can be challenging, as most users are unsure which framework best suits their web development project.

In this article, we will compare two of the most popular CSS frameworks - Bootstrap and Tailwind CSS. You'll learn about their key features, design philosophies, and the CSS customization options for each one. Also, apart from that, you'll get familiar with the developer experience, performance, and support from the community for each of the frameworks.

By the end of this article, you will know the ins and outs of each framework in detail to decide which CSS framework best fits your needs for a project.

Let's get into it!

Overview

First, let's understand the frameworks Bootstrap Vs Tailwind CSS.

Bootstrap

Bootstrap is a free, open-source CSS framework for creating responsive web pages. Formerly called Twitter Bootstrap, it was created in mid-2010 by Mark Otto and Jacob Thornton, former Twitter engineers, to improve the consistency of Twitter's (now X) internal tools.

Key Features:

Grid system: 12-column grid system that simplifies responsive design.
Component-based: Pre-styled components make building and deploying consistent user interfaces easy.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework created by Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger. They shared a common frustration with existing CSS frameworks. Due to its utility-first approach, it gained rapid popularity, offering granular control over styling.

Key Features:

Utility-First: Tailwind CSS is known for its utility-first approach, offering a wide range of utility classes for styling without needing custom CSS.
Customization: Thanks to its utility classes, developers can easily customize designs using Tailwind CSS.

Here is the summary of the key features of each of this frameworks.

Tailwind CSS	Bootstrap
Utility-first approach	Pre-designed UI components
Responsive design	Responsive CSS flexbox and grid system
Very flexible and customizable	Built-in themes and customization
Integration with modern tools	Compatibility with many tools and platforms

Design Philosophy & Approach

In this section, you'll understand the different principles upon which these two frameworks are built. Understanding the principles behind a framework is very important for determining how it fits into your use case.

Bootstrap

Bootstrap adopts a component-based approach, offering a set of pre-built and pre-styled components like navbars and buttons that you can easily use while building UIs. This design philosophy has several benefits:

Rapid Development: Quickly assemble responsive UIs without extensive CSS customization.
Consistency: Ensures your application's uniform look and feel.

Below is an example of its usage.

<button class= "btn btn-success">
   Success
</button>

In the example above, the btn and btn-success classes style the button with Bootstrap's predefined styles for primary buttons.

Tailwind CSS

Tailwind CSS, on the other hand, follows a utility-first approach, providing an extensive set of utility classes that directly manipulate the styling of HTML elements. This design philosophy has several benefits:

Customization and Flexibility: Build custom designs by composing utility classes directly in your HTML.
Maintainability: Reduces the need to write custom CSS, making your styles more maintainable.

Below is an example of its usage.

<div class="bg-red-500 text-black rounded-lg">
  Tailwind CSS utility classes
</div>

In the example above, the bg-red-500 sets the background color, text-black sets the text color, and rounded-lg rounds the corners of the div. This way, you can create custom designs without writing additional CSS.

Customization and Theming

While Bootstrap and Tailwind CSS provide CSS customization and theming options, Tailwind CSS excels in this area.

Bootstrap

You can customize Bootstrap by overriding the default classes with your custom class. You can modify the color, spacing, and typography to match your design requirements by using CSS Overrides or SASS variables. Overriding default classes using CSS Overrides is easier than SASS variables, aimed at more advanced users. Here's how you can customize Bootstrap using CSS Overrides:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="custom.css">
    <title>Hello, world!</title>
  </head>
</html>

As seen in the sample above, your document's HTML file should include a Bootstrap-compiled file and a custom CSS file in the head tag. Create a custom custom.css file in the same directory as your index.html file.

For example, to style all your buttons with a red background and white text, you can override the default Bootstrap style by adding the below code to your custom.css file.

.btn {
  background-color: #ff0000; /* Red background */
  color: #ffffff; /* White text */
}

Below is the result.

Bootstrap also allows you to customize the theme using SASS variables. To change the primary theme color in your components, you can add the following in your custom SASS file, as seen below.

$theme-colors: (
  "primary": #ff0000
);

@import "node_modules/bootstrap/scss/bootstrap";

This will update the primary color across all Bootstrap components that use it.

Pros

Ease of Use: Simple overrides with CSS.
SASS Variables: Advanced CSS customization through variables.

Cons

Limited Flexibility: Customizing CSS can be time-consuming due to the need for extensive overrides.

Tailwind CSS

Tailwind CSS allows developers to configure and create new utility classes. Here's an example of customizing a Tailwind CSS utility class:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.html', // 
  ],
  theme: {
    extend: {
      colors: {
        customColor: '#ff0000',
      },
    },
  },
  plugins: [],
}

<div class="bg-customColor text-white p-4 rounded-lg">
  This is a customized div using Tailwind CSS.
</div>

Below is the result.

In the example above, the bg-customColor class is a custom utility class defined in the Tailwind CSS configuration file - tailwind.config.js.

Tailwind CSS also supports theming through its configuration file. Here's an example:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './**/*.html', // 
  ],
  theme: {
    colors: {
      primary: '#ff0000',
      secondary: '#00ff00',
    },
    spacing: {
      sm: '8px',
      md: '16px',
    },
  },
  plugins: [],
}

This configuration above updates the project's primary and secondary colors and spacing.

Pros

Highly Customizable: Extensive utility classes and configuration.
Flexibility: Creating and applying custom utilities and themes is easy.

Cons

Learning Curve: Requires mastering utility classes to create custom layouts.

Developer Experience

Bootstrap's learning curve is moderate compared to Tailwind CSS's steep one. Bootstrap's pre-built components can be easily integrated into an application to create layouts, unlike Tailwind CSS, which requires mastering utility classes to create layouts and styles.

Integration with popular front-end frameworks

Bootstrap and Tailwind CSS integrate with popular front-end frameworks such as React and Vue.js. You can easily add Bootstrap and Tailwind CSS to your frontend application by installing from npm or adding a CDN link to the head of your HTML document. Here's how you can add them to your application:

Bootstrap

//method 1
npm install bootstrap 
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

//method 2
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Using the React-Bootstrap framework, Bootstrap also offers easier integration with React. It is a complete re-implementation of the Bootstrap components using React components instead.

It can be installed from npm like this.

npm install react-bootstrap bootstrap

Tailwind CSS

You can add Tailwind CSS to your project using any of the options below.

//method 1
npm install tailwindcss
npx tailwindcss init
npx tailwindcss build tailwind.css -o tailwind-build.css

//method 2
<script src="https://cdn.tailwindcss.com"></script>

In the first method, we could NPM. And in the second method, we could add it to the <script> tag of our project.

Tailwind CSS also offers tighter integration with Vue.js through the VueTailwind Component Library. It offers a set of pre-built, fully customizable Vue components that can be used to jump-start development.

It can also be installed through npm, as shown below.

npm install vue-tailwind

Developer Productivity

When it comes to developer productivity, Bootstrap, and Tailwind CSS, each improve developers' productivity in a unique way.

Bootstrap improves productivity by increasing development speed, allowing developers to design UIs quickly using its pre-built components. Tailwind CSS, on the other hand, will enable developers to spend less time creating custom designs through its utility classes.

Performance and Bundle Size

In this section, we'll compare Bootstrap and Tailwind CSS to see which framework significantly influences page load times and bundle size.

Impact on Page Load Times

Bootstrap's pre-built CSS and JavaScript components tend to be large, potentially slowing page load times. You should only include the necessary components to minimize the bundle size, resulting in faster page load times.

Tailwind CSS, on the other hand, has a relatively faster page load time because it generates CSS on-demand according to the utility class used.

To demonstrate this, we created two custom HTML files—one for Bootstrap and the other for Tailwind CSS. After measuring the page load time with Chrome Lighthouse, we found that the Tailwind CSS page loaded faster than the Bootstrap page. Tailwind CSS's faster load times can be attributed to its lightweight utility classes compared to Bootstrap's bulkier files. Below is the performance rating for each framework according to Lighthouse.

Tailwind CSS's Performance Rating

Bundle size analysis

1. File size evaluation

Bootstrap's bundle size can be larger than Tailwind CSS's. Below is a screenshot of the bundle size generated by both frameworks.

Bootstrap Bundle Size

TailWind CSS Bundle Size

2. Optimization Techniques

Bootstrap and Tailwind CSS offer optimization techniques to reduce bundle size and improve performance. You can minimize bundle size across both frameworks by Tree-Shaking, which is a process that involves purging unused CSS files from your .css file.

Bootstrap can also be optimized further by Minification.

Aspect	Bootstrap	Tailwind CSS
Impact on Page Load Times	Pre-built components can slow page load times; selective inclusion needed	Generates CSS on-demand; typically faster page load times
Bundle Size	Generally larger bundle size	Typically smaller bundle size
Optimization Techniques	Tree-shaking, Minification (.min.css and .min.js files)	Tree-shaking, purging unused CSS

The table above provides an overview of critical performance and bundle size differences between the two frameworks.

Design and Aesthetics

In this section, we'll explore the design and aesthetics of Bootstrap and Tailwind CSS. We'll look at the consistency of design in both frameworks, as well as the aesthetic appeal and flexibility of CSS customization.

Design consistency

Bootstrap provides a consistent set of default styles for common HTML elements, ensuring a cohesive look and feel across different components. The default styles include typography, colors, Bootstrap buttons, Bootstrap icons, Bootstrap forms, and other elements.

Tailwind CSS does not have predefined default styles. Users can create custom designs by utilizing the utility classes provided.

Flexibility of Design Customization

While Bootstrap allows for CSS customization, it is less flexible than Tailwind CSS, as discussed in the Customization and Theming section. Achieving a fully unique look requires extensive overrides of default styles. Although Bootstrap also has the Bootstrap theme desginer AIs for template generators. Examples Bootstrap theme desginer AIs include Bootstrapi Studio, Mobirise, etc.

Tailwind CSS, on the other hand, allows developers to create customized designs directly in HTML using utility classes.

Aesthetic appeal in default styles

Bootstrap offers a polished and professional look and feel out of the box. This you can find in Bootstrap buttons, Bootstrap icons, Bootstrap components etc. Its default styles are aesthetically pleasing, offering solid foundations for web app development with minimal tweaking.

While Tailwind CSS doesn't have a predefined aesthetic, its utility-first approach enables a high degree of creativity and variation in design. The images below show that Bootstrap provides a polished, consistent look for the button component, while Tailwind CSS allows for custom button designs.

Bootstrap's Primary Button Style

Tailwind CSS's Design Variation

Community and Ecosystem

This section will compare the community and ecosystem in Bootstrap vs Tailwind CSS.

Community support

Bootstrap stands out as a large and vibrant community with more users, GitHub stars, and contributors than Tailwind CSS's small but rapidly growing community. Below is the GitHub Page and the number of StackOverflow questions asked for both frameworks.

Bootstrap

Below is the Bootstrap Github repository with 169k stars and Stack Overflow pages with over 103k questions tagged [twitter-bootstrap].

Bootstrap's GitHub Page

Bootstrap's StackOverflow Questions

Tailwind CSS
Also, below is Tailwind CSS Github Repo with about 81.2k starts and about 10k number of questions on Stack Overflow.

Tailwind CSS's GitHub Page

Tailwind CSS's StackOverflow Questions

Documentation quality

Bootstrap official documentation is one of the best around, having benefitted from years of continuous iteration; it is well-organized, covering all aspects of the framework. Tailwind CSS also features impressive documentation, but it can't be compared to Bootstrap's at the time of writing.

Third-Party Resources

Bootstrap and Tailwind CSS have a wealth of online tutorials and guides created by the community and third parties. Some examples include:

Bootstrap:

Tailwind CSS:

Here's a table summarizing the community and ecosystem differences between Bootstrap and Tailwind CSS:

Aspect	Bootstrap	Tailwind CSS
Community Support	Large and established community; extensive user base and contributors.	Smaller but rapidly growing community; increasing engagement.
Documentation Quality	Extensive, well-organized, continuously updated documentation.	Comprehensive and well-maintained documentation; newer compared to Bootstrap.
Third-Party Resources	Wide range of tutorials, themes, plugins, and extensions available.	Growing number of tutorials and resources; fewer themes and plugins than Bootstrap.

Conclusion

In this article, we compare two popular front-end frameworks, Bootstrap and Tailwind CSS, examining their strengths and weaknesses. Overall, both frameworks are great choices when building modern applications. The right choice, however, depends on your project requirements.

You can try out both Bootstrap and Tailwind CSS. Experiment with their features and see which aligns best with your project requirements. Visit the Bootstrap documentation and the Tailwind CSS documentation to get started.

Twilio Challenge: Can You Beat Gemini? AI-Powered Game of Tic Tac Toe

Damilola Oshungboye — Mon, 17 Jun 2024 00:20:22 +0000

This is a submission for the Twilio Challenge

What I Built

I built an interactive AI-powered game of Tic-Tac-Toe called "Can You Beat Gemini?" This project allows players to test their Tic-Tac-Toe skills against Gemini AI, providing a challenging and fun experience.

Features

AI Integration: The game uses the Gemini AI model to analyse the game state and predict the best possible moves to challenge the player effectively.

Real-Time Interaction: Players interact with the game through digits (1-9). The game captures the player's move and processes it. The AI then responds with its move. This interaction is facilitated using Twilio's Programmable Voice capabilities, making the gameplay seamless and engaging.

Dynamic Game Board: The game state is visually represented, updating in real-time as moves are made. This ensures players can keep track of their and the AI's moves.

Demo

You can try it out by scanning the QR Code in the image or by texting the code join front-trace to the number +14155238886 on WhatsApp. Next call number +1 (806) 615-3056 to play the Tic Tac Toe game.

Video of How it Works

In the video description above, a call is made to +1 (806) 615-3056 to begin the game. The user selects any number between (1-9) to make their move. Gemini AI then analyzes the game state and responds with its move. The game continues with the user and AI taking turns until a winner emerges.

Source Code

ThatCoolGuyyy / Tic-Tac-Toe-Gemini-Twilio

Can You Beat Gemini? Tic Tac Toe

Welcome to the Can You Beat Gemini? Tic Tac Toe project! This is an interactive Tic-Tac-Toe game where you play against an AI opponent named Gemini(Gemini API). The AI is designed to challenge your strategic thinking and make your Tic-Tac-Toe games more interesting.

Video Demo

RPReplay_Final1718633328.mov

How it works

Twilio Programmable Voice is used to get input from the user in digits (1-9), each representing a cell on the Tic-Tac-Toe board. Then, Gemini AI to play against the human user. Finally, Twilio Messaging API (WhatsApp) is used to send the updated board when both AI and human players make their moves. Twilio Functions was used to host the code.

View on GitHub

Twilio and AI

I used Twilio to get input from the user in digits (1-9), each representing a cell on the Tic-Tac-Toe board. Then, I used Gemini AI to play against the human user. Finally, I used the Twilio Programmable Messaging (WhatsApp Sandbox) to send the updated board when both AI and human players make their moves. I also used Twilio Functions to host the code.

Additional Prize Categories

Twilio Times Two - The project uses Twilio Programmable Messaging (WhatsApp Sandbox), Twilio Programmable Voice and, Twilio Functions.

Entertaining Endeavors - The project creatively combines a classic game with advanced AI technology, making it not just a simple Tic Tac Toe game but an engaging battle of wits against an AI opponent. By leveraging Twilio to receive user inputs and send real-time game updates via WhatsApp, the project ensures continuous engagement and keeps the players entertained throughout the game.

Twilio Challenge: AI-Powered Voice Assistant

Damilola Oshungboye — Sun, 16 Jun 2024 15:37:29 +0000

This is a submission for the Twilio Challenge

What I Built

I created an AI-powered voice assistant designed to handle complex questions. Many existing voice assistants struggle with these types of inquiries, which can be frustrating for users. My assistant aims to bridge this gap.

Demo

To try out this app, make a call to +1 (423) 454-3174. You will be greeted with a prompt, say your request after the initial prompt.

Source code

ThatCoolGuyyy / Twilio-Gemini

AI-Powered Voice Assistant

How it works

Twilio Programmable voice get the user's request and then passes it to Gemini API which then return a response. Twilio Functions was used to host the code

View on GitHub

Here is an article I wrote that has detailed steps to build the PHP-Laravel version of this voice assistant - https://www.twilio.com/en-us/blog/build-ai-powered-voice-assistant-twilio-laravel-openai

Twilio and AI

I used Twilio Programmable voice to get the user's request, this request is then passed into Gemini API which processes the request and returns a response. Twilio Programmable Voice is then used to return the response to the user in voice format. Twilio Functions was used to host the code.

Additional Prize Categories

Twilio Times Two - The project uses Twilio Programmable Voice and Twilio Functions.

Impactful Innovators: My AI-powered voice assistant addresses the challenge of accessing information. It helps to bridge the gap between users who might struggle with traditional search methods, like the elderly, people with disabilities, or those with limited literacy skills.

How To Build an AI-Powered Voice Assistant With Twilio, Laravel, and OpenAI

Damilola Oshungboye — Fri, 14 Jun 2024 17:06:30 +0000

Voice assistants, such as Amazon Alexa and Apple's Siri have become integral to people’s lives, as they're so helpful with mundane tasks, such as setting reminders and turning on smart home devices. However, most voice assistants struggle with complex questions and queries, leaving users disappointed.

In this tutorial, you will learn how to build an AI-powered voice assistant that can understand and respond to complex questions using Twilio Programmable Voice and OpenAI.

Prerequisites

To complete this tutorial, you will need the following:

A Twilio account, free or paid. If you don't have one, create a Twilio account for free.
A phone number you own. Add it to your Twilio account.
PHP 8.2 (or higher) installed
Composer installed globally
An OpenAI account. Create a free account here.
ngrok and a free ngrok account
Basic knowledge of the Laravel framework would be nice, although it’s not required

Build the AI-powered voice assistant

Create a new Laravel project

To create a new Laravel project using Composer, you need to run the command below in your terminal.

composer create-project laravel/laravel voice-assistant

Next, navigate to the project’s working directory and start the application development server by running the commands below in the terminal.

cd voice-assistant
php artisan serve

Once the application server is up, open http://localhost:8000/ in your browser to access the default Laravel welcome page, as shown in the image below.

The next step is to open the project in your preferred IDE or text editor.

Install the Twilio PHP Helper Library

The Twilio PHP Helper Library provides functionality for interacting with Twilio's APIs. With this library, you can easily interact with Twilio Programmable Voice in the application. Twilio Programmable Voice uses Twilio Markup language(TwiML), to specify the desired behaviour when receiving an incoming call or SMS.
In your project’s working directory, run the command below in a new terminal window or tab to install the library.

composer require twilio/sdk

Retrieve your Twilio API credentials

You will need your Account SID and Auth Token to interact with Twilio Programmable Voice using the Twilio PHP Helper Library. You can find them in the Account Info panel on your Twilio Console dashboard, as shown in the image below. Copy the respective values.

Store the Twilio access token in your .env file

After retrieving your Twilio access tokens, you need to ensure that they are stored securely in your project using environment variables.
In your project’s root directory, locate the .env file. This file is used to securely store sensitive data and other configuration data. Update it with the following:

TWILIO_SID=<your_twilio_account_sid>
TWILIO_AUTH_TOKEN=<your_twilio_account_auth_token>
TWILIO_PHONE_NUMBER=<your twilio_account_phone_number>

Then, replace the placeholders with your corresponding Twilio access token values which you just copied.

Install the OpenAI Laravel Helper Library

OpenAI is a leading AI research lab known for creating advanced language models trained on extensive amounts of data. The OpenAI Laravel package allows you to easily use OpenAI models in your application. Install the package by running the command below.

composer require openai-php/laravel

Finally, set up the package configurations by executing the below command:

php artisan openai:install

This command will create a new file called openai.php in the config folder. The file contains the configurations required to connect to the OpenAI API.
To use the OpenAI API, you'll need an API key for authentication. Log in to your OpenAI account and navigate to the API Keys section. Click Create new secret key to generate your key.

After retrieving the key, store it and add the below line to your .env file

OPENAI_API_KEY=<your_openAI_api_key>

Remember also to replace the placeholder with your corresponding API Key.

Update the routes

Run the command below in your terminal.

php artisan install:api

This command will create a new file named api.php in the routes folder. Add the below import statement at the beginning of the new file.

use App\Http\Controllers\VoiceController;

Then, update the file contents to include the following routes.

Route::post('/voice', [VoiceController::class, 'voiceInput']);
Route::post('/chat', [VoiceController::class, 'speechtoText']);

Here you are defining the routes for the voice and chat endpoints.

Note: In Laravel, API routes defined in the api.php file have a prefix of api/. This means the route defined as /voice will be accessible at /api/voice. The same applies to /chat.

Create the controller

The next step is to create a controller class that will house all the application logic. To create the controller, run the command below in your terminal.

php artisan make:controller VoiceController

This command will create a new file called VoiceController.php in the app/Http/Controllers folder.
Open the VoiceController.php file and replace the content with the following.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Twilio\TwiML\VoiceResponse;
use OpenAI\Laravel\Facades\OpenAI;

class VoiceController extends Controller
{
    private $response;

    public function __construct()
    {
        $this->response = new VoiceResponse();
    } 

    public function voiceInput(Request $request)
    {
        $gather = $this->response->gather(['input' => 'speech', 'action' => '/api/chat']);
        $gather->say('Hello, I am your personal assistant. How can I help you today?');

        return $this->response;
    }

    public function speechtoText(Request $request)
    {
        $result = OpenAI::chat()->create([
            'model' => 'gpt-3.5-turbo',
            'messages' => [
                ['role' => 'user', 'content' => $request->SpeechResult],
            ],
        ]);
        $this->response->say($result->choices[0]->message->content);
        $this->response->gather(['input' => 'speech', 'action' => '/api/chat']);

        return $this->response;
    }
}

In the code above, the necessary imports required for the voice assistant are added. In the voiceInput() function, the TwiML (Twilio Markup Language) gather() method listens for the caller's input, and specifies the action to take on receiving it. Next, the TwiML say() method is used to prompt the caller. The gather() method converts the audio received into text and adds the transcribed audio to the $request object using the parameter speechResult.
After gathering the user's input, the $request object is sent as a POST request to the /api/chat endpoint, corresponding to the speechToText() function. The speechToText() function retrieves the transcribed audio from the request using the speechResult parameter and then forwards this transcribed audio to OpenAI Chat API for processing.
OpenAI's Chat API requires a role parameter containing a message with a system role and content for the intended actions. The model must also be configured, it is set to gpt-3.5-turbo in this tutorial. Finally, TwiML is used to return the response from OpenAI to the user in audio format.

Set up the Ngrok server

To make your voice assistant accessible from the internet, you can use a tool called Ngrok. Ngrok allows you to expose your local Laravel server to the internet.
Run the command below in your project's root directory.

ngrok http 8000

This command creates a secure tunnel that allows you to access your local Laravel server running on port 8000 from a public URL provided by Ngrok.
After executing the command, you should see the following in your terminal.

Copy the Forwarding URL displayed here.

Configure TwiML

Create a New TwiML App

Next, you need to create a new TwiML app. This is to ensure reusability across multiple phone numbers. You would be able to easily add the created TwiML app to any number in your Twilio account.
In your Twilio Console, navigate to Explore Products > Voice > Manage > TwiML apps, and select Create new TwiML App.

Then, fill out the form, as in the screenshot above, and replace <your_ngrok_address> with the Ngrok Forwarding URL you copied earlier, append "/api/voice" to the end of it, and click Create.

Add TwiML to your number

You must also add the created TwiML app to your phone number to ensure that Twilio executes your code when a call is made to/from the phone number.
In the Twilio Console, navigate to Phone Numbers > Manage > Active numbers, and click on your Twilio number.

Then, in the Voice Configuration section for your phone number, set Configure with to TwiML App, set TwiML App to your TwiML app, and then click Save.

Test the application

It’s finally time to see your AI-powered voice assistant in action! You can test it by calling your Twilio phone number from your verified phone number.
When you successfully set up the system, a call will be made to your Twilio phone number. A voice prompt will ask for your request and the system will intelligently respond to it.

What’s next for building an AI-powered voice assistant with Twilio, Laravel, and OpenAI?

Congratulations on successfully creating your very own AI-powered voice assistant using Twilio Programmable Voice and OpenAI!

This comprehensive tutorial guided you through setting up the necessary tools, integrating Twilio and OpenAI, and building a voice assistant using the Laravel framework. Now, your voice assistant is ready to respond intelligently to any questions you might have.

So, what's next on your journey? Here are a few suggestions:

Integration with External APIs: You can improve your voice assistant by integrating with external APIs. For example, you could integrate with e-commerce platforms to enable voice-based shopping experiences.
Interaction History: You can also implement a feature that allows your voice assistant to remember previous interactions, and extract context from it. This would allow your voice assistant to provide more tailored and relevant responses.

Cheers to building and learning!

Top 5 PHP Form Builders in 2026

Damilola Oshungboye — Thu, 04 Apr 2024 13:45:17 +0000

In today's digital landscape, web forms serve as vital tools for collecting data across various applications. They streamline processes, making data collection efficient and convenient. For PHP developers, finding a form builder that seamlessly integrates with their PHP backend is crucial, especially when dealing with sensitive information. Data privacy and legal compliance necessitate solutions that offer full control over data handling.

When selecting a form builder that works well with PHP backends, developers have several options to consider. While custom development and SaaS form builders are popular, they come with drawbacks. Custom solutions can be costly and time-consuming to develop, while SaaS offerings may limit customization.

Another viable approach is to use a client-side form builder that integrates smoothly with PHP backends. This allows developers to tailor the form builder to their specific needs and seamlessly integrate it with their backend systems, ensuring complete control over data flow.

Let's elaborate on the top PHP form builder in 2024.

What is a Form Builder

A PHP form builder is a tool that lets users create and customize web forms without coding, using a drag-and-drop interface. These tools provide benefits like ease of use for non-technical users, customization options to match branding, integration with other software, and secure data protection.

PHP form builders are a great choice for building forms for various purposes, including surveys, contact forms, registration forms, and more. They offer a range of features to enhance the form-building process, such as pre-built templates, form validation, and data management capabilities.

When choosing a PHP form builder, consider factors such as the number of forms you need to create, the complexity of the forms, and the level of customization you require.

There are many free and paid PHP form builder software options, each with its own set of features and benefits. Below are some popular PHP form builders available in the market currently.

Best PHP Form Builder Software in 2025

1. SurveyJS

SurveyJS is a client-side form builder that simplifies the creation of dynamic and responsive forms for web applications. It gives you full control over your data and brings enormous flexibility to modify the functionality and appearance of the form builder and the forms you create with it.

It integrates smoothly with your PHP backend to build a full-cycle survey management system. Your users will be able to create, edit, conduct and collect data from surveys. They can gather responses and utilize data visualization tools to analyze the collected data, extracting valuable insights with ease.

You can create dynamic forms using SurveyJS PHP form builder. With its intuitive drag-and-drop interface, you can design the form according to your specific requirements. JSON schemas that describe the form layout, content, and style are generated automatically. The generated JSON output can be stored in any preferred database, including MySQL, PostgreSQL, MongoDB, or any other.

Send a GET request to fetch the form by its GUIDs and run it in your application using the SurveyJS Form Library. This library dynamically generates the corresponding HTML elements and renders them on a web page.

Upon form submission by a user, a POST request is sent to your PHP backend, containing the form data in JSON format. The backend receives and processes the submitted data, performing any necessary validation.

The backend then returns an HTTP response to the user's browser, the response can be an HTML content or a page redirect. The SurveyJS Form Library receives the response and processes it, performing actions where needed.

SurveyJS PHP Backend Integration Guide

This guide demonstrates the integration of SurveyJS Form Builder with a PHP backend. It is a sample React application with an integrated form builder component. Its PHP backend stores form data in a PostgreSQL database. By following the steps outlined in this guide, you'll discover how effortless it is to integrate SurveyJS Form builder with your PHP backend.

1. Install composer and git on your machine if you haven't already done so.
2. Run the following commands in your terminal.

git clone https://github.com/surveyjs/surveyjs-php.git
cd surveyjs-php
composer install

Make sure you have PHP 8.0 or a later version installed.

3. Next start the local PHP server by running the command below in your terminal.

composer start

4. Navigate to the following URL: http://localhost:8000/, and you should see the page below.

Then, create a new survey by clicking on the Add Survey button.

5. Next, click on edit in the newly created survey.

6. In the Designer tab, click on the Add Question button.

SurveyJS supports a wide range of input elements from radio buttons to an image picker.

SurveyJS generates a JSON that describes your form structure and saves it automatically to your database.

7. Input any question of choice and a title.

8. Navigate to the JSON Editor tab.

Here you will see that JSON schemas have been generated automatically for your survey! This is the power of SurveyJS.

9. Next, click on My Surveys in the Navbar and select Run on your newly created survey.

SurveyJS Form Library sends a GET request to fetch the form definition(JSON Schemas) saved in your database.

10. Before clicking the Complete button, open your browser's developer tools and observe the payload.

When the Complete button is clicked, your data is sent to the backend in JSON format via a POST request.

The backend then returns a response in the format below.

{
    "id": "1",
    "data": [
        {
            "question1": "It\u0027s responsive"
        }
    ]
}

11. You can view your responses by clicking on the results tab.

You can try out this demo online for free.

SurveyJS offers 200+ demos with code examples to assist you in achieving any task.

View source code on Github

2. Formr

Formr is a powerful PHP form builder designed to easily create and validate forms with minimal effort. The library provides built-in support for Bootstrap and Bulma, making it easy to create beautiful and responsive forms. Additionally, it includes built-in support for reCAPTCHA v3, ensuring the security of your forms. It also supports object-oriented programming, allowing you to include multiple forms on a page. Furthermore, it allows you to upload images and resize them with ease.

However, it falls short in a few areas. Notably, Formr lacks client-side support and compatibility with modern front-end frameworks. Additionally, it is exclusive to PHP, rendering it unsuitable for projects not built in PHP.

3. PHP Form Builder

PHP Form Builder is a robust form-building library written in PHP. It simplifies the creation of complex forms, offering support for popular frameworks like Bootstrap and TailwindCSS. Users can leverage its intuitive drag-and-drop interface to design forms with ease. Additionally, PHP Form Builder provides comprehensive validation for user input, ensuring the accuracy and integrity of the data collected. Security is also a priority, with built-in protection against cross-site scripting (XSS) and cross-site request forgery (CSRF) attacks.

Its limitations include a basic user interface and support only for PHP, making it incompatible with modern front-end frameworks.

4. Zigaform

Zigaform is a user-friendly form builder designed for users with minimal coding experience. It features a drag-and-drop interface that simplifies form creation and an advanced grid system for content placement in columns. Additionally, Zigaform supports integration with third-party providers such as Zapier through add-ons, allowing for seamless integration of forms and powerful automation capabilities.

However, one of Zigaform's limitations lies in its basic user interface, which lacks the visual sophistication of alternative form builders like SurveyJS.

5. FormTools

FormTools is a PHP/MySQL script that empowers users to manage forms and data seamlessly on their websites. It offers unlimited account creation, ensuring scalability for various use cases. It also features a localization capability, supporting over 50 languages. Moreover, it provides data visualization capabilities, allowing users to gain valuable insights from their collected information.

However, it's important to note that FormTools is a PHP script intended for use with HTML websites and may not be compatible with contemporary front-end frameworks such as Vue.js. Moreover, similar to other scripts, FormTools might be vulnerable to SQL injection attacks.

Why SurveyJS Excels as a PHP Form Builder

SurveyJS offers limitless customization options, allowing you to incorporate any desired input fields or features into your forms. SurveyJS features an intuitive drag-and-drop interface that caters to users with varying technical skills, making form creation and styling a breeze. The Theme Editor offers a user-friendly experience, enabling you to set all CSS variables your form utilizes through a panel of UI controls, simplifying theme customization.

SurveyJS offers seamless integration with PHP and other backend options. Form data is sent to your backend in JSON format. SurveyJS automates the creation of JSON schemas in the background. You create forms using the no-code interface, and the JSON definitions will be generated for you.

The form builder provides a user-friendly graphical user interface (GUI) for setting up conditional rules. These rules define the form flow for different respondents based on their answers. Any changes made to the form are immediately visible in the Preview tab, which supports multiple devices, ensuring that forms adapt and appear visually appealing across different screens.

SurveyJS is built with data security in mind. It allows you to create a self-hosted form management system, retaining all sensitive data on your servers!

If you're looking for the best PHP form builder, look no further! Experience the capabilities of the SurveyJS Form Builder yourself by trying out its free full-featured demo.

Deploying a Containerized Laravel Application to a Local Kubernetes Cluster: A Step-by-Step Guide

Damilola Oshungboye — Sat, 19 Aug 2023 21:26:20 +0000

Welcome to this comprehensive step-by-step guide, where we'll begin by unravelling the fundamentals of Containers, Docker, and Kubernetes. Building on this foundational knowledge, we'll then delve into the art of crafting Dockerfiles and configuring Kubernetes manifests.

We will cover the entire process, from preparing the Laravel application for containerization to setting up the local Kubernetes environment using Minikube. By following this guide, readers will gain valuable insights into the containerization process and learn how to leverage Kubernetes for efficient application deployment.

Prerequisites

Before diving into this tutorial, there are a few essentials we need to have in place:

Basic understanding of PHP and the Laravel framework.
Docker Desktop Installed. Here’s the link to download Docker Desktop.
Minikube is required to create a local Kubernetes environment suitable for testing and development. Here’s the link to set it up.
Kubectl is the command-line tool used to interact with Kubernetes clusters. We need it to communicate with our local Minikube cluster. Here’s the link to download it.

Docker, Containers, and Kubernetes: The Basics

Before we dive into this tutorial, let's get acquainted with the essentials of these technologies:

Docker

Docker is a groundbreaking platform that simplifies the packaging, distribution, and deployment of applications. It bundles an app and its dependencies, including libraries and configurations into a container. Docker abstracts away the inconsistencies across different environments, ensuring consistent behaviour regardless of where the application is executed, in essence promoting the "build once, run anywhere" philosophy.

Containers

A container is a lightweight, standalone executable unit that packages an application along with its runtime, system tools, libraries, and settings. Containers provide an isolated environment, isolating the application from its host system and other containers.

Kubernetes

Kubernetes is an open-source container orchestration platform that automates the deployment, scaling, and management of containerized applications. It abstracts the complexity of managing clusters of containers across a multitude of machines, handling tasks such as scaling, load balancing, self-healing, and rolling updates.

Now that we've got these basics down, let's dive into our tutorial. We'll use these tools to put our Laravel app on a local Kubernetes playground!

Getting Started

Let’s start by creating a new Laravel project. To do that, we’ll run the following command in the terminal:

    laravel new sample-app

After installation is complete, verify it by running:

    php artisan serve

The link displayed in the terminal should redirect to Laravel’s welcome page.

Containerizing the Application

To containerize our application, we’ll need to start by creating a Dockerfile. This is the file Docker uses to build an image of our application.

In the root of our application, we’ll create a file titled Dockerfile without any extension. Let's break down the contents of the Dockerfile step by step:

1. Setting the Base Image

We begin by specifying the base image for our container as php:7.4-fpm. This base image equips us with the necessary PHP runtime environment.

    FROM php:7.4-fpm as php

2. Installing PHP Extensions and Dependencies

The next step involves installing essential PHP extensions and dependencies needed by our Laravel application. We update the package list,

    RUN apt-get update \
       && apt-get install -y \
           libzip-dev \
           zlib1g-dev\
           unzip \
       && docker-php-ext-install \
           pdo \
           pdo_mysql \
           sockets \
           zip

3. Clearing Local Repository of Retrieved Package Files

After installing packages, we execute a cleanup to eliminate unnecessary files from the package installation process.

    RUN apt-get clean

4. Setting Up The Application Directory and Files
Here, we create a directory named /app within the image and copy all the application files from your local machine to this directory. This establishes the directory structure needed for the application.

    RUN mkdir /app
    ADD . /app
    WORKDIR /app

5. Installing Composer and Application Dependencies

Composer is an essential dependency management tool for PHP applications. This step installs Composer in the image and copies it to the appropriate location. We then run composer install to install the dependencies specified in the composer.json file of your Laravel application.

    RUN curl --silent --show-error https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
    COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
    RUN composer install

6. Starting the Application

Finally, we define the command that will be executed when the container starts. In this case, we use php artisan serve to launch the Laravel development server. The server listens on all available network interfaces (0.0.0.0) and port 8082.

    CMD php artisan serve --host=0.0.0.0 --port=8082

7. Exposing the Port

To allow external access to the Laravel application running inside the container, we expose port 8082, which corresponds to the port the server is listening on.

    EXPOSE 8082

Here’s the complete Dockerfile.

    # Set the base image for subsequent instructions
    FROM php:7.4-fpm as php
    # Install PHP extensions and dependencies
    RUN apt-get update \
        && apt-get install -y \
            libzip-dev \
            zlib1g-dev\
            unzip \
        && docker-php-ext-install \
            pdo \
            pdo_mysql \
            sockets \
            zip
    # Clear out the local repository of retrieved package files
    RUN apt-get clean
    RUN mkdir /app
    ADD . /app
    WORKDIR /app
    # Install Composer
    RUN curl --silent --show-error https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
    COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
    RUN composer install 
    CMD php artisan serve --host=0.0.0.0 --port=8082
    EXPOSE 8082

Building the Docker Image

After writing the Dockerfile, the next step is building the Docker image. We can do that by running the command below in the root directory of our project.

    docker build -t test-image .

This command may take some time to execute, depending on the computer and the internet speed.

After the image is successfully built, we can integrate it into our Kubernetes cluster using the following command:

    minikube image load test-image

Writing the Kubernetes Manifest

Now that we’ve successfully built our image, the next step is for us to deploy it on our local Kubernetes cluster.

To do that, first, we need to write our manifest. A Kubernetes Manifest is essentially a configuration file usually written in YAML or JSON, that describes the resources we want in our cluster.

Here’s how we can proceed.

1. Creating a Manifest File

Similar to the Dockerfile, we'll create a file named deployment.yaml (any name can be used) in the root directory of our application. This file will house the instructions for Kubernetes on how to orchestrate our application.

    apiVersion: apps/v1
    kind: Deployment
    metadata:
      name: sample-app
      labels:
        app: sample-app
    spec:
      replicas: 2
      selector:
        matchLabels:
          app: sample-app
      template:
        metadata:
          labels:
            app: sample-app
        spec:
          containers:
          - name: sample-app
            image: test_image:latest
            imagePullPolicy: Never
            ports:
              - containerPort: 8082

Here's the description of the Deployment section:

apiVersion and kind define the resource type and version.
metadata holds the name and labels of the deployment.
spec specifies the desired state of the deployment. We've set it to have 2 replicas and match labels with the selector.
template describes the pods to be created, and under containers, we provide the details of the container, including the image and port.

Pods are ephemeral, meaning they can be created, destroyed, and replaced as needed. The spec specification ensures that the desired number of replicas, as defined (2 in this instance), is maintained, and any deviations from this state are automatically rectified by the system i.e if a pod dies for any reason, another is created immediately. This level of dynamic management underscores the resilient and adaptable nature of Kubernetes.

2. Defining a Service
A Kubernetes Service is an abstraction that provides a consistent and reliable way to access applications running within a Kubernetes cluster, it essentially exposes a logical set of pods to external traffic. We'll write a service manifest that connects to our deployment.

    apiVersion: v1
    kind: Service
    metadata:
        name: sample-app-service
    spec: 
        selector: 
            app: sample-app
        ports:
            - protocol: TCP
              port: 80
              targetPort: 8082

Here’s the complete manifest.

    apiVersion: apps/v1
    kind: Deployment
    metadata:
      name: sample-app
      labels:
        app: sample-app
    spec:
      replicas: 2
      selector:
        matchLabels:
          app: sample-app
      template:
        metadata:
          labels:
            app: sample-app
        spec:
          containers:
          - name: sample-app
            image: test_image:latest
            imagePullPolicy: Never
            ports:
              - containerPort: 8082
    ---
    apiVersion: v1
    kind: Service
    metadata:
        name: sample-app-service
    spec: 
        selector: 
            app: sample-app
        ports:
            - protocol: TCP
              port: 80
              targetPort: 8082

Spinning up the Kubernetes Cluster

After writing our manifest, the next step is to spin up our Kubernetes cluster. This can be achieved by executing the command below in the terminal.

    minikube start

This command may take some time to execute, depending on the computer and the internet speed.

Next, we apply the manifest using:

    kubectl apply -f <full path to manifest file>

After applying our image, we confirm the pod status using:

    kubectl get pods

This should show 2 replicas with a "Running" status, as illustrated in the provided screenshot.

Testing

Once we've verified that our pods are up and running, we can execute the service using the command:

    minikube service sample-app-service

Result:

Conclusion

In this comprehensive tutorial, we've delved deep into the crucial elements of Docker, containers, and Kubernetes. Starting from the basics, we've progressed to practical implementation by demystifying the creation of Dockerfiles and Kubernetes manifest files. Moving beyond theory, we've explored the setup of a local Kubernetes environment using Minikube and successfully deployed a containerized application in this environment.

Overall, this tutorial is an excellent starting point for anyone looking to get familiar with the intricacies of Docker and Kubernetes. It helps beginners build a solid foundation to confidently navigate these advanced technologies. From understanding the basics of containerization to grasping the role of Kubernetes in managing applications.

Resources

Here are some resources for further reading

Cloud Computing Demystified

Damilola Oshungboye — Thu, 06 Jul 2023 11:11:57 +0000

You may have heard people use terms like “The Cloud”, and Cloud Computing, but what exactly is “The Cloud”?

Dive into this article to find out.

“there’s no cloud. It’s just someone else’s computer “

The quote above is grossly incorrect. I'll explain why in a minute.

What is The cloud?

The cloud is not just someone else’s computer; the cloud is much more than that. The cloud is a complex system of interconnecting parts that come together to make our lives easier, more efficient, and far more capable. The cloud is a global network of remote servers with a unique function.
These servers are designed to store and manage data, run applications, or deliver content or services such as streaming videos or social media. Instead of accessing files and data from a local or personal computer, you are accessing them online from any Internet-capable device.
By “someone else’s computer, “ they are referring to the storage aspect of the cloud, which is just one of the services the cloud provides. The cloud offers more services, such as analytics and insight tools, developer tools, machine learning tools, and many more.
So you see, the cloud is not just someone else’s computer. Someone else’s computer could not possibly pull off those many services.

What is Cloud Computing?

Cloud Computing can be defined as the on-demand delivery of IT resources over the Internet with pay-as-you-go pricing. By using Cloud Computing, users and companies do not have to manage physical servers or run software applications on their machines.
Let’s break down the keywords in this definition.

On-demand - means you don’t have to call or inform the Cloud Service Provider e.g. AWS and say, “Hey, I will need a couple of servers tomorrow; could that work out?”. The servers and other resources are readily available for you to use anytime without any form of booking needed.
Resources - resources here can be servers, storage, machine learning workflows, data analytics workflows, and many more.
Pay-as-you-go pricing - means you don’t have to sign a contract or pay upfront to use the service. You only pay for the resources you use.

How does Cloud Computing work?

Cloud Computing is made possible by a technology called Virtualization. Virtualization allows the creation of a virtual machine that behaves like a physical computer with its own hardware. Virtual machines running on the same server are sandboxed from each other i.e. they don't interact with each other. They run independently of each other.

Cloud Service Models

There are three main types of cloud computing models. Each type of cloud computing provides different levels of control, flexibility, and management so that you’ll select the service that best fulfils your business needs. The three Cloud Service Models are as follows:

Infrastructure as a Service(IaaS): IaaS provides computing resources over the cloud. Resources may include storage, servers, networking hardware, and many more. Examples are AWS, GCP, Microsoft Azure, Heroku, Digital Ocean, etc.
Platform as a Service(PaaS): The good thing about this service model is that you don't need to manage the underlying infrastructure as in IaaS; the Cloud Service provider automatically manages it. Examples are Google App Engine and AWS Elastic Beanstalk.
Software as a Service(Saas): SaaS is also known as on-demand software. It allows quick access to cloud-based applications. It is the most common cloud computing model. Examples are Google Suite, DropBox, Slack, and Zendesk.