In this tutorial, we will build an AI UI Generator using Next.js and the Gemini API. It is similar to v.0 by Vercel which allows you to generate UI with a simple prompt and use it in your web apps.

This type of dynamic code generation can be the beginning of a new paradigm in software development where User Interfaces are generated by AI according to user's needs. This concept is being termed as "Generative UI".

Here's an example of how our application will work:

Let's begin by creating a new Next.js project.

Step 1: Create a new Next.js project

npx create-next-app@13.4 ui-generator

You will be prompted to select settings for the new project, make sure to follow these choices:

• For TypeScript, select No because this tutorial uses JavaScript.

• Feel free to choose any option for enabling ESLint.

• Choose Yes for Tailwind CSS.

• Exclude the src/ directory by selecting No, which is the default option.

• Enable App Router by selecting Yes, which is the recommended option.

• Lastly, select No for import alias configuration.

Change the working directory to your new Next.js project, ui-generator and run the application to make sure everything is fine:

cd ui-generator
npx run dev

Step 2: Building the Frontend

In the new app router in Next.js, app/page.js hosts the code for the home page. Remove everything inside it apart from the outer divs, and now we have an empty canvas to create anything we want.

Create a simple interface for this application which includes an input box to enter a prompt, a div placeholder for the code to be generated, and button to copy code:

'use client'

export default function Home() {

  return (
    <main className="flex min-h-screen flex-col items-center p-12">
      <div className="max-w-5xl w-full flex-col items-center justify-center text-sm lg:flex">
        <p className='text-3xl mb-4 font-bold text-gray-600'>UI Generator</p>
        <div className="relative flex items-center w-full h-12 rounded-lg focus-within:shadow-md bg-transparent overflow-hidden">
          <input
            className="peer h-full w-full outline-none bg-gray-100 text-sm text-gray-700 pl-4 pr-12"
            type="text"
            placeholder="Enter a prompt..."
          />
          <div onClick={handleGenerate} className="absolute right-0 flex items-center justify-center h-full w-12 bg-blue-500 hover:bg-blue-600 text-white cursor-pointer">
            <p className='text-2xl'>➔</p>
          </div>
        </div>

        <div className='flex'>
          <button className='bg-blue-500 text-white px-5 py-3 mt-7 hover:bg-blue-600 m-2' onClick={handleCopy}>Copy Code</button>
        </div>

        <div className='bg-transparent border-2 border-gray-300 rounded mt-7 p-2 flex justify-center'>
          {/* Generated code */}
        </div>

      </div>
    </main>
  )
}

Step 3: Obtain the Gemini API Key

Before we start working on our back-end of the application, we need to obtain the Gemini API key to be able to leverage Google's generative AI tools.

Go to https://ai.google.dev/aistudio to get the Gemini API key for free.

Create a .env file in the root of your project and store your API key:

GEMINI_API_KEY=[YOUR API KEY]

Step 4: Create server-side function to handle POST Requests

Install the Google AI JavaScript SDK enables you to use Google's generative AI models. Make sure you are in your project's root directory and run the following command in your terminal:

npm install @google/generative-ai

In Next.js app router, you can define custom route handlers in route.js file inside the app director. For example the file app/api/generate/route.js maps to /api/generate route.

Let's create a function to handle POST requests in /api/generate/route.js :

import { GoogleGenerativeAI } from '@google/generative-ai';
import { NextResponse } from 'next/server';

export async function POST(req, res) {
    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY)

    try {
        const model = genAI.getGenerativeModel({ model: "gemini-pro" });

        const data = await req.json()
        const prompt = data.body + ". Write jsx code and use tailwindcss for modern UI. Don't make any imports. Only output code.";

        const result = await model.generateContent(prompt);
        const response = await result.response;
        const code = await response.text()

        return NextResponse.json({code: code})
    } catch (error) {
        console.error(error)     
    }
}

Here, we create an instance of GoogleGenerativeAI from the API key we stored in the .env file, define a model that uses gemini-pro model.

We retrieve the JSON data from the request body and store it in a variable data. But we don't directly pass it as a prompt to the Gemini API. Instead, we add some "prompt injection", i.e. additional instruction for the AI model so that we can have control over the output we get.

Then we pass the prompt to Gemini using the generateContent() method. Finally we pass the generated output as a JSON response object.

Step 5: Create a client side function to handle POST request

First, we will define two state variables in our home page page.js :

const [prompt, setPrompt] = useState('');
const [code, setCode] = useState('');

Set an onChange listener to bind the state variable prompt to the input text:

<input
  className="peer h-full w-full outline-none bg-gray-100 text-sm text-gray-700 pl-4 pr-12"
  type="text"
  value={prompt}
  onChange={(e) => setPrompt(e.target.value)}
  placeholder="Enter a prompt..."
/>

Create a function called handleGenerate() above the return function:

const handleGenerate = async () => {
    try {
      const response = await fetch('/api/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ body: prompt })
      });

      const data = await response.json();
      if (response.ok) {
        setCode(data.code);

      } else {
        console.error(data.error);
      }
    } catch (error) {
      console.error('Error:', error);
    }
  };

This function initiates an HTTP POST request to the endpoint /api/generate using the fetch function. It sends the prompt as a request object.

Set an onClick listener in your send button to execute the handleGenerate function:

<div onClick={handleGenerate} className="absolute right-0 flex items-center justify-center h-full w-12 bg-blue-500 hover:bg-blue-600 text-white cursor-pointer">
    <p className='text-2xl'>➔</p>
</div>

We need to display the code which is stored in the code state variable somewhere:

<div className='bg-transparent rounded mt-7 p-2 flex justify-center'>
    {code}
</div>

Now test the application by running npm run dev and test the application by entering a prompt such as "create a pricing section for my website".

Step 6: Rendering Generated JSX Code

Now the final piece of the puzzle is rendering the generated code into user interface instead of just displaying the code. For that, we will use a library called html-react-parser .

Open a new terminal, change directory to the root of your project and run:

npm install html-react-parser

To use html-react-parser , in your page.js make the following import:

import parser from 'html-react-parser';

Now use the parse method to convert String into JSX code:

<div className='bg-transparent rounded mt-7 p-2 flex justify-center'>
    {parse(code)}
</div>

Step 7: Function to Copy code

You can write a function to copy code:

const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(code);
      alert("Code copied to clipboard")
    } catch (err) {
      console.error('Failed to copy: ', err)
    }
  }

It uses the navigator.clipboard.writeText method to write the text stored in the variable code to the system clipboard.

Wrapping Up

You can get the full code for this project at the github repo: https://github.com/avionmission/ui-generator

This series is specifically designed to help developers who are new to DevOps gain a solid understanding of all the essential Cloud Native tools and paradigms. Make sure to subscribe to our newsletter so you don't miss an episode. Let's Begin!

Why is Kubernetes?

Instead of starting with formal definitions of Kubernetes and "container orchestration", let's start with WHY you should care so that you understand the relevance of Kubernetes instead of rote-learning it as a concept. And it ties back to Docker.

In the last chapter we talked about Containerisation, docker, how to build a docker image, run your containerized application, and push it to Dockerhub.

It's important to recognize that managing containerized applications in production environments can present certain challenges.

One such challenge is the manual management of containers. Docker allows you to run containers individually, but as your application expands to multiple containers or multiple instances of the same container, coordinating and scaling them becomes increasingly cumbersome. This is where the need for a container orchestration platform like Kubernetes arises.

One of the key problems that Kubernetes solves is container scheduling and scaling. It intelligently schedules containers, ensuring efficient resource utilization and optimizing performance. Additionally, Kubernetes enables horizontal scaling by automatically adding or removing container instances based on workload demands, ensuring your application can handle varying levels of traffic.

Now you understand the relevance and importance of Kubernetes and container orchestration.

Before we talk about Kubernetes architecture and how it actually works, let's get you a taste of using Kubernetes. We will skip the boring installation part by using an online cloud-based Kubernetes playground!!

Let's start using Kubernetes!

Killercoda is a platform that provides a Kubernetes playground on the cloud. It allows users to spin up Kubernetes clusters and experiment with Kubernetes features and functionalities without the need for local installations or infrastructure setup.

After logging on to https://killercoda.com/playgrounds, select the Kubernetes 1.27 environment. Click 'Start' and you'll get a 60-minute session and a terminal to experiment with K8s.

By the way, Kubernetes is also called K8s (because there are 8 letters between K and s :P).

Let's deploy your first container using Kubernetes, enter the following command in the terminal:

kubectl run nginx --image=nginx

Congrats 🎉 You created your first deployment (aka pod) and ran it on a "cluster". Let me explain what just happened:

• kubectl is the cli tool used to interact with Kubernetes "clusters". A cluster is a group of nodes (physical or virtual machines) that work together to run a containerized application.

• run is a command in Kubectl used to create and run a deployment or a single instance of a containerized application called "Pod".

• In Kubernetes everything runs as a "Pod" and every pod has its own IP. It's important to note that Pods in Kubernetes can have multiple containers, and these containers share the same network namespace and IP address. Each container within the Pod is assigned a unique port, allowing them to receive traffic individually.

• nginx is the name we gave to this deployment/pod, but you can choose any name.

• --image=nginx specifies the container image to use for the deployment. In this example, we are using the Nginx Docker image, which is pulled from the docker hub.

If you want to see the list of all the pods running, use kubectl get pods :

But it shows very limited information about the pods. To see additional information such as node name, IP address, etc. use the --o wide flag. This can be useful for troubleshooting or understanding the pod distribution across nodes. Just run the command kubectl get pods -o wide :

Let's try something more interesting than just running a pod with a container and seeing the list of pods.

So we have a pod named nginx running, which uses the nginx webserver container. How do you access this container?

Run this command: kubectl exec -it nginx -- sh

• exec: This subcommand is used to execute a command in a container.

• -it: These flags stand for "interactive". It enable an interactive session with the container.

• -- sh: It specifies the command to be executed in the container, which in this case is sh (the shell).

By entering this command, you can access the shell environment of the "nginx" container. So now you can perform various operations within the container, such as running commands, inspecting the container's file system, and more.

Try running curl http://localhost while inside the interactive shell of the nginx container:

If the Nginx container is functioning correctly, you should see the HTML content of the "Welcome to nginx" page in the output of the curl command.

You can use the command exit to come out of interactive shell and back to the controlplane . But wait....what is a controlplane ???

Perfect. Now that you have some hands-on experience with using Kubernetes. We should get into how it actually works, how do pods function and what does the Architecture of Kubernetes look like? Let's go. 🚀

Kubernetes Architecture Explained

To understand the architecture of Kubernetes you need to understand how a "cluster" works. The cluster is the fundamental infrastructure required to run Kubernetes.

Clusters

A Kubernetes cluster consists of multiple nodes. Nodes are virtual or physical machines. These nodes work together to manage and run containerized applications.

Without a cluster, there is no Kubernetes infrastructure to manage containers and orchestrate application deployments. The cluster provides the necessary resources, networking, and coordination mechanisms for running and scaling containerized applications.

When we used Killercoda in the above walkthrough to experiment with Kubernetes functions, Killercoda provided us with a pre-configured cluster that was ready to use.

For local development and testing on your own machine, I'll show you how to use a tool called Minikube to set up a single-node Kubernetes cluster on your local machine.

A Kubernetes cluster has a very particular structure analogous to the Kubernetes Architecture. Let's break it down.

The Structure of a Cluster

When you set up a Kubernetes cluster two kinds of nodes (physical/virtual machines) are established: Control plane nodes and Worker nodes. In the above example, there is one Control plane node and 2 Worker nodes. Let's understand what they do and what each of their components do:

1. Control Plane Node

   The Control Plane Node hosts the components that are responsible for managing and controlling the cluster's overall state.

   They are not created or replicated automatically when new pods are created. Instead, they remain stable to provide a consistent management and control layer for the cluster.

   Let's understand the relevance of each component (refer to the above diagram):

   1. API Server: It serves as the central control point for the Kubernetes cluster. It exposes the Kubernetes API, receives and processes requests from clients, and interacts with the etcd database.

   2. etcd: It is a distributed key-value store that stores the cluster's configuration data and the state of the cluster. It provides a consistent and reliable data store for the control plane nodes.

   3. Scheduler: It is responsible for assigning newly created pods to nodes based on resource requirements, node availability, and scheduling policies.

   4. Controller Manager: It runs various controllers that monitor the cluster's state and perform actions to maintain the desired state. Examples include the Node Controller, ReplicaSet Controller, and Service Controller.

   5. CCM (Cloud Controller Manager): It is an optional component that integrates Kubernetes with cloud provider-specific features and functionalities. It manages cloud resources like load balancers, storage volumes, and network configurations.

2. Worker Nodes

   Worker nodes are the compute nodes in the Kubernetes cluster where application workloads run. They are responsible for executing containers and handling the actual computation.

   Worker nodes, on the other hand, can be added or removed from the cluster dynamically based on scaling requirements or hardware changes. When a new worker node is added, it joins the cluster and becomes available to run pods.

   The control plane components, including the API server and Scheduler, are responsible for scheduling pods to the available worker nodes.

   In our example we have one Controle plane node and two Worker nodes. Be every worker node has the same components:

   1. Kubelet: It is an agent running on each worker node that communicates with the control plane and manages the containers running on the node. It takes care of container lifecycle management, executing commands, and reporting the node's status to the control plane.

   2. Kube-proxy: It is responsible for network proxying and load balancing within the cluster. It handles the networking tasks required for communication between services, routing traffic, and managing network policies.

   3. pod 1, pod 2,..pod n: These represent the pods running on the worker node. A Pod, as mentioned earlier, is the smallest unit of deployment in Kubernetes, each pod can run multiple containers.

   4. Container-d: It is the container runtime used to manage container operations, such as container creation, execution, and termination.

Now you understand the entire architecture of a Kubernetes Cluster. The Control plane node components collectively manage and control the cluster, while worker nodes are responsible for handling container management and execution.

If you run the command kubectl get nodes in your Killercoda Kubernetes playground terminal. You can see there are two nodes running, one control-plane node and one worker node:

We have used Killercoda Playground to experiment with Kubernetes. But you can't rely on online playgrounds such as Killercoda to use Kubernetes because it only gives you 60 minute session time, after which all your work is lost.

Hence, you need to setup Kubernetes locally on your computer if you want experiment with and learn Kubernetes.

Minikube

For local development and testing, you can use a tools called Minikube. It allows you to set up a single-node Kubernetes cluster on your local machine. It provides a lightweight and convenient way to set up and experiment with Kubernetes without needing a full-scale production environment.

A "single-node cluster" means that the control plane node and the worker node are not separate, and all Kubernetes components, such as the API server, Scheduler, Controller Manager, etcd, kubelet, and kube-proxy, run on the same node.

In a single-node cluster, you can deploy and manage containers using Kubernetes concepts and APIs, just as you would in a multi-node cluster.

Minikube is an excellent option for learning Kubernetes. It provides a convenient and self-contained environment for understanding and experimenting with Kubernetes concepts, features, and workflows.

You can setup minikube on your local machine, based on your system using this guide from the minikube documentation. But before installing minkube, make sure you install kubectl using this guide.

Minikube provides a simplified way to set up a Kubernetes environment for development and learning purposes, and kubectl allows you to interact with the cluster and manage Kubernetes resources.

Working with Minikube

Once both kubectl and Minikube are installed, you can start using Minikube to create and manage your local Kubernetes cluster.

Run the command minikube start to create a local single-node Kubernetes cluster (make sure the Docker engine is running in your Docker Desktop app if you are a Windows or Mac user).

(Yes I'm using Windows in a DevOps tutorial, HARAAAAM, I know)

You can run the command kubectl get nodes, you can see that a node named minikube is running and it is assigned the role control-plane but in fact, it can also act as a worker node.

Now go ahead and ahead and deploy a Pod which uses the nginx container using kubectl, but WAIT!! we are not going to use the command kubectl run nginx --image=nginx which we used previously.

While the kubectl run command with the --image flag is convenient for quickly launching a Pod, using a Pod YAML file offers more control, flexibility, and understanding of the underlying Kubernetes configuration. It is particularly useful when working with more complex Pod configurations or when managing pods as part of larger deployments.

Here's how you can create a new Kubernetes Pod using a Pod YAML file:

1. Go to your project directory.

2. Create a file called pod.yaml , it can have any name.

3. Add this YAML code in pod.yaml :

    apiVersion: v1
    kind: Pod
    metadata:
        name: nginx-pod
        labels:
            app: nginx
            tier: dev
    spec:
        containers:
          - name: nginx-container
            image: nginx
   

4. This YAML file defines a Pod named "nginx-pod" with a single container named "nginx-container" based on the "nginx" image which it will pull from Dockerhub (if it doesn't find it locally).

5. Finally create the Pod using the kubectl create command which is used to create a Kubernetes resource defined in a YAML file:

    kubectl create -f pod.yaml
   

6. You can check if the pod is running by using the command kubectl get pods

Wrapping Up

In this chapter, we learned the fundamentals of Kubernetes. With the Killercoda online playground, we deployed our first container using Kubernetes and the kubectl command-line tool. We also understood the architecture of Kubernetes, consisting of control plane nodes and worker nodes.

You have setup Minikube, a tool for creating a local Kubernetes cluster. With this knowledge, you are ready to dive deeper into Kubernetes and DevOps. In a future chapter, we also dive into the Advanced concepts of Kubernets.

Remember, this is just the beginning of our DevOps journey! We will be covering a range of topics in this DevOps Essentials series. Never miss an episode, by subscribing to the newsletter. 👇

In this tutorial, I will guide you through setting up a Flask backend and demonstrate how you can effortlessly leverage the results of executed Python code within your React application. Say goodbye to limitations and unlock the full potential of Python in your web development endeavors!

Flask vs Django

Both are popular web frameworks for Python but have different approaches and use cases. Flask is a lightweight web framework for Python, designed to make web development quick and straightforward. Whether you're a beginner or an experienced developer, Flask provides an intuitive way to create powerful web applications, RESTful APIs, and even microservices.

When I was building my own project, I started by using Django, but I found it overwhelming considering my simple use case. Flask's simplicity is what I love about it, you can get started quickly and easily, especially for smaller projects or prototypes.

It provides a solid foundation for web development without imposing too many constraints or assumptions. With Flask, you have more freedom to choose and integrate only the components and libraries you need, making it easier to maintain and understand your codebase.

Let's dive into code, and actually show you how simple it is to set up a Flask backend for your react app!

Creating a Flask + React App (step by step)

Step 1: Setup your React frontend

• You can use Gatsby or Nextjs for your project. But to keep things simple for this example we will use the good old create react app :

    npx create-react-app react-flask-app
    cd react-flask-app
  

Step 2: Create a virtual environment

• We will place our backend API directory inside the same directory for this example so create a new folder api inside the project folder.

• Then we need to create a virtual environment. Why? Because creating a virtual environment before setting up a Flask API provides a controlled and isolated environment for your project, where you can install project-specific dependencies and manage the project's environment separately from the system-wide Python installation. It is a good practice that promotes maintainability, stability, and collaboration in your Flask API development workflow.

•     cd api
      python3 -m venv venv
  

• This command creates a virtual environment named "venv" using Python 3.

Step 3: Activate the virtual environment and install Flask, other libraries you need

•     . venv/bin/activate 
      pip install flask python-dotenv scikit-learn
  

• . venv/bin/activate command activates the virtual environment created earlier. The dot (.) at the beginning is a shorthand way to execute the script in the current shell session. The "venv/bin/activate" is the path to the activation script of the virtual environment. Activating the virtual environment sets up the environment variables and modifies the system's PATH to prioritize the Python interpreter and packages within the virtual environment.

• pip install flask python-dotenv scikit-learn command uses the package manager "pip" to install two Python packages: flask and python-dotenv. The python-dotenv is a package used for managing environment variables from a .env file.

• We also installed scikit-learn, let's try and use it in our application.

Step 4: Creating a Machine Learning endpoint using Python and Flask

• In the API directory create api.py and add this code:

    from sklearn import datasets
    from sklearn.model_selection import train_test_split
    from sklearn.neighbors import KNeighborsClassifier
  
    app = Flask(__name__)
  
    @app.route('/api/ml')
    def predict():
        # Load the iris dataset
        iris = datasets.load_iris()
        X = iris.data  # Features
        y = iris.target  # Target variable
  
        # Split the data into training and testing sets
        X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
  
        # Create a K-Nearest Neighbors classifier
        knn = KNeighborsClassifier(n_neighbors=3)
  
        # Train the classifier
        knn.fit(X_train, y_train)
  
        # Make predictions on the test set
        y_pred = knn.predict(X_test)
  
        # Print the accuracy of the model
        accuracy = knn.score(X_test, y_test)
  
        return{'accuracy': accuracy}
  

  • This code sets up a Flask API with /api/ml route which performs a machine learning prediction using scikit-learn.

  • Inside the /api/ml route, we have a simple ML program, the code loads the Iris dataset, splits it into training and testing sets, and trains a K-Nearest Neighbors classifier. It then makes predictions on the test set and calculates the accuracy of the model. Finally, it returns the accuracy as a JSON response.

Step 5: Using the Python code in our react frontend

• To run the Flask backend, use this command (while the virtual environment is active):

    flask run
  

• Now in a separate terminal run the react frontend with:

    npm start
  

• Let's see how we can get the accuracy of the ML model, that our flask backend returns in our react code:

      const [accuracy, setAccuracy] = useState(0);
  
      useEffect(() => {
        fetch("/api/ml").then(res => res.json()).then(data => { setAccuracy(data.accuracy) });
      }, [])
  

• This code snippet sets up a state variable accuracy with an initial value of 0 using useState hook. It uses the useEffect hook to make an API request to /api/ml when the component mounts.

• The response from the Flask API is parsed as JSON, and the accuracy value is extracted and stored in the accuracy state variable using the setAccuracy function. This triggers the update of the accuracy value. You can use this accuracy value in your react app, perhaps inside a <p> tag to display it.

• That's it now you can write any kind of Python code, execute it in the backend, retrieve the code and use it in your React frontend!

Important

• In the package.json file in your project folder, add this:

    "proxy": "http://127.0.0.1:5000"
  

• Why do we need to add this? Due to security restrictions known as the Same-Origin Policy, the React app running on one port (e.g., 3000) may not be able to directly make API requests to a different port (e.g., 5000) where your Flask API is running. By specifying "proxy": "http://127.0.0.1:5000" in the package.json file, you are telling the development server to proxy API requests that cannot be handled by the React app to the specified URL.

• Add venv in to your .gitignore file. Ignoring the venv folder helps maintain project reproducibility. By allowing each developer to create their own virtual environment, you ensure that everyone is working with the same set of dependencies.

• It is also a good practice because excluding the venv folder from version control helps protect sensitive information that might be stored within the environment, such as API keys, access tokens, or database credentials.

Conclusion

In your Flask backend, you can write any kind of Python code and create routes and endpoints to handle specific functionalities. By defining these routes and endpoints, you can execute the corresponding Python code and retrieve the results as JSON data.

To integrate this data into your React app, you can use the fetch API or similar methods to make requests to these endpoints and receive the JSON data in your React app. This allows you to utilize the data retrieved from the Flask backend within your React app for further processing or display.

Follow me on Twitter for more tips & tricks, and app development content updates.

👨‍💻 If you are looking to hire someone to help you with your React + Flask app, look no further ;) DM me on Twitter or check out https://avionmission.com

This series is specifically designed to help students and developers who are new to DevOps gain a solid understanding of all the essential Cloud Native tools.

Throughout this series, I plan to cover everything you need to learn to master DevOps, from the basics of Docker & Kubernetes to more advanced topics like CI/CD, Service Mesh, Infrastructure Monitoring, and more. Make sure to subscribe to our newsletter so you don't miss an episode. Let's Begin!

The Story of Docker

Instead of starting with a definition of Docker, let's start with understanding what problems led to developers creating Docker. What problem did it solve?

In the early days of software development, building and running applications on different computers was a major challenge. Developers would often encounter issues with compatibility and system dependencies, which would take hours, if not days, to resolve. Moreover, setting up the servers and computers that hosted the applications was a tedious and time-consuming process.

Before the advent of Docker and containerization, when developers worked together, they often struggled and had frustration related to dependency and environment conflicts.

However, the advent of containerization technology has revolutionized the way we build and run applications. Docker, in particular, has become the go-to tool for developers and IT professionals who want to simplify and streamline the application deployment process.

So, what is Docker, and how does it work? In simple terms, Docker is a tool that allows developers to run their applications in an isolated environment known as a "container." A container is essentially a lightweight, portable package that contains everything needed to run an application, including the code, runtime, system tools, libraries, and dependencies.

With Docker, developers can create a container that can run on any computer, regardless of the underlying operating system or hardware. This solves the problem of the infamous phrase "but it's working on my computer," which developers often encounter when collaborating on projects. Docker ensures that everyone is working in the same environment, regardless of their local setup.

Difference between Container and Image

You might notice me using the words "container" and "image" interchangeably but the two are different. Beginners often get confused between the two so it's important to understand the difference.

An image is essentially a read-only template that contains the instructions for creating a Docker container. It is a snapshot of a Docker container that includes the application code, libraries, dependencies, and any other files or configurations required to run the application.

On the other hand, a container is a runnable instance of an image that can be launched and stopped. When you start a container, Docker creates a writable layer on top of the image that allows you to make changes to the container without affecting the image itself. This writable layer is also deleted when the container is stopped or removed.

In summary, an image is a static snapshot of an application and its dependencies, while a container is a dynamic, running instance of that image.

The Docker Architecture

Now that you understand what problem Docker solves and what it basically does, we'll get into the specifics. Let's talk about the different components and terms related to the Docker Architecture:

1. Runtime: The runtime is the environment where the application runs, including the operating system, libraries, and dependencies.

2. Docker Engine (daemon): The Docker engine handles tasks such as creating, starting, stopping, and removing containers, as well as managing the storage and networking required for the containers.

3. Orchestration: Orchestration refers to the process of managing multiple Docker containers as a group, which can be achieved using tools like Kubernetes and Docker Swarm.

4. Docker client: The Docker client is the primary way that users interact with Docker. It accepts commands from users and communicates with the Docker daemon to execute those commands.

5. Docker host: The Docker host is the physical or virtual machine where the Docker daemon runs. It is responsible for running containers and managing their resources.

6. Docker registry: A Docker registry is a central repository where Docker images are stored and distributed. The most commonly used registry is Docker Hub, which is a public registry that anyone can use to store and share their Docker images. However, organizations can also set up their own private registry for added security.

Installing Docker

To use Docker on different operating systems, developers need to install Docker Desktop on Windows or Mac, while Linux users can run Docker as it is. Once Docker is installed, developers can use a variety of commands to build and manage containers.

Once you have docker installed, you should be able to use the docker command, check the version of docker installed in your system using docker -v

Let's start by running your very first docker image by running:

docker run -t hello-world

When you run the docker run -t hello-world command:

1. Docker first checks if the hello-world image exists on your local machine.

2. If the image does not exist locally, Docker will download it from the Docker Hub registry.

3. Once the image is available, Docker creates a container from the image and then starts the container.

4. In this case, the hello-world container simply prints a message to the console, indicating that the Docker installation is working properly.

Building your own Container!

Now I will teach you how you can build your own container using Docker. For this example, we will use one of my open-source applications. You can go to this link and clone the app if you want to follow along:

1. The first step to building your Docker image is to write a Dockerfile. A Dockerfile is a text file that contains instructions on how to build your Docker image. You can simply name it Dockerfile (without any file extension) and store it in the root folder of your app.

2. Here's the code for the docker file of my application:

    # This Dockerfile builds the React client and API together
   
    # Build step #1: build the react front end
    FROM node:14-alpine as build-step
    WORKDIR /app 
    ENV PATH /app/node_modules/.bin:$PATH
    COPY package.json package-lock.json ./
    COPY ./src ./src 
    COPY ./public ./public
    RUN npm install 
    RUN npm run build  
   
    # Build step #2: build the API with the client as static files
    FROM python:3.10
    WORKDIR /app
    COPY --from=build-step /app/build ./build
   
    RUN mkdir ./api
    COPY api/requirements.txt api/api.py api/.flaskenv ./api/
    RUN pip install -r ./api/requirements.txt
    ENV FLASK_ENV production
   
    EXPOSE 3000
    WORKDIR /app/api
    CMD ["gunicorn", "-b", ":3000", "api:app"]
   

Explanation of the Dockerfile

It's better to understand how to write a Dockerfile by example. Keep in mind that the Dockerfile is simply the instructions for how to build and run your app in the docker image/container.

The above Dockerfile has two build steps and each step is defined by a FROM statement that sets the base image for that step.

The first build step starts by using the node:14-alpine base image to build the React front-end. It sets the working directory to /app and adds the node_modules/.bin directory to the system's PATH. The package.json and package-lock.json files are copied to the working directory, and the npm install command is run to install the necessary dependencies. Then, the src and public directories are copied to the working directory, and the npm run build command is run to build the React app.

The second build step starts with the python:3.10 base image, and it copies the built React app from the previous build step by using the --from flag. Then, it creates a new directory called api and copies the requirements.txt, api.py, and .flaskenv files to it. After that, it installs the necessary Python packages by running pip install -r ./api/requirements.txt and setting the Flask environment variable to production. Finally, it exposes port 3000, sets the working directory /app/api, and starts the API by running the CMD command gunicorn -b :3000 api:app.

The docker will differ from project to project depending what are the steps and resources required to build and run the app.

Now, back to building our docker image...

1. Build the Docker image: Once you have your Dockerfile, you can use the docker build command to build your Docker image. In our case the Dockerfile is in the current directory, you can run the following command which follows the template docker build -t username/myimage:

    docker build -t avionmission/smartfeedai
   

2. That's it! this command will build the Docker image and tag it with username/myimage which in my case is avionmission/smartfeedai . After you have built your Docker image, you can test it by running a container based on the image. You can use the docker run command to start a container. For example:

    docker run -it 3000:3000 avionmission/smartfeedai
   

   This command creates and starts a container based on the avionmission/smartfeedai image, opens an interactive session with the container, and maps the port 3000 in the container to the port 3000 on the host machine. You can use the app at localhost:3000 on your computer.

Pushing your Docker Image to DockerHub

Dockerhub is the most commonly used Docker registry (a central repository where Docker images are stored and distributed). Once your docker image is uploaded to DockerHub, anyone from anywhere in the world can run your docker image in their system. Here are the steps to push your docker image to DockerHub:

1. First, ensure that you are logged in to Docker Hub on your local machine using the docker login command. You will need to provide your Docker Hub username and password to authenticate.

    docker login
   

2. Next, navigate to the directory where your Dockerfile and any necessary files are located.

    cd /path/to/your/dockerfile
   

3. You can verify that your image was created in the previous step by running the docker images command.

    docker images
   

4. Finally, push your image to Docker Hub using the docker push command using the template docker push username/myimage:

    docker push avionmission/smartfeedai
   

Conclusion

Congratulations!! 🎉🎉You've learned how to write a dockerfile, build a docker image, run your containerized application, and push it to Dockerhub.

I hope this guide has been helpful in understanding the fundamentals of Docker and how it can be used to streamline the deployment process.

Follow me on Twitter @avionmission for more updates and insights into the world of DevOps. Let's continue on this exciting journey of mastering DevOps together!

Remember, this is just the beginning of our DevOps journey! We will be covering a range of topics in this DevOps Essentials series. Don't miss an episode by subscribing to the newsletter. 👇

When I discovered MindsDB on Twitter, I knew it was the solution my app needed. However, by the time I became aware of MindsDB and MindsDB hackathon, only 7 days remained until the end of the hackathon. I decided to scrap my Flask backend completely and use Express.js with MindsDB instead (even though I was unfamiliar with it at the time). It was really a race against time for me, but I got to learn so much and I'm excited to share my story, product, and learnings with all of you! 🚀

📖 The App Idea (and Future of Content)

There is a lot of fear-mongering on Twitter that the rise of generative AI will lead to a decline in human-generated content. I don't think so. On the contrary, I see AI as an opportunity to revolutionize the way we consume content.

Introducing SmartFeed.ai 🚀, the ultimate solution to help you browse through online content efficiently! Here's a quick Demo video:

With the MVP version of SmartFeed.ai, you can easily generate short summaries of articles from just a URL using the powerful MindsDB NLP engine.

The MVP has minimal features due to the time constraints of the hackathon but the potential and vision of SmartFeedai are immense. AI has the power to change and improve the way people consume content, and SmartFeedai is at the forefront of this revolution. As SmartFeedai continues to evolve, I believe it will become an essential tool for anyone who wants to stay informed and up-to-date in today's fast-paced world.

🔩 How does it work?

• SmartFeed.ai uses MindsDB for GPT-4 model that can perform NLP tasks. MindsDB makes it easy for developers of all skill levels to integrate AI into their applications by automating and integrating top machine learning frameworks (including GPT-4) into the data stack as "AI Tables". This innovative approach allows you to train and use models directly with your database, speeding up the development process.

• For the backend API, I chose to use Express.js, a flexible and minimalistic web framework for Node.js. It allowed me to quickly and easily set up the endpoints I needed to make requests and retrieve data from the server.

• To extract data from web pages, I turned to Cheerio, a fast and efficient library for web scraping in Node.js. With Cheerio, I was able to parse the HTML content of websites and extract the specific data I needed, which was essential for my project's functionality.

• I used React for the frontend of my project due to its component-based architecture and virtual DOM, which allowed for a dynamic and responsive user interface.

• Finally, I used mindsdb-js-sdk to access MindsDB Cloud's GPT-4 model. MindsDB Cloud is an excellent platform for training and using machine learning models without the need for extensive infrastructure setup. The SDK allowed me to connect to the MindsDB Cloud API and use the models for my project's predictions.

💻 How to Use SmartFeed.ai?

1. Create a MindsDB cloud account - you can get your free account here. It's going to allow us to train a Machine Learning model in minutes!!

2. We will use the MindsDB cloud editor to create a GPT-4 model that can take long text, understand it and provide a summary based on the given prompt. Here are the SQL commands you have to enter to create the model which will use:

    CREATE MODEL text_summary
    PREDICT text_summary
    USING
        engine = 'openai',
        model_name = 'gpt-4',
        input_column = 'text_long',
        max_tokens = 200,
        prompt_template = 'Summarize the following text, but only enough to inspire intrigue. text:{{text_long}}';
   

   Notice how I have used the prompt in the prompt_template property, feel free to use your own prompts based on what kind of response you want from your AI reading assistant ;)

3. After pasting the above code into the MindsDB cloud editor, click > Run to execute the query and wait for the model to be trained and ready to use.

   

4. Clone the Smartfeedai repository:

    git clone https://github.com/avionmission/
   

5. To run the backend, run this command (use the email and password of your MindsDB cloud account):

    cd smartfeedai/api
    MINDSDB_USER=<email> MINDSDB_PASS=<password> npm start
   

6. To run the React Frontend, run:

    cd smartfeedai
    npm start
   

7. That's it! 🎉🎉 Now you can use SmartFeed.ai on your localhost port 3000.

🏂Conclusion

In conclusion, SmartFeed.ai is a solution that has the potential to change the way we consume online content. This was made possible with the power of MindsDB and its integration of top machine learning frameworks, such as GPT-4, making it accessible to developers of all skill levels. As SmartFeed.ai continues to evolve, it has the potential to become an essential tool for anyone who wants to stay informed and up-to-date in today's fast-paced world.

I am happy about the partnership between Hashnode and MindsDB that brought about this incredible hackathon. The event was a great opportunity to learn about machine learning tech and expand my skill set.

I highly recommend checking out their official documentation and joining their Slack community. Start building your machine learning projects today by creating a free account on MindsDB Cloud and taking advantage of the incredible tools available to you. Thank you again for this opportunity! 🚀🙌🏼🤖

Our background in front-end and mobile development made sure that we knew absolutely nothing about Docker let alone Kubernetes, getting into this hackathon, but we learned. Thanks to Napptive, you don't really need to know a lot about Kubernetes to start deploying your application (more on this later :).

In this blog post, I will share everything we learned: the use case for OAM and Napptive platform, and how we built an AI-powered React app for the hackathon and deployed it using Napptive. If you're interested in learning about backend development, DevOps, and Ai, this post is for you!

The Project Idea: AI in the Backend, React in the Frontend

Are you worried that artificial intelligence will lead to the decline of blogging and written content by humans? Many people share that concern. However, my teammate Siraj Alam and I have a different perspective. We believe that AI can enhance the reading experience for people who like online, making it more efficient and enjoyable.

To showcase this, we built SmartFeedAi, an AI-powered React app that provides users with summaries of articles and blogs. Our MVP version had limited features due to the time constraints of the hackathon, but we see huge potential for the full-fledged version.

During the hackathon, we spent a lot of time figuring out the algorithm for summarizing text using the NLP libraries of Python. We chose React as the front end and Python with Flask as the backend because Python has a lot of machine-learning libraries. While we initially tried using PyTorch for the text summarization task, it proved to be too heavy for the backend.

Ultimately, we used NLTK and old-school NLP algorithms to summarize the text, which made our app much faster. We also want to emphasize that AI is not just machine learning.

Tokenization was one of the key concepts of NLP we learned and used in the project to build the algorithm for summarising text. It involves breaking text into smaller pieces called tokens. These tokens can be words, phrases, or sentences. Tokenization is an important part of NLP and is used in many AI applications.

We also wanted to make it clear that AI is not just machine learning. Many other techniques and algorithms fall under the umbrella of AI. Our project was a great example of how AI can be used to solve real-world problems, even without using machine learning.

But wait, what is OAM again?

Deploying an application in Kubernetes can be a challenge for developers without much experience in DevOps. This is where Napptive comes in. Napptive helps developers deploy their applications in Kubernetes without requiring a heavy knowledge of Kubernetes. It does that by using something called OAM.

OAM, or the Open Application Model, is a set of guidelines that simplifies the process of building and deploying cloud-based applications. It provides developers with standard building blocks like components, parameters, and traits, which makes it easier to create and manage cloud-based applications that work on any platform. With OAM, developers can focus on building the application without worrying about the underlying infrastructure. It will all make sense once you open Napptive Playground and start deploying your application.

Great! Now that you have a basic understanding of what OAM is and how Napptive can help you deploy your application, let's get started. But before we jump into the step-by-step process of deploying your application using Napptive, there is one crucial step that you must complete: Dockerize your application.

If you're new to the world of DevOps, you might not be familiar with Docker. Dockerization is the process of packaging an application and its dependencies into a single container, which can then be easily deployed to any environment that supports Docker. Don't know how to Dockerize your app? Neither did I 2 days ago! Go learn and come back to this post.

Dockerizing your application is the first step in deploying it in a cloud-native environment. Once you have Dockerized your application, you'll see how easy it is to define your application components using OAM and deploy your application on Napptive. So, let's get started!

How to Deploy your Docker Image on Napptive Playground: Step by Step

Once you create an account and sign in to Napptive Playground, you get a free environment with 1 CPU core, 4GB Ram, and 1GB memory which you can use to deploy your applications.

Here's how you can deploy your docker image to Napptive Playground:

Step 1: Go to the Catalog section in the navigation area on the left of the screen.

Step 2: Click on Upload App and fill in the details.

Step 3: Click on "Select files to load" and this is now you need three files

1) A YAML file that describes OAM specifications, here's ours:

apiVersion: core.oam.dev/v1beta1
kind: Application
metadata:
  name: smartfeedai
  description: "An Ai powered React App for readers."
spec:
  # List of components that are part of the application.
  components:
    - name: app
      type: webservice
      properties:
        image: avionmission/smartfeedai:latest
        cpu: "200m"
        memory: "256Mi"
        ports:
          - port: 3000
            exposes: true
        env:
          - name: LAUNCHER_TARGET_REPO
            value: https://github.com/avionmission/smartfeedai
      traits:
      - type: napptive-ingress
        properties:
          port: 3000
          path: /

2) A README.md that describes what your app does.

3) An app-name.metadata.yaml that defines things like your logo which will appear in the Napptive Playground catalog and more. Here's what ours look like:

apiVersion: core.napptive.com/v1alpha1
kind: ApplicationMetadata
name: "SmartFeedAi"
version: "latest"
description: An ai powered react app for readers
keywords:
  - "smartfeedai"
  - "nlp"
license: "SSPLv1"
url: "https://github.com/avionmission/smartfeedai"
doc: "https://github.com/avionmission/smartfeedai"
logo:
  # Do not hotlink images without permission :)
  - src: "https://raw.githubusercontent.com/avionmission/blog/a76df3f27a343556a6f4028a38d1da005617fcf8/assets/smartfeedicon.svg"
    type: "image/png"
    size: "120x120"

Step 4: Click on Deploy! and go to the deployment area. You will see there's a log section that shows that your app is running and an endpoint URL to access your deployed app.

Step 5: Done! 🎉 Congratulations you have deployed your app on the Napptive platform.

In this post, we'll learn how to build different types of navigation menu that enhances the user experience, and how to build each one of them using React Native and react-navigations library.

Let's start with simple navigation from one screen to another.

1. Simple Navigation (using Stack Navigator)

React Navigation is a popular library used for implementing navigation in React Native apps. It provides a flexible and easy-to-use API for managing the navigation hierarchy between screens in your app.

"The Stack Navigator" allows users to move between screens by pushing and popping them onto a stack. When a new screen is pushed onto the stack, it appears on top of the previous screen. When a screen is popped from the stack, it is removed from the navigation hierarchy, and the previous screen is displayed.

Let's use the Stack Navigator to create a navigation flow between two screens in a React Native app. We will define two screens, Screen1 and Screen2, and use the Stack Navigator to allow users to move between them.

Step 1: Set Up a New React Native Project

First, create a new React Native project using the following command (this is the command I prefer to use):

npx create-expo-app NavigationExamples

This will create a new project called NavigationExample in your current directory.

Step 2: Install Dependencies.

Next, navigate to the project directory and install the required dependencies using the following commands:

cd NavigationExample npm install @react-navigation/native npm install @react-navigation/native-stack npm install react-native-screens react-native-safe-area-context

Step 3: Define your Screens

In order to navigate between screens, we need to create two screen components, so let's create two javascript files Screen1.js and Screen2.js in \screens directory:

Screen1.js :

import {StyleSheet, View, Text, Button } from  'react-native'
import  React  from  'react'

const  Screen1 = ({navigation}) => {
    return (
    <View  style={styles.container}>
    <Text>Screen1</Text>
    <Button  title="Go to Screen 2"  onPress={() =>  navigation.navigate('Screen2')}/>
    </View>
    )
} 

const  styles = StyleSheet.create({
    container: {
    flex:  1,
    backgroundColor:  '#fff',
    alignItems:  'center',
    justifyContent:  'center',
    },
});

export  default  Screen1;

Screen2.js

import {StyleSheet, View, Text, Button } from  'react-native'
import  React  from  'react'

const  Screen2 = ({navigation}) => {
    return (
    <View  style={styles.container}>
    <Text>Screen1</Text>
    <Button  title="Go to Screen 1"  onPress={() =>  navigation.navigate('Screen1')}/>
    </View>
    )
} 

const  styles = StyleSheet.create({
    container: {
    flex:  1,
    backgroundColor:  '#fff',
    alignItems:  'center',
    justifyContent:  'center',
    },
});

export  default  Screen2;

You'll notice we are passing the prop navigation to both Screen1 and Screen2 . React Navigation provides the navigation prop to screens. It contains methods and properties that allow us to navigate to other screens, customize the header, and pass parameters between screens. In the code example provided, we passed the navigation prop to the Screen1 component so that we could use the navigation.navigate method to move to the Screen2 component when the button is pressed.

Step 4: Create a Stack Navigator

To enable navigation between the screens, we need to create a Stack Navigator. A Stack Navigator is a type of navigator that allows users to move between screens by pushing and popping them on a stack. App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet } from 'react-native';
import Screen1 from './screens/Screen1';
import Screen2 from './screens/Screen2';

export default function App() {

  const Stack = createNativeStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Screen1" component={Screen1}/>
        <Stack.Screen name="Screen2" component={Screen2}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

In the above code, we import the createStackNavigator function from React Navigation and use it to create a Stack Navigator. We then define two screens using the Stack.Screen component, giving each screen a unique name and component.

You can run the app using the command npx expo start and it should work perfectly.

2. Navigation Drawer in React Native

A classic type of menu that slides in from the left or right side of the screen when users tap on a menu icon. This type of menu is useful for apps with a large number of sections or features.

Step 1: Install Dependencies

To use a navigation drawer, we need to install the @react-navigation/drawer package. Run the following command to install it:

npm install @react-navigation/drawer

Step 2: Define Your Screens

We will use the same two screens as before but remove the buttons on each screen.

Step 3: Setting up Drawer Navigator

We will import createDrawerNavigator from @react-navigation/drawer and used it to create the drawer navigator:

App.js

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { StyleSheet } from 'react-native';
import Screen1 from './screens/Screen1';
import Screen2 from './screens/Screen2';

export default function App() {

  const Drawer = createDrawerNavigator();

  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name='Screen1' component={Screen1}/>
        <Drawer.Screen name='Screen2' component={Screen2}/>  
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

If you are getting any errors, it is possible you're missing some dependencies of React Navigation which you can install by running:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

3. Bottom Navigation Bar

A modern type of menu typically appears at the bottom of the screen and displays multiple tabs that users can switch between. This type of menu is ideal for apps with distinct sections or workflows.

Let's start by installing dependencies:

npm install @react-navigations/bottom-tabs

To implement a bottom navigation bar in React Native, we will define a createBottomTabNavigator() object and use to handle navigation like this:

App.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { StyleSheet } from 'react-native';
import Screen1 from './screens/Screen1';
import Screen2 from './screens/Screen2';
import {Ionicons} from '@expo/vector-icons'

export default function App() {

  const Tab = createBottomTabNavigator();

  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name='Screen1' component={Screen1}/>
        <Tab.Screen name='Screen2' component={Screen2}/>  
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

When you run the app, you will notice that we have a bottom navigation bar which we can use to switch between Screen1 and Screen2, but we have not se icons for those options. We can do that using screenOptions property of Tab.Navigator in this way:

First, you need to import:

import {Ionicons} from  '@expo/vector-icons'

And then,

<Tab.Navigator
  screenOptions={({route}) => ({
    tabBarIcon: ({focused, color, size}) => {
      let iconName;

      if (route.name === 'Screen1') {
        iconName = focused ? 'home' : 'home-outline'
      } else if (route.name === 'Screen2') {
        iconName = focused ? 'settings' : 'settings-outline'
      }

      return <Ionicons name={iconName} size={size} color={color}/>
    },
  })}
  >
  <Tab.Screen name='Screen1' component={Screen1}/>
  <Tab.Screen name='Screen2' component={Screen2}/>  
</Tab.Navigator>

The route the parameter is passed to the screenOptions function to determine which screen is currently active. The focused, color, and size parameters are used to style the icon based on its state.

The if statements are used to determine which icon to display based on the name of the route. If the route name is Screen1, the home icon is displayed if the tab is focused and the home-outline icon is displayed if the tab is not focused. If the route name is Screen2, the settings icon is displayed if the tab is focused and the settings-outline icon is displayed if the tab is not focused.

Finally, the Ionicons component is used to render the selected icon with the appropriate size and color.

With this knowledge, you'll be able to create navigation menus that are flexible, easy to use, and intuitive for your users. We hope that this article has provided you with the tools you need to create great navigation menus for your React Native apps.

If you have any questions or comments about this article, please leave them in the comment section below. And don't forget to follow me on Twitter for more tips and tutorials on React Native development. Happy coding! 👨‍💻

If you want me to turn your app idea into a fully functional MVP using React Native, don't hesitate to reach out! Contact me at avionmission@gmail.com to discuss how I can help you bring your vision to life.

So, I'm starting a #100DaysOfJetpackCompose on Twitter today to document my learnings. Here's a blog post version of the Day 1 thread:

Let's Go 🚀🚀

Composable Functions

In Jetpack Compose instead of defining the UI of an Activity in a separate layout file, you define the app's UI programmatically using "composable functions".

Composables are parts of UI that are defined separately and can be re-used effectively.

A composable function is a function with an @Composable annotation before it, like in this simple compose activity:

/*..imports..*/

class MainActivity : ComposeActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{
            Header("Android")
        }
    }
}

@Composables
fun Header(name: String) {
    Text(text = "Hello $name!")
}

Previews

To see a preview of your UI without running the app, create a separate composable with @Preview annotation, like this:

/*.. imports. .*/
class MainActivity : ComponentAct ivity() {
    override fun onCreate( saved InstanceState: Bundle?) {
        super.onCreate( savedInstanceState)
        setContent {
            ComposeBasicsTheme {
                Surface( color = MaterialTheme.colors.background) {
                        Header("Android")
                }
           }
        }
    }
}

@Composable
fun Header( name: String) {
    Text(text = "Hello $name! ")
}

@Preview( fontScale = 1.5f)
@Preview( showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeBasicsTheme {
    Header("Android")
}

The @Preview annotation allows you to check how your UI looks with changes in settings such as font scale and background as seen in the above example.

And since I used @Preview with different parameters, we can see two different previews:

You can create as many Preview functions as you want to see how your UI looks with different properties.

ConstraintLayout is gone!

This is the new way to organize your UI elements is using Rows s and Column s like this:

That's it for today. I'll be back again tomorrow with more notes as I learn Compose. You can follow me on Twitter for updates. Till then, Keep building the Future!

I created a simple rock-paper-scissor app with python using the kivy and kivymd packages (you can check out it's code here). And then I went on a frustating journey of trying to convert it into an installable android app that doesn't crash as soon as you open it. I did it. In this post I'll simplify the process for you and how to make sure your app dose not crash.

If you have no experience with Kivy or Kivymd, you can get started with this tutorial which teaches you to create a simple application in 9 minutes. But even though the apps that you create using python and kivymd look great and have material design. They are still in .py format. So how do you convert your python programs into installable .apk files?

This is where the buildozer and Google Collab comes in. Buildozer is a tool for packaging mobiles application easily. It automates the entire build process and downloads the prerequisites like python-for-android, Android SDK, NDK, etc. And Google Colaboratory, or “Colab” for short, allows you to write and execute any python code through the browser. It requires no setup to use and provides free access to computing resources including GPUs from Google.

Here is a simple step-by-step process for converting .py to .apk

STEP 1: Use these pre-written commands

Open this colab notebook, and you will find some prewritten commands. But don't execute any command yet! Come back here after checking it out and wait for my commands ;-)

Start executing the commands one by one until you reach this command !buildozer init, don't execute it yet.

STEP 2: Import your .py file (and assets you used in your app)

After you import your .py file, rename it to main.py otherwise buildozer won't recognize which python program it has to work on.

STEP 3: Run the "!buildozer" init command

When you run the !buildozer init command, it will generate a buildozer.spec file, open it by double clicking on it. You can edit the contents of this file to change the package name of your app, application name, app icon, splash screen image, your baby's diapers and much more. Skim through it, see what changes you can make. But don't execute the !buildozer -v android debug command yet!!

STEP 4: Making sure your app doesn't crash!!

I did all this and then I executed the next command, which is !buildozer -v android debug. It generated a .apk file, I happily transfered it to my phone and installed. But when I opened it, it crash. I tried debugging my app, I ventured into the deep forests of Stackoverflow and Quora discussions of people who were having similar problems, but nothing worked. It took me two days to figure it out. Here's how I solved the problem.

In the contents of buildozer.spec file there is a requirements section. And along with python3,kivy and kivymd you have to add pillow to the requirements. Okay, now, What the hell is pillow!? I don't remember using any package named "pillow" in my code. Well, turns out, pillow or PIL (Python Image Library) is python package which kivymd depends on for stuff. So this is how the requirements section of your buildozer.spec should look like (bottom image):

Don't forget to save your buildozer.spec file after making changes.

STEP 5: Execute "!buildozer -v android debug"

Run the !buildozer -v android debug and wait. It will probably take more than 15 minutes. It will ask you for confirmation by entering "y" one or two times in the middle of the process, so look out for that.

Once it's done all the processing, you'll see a new folder has appeared on the left hand side by the name bin. Inside the bin you will find a .apk file, transfer it in your phone. Install it, test it, and hopefully it doesn't crash.