DEV Community

Cover image for How To Use AI To Create Your Own App (No Coding Knowledge Required)
Alex Agboola
Alex Agboola

Posted on • Updated on

How To Use AI To Create Your Own App (No Coding Knowledge Required)

Normally, if you want to create your own app, you would have to learn programming languages like Dart or C#, but we're going to use only HTML, CSS, and JavaScript. The best part is, you don't have to know how to code at all!

We are going to create this webapp for free this with only using 3 tools:

  • ChatGPT (any version is fine)
  • Virtual Studio Code (or any code editor)
  • Web into app.com

Web into app is a website where you can convert your HTML or website of your choice to an apk file so you can publish your app on platforms like Google Play Store or the App Store.

1) Getting the code from ChatGPT

ChatGPT is an AI chatbot that can do many things as long as you ask for text (or images if you are using GPT 4.0). These are the steps on how to sign up and obtain the code:

1) Create your own account

Go to OpenAI's website and click on the top right button that says "Try ChatGPT".

You should be taken to this screen:

The main page for ChatGPT. On the left are some suggested prompts, and on the right are to big blue buttons. On says

Click the signup button and it should take you to this page:

A screenshot of the sign up page

Once you create your account, you should see something similar to this:

ChatGPT's main page

2) Generate the code

Now you are on the ChatGPT page, ask ChatGPT to code any website you would like to be an app using HTML, CSS, and JavaScript (make sure the website is responsive meaning it can be viewed properly on mobile devices)

Example Prompt

Code a simple note-taking website where users can take notes like a notebook. Make sure it is coded in only HTML, CSS, and JavaScript, and the website looks like a notebook. I should be able to see notes in each grid below the input box that includes the date that note was typed in and the actual note which is saved even after I refresh the website. This website should be responsive and tailored towards smartphones. I want all of the code in one HTML file, meaning that you should put style and script tags for CSS and JavaScript in your HTML code.

ChatGPT gave me this code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notebook App</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 400px;
  }

  input[type="text"] {
    width: calc(100% - 40px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  button {
    padding: 10px 15px;
    background-color: #007bff;
    border: none;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }

  .note {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
  }

  .note:last-child {
    border-bottom: none;
  }

  .note-date {
    font-size: 12px;
    color: #888;
  }

  .note-content {
    margin-top: 5px;
    white-space: pre-wrap;
  }
</style>
</head>
<body>

<div class="container">
  <input type="text" id="noteInput" placeholder="Type your note here...">
  <button onclick="addNote()">Add Note</button>
  <div id="notesContainer"></div>
</div>

<script>
  function addNote() {
    const noteInput = document.getElementById('noteInput');
    const noteContent = noteInput.value.trim();
    if (noteContent === '') return;

    const date = new Date();
    const dateString = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;

    const noteElement = document.createElement('div');
    noteElement.classList.add('note');

    const dateElement = document.createElement('div');
    dateElement.classList.add('note-date');
    dateElement.textContent = dateString;

    const contentElement = document.createElement('div');
    contentElement.classList.add('note-content');
    contentElement.textContent = noteContent;

    noteElement.appendChild(dateElement);
    noteElement.appendChild(contentElement);

    document.getElementById('notesContainer').appendChild(noteElement);

    // Save note to localStorage
    const notes = JSON.parse(localStorage.getItem('notes')) || [];
    notes.push({ date: dateString, content: noteContent });
    localStorage.setItem('notes', JSON.stringify(notes));

    noteInput.value = '';
  }

  // Load notes from localStorage
  window.onload = function() {
    const notes = JSON.parse(localStorage.getItem('notes')) || [];
    const notesContainer = document.getElementById('notesContainer');
    notes.forEach(function(note) {
      const noteElement = document.createElement('div');
      noteElement.classList.add('note');

      const dateElement = document.createElement('div');
      dateElement.classList.add('note-date');
      dateElement.textContent = note.date;

      const contentElement = document.createElement('div');
      contentElement.classList.add('note-content');
      contentElement.textContent = note.content;

      noteElement.appendChild(dateElement);
      noteElement.appendChild(contentElement);

      notesContainer.appendChild(noteElement);
    });
  };
</script>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode
(ChatGPT have generated a simple note-taking website)

It will take some trial and error, but you will eventually get the website you want.

2) Download the code

For this next step, I will be using Virtual Studio Code, but you can use any code editor as long as you can download the code as an HTML file.

1) Copy the code

It is very easy to copy the code quickly:

A GIF with me copying the code ChatGPT generated for me

2) Go on your editor of chose

For me, it's Virtual Studio Code, but you can choose any code editor you like: it can even be online!

1) Create a folder (if in VSCode) and a HTML file

In VSCode, it's just as easy as clicking on an icon (but it can vary based on what code editor you use):

A GIF on creating a HTML file

2) Paste ChatGPT's code

Once again, really easy to do. All you need to do is Ctrl + V (make sure to save your code if you are using VSCode using Ctrl + S):

A GIF about me pasting code and saving my file

3)(Not necessary on VSCode) Download the file

If you are not using Virtual Studio Code, you will need to download the HTML file (you don't need to download the file in VSCode because it should be there already). Make sure to compress your HTML file into a ZIP file, you will need it later.

3) Create your app

Go to Web into app.com and click "Get Started". It should take you to this screen:

A page with settings for your app

Click on the "HTML Files" tab next to the currently selected tab "Online URL".

You should see something like this:

The

Now you can upload your ZIP file.

Your page should look similar to this:

Basically the same page, but I uploaded the ZIP file

You can now change the settings and personalize your app settings. You can press next.

Example Settings

I changed the settings pt. 1

I changed the settings pt. 2

Now, you will need to create an account. It's really easy: all you need to do is scroll down, click on "Register | FREE" and fill out the form:

The

After the site reloads, press the options you want (basically free or pay) and click "Make App".

You should see this screen once you clicked the button:

Loading screen

You should see your new app in your dashboard:

The new app I created which is highlighted in the dashboard

You can now download all files of your app by downloading:

A GIF of me downloading the ZIP file of my app

4) Retrieving the apk file

We only need the apk file, and not the whole ZIP file.

1) Decompress the ZIP file to turn it into a folder.

2) Click on the folder and click on the "android" folder.

3) Copy your "app-release.apk" file and move it so the file is no longer in any folder.

You now have your own app that you can publish and use!

Conclusion

In conclusion, we were able to create an app without having to code or pay for anything.

Make sure to tell me in the comments what app you created using ChatGPT

Top comments (0)