How to create an app using AI?

ChatGPT, an Artificial Intelligence-powered platform from OpenAI has become incredibly popular worldwide.

Its impressive ability to comprehend and respond to questions has proven valuable in various fields, particularly in software development.

This guide provides deep insight about ChatGPT, its functions, and the ways it can be applied in software development.

After reading this guide, you will have the know-how to prompt ChatGPT effectively and leverage it for creating uncomplicated applications.

ChatGPT Overview

ChatGPT, also known as Generative Pre-trained Transformer, takes the form of a chatbot created by OpenAIusing artificial intelligence. It came out in Nov-2022, and immediately, gained immense popularity as one of the top AI-driven chat platforms.

While it was made to imitate human conversations, its capabilities are quite flexible. It’s capable of crafting and fixing computer codes, unraveling logical puzzles, sharing viewpoints, and even composing poems. These capabilities makes it handy across various sectors including app development, finance, research, education, and journalism.

ChatGPT was made to pass through extensive training that involves supervised learning and unsupervised learning techniques.

With ChatGPT gaining widespread adoption, several other companies followed suit by introducing similar chat platforms. For instance, Google came out with Bard, Meta launched LLaMA, alongside other less popular AI-driven chatbots like Claude and Jasper.ai.

The Benefits of AI in Application Development?

Build Apps Faster

ChatGPT can really help speed up how you work on projects. It gives fast resolutions to challenges, suggests pieces of code, and answers technical questions. This makes your development process much smoother.

Documentation Generation

You can use ChatGPT to automatically create documentation. Just extract a code and give paste it in ChatGPT. This helps developer teams work faster and save the time that would have been used to write documentation by hand.

Excellent as a Virtual Assistant

ChatGPT is really good at understanding and using human language. This makes it perfect for virtual helpers or a customer support workers. A little while back, OpenAI also made the ChatGPT API available. Lots of tech companies like Instacart, Quizlet, and Snap Inc. are already using it.

Great for Learning

Another cool part about this AI Chat platform is that you can use it to learn. You may request that it helps you understand ideas, steps, and even convert a piece of code to another framework/language.

An Effective Debugger

You can use ChatGPT to fix your code errors. It looks at code, finds logical issues, and gives ideas for making it better. Also, you can ask ChatGPT to make long error messages shorter or explain mistakes in an easy way.

AI Limitations

Misconceptions

Sometimes, ChatGPT gives information that sounds right but is actually wrong or doesn’t make sense. This is something that often happens with large language models like ChatGPT, and the people who made it have acknowledged it. These mistakes can be a big issue, especially when folks are using ChatGPT to learn new things.

Prejudiced Responses

While teaching ChatGPT, OpenAI could choose which information to give it and which to avoid. This caused ChatGPT to have some unfair preferences. Also, OpenAI chose to stop certain content from being used.

Restricted Understanding

The version 3.5 of ChatGPT doesn’t know a lot. It only knows things until September 2021. Also, it can’t go online to look up new information. This means it’s not good for learning about the latest frameworks and programming languages.

What’s the Best Way to prompt ChatGPT?

Write prompts as if you’re talking to a human

Like I said earlier, ChatGPT is made to act like a person in conversations. You should leverage that feature when you ask ChatGPT things. Treat it like you’re talking to a real person..

Ask questions clearly and precisely

When you’re asking things to ChatGPT, make sure your questions are really clear and exact. If you need ChatGPT to make code, spell out the steps to follow and how to create a certain part of the code.

Also, if something is hard to explain, break down the prompt into multiple parts. Tip: Start or finish your questions with words that show what you want it to do (like “write,” “explain,” or “summarize”).

Keep Conversation in Context

Give some background information. But remember, don’t give too much info all at once – that can confuse ChatGPT. Focus on the important stuff and don’t add extra things that don’t matter.

Tip: Remember, conversations keep what’s being talked about. When the next question doesn’t align with the previous conversation, start another conversation.

Make Your Messages Look Neat and Organized

Make sure to use good spelling and grammar to get the best answers. Also, using “double quotes” and adequate spaces around certain parts of text like code or data can be really helpful.

Example:

Explain this code:

for (int i = 0; i < 10; i++) {
  System.out.println("Back4app rocks!");
}

Point out the errors that ChatGPT makes

Sometimes ChatGPT could make your code have problems or security issues. If that happens, tell ChatGPT about them and ask for a solution.

Tip: If you ask the same question again or a bit differently, you might get a better answer.

How to Build an Application with AI?

This part of the article explains making a movie watchlist app with React Native for the frontend and Back4app for the backend. Most of the code will come from ChatGPT.

The Requirements

Although ChatGPT will create most of the code, you still need:

• To know the basics of making mobile apps
• To have worked with JavaScript ES6
• To be familiar with React Native
• To have Android Studio. You will also need a program for building JS-based apps on your computer.

What is Back4app?

Back4app is an excellent tool called Backend as a Service (BaaS) that has a lot of useful things. It helps developers quickly make web and mobile apps without worrying about the backend, networks and servers.

Some important things on this platform are:

•          Login security

•          Doing things in real-time

•          Custom code that works on the cloud

•          Storing files and blockchain stuff

•          Sending notifications through pushes and emails

•          Getting info with GraphQL, REST & special tools

Back4app has a clear way to pay for what you use, which is good for any app. They also let you use a free part which is good for testing and making small apps. The platform offers:

• 25,000 API Requests
• 250 MB space for data
• 1 GB of data transfer
• 1 GB of space to store files

Project Introduction

We’re going to make a mobile app that’s like a list for movies you want to watch. People can add movies to the list and say if they watched them or not.

The part that works in the background will be done with Back4app. For the front part, we’ll use React Native (with Expo). As I said before, most of the code will come from ChatGPT.

Create a Back4app App

To start using Back4app, we have to make a new app. When you get to your dashboard after logging in, you’ll see a list of your apps. Click “Build new app” to begin making your app.

Choose “Backend as a Service (BaaS)” and give your app a special name. I’ll choose “back4app-chatgpt-app”. Then, pick “NoSQL” as the database, and finally, click “Create”.

Back4app will take a short while to get everything ready for your app, including the parts like the app setup, database, scaling when required, and keeping it safe.

When your app is set, you’ll be taken to your app’s dashboard.

Database

Now, we’re going to set up the database classes.

For our movie watchlist app, we just need a single class. We can call it “Movie”. When we make a “Movie” class, it’s like we’re making a thing that represents a movie on our list.

To make the “Movie” class, click on “Create a class”. Make sure to set the option “Public Read and Write. After that, add these fields quoted below::

+---------------------------+-----------------+---------------+----------+
| Data type                 | Name            | Default value | Required |
+---------------------------+-----------------+---------------+----------+
| String                    | name            | <leave blank> | yes      |
+---------------------------+-----------------+---------------+----------+
| Number                    | releaseYear     | <leave blank> | yes      |
+---------------------------+-----------------+---------------+----------+
| Boolean                   | isWatched       | False         | no       |
+---------------------------+-----------------+---------------+----------+

After that, press the button with the plus icon to put some example data in the database. I’m going to use these:

+--------------------+-------------+-----------+
| name               | releaseYear | isWatched |
+--------------------+-------------+-----------+
| A Clockwork Orange | 1971        | False     |
+--------------------+-------------+-----------+
| Fight Club         | 1999        | False     |
+--------------------+-------------+-----------+
| Donnie Darko       | 2001        | True      |
+--------------------+-------------+-----------+

We have completed all we have to do at the backend.

Using ChatGPT to Build the Frontend

The goal of this section is to ask ChatGPT to create the frontend part of our app.

The next steps need an account for accessing OpenAI . In case you don’t have one, make a new account. If you have one, just log in.

Remember, ChatGPT isn’t a magic thing. It’s a big, smart tool called language model.  It might make mistakes you’ll need to correct. Also, asking ChatGPT the same things may likely get different answers.  

App Frontend Creation Procedure

First, let’s tell ChatGPT about the app we want to create. Start by telling ChatGPT about your preferred tools for building the app. After that, tell the chatbot to provide a guide. Also, we’ll give it the schema of the database.

Describe the way to make a video playlist smartphone app. My preferred development tools are React Native with Expo. The Back4app platform hosts my database. My database has only one model called "Movie," and the schema goes thus:

{
   "results":[
      {
         "objectId": "bAhUu5SFZo",
         "name": "Donnie Darko",
         "releaseYear": 2001,
         "isWatched": false,
         "createdAt": "2023-04-11T16:10:44.281Z",
         "updatedAt": "2023-04-11T16:10:44.281Z"
      },
   ]
}

Wondering how we got the schema above? It’s simple; you can click on three vertical dots at the screen’s upper right corner. Click on “Export” and then pick “All rows as JSON”. Back4app will export the code and you’ll receive it in an email.

Look, ChatGPT gave us the right info to make an app with React Native. Now we can ask for more details about every single step in the list.

Initialize the App Project

Begin by asking for more details about the initial steps. In this case, we’ll choose the first few.

How do I go about building a React Native project?

The response from ChatGPT seems good. Go on and install Expo CLI, Node.js, and make a fresh project. For the design template, I recommend tabs (TypeScript) because it sets up React Router, that you might use in future development tasks.

When the project’s ready, launch it in your favorite coding tool and check out the folders. If you are new to Expo, just ask the chatbot to describe the folder structure, like “Tell me about the directory structure.”

After, do what ChatGPT says to launch the Expo as a server:

$ expo start

After the server starts working, launch Android Studio, then start the in-built emulator with VDM. Then, return to the console of Expo, hit the keyboard letter “A” to start the app on the emulator. The screen will display the following:

Link Back4app and React Native

Let’s keep going and query ChatGPT to tell us how to link up a Back4app with our project powered by React Native.

How do I make the Expo mobile application to use Back4app as a backend? I've used "tabs (TypeScript)"template for my project.

The steps and the subsequent code seem right. However, when you look closer, you’ll see that the App.js / App.ts file is conspicuously missing in the project files. That’s because we chose tabs (TypeScript) rather than the blank template. And ChatGPT is suggesting the inappropriate dependencies to install.

While creating this content, I to teach ChatGPT to make the required corrections, but the Chatbot didn’t understand. At that point, I got stuck and had to look at the official Back4app guide. If you use their guide, you’ll see that there are package requirements that you must install first. Here we go:

yarn add parse @react-native-async-storage/async-storage

Once you are done, move on toindex.ts and launch Parse:

// index.ts

import 'expo-router/entry';

import Parse from 'parse/react-native.js';
import AsyncStorage from '@react-native-async-storage/async-storage';

Parse.setAsyncStorage(AsyncStorage);
// Make sure to replace the 'APPLICATION_ID' and 'JAVASCRIPT_KEY' with your own keys.
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com/';

Ensure you put your real API keys located in your Dashboard at Back4app “App Settings –> Security and Keys” in place of YOUR_APPLICATION_ID and YOUR_JAVASCRIPT_KEY.

To check if the linkage is working, try showing the list of movies. To achieve this, add this code snippet at the end of index.ts:

// index.ts

// ...

const Movie = Parse.Object.extend('Movie');
const query = new Parse.Query(Movie);

query.find().then((results) => {
  console.log('Query results:', results);
}).catch((error) => {
  console.error('Error querying database:', error);
});

Reload the playlist app, launch the console, and you will see the list of movies.

Showing the Watchlist

Now, request ChatGPT to create a code in React  for showing the videos on the app.

Can you help me with the code for my TabOneScreen? I want it to show the movie list from my watchlist. And can you make sure there's a tick icon for the watched movies another crossed icon for the ones I haven't watched yet?

ChatGPT gave back code that seems right. It applies useState() to manage the state, it also used TypeScript to create an interface so you can access the Movie model. Moreso, it also set up a hook for refreshing playlist. But I found two things that need fixing. The chatbot called the screen WatchlistScreen rather than TabOneScreen. Also, the interface for the Movie is not complete. But don’t worry, it’s easy to fix!

Put ChatGPT’s code in the app/(tabs)/index.tsx. After that:

1. Change WatchlistScreen to TabOneScreen.
2. Update the interface of the Movie like this:

interface Movie extends Parse.Object { 
  objectId: string;
  name: string; 
  releaseYear: number; 
  isWatched: boolean; 
  createdAt: Date; 
  updatedAt: Date; 
}

Reload the mobile app, then check if the list of movies show up.

Toggling the Watchlist 

Finally, we should query ChatGPT to make the toggleWatched function for us. This goal of the function is to change the state of the property of iswatched.

Help write a function that toggles the state of each movie's "isWatched" property.

Put the function in the TabOneScreen, then use TouchableOpacity to make it work like this:

// app/(tabs)/index.tsx

export default function TabOneScreen() {

  // ...

  const toggleWatched = async (id: string) => {
    const Movie = Parse.Object.extend('Movie');
    const query = new Parse.Query(Movie);

    try {
      const movie = await query.get(id);
      movie.set('isWatched', !movie.get('isWatched'));
      await movie.save();
      setRefresh(true);
    } catch (error) {
      console.error('Error toggling watched status:', error);
    }
  };

  // ...

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Watchlist</Text>
      <View style={styles.separator} lightColor='#eee' darkColor='rgba(255,255,255,0.1)'/>
      <FlatList
        data={movies}
        keyExtractor={(item) => item.id}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => toggleWatched(item.id)}>
            <Text>{item.get('isWatched') ? '✔️' : '❌'} {item.get('name')}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

// ...

Awesome, we’ve completed everything. Launch the emulator again and try out the app. list of movies should show up on the interface, and when you click on a movie, it should switch the iswatched status (shown by the icon).

We did it! We leveraged the power of ChatGPT to make a simple smartphone app. You can also have fun using ChatGPT to build more things like:

• Adding movies in the app
• Removing movies from the app
• Having a separate watchlist for each user

A Final Note

ChatGPT is an excellent tool for expediting your app development projects, creating documentation, and providing helpful pieces of code. But, it does have a couple of problems. The biggest ones are that it sometimes makes things up and it doesn’t know everything.

Because of these problems, you have to check and think carefully about what ChatGPT says. This often makes developers spend more time fixing ChatGPT’s code than it takes to create it from scratch.

In my view, Artificial intelligence is getting a lot of attention right now. But I think our seamless access to a true Artificial Intelligence  or Artificial General Intelligence is still a bit far off. We’ll have to see how this technology unfolds.

You can find the final code on GitHub.

Frequently Asked Questions