Teach you step by step how to build artificial intelligence network applications!

If you are like me, you will notice the explosion of artificial intelligence technology. It will disrupt not just software engineering, but every industry.

In this series, we'll learn how to integrate OpenAI's AI services into applications built with Qwik, a JavaScript framework focused on the concept of recoverability.

We'll get into the specifics of OpenAI and Qwik, but I'll focus mostly on general knowledge, tools, and implementations that should apply to whatever framework or toolchain you're using. We'll focus as closely as possible on the basics and I'll point out the unique parts of the application.

Preview:

##Preparation

Before we start building anything, we must meet several prerequisites. Qwik is a JavaScript framework, so we have to install Node.js (and NPM). You can download the latest version, but anything higher than v16.8 should work. I will use version 20.

#Next, we also need an OpenAI account to access their API.

At the end of this series, we will deploy the application to a VPS (Virtual Private Server). No matter which provider you choose, the steps we follow should be the same. I'll be using Akamai's cloud computing service (formerly Linode).

Setting up the Qwik application

Assuming we meet the prerequisites, we can open a command line terminal and run the command: <span style="font-family: 宋体, SimSun; font-size: 14px;">npm create qwik@latest</span>. This will run the Qwik CLI which will help us bootstrap our application.

Example:

If everything is fine, open the project and start exploring.

In the project folder you will notice some important files and folders:

1. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src</span>: Contains all application business logic

2. ##/src/components<span style="font-family: 宋体, SimSun; font-size: 14px;"></span>: Contains reusable components to build our application

3. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/routes</span>: Responsible for Qwik’s file-based routing; each folder represents a route (can be a page or API endpoint). To create a page, place the <span style="font-family: 宋体, SimSun; font-size: 14px;">index.{jsx|tsx}</span> file into the route's folder.

4. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/root.tsx</span>: This file exports the root component responsible for generating the HTML document root.

Start developing

Qwik uses Vite as the bundler, which is very Convenient because Vite has a built-in development server. It supports running our application locally and updating the browser when files change.

To start the development server, we can open the project in the terminal and execute the command <span style="font-family: 宋体, SimSun; font-size: 14px;">npm run dev</span>. Once the development server is running, you can open a browser and visit <span style="font-family: 宋体, SimSun; font-size: 14px;">http://localhost:5173</span> and you should see a very basic application.

Whenever we make changes to our application, we should see those changes reflected in the browser almost immediately.

Add Styles

This project won't focus too much on styles, so if you want to do your own thing, this part is completely optional. For simplicity, I will use Tailwind.

Qwik CLI makes it easy to add necessary changes by executing terminal commands<span style="font-family: 宋体, SimSun; font-size: 14px;">npm run qwik add</span> .

Example:

You can use the arrow keys to move down to the Tailwind plugin and press Enter. It will then show you the changes that will be made to your codebase and ask for confirmation. As long as it looks good, you can press Enter again.

I also like to have a consistent theme for my projects, so I keep a file in GitHub to copy and paste from style. Obviously you can ignore this step if you want your own theme, but if you want your project to look as stunning as mine, copy the styles from this file on GitHub Go to the file <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/global.css</span>. You can replace the old style but keep the Tailwind directive.

Prepare the homepage

To get the project off to a good start, the last thing we want to do today is make some changes to the homepage . The changes I want to make include:

1. Remove<span style="font-family: 宋体, SimSun; font-size: 14px;">head</span> Export

2. <span style="font-family: 宋体, SimSun; font-size: 14px;">h1</span>Remove all text except ; Feel free to add your own page title text.

3. Add some Tailwind classes to center the content and make it <span style="font-family: 宋体, SimSun; font-size: 14px;">h1</span>larger

4. Wrap content with tags<span style="font-family: 宋体, SimSun; font-size: 14px;">main</span> to make it more semantic

5. Add the Tailwind class to the <span style="font-family: 宋体, SimSun; font-size: 14px;">main</span>#tag to add some padding and center the content

These are some minor changes that are not strictly necessary, but I think they will provide a good starting point for building our application in the next article starting point.

This is what the file looks like after I changed it.

import { component$ } from "@builder.io/qwik";
export default component$(() => {
  return (
    <main class="max-w-4xl mx-auto p-4">
      <h1 id="Hi-nbsp-wave-nbsp-emoji">Hi [wave emoji]</h1>
    </main>
  );
});

In your browser:

Conclusion

That’s all we’re going to discuss today. Again, the main focus of this article is to eliminate boilerplate content so that the next article can be dedicated to integrating OpenAI's API into our project.

The above is the detailed content of Teach you step by step how to build artificial intelligence network applications!. For more information, please follow other related articles on the PHP Chinese website!