Setting your basic configurations. The following is my settings
Project: Maven
Language: Java
Spring Boot: 2.7.9
Project Metadata:
Group: com.taogen
Aritifact: chatgpt-demo
Packaging: Jar
Java: 8
You can set your own configurations according to your local environment.
After setting the project configurations, we need to add the following dependencies:
Spring Web
Lombok
Then we click the GENERATE button to download our project file.
After downloading the generated project file, we need to decompress the file and open the directory in our IDE. I prefer to use IntelliJ IDEA as my IDE.
Call the ChatGPT API in spring boot
Configuring your Open AI key in application.properties
openai.apiKey=${YOUR_OPEN_AI_KEY}
Create the RestTemplateConfig.java to build the RestTemplate bean for API calls
The ChatBotController sends an HTTP request to ChatGPT API and reads its response stream line by line. Each line of the response has a similar structure. We extract the chat content by removing the prefix data: , parsing the string to a JSON object, and retrieving the content value. This content is then written into the response of our chatbot API. The following is an example of the content of the ChatGPT API response.
curl -d 'hello' -H 'Content-Type: application/json' -X POST http://localhost:8080/chatbot/conversation
Hi there! How can I assist you today?
Note: If ChatGPT is not available in your region, you will not be able to call the ChatGPT API and the request will time out. Your application may throw the following exception:
2023-03-16 14:40:22.680 ERROR 14704 --- [nio-8080-exec-3] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.web.client.ResourceAccessException: I/O error on POST request for "https://api.openai.com/v1/engines/davinci-codex/completions": Connection timed out: connect; nested exception is java.net.ConnectException: Connection timed out: connect] with root cause java.net.ConnectException: Connection timed out: connect
For long-running programs, you’ll need to look at the log files to check that the program is functioning correctly.
2. For the scheduled task thread or any thread other than the main thread, catch the entire code block exception.
Generally, the main thread has global exception handling, but other threads do not.
3. No empty catch blocks.
An empty catch block won’t give you any information about what exception occurred. Probably the exception doesn’t matter, but it’s still an exceptional case.
4. Separate business and functional code.
Businesses are changing and functions are shared and reusable.
5. Divide your code by domain rather than by functionality or class type.
Usually, changes in your application are related to a specific domain, you should focus on business domains when building your structures, not functionality or class type.
6. Don’t create unnecessary variables, objects in a loop block.
Be careful when creating objects in a loop block. Create objects before a loop block if possible. Don’t create a lot of unnecessary objects in a loop block. For example, java.text.SimpleDateFormat, org.apache.poi.xssf.usermodel.XSSFCellStyle objects.
7. Don’t use Java internal code. All classes in com.sun.*, sun.*, or jdk.*are notionally internal, and should not be used directly in your code. All the classes you can use are in the Java API documentation, such as java.*, javax.*, and org.*.
Data Access
1. Never execute SQL statements in a for loop.
It takes a lot of time. You should find a way to do it in bulk.
Java Web and Spring Boot
1. Scheduling tasks should run when a specific profile is activated.
If the project is deployed on multiple servers, each server will execute scheduled tasks. Even if it activates different profiles on different servers.
2. API URLs use domain names rather than IP addresses.
If you use IP-based API URLs in many projects, you need to change many projects whenever the IP address changes.
3. Use Environment Variables in spring boot configuration files.
Don’t expose your confidential information in source code.
1. Use a new git branch to develop new features. After finishing a new feature, switch to the main branch.
It’s much clearer when you’re doing multiple functions at the same time.
2. The committed code needs to push to the remote repository as soon as possible.
Code in a local environment can easily get lost. One time I deleted the entire project directory and my code was lost.
3. The test code is for testing only. Don’t use test code as your functional source code.
4. Use environment variables for configurations. Don’t hardcode configuration.
It’s safe and convenient.
5. Don’t keep uncommitted changes of code all the time. Either commit and push it to a remote branch or restore it.
First, uncommitted and unpushed changes are easily lost. Second, keep uncommitted changes makes new updates to the same file difficult. Third, It also messes up code commits.
If the changes are important and you won’t need them for a while, you can copy and save them to another place.
6. First, solve the problem. Then, write the code. Before writing code, you need to understand and organize the requirements and complete the database design, API design, and detailed design.
It makes development easier.
7. Anything that can be automated should be automated.
The problem “cannot resolve symbol” means IDEA hasn’t successfully indexed your project code and dependent libraries.
There are two common problems that cause the “cannot resolve symbol” problems:
Maven dependency configuration problems.
IDEA problems.
Maven Configuration Problems
Ensure Maven dependency resolve correctly
Your project’s Maven dependencies must be resolved correctly. Otherwise, IDEA can’t index project files successfully.
To check that Maven dependencies are resolved correctly, you can execute the following command:
mvn -Dmaven.test.skip=true clean package
If you can’t pass the above command, then there is something wrong with your Maven configuration. You can update your pom.xml and run the above command again.
After you passed the above command by updating your pom.xml, you need to reload the maven project to download missing dependencies. Right click the pom.xml in IDEA -> Maven -> Reload project. If the “cannot resolve symbol” errors are gone, the problem is solved.
If you have passed the above command and reloaded the project but there are still the “cannot resolve symbol” problems in IDEA, then it’s IDEA problems not Maven. You can go to the “Problems with IDEA” section.
Common problems and solutions with Maven
Problem 1: The dependency cannot be found
This means that the dependency cannot be found from the remote Maven repository.
Error Information:
Could not resolve dependencies for project {your_project}: Failed to collect dependencies at {groupId}:{artifactId}.jar:{version}
Solutions:
Check if the groupId, artifactId or version of the dependency is correct.
Check if there is an unofficial repository defined in the project’s pom.xml or ~/.m2/settings.xml, try using Maven central repository.
<repository> <id>central</id> <name>Maven Central Repository</name> <url>https://repo1.maven.org/maven2</url> </repository>
Problem 2: dependency conflict
This means that multiple versions of a dependency are added or indirectly added to the Maven project. A dependency can only exist in one version. The actual version used causes the referenced method or class to be unable to be found.
Error Information:
NoClassDefFoundError, ClassNotFoundException, or NoSuchMethodError
Solutions
Use the “Maven Helper” plugin to check if there is a dependency conflict. You can try excluding unwanted versions by right-clicking on the version in the Maven Helper plugin window.
If your Maven project has a parent project, you also need to check whether the version defined in the parent project is compatible with your current project.
More tips
If you pom.xml is correct, but you still can’t pass mvn clean package. You can try to force update dependencies:
# force update the dependencies mvn clean package -U
Problems with IDEA
Try to re-index your project files
Close the project or exit IDEA, then delete the .idea folder, then reopen project or restart IDEA. When there is no .idea folder in your project root path, IDEA will re-index project files automatically.
In addition to the .idea folder, if your project is a git repository, it’s recommended to delete all file ignored by git.
# delete git ignored files git clean -dfx
After you re-indexed the project (delete .idea), if the “cannot resolve symbol” errors are gone, the problem is solved.
If the “cannot resolve symbol” errors still exist, you can try rebuild project. In top menu bar, Build -> Rebuild project.
If you have re-indexed the project (delete .idea) and rebuilt the project but the “cannot resolve symbol” errors still exist, you can go to the next step “Invalidate IDEA cache”.
Invalidate IDEA cache
IDEA cache also affects IDEA index project files. If your Maven configurations are right, but there are still “cannot resolve symbol” problems. You can try to Invalidate Caches:
File -> Invalidate Caches -> checked “clear file system cache and Local History”, and then click “Invalidate and Restart”.
Re-enter IDEA and waiting for “Update indexes” to complete. After “Update indexes” is done. Then we need rebulid the project:
Build -> click “Rebuild Project”.
After invalidated IDEA cache, if the “cannot resolve symbol” errors are gone, the problem is solved. Otherwise, You can try to re-index your project files again.
In this post, I will introduce several ways to find HTML DOM elements in JavaScript.
querySelector methods
Document or Element methods
querySelectorAll(selectors)
Parameters: the selectors parameter is a valid CSS selector string.
Return Value: returns a static (not live) NodeList representing a list of the document’s elements that match the specified group of selectors, or an empty NodeList in case of no matches.
querySelector(selectors)
Parameters: the selectors parameter is a valid CSS selector string.
Return Value: return an Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.
Find by id
document.querySelector("#test")
Find by HTML tag
document.querySelectorAll("p")
Find by class names
document.querySelectorAll("div.className1") // or document.querySelectorAll(".className1")
Find by attributes
// match elements contain a attribute document.querySelectorAll("elementName[attrName]") // match attribute value container.querySelectorAll("elementName[attrName='attrValue']"); // attribute value start with container.querySelectorAll("elementName[attrName^='attrValue']"); // attribute value end with container.querySelectorAll("elementName[attrName$='attrValue']"); // attribute value contains container.querySelectorAll("elementName[attrName*='attrValue']");
and
document.querySelectorAll("div.className1.className2"); // or document.querySelectorAll(".className1.className2");
document.querySelectorAll("div[attr1='value1'][attr2='value2']"); // or document.querySelectorAll("[attr1='value1'][attr2='value2']");
or
document.querySelectorAll("div.className1, div.className2"); // or document.querySelectorAll(".className1, .className2");
Find descendants, children, siblings with tag names
// descendants document.querySelectorAll("div span"); // the first span descendant document.querySelectorAll("div span:nth-of-type(1)"); // children document.querySelectorAll("div>span"); // the first child element document.querySelectorAll("div :nth-child(1)") // siblings document.querySelectorAll("div~img"); // adjacent sibling document.querySelectorAll("div+img");
:nth-child(n) : Selects the nth child of a parent, regardless of the type of element.
:first-child
:last-child
:nth-of-type(n) : Selects the nth child of a specific type within its parent.
const matchedElements = document.querySelectorAll("div"); // querySelectorAll returns a NodeList not an Array. You can convert it to an Array Array.from(matchedElements).filter((item) => item.classList.contains('note'));
Parameters: nameAttrValue the value of the name attribute of the element(s) we are looking for.
Return value: A live NodeList collection, meaning it automatically updates as new elements with the same name are added to, or removed from, the document.
getElementsByTagName(elementName)
Parameters: elementName a string representing the name of the elements. The special string * represents all elements.
In this post, I will introduce the basic concepts of Docker. You’ll learn what docker is, why and when to use it.
What is Docker
Docker is an open source project for building, shipping, and running programs. It is a command line program, a background process, and a set of remote services that take a logistical approach to solving common software problems and simplifying your experience installing, running, publishing, and removing software. It accomplishes this by using an operating system technology called containers.
After Docker is up and running on your computer, you can enter the following command to run the hello-world program provided by Docker in a container:
docker run hello-world # or docker run library/hello-world
After execute the above command you can see the output of the hello-world program
Hello from Docker! This message shows that your installation appears to be working correctly. ...
After print the above text, the program exits, and container is marked as stopped. The running state of a container is directly tied to the state of a single running program inside the container. If a program is running, the container is running. If the program is stopped, the container is stopped. Restarting a container will run the program again.
In the second time to run a container, you can use docker start <container> to run an existing container directly instead of create a new similar container from its image again.
The process of the docker run command execution is:
The hello-world is called the image or repository name. You can think of the image name as the name of the program you want to install or run. The image is a collection of files and metadata. The metadata includes the specific program to execute and other relevant configuration details.
Docker Hub is a public registry provide by Docker Inc. It is a repository service and it is a cloud-based service where people push their Docker Container Images and also pull the Docker Container Images from the Docker Hub.
Container
Historically, UNIX-style operating systems have used the term jail to describe a modified runtime environment that limits the scope of resources that a jailed program can access. Jail features go back to 1979 and have been in evolution ever since. In 2005, with the release of Sun’s Solaris 10 and Solaris Containers, container has become the preferred term for such a runtime environment. The goal has expanded from limiting filesystem scope to isolating a process from all resources except where explicitly allowed.
Using containers has been a best practice for a long time. But manually building containers can be challenging and easy to do incorrectly. Docker uses existing container engines to provide consistent containers built according to best practices. This puts stronger security within reach for everyone.
Containers vs Virtual machines
Virtual machines
Every virtual machine has a whole operating system
Take a long time (often minutes) to create.
Require significant resource overhead.
Container
All Docker containers share an operating system.
Docker containers don’t use any hardware virtualization. Programs running inside Docker containers interface directly with the host’s Linux kernel.
Many programs can run in isolation without running redundant operating systems or suffering the delay of full boot sequences.
Running software in containers for isolation
Each container is running as a child process of the Docker engine, wrapped with a container, and the delegate process is running in its own memory subspace of the user space. Programs running inside a container can access only their own memory and resources as scoped by the container.
Shipping containers
Docker use images to shipping containers. A Docker image is a bundled snapshot of all the files that should be available to a program running inside a container. You can create as many containers from an image as you want. Images are the shippable units in the Docker ecosystem.
Docker provides a set of infrastructure components that simplify distributing Docker images. These components are registries and indexes. You can use publicly available infrastructure provided by Docker Inc., other hosting companies, or your own registries and indexes. You can store and search images from a registry.
Why Use Docker
Docker makes it easy and simple to use the container and isolation features provided by operating systems.
Why use the container and isolation features
Dependency conflict.
Portability between operating systems. Docker runs natively on Linux and comes with a single virtual machine for macOS and Windows environments. You can run the same software on any system.
Protecting your computer. Docker prevents malicious program attacks through operating system resource access control.
Application removal. All program execution files and program-produced files are in a container. You can remove all of these files easily.
When to use Docker
Docker can run almost anywhere for any application. But currently Docker can run only applications that can run on a Linux operating system, or Windows applications on Windows Server. If you want to run a macOS or Windows native application on your desktop, you can’t yet do so with Docker.
References
[1] Jeffrey, Nickoloff and Stephen, Kuenzli. Docker in Action. 2nd ed., Manning Publications, 2019.
handleInputChange = (e) => { const name = e.target.value; this.setState({ childName: name }) }
handleParentValueChange = (value) => { this.setState({ name: value }) }
render() { return ( <div> <h2>I'm the parent page</h2> <p>Receive from child: {this.state.name}</p> Enter data to pass to child: <Input onChange={this.handleInputChange}></Input> <Child name={this.state.childName} onParentNameChange={this.handleParentValueChange}></Child> </div> ) } }
export default Parent;
Child.js
import { PureComponent } from 'react'; import { Input } from 'antd';
render() { return ( <div style={{backgroundColor: "lightgray", padding: "10px 10px 10px 10px"}}> <h2>I'm the child page</h2> <p>Receive from parent by props: {this.props.name}</p> Enter data to pass to parent: <Input onChange={this.handleInputChange}></Input> </div> ) } }
export default Child;
Pass functions between a parent and a child component
Pass functions to child components
If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).
There are several ways to make sure functions have access to component attributes like this.props and this.state.
Note: Make sure you aren’t calling the function when you pass it to the component
render() { // Wrong: handleClick is called instead of passed as a reference! // The function being called every time the component renders. return <button onClick={this.handleClick()}>Click Me</button> }
Note: Make sure you aren’t calling the function when you pass it to the component
render() { // Wrong: handleClick is called instead of passed as a reference! // The function being called every time the component renders. return <button onClick={this.handleClick()}>Click Me</button> }
Note: Using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison.
Call child functions in a parent component
refs
Previously, refs were only supported for Class-based components. With the advent of React Hooks, that’s no longer the case.
Modern React with Hooks (v16.8+)
Hook parent and hook child (Functional Component Solution)
const Parent = () => { // In order to gain access to the child component instance, // you need to assign it to a `ref`, so we call `useRef()` to get one const childRef = useRef();
// We need to wrap component in `forwardRef` in order to gain // access to the ref object that is assigned using the `ref` prop. // This ref is passed as the second parameter to the function component. const Child = forwardRef((props, ref) => {
// The component instance will be extended // with whatever you return from the callback passed // as the second argument useImperativeHandle(ref, () => ({ getAlert() { alert("getAlert from Child"); } })); return <h1>Hi</h1>; });
Legacy API using Class Components (>= react@16.4)
Class parent and class child (Class Component Solution)
/** * This is a reducer - a function that takes a current state value and an * action object describing "what happened", and returns a new state value. * A reducer's function signature is: (state, action) => newState * * The Redux state should contain only plain JS objects, arrays, and primitives. * The root state value is usually an object. It's important that you should * not mutate the state object, but return a new object if the state changes. * * You can use any conditional logic you want in a reducer. In this example, * we use a switch statement, but it's not required. */ function counterReducer(state = { value: 0 }, action) { switch (action.type) { case 'counter/incremented': return { value: state.value + 1 } case 'counter/decremented': return { value: state.value - 1 } default: return state } }
// Create a Redux store holding the state of your app. // Its API is { subscribe, dispatch, getState }. let store = createStore(counterReducer)
// You can use subscribe() to update the UI in response to state changes. // Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly. // There may be additional use cases where it's helpful to subscribe as well.
// The only way to mutate the internal state is to dispatch an action. // The actions can be serialized, logged or stored and later replayed. store.dispatch({ type: 'counter/incremented' }) // {value: 1} store.dispatch({ type: 'counter/incremented' }) // {value: 2} store.dispatch({ type: 'counter/decremented' }) // {value: 1}
Pass data to components use URL query string: url?field=value&field2=value2
Get query string parameters
const params = newProxy(newURLSearchParams(window.location.search), { get: (searchParams, prop) => searchParams.get(prop), }); // Get the value of "some_key" in eg "https://example.com/?some_key=some_value" let value = params.some_key; // "some_value"
