Creating an App with GPT-3

Felix Leber
Jun 18 · 12 min read

I recently gained access to the OpenAI beta program. The speech processing was beyond my imagination.

So I’ve decided to let GPT-3 help me to develop an app.

Let’s see how it turned out. The following text is the conversation between me and the AI. The bold text is given by me as an input. The normal text is OpenAI’s answer.

Photo by Franki Chamaki on Unsplash

CREATING THE APP AND SOME REACT CODE

OpenAI: Here are the steps to create this app: Build a Backend to manage the users and songs. Build a mobile app to connect to the Backend and start the match. The Backend In order to create this app we need to store the songs somewhere. I’ve decided to use the awesome Firebase

Input: But the songs are not stored in our database, they are managed by Spotify and we access them via their API. The app just has to handle the logic for selecting songs. So when two people meet, there is a 50/50 chance that the song one person is listening to will be selected.

OpenAI: In order to get the list of songs to play, the app will make a request to the Spotify API. And in return will get the songs that are playing from a playlist called “Now playing” on the user profile. Then the app will select one of the songs randomly and make another request.

Input: The question is, how do we determin when two users meet? Should we use the geo location of this people or should we use some other technology?

OpenAI: I’ve decided to use the geo location. So the app needs some Technology to detect the location of the users. I’ve decided to use the location services of Android. The mobile app The Backend has been created. We now need to build the mobile app. I’ve decided to use react native.

[So for the next question I have decided to just let the App talk for a while.]

Input: Okay, so what are the first steps? Should we start developing the frontend or the backend first?

OpenAI: My advice is to start the design of the mobile app and then start to implement the Backend. That’s because it’s easier to decide which features the app has to have. When the mobile app is ready, we can start to develop the Backend. The mobile app is awesome. It’s really different from a web app or a native app. The code is separated in two parts: The logic of the app and the look and feel. The logic of the app is all the backend logic and it’s separated from the look and feel of the app. The logic of the app is implemented using react. The look and feel is implemented using react native. The app has to do the following: Connect to the Backend and start to retrieve the songs. When two users meet, they have to start to listen to the same song. The match is done when a song is selected. If a song is selected and the song is already playing, the app should start to play that song immediately. If a song is selected and the song is not playing, the app should start to play the song. The app should manage while a song is playing. It should show the name of the song, the artist and the cover picture.

[For the next part I gave Open AI the generall instructions for the next steps. Here is what I got]

Input: Okay we have some challenges that we need to address. First, we need to let the user select a song. Then we need to continuously check if two users are near each other. As soon as two users meet, the algorithm should decide which song to play next. Then we need to send a push notification to the user and play the corresponding song. Where is the best place to start? Okay, we have a number of obstackles to tackle. First, we need to let the user choose a song. Then we need to continuously check if two users are near each other. As soon as two users meet, the algorithm should decide which song to play next. Then we need to send a push notification to the user and play the corresponding song. Where is the best place to start?

OpenAI: Hello React! I’ve decided to start with the react code. The first thing to do is to create a component that represents the song. A component is a self contained piece of UI. The file should be created in the components folder.

A component can have a lot of properties and methods. And they are defined using the class syntax. The component is a function that returns the element. The element can be an HTML element or an SVG element. Some components don’t have to have an element. For example the text component. The react community is big. It has a lot of third party libraries that can be used to implement the UIs. The third party libraries are called components. They are downloaded using the package manager. The package manager is a tool that has the responsibility to download, install and upgrade the components. In order to use the package manager, we need to create a config file in the root of the app. It’s called package.json.

When we need to add a component, we can use the command: npm install — save react-native-song Then we need to add the component to the list of components. The list of components is placed inside the “components” folder. Now that we have the react-native-song component, we need to import it to the main.js file. Here’s how a simple component looks like:

import React, { Component } from 'react';
import Song from './components/song';
class App extends Component {
render() {
return (

Then we can use the App component to render the UI. The full code is available here: step-1. The backend Now that we have a simple UI, we need to connect it to the Backend. The first thing to do is to insert the Backend URL inside the file called App.js. The config file is placed inside the “config” folder. The Backend URL is the URL of our Firebase project. Then we can use the React component to display the songs. In order to display the list of songs, we need to import the component.

import Song from './components/song';
...
import Song from './components/song';
class App extends Component {
render() {
return (

Then we can use the component to display the list of songs. The full code is available here: step-2. The mobile app Now that the Backend is ready, we can start to develop the mobile app. The first thing to do is to create the App component. And then we can use the React component to display the list of songs.

import React, { Component } from ‘react’; 
import Song from ‘./components/song’;
class App extends Component {
render() {
return (

The next thing to do is to create the component that represents the song. The song component should have an id. The id will be used to make a request to the Spotify API. In order to make a request to the Spotify API, we need to import an extra library. The library is called “fetch”.

import { Song } from ‘./song.js’; 
import { AppRegistry } from ‘react-native’;
import App from ‘./App’;
AppRegistry.registerComponent(‘ReactSong’, () => App);

The full code is available here: step-3. The Backend Now that the mobile app is ready, we can start to develop the Backend. The first thing to do is to create the Backend component.

import React, { Component } from ‘react’; 
import { BackendFirebase } from ‘../config/backend.js’;
class Backend extends Component {
render() {
return (

[OpenAI then started to repeat the code snippets so I just post the text which was inbetween the code snippets.]

The Backend component will use the Firebase component to talk to the Firebase. The Backend component uses the BackendFirebase component to talk to the Firebase. The Backend component has some state. The state contains the list of songs and the selected song. The component should be controlled by the logic in the Backend.js file.

THE BUSSINES PLAN

OpenAI: This App is very large, so we have to focus on our main user groups. They are:
1. the user
2. the music producer
3. the broadcaster
4. the advertiser

a) The user

The user is the main person in this whole thing. He has to download the App. This App is free to download, but you have to pay for the music. If you want to listen to the music, you have to pay once per month. If you also want to be able to remove songs and songs the others can listen to, you need to pay per month per song. With the App you can communicate with the people around you and listen to their opinion about the songs.

2. the music producer 3. the broadcaster 4. the advertiser a) The user The user is the main person in this whole thing. He has to download the App. This App is free to download, but you have to pay for the music. If you want to listen to the music, you have to pay once per month. If you also want to be able to remove songs and songs the others can listen to, you need to pay per month per song. With the App you can communicate with the people around you and listen to their opinion about the songs.

b) The music producer

The music producer makes the music. He has to make sure his songs are uploaded to the App. This is free. He also has to pay a percent if the song is listened to at least 100 times.

c) The broadcaster

The broadcaster makes sure the music producer can upload his music. This is free. The broadcaster makes sure that the songs can be listened to in the App. He also makes sure that the songs are properly displayed in the App. This is free.

d) The advertiser

Input: What is the marketing strategy to attract and retain users for our app? Should we advertise our app and if so, how?

OpenAI: The marketing strategy has to be developed for every user group.

For the user: A.

The marketing strategy for the user is very easy. We just have to make sure that the app is free and that we can download it. We also have to make sure that the user can communicate with the people around him.

For the music producer: B.

The marketing strategy for the music producer is also very easy. All he has to do is make sure that his music is uploaded to the App. The music producer has to make sure that his music is uploaded to the App. He also has to make sure that the songs are properly displayed in the App. If his music is played at least 100 times he will get a percent. The more times his song is played the higher the percent.

For the broadcaster: C.

The marketing strategy for the broadcaster is also very easy. All he has to do is make sure that the song can be listened to in the App. He also has to make sure that the song is properly displayed in the App. He has to make sure that the songs can be listened to in the App. Also he has to make sure that the songs are properly displayed in the App.

For the advertiser: D.

The marketing strategy for the advertiser is also very easy. All he has to do is make sure that the floating bar is displayed properly. He has to make sure that the floating bar is displayed properly. He also wants to make sure that the App is being advertised. If he wants to advertise, he has to pay for this.

THE ARCHITECTURE

Input: All right. We want to host the app now. The app consists of a backend, a frontend and a database. The app is to be hosted at one of the three major cloud providers. Requirements are that the backend can scale automatically and that the database is automatically backed up. How should the Architecture look like?

OpenAI: Let’s create a diagram. Draw a box for the hosting service, and one for the app. The hosting services have two layers: a “physical” layer that contains the actual host machines and storage (this is what Amazon calls “EC2”, what Microsoft calls “Windows Server”, etc.) and a “software” layer that contains the operating system (this is what AWS calls “Amazon Linux”, or MS calls “Windows Server”). For simplicity, lets suppose that the Operating System layer is provided by the hosting service.

So we have a layer for the OS and a layer for the app. Now what do we put in the layers?

The app is actually made up of multiple components, at least three of them: a web frontend, a backend and a database. The backend is made up of multiple components as well: user management, file storage and processing components.

So now we have a diagram that looks like this:

Let’s explain the diagram.

The web frontend is a separate box, because the users are interacting with it and it can be hosted completely independently of the hosting service and the other components. The backend needs to be hosted in the same physical server as the OS because it has OS-level dependencies (file storage, user management). It is common to host the backend, frontend and database in their own containers. You can use Docker to achieve this. In the diagram the different components are shown as separate layers. The database is a separate layer, because it needs to store its data in a way that is not affected by the OS upgrades, or even host migrations. Also it needs to be backed up while it is running. The database is not in the same layer as the backend because it doesn’t make sense to have two layers for the backend. The backend talks directly to the database, and it does not need any additional security or isolation from other components of the app.

The diagram shows that the components are hosted separately with their own dependencies. The database is hosted on a physically separate server from the backend and the frontend.

This setup is called a microservice architecture. Wikipedia explains it as:

Microservices are a software development technique — a variant of the service-oriented architecture (SOA) architectural style that structures an application as a collection of loosely coupled services. In a microservices-based architecture, diverse business functionality is implemented as independent services, which are small, self-contained applications with minimal inter-service communication.

This is the way we build apps now. It is very popular because it allows you to:

1. replace components of your app separately, by replacing the service, without breaking other parts of the app or causing downtime. This means you can develop, test and deploy new features faster because you have fewer dependencies on other components. 2. replace the underlying hosting service for the components separately, running your app on multiple cloud providers at the same time, without having to rewrite your app because most cloud providers support the same APIs and protocols.

3. add security features, like firewalls, at the OS level, instead of at the app level, and still isolate the components from each other.

4. back up the database while the app is running, while it is generating revenue.

5. scale down or up automatically when demand changes.

6. assign one or more developers to each service instead of having one developer working on the entire app. This means that each service has its own developer who can make decisions about the app from his perspective. He can decide whether the app should use a REST API or GraphQL for the API. He can architect the API so it best fits his service. He can choose the best technology to use, since he is familiar with it, for example: if he works on the backend he can choose to use Kafka instead of Redis.

7. reimplement (parts of) your app in different languages on different platforms.

8. deploy the services on multiple cloud providers at the same time.

There are many advantages to this approach. The downsides are:

  1. it is a little harder to develop the app, although good tools are available, like Docker.
  2. individual developers cannot work simultaneously on different components of the app because they need to be hosted separately.
  3. you need to plan which service should be developed first and possibly design the APIs of all services upfront. This means that you have to coordinate multiple people’s work, which takes more effort.
  4. you will need to be familiar with multiple languages and platforms to develop both the backend and the frontend of your app.

I hope this explanation of microservices architecture helped you get a better idea of how it works. Next week I will show you how this approach looks in practice, in a real-life example.

Don’t miss it!

This is a series of blog posts on the software architecture of modern web applications. To get notified when the next post is out, subscribe by email or RSS.

kkkkkk

Geek Culture

Proud to geek out. Follow to join our 1M monthly readers.