How to build an AI-powered mobile app

Do not index

Hello there!! 👋

Context building 🏔

🧱 Project: Build an AI powered mobile app

⏲️ Estimated time: 30 mins

🛠️ Tools: Glide

Your project today is to create a mobile app using Glide. You’ll take a step into Glide’s OpenAI integration to inject some Artificial Intelligence into your app. This means you will need to have an openai.com account to connect to. When you’re done today, you’ll have your own recipe-generator app find a delicious meal containing something you crave or to make use of a spare ingredient. Happy app building! 🚀

By the end of this lesson, you will be able to:

Create an app in Glide

Generate an openai.com API key

Connect you app to openai.com

Get, store & display an AI response

Build a User Interface

Let's Prep 🥗

Get ready to build!

To make your life easier when you build, it’s good to get some practical stuff out the way first. Follow these steps so you’re ready to build:

Sign up for an OpenAI account. Go to https://openai.com/ and click the Get started button. Generate an OpenAI API key by following this short step by step.

🚨 Be sure to save your OpenAI API key somewhere safe. OpenAI will only show it to you once.

Time to cook 👩‍🍳

Build the foundations of your app

Before starting this section, log in to your Glide account have you OpenAI API Key ready to use

Remember to handle your OpenAI API key like a password, anyone who has it can access your account.

The first part of this build involves connecting your app to OpenAI & organising the database. Glide will add some dummy data tables which you’ll delete so they don’t cause any confusion. Your database will be made up of 2 tables: Users & Recipes. The Users table stores values about your apps users. You don’t need to make any changes to this. The Recipes table is a repository for all the values you need to create a each recipe. It contains 3 columns:

Main ingredient. The user-input value to base a recipe on

Prompt. The instructions you send to the AI. It includes the Main ingredient value

AI Recipe. The AI response which will be a recipe.

Follow this step by step guide.

Add some data automation

This next section adds functionality to your app using Glide Actions. This is a powerful feature of the tool which adds multiple-step events to your app.

In order to get recipes, your app sends a request to OpenAI’s API. The request contains an instruction (prompt) which says “Suggest a recipe containing {some ingredient}”. OpenAI takes some time to process the request and return a response. The Action you’ll build makes your app wait for the the OpenAI API to respond. It then shows a message to the user and navigates them to the recipe page. Whilst the app is waiting, a “loading” alert is shown to the user so they are aware something is happening & the hasn’t crashed! As a builder of apps, you should be considerate of details like these to ensure a positive experience for users.

Follow this step by step guide.

Build the User Interface and publish

Your app database has been setup, the OpenAI integration has been configured, & your Action is ready to use. It’s time to setup the screens your users will see and interact with. This is called the User Interface (UI). You navigate to Glide’s Layout tab to edit your app’s UI.

The Recipe form screen will give users the ability to input an ingredient and create a recipe. When a user click the button to create a recipe, the Action will be triggered too.

The Recipes screen displays all the recipes as a list. Click a single Item and you’ll be shown a screen with more details about the recipe.

The final stage is to click the Publish button and your app will be live, ready to use.

Follow this step by step guide.