DEV Community: Zhao Xinhao

Git Version Control and Github

Zhao Xinhao — Thu, 11 Sep 2025 03:32:44 +0000

1.Initialization
In root path:
git init
2.Create .gitignore (Ignore unnecessary files)
nano .gitignore
fill in with

venv/

instance/
todo.db

__pycache__/
*.py[cod]

3.Add files to the staging area
git add .

4.Submit changes
git commit -m "Initial commit: basic Flask todo app with add task functionality"

5.Check file status
git status

6.Set golbal information
git config --global user.name "Your username" git config --global user.email "your e-mail@example.com"

7.Check current configuration
git config --global --list git config --list

8.Associate remote repository and push
bash
git remote add origin https://github.com/Your-username/Your-repository.git git push -u origin master
After setting, you can push like this
git add . git commit -m "Something notices" git push

Simple Calculator in Python

Zhao Xinhao — Thu, 28 Aug 2025 02:47:50 +0000

1.calculator.py

from fastapi import FastAPI, HTTPException
from fastapi.responses import FileResponse
from pydantic import BaseModel

class CalculationRequest(BaseModel):
    num1: float
    num2: float

app = FastAPI()

@app.post("/add")
async def add(request: CalculationRequest):
    return {"result": request.num1 + request.num2}

@app.post("/subtract")
async def subtract(request: CalculationRequest):
    return {"result": request.num1 - request.num2}

@app.post("/multiply")
async def multiply(request: CalculationRequest):
    return {"result": request.num1 * request.num2}

@app.post("/divide")
async def divide(request: CalculationRequest):
    epsilon = 1e-10
    #return{"result": request.num2-epsilon}
    if abs(request.num2) < epsilon:
        raise HTTPException(status_code=400, detail="Cannot divide by zero!")
    return {"result": request.num1 / request.num2}

@app.get("/")
def read_root():
    return FileResponse("index.html")

2.index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Calculator App</title>
    </head>
    <body>
        <h1>Calculator</h1>
        <input type="text" id="num1" placeholder="Enter num1">
        <input type="text" id="num2" placeholder="Enter num2">
        <div>
            <button onclick="add()">+</button>
            <button onclick="subtract()">-</button>
            <button onclick="multiply()">*</button>
            <button onclick="divide()">/</button>
        </div> 
        <div id="result"></div>

        <script>
            async function calculate(operation) {
                const num1 = document.getElementById("num1").value;
                const num2 = document.getElementById("num2").value;

                if (!num1 || !num2) {
                    document.getElementById("result").innerText = "Please enter both numbers";
                    return;
                }

                try {
                    const response = await fetch(`http://localhost:8000/${operation}`,{
                        method: "POST",
                        headers: { "Content-Type":"application/json"},
                        body: JSON.stringify({
                        num1: num1,
                        num2: num2
                    })
                });

                    const data = await response.json();

                    if(!response.ok){
                        document.getElementById("result").innerText = `Error: ${data.detail}`;
                    }else{
                        document.getElementById('result').innerHTML = `
                            <p>Result: ${data.result}</p>
                            <p>Operation: ${num1} ${getOperationSymbol(operation)} ${num2} = ${data.result}</p>
                        `;
                    }
                } catch (error) {
                    document.getElementById("result").innerText = `Network error: ${error.message}`;
                }
            }

            function getOperationSymbol(operation) {
                const symbols = {
                    'add': '+',
                    'subtract': '-',
                    'multiply': '*',
                    'divide': '/'
                };
                return symbols[operation];
            }

            function add() { calculate('add'); }
            function subtract() { calculate('subtract'); }
            function multiply() { calculate('multiply'); }
            function divide() { calculate('divide'); }
        </script>
    </body>
</html>

3.Display

Weather Query in Python

Zhao Xinhao — Mon, 25 Aug 2025 08:52:22 +0000

1.Install FastAPI and tools

bash
pip install fastapi uvicorn requests python-dotenv

2.Create a folder for project
Open terminal and run:

bash
mkdir Weather Query cd Weather Query

3.Create a .envfile to store API key securely
Inside the Weather Query folder, create a new file named .env,open the file and add this line(we'll get the actual API key next):

plaintext
OPENWEATHER_API_KEY=your_api_key_here

4.Create main.py
Inside Weather Query, create a new file named main.py

python

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
import requests
import os
from dotenv import load_dotenv

# Load API key from .env
load_dotenv()  # This looks for the .env file automatically
API_KEY = os.getenv("OPENWEATHER_API_KEY")  # Reads your key

app = FastAPI()

class CityRequest(BaseModel):
    city: str  # This defines what data your API expects

@app.post("/weather")
def get_weather(city: CityRequest):
    url = f"http://api.openweathermap.org/data/2.5/weather?q={city.city}&appid={API_KEY}&units=metric"
    response = requests.get(url)

    if response.status_code != 200:
        raise HTTPException(status_code=400, detail="City not found or API error")

    weather_data = response.json()
    return {
        "city": city.city,
        "temperature": weather_data["main"]["temp"],
        "weather": weather_data["weather"][0]["description"]
    }

5.Start the FastAPI Server
In terminal(inside the Weather Query folder),run:
bash
uvicorn main:app --reload
Expected Output:
INFO: Uvicorn running on http://127.0.0.1:8000

6.Test the API in Browser
Open browser and go to http://localhost:8000/docs, find the POST / weather endpoint, click "Try it out", enter a city name(e.g., {"city": "Tokyo"}), click "Execute".

Expected Output:
{
"city": "Tokyo",
"temperature": 25.5,
"weather": "clear sky"
}

7.Try Errors
Enter an invalid city(e.g.,{"city": "Hogwarts"})

json
"detail": "City not found or API error"

8.Create weather.html And Add Basic Html Structure
html

<!DOCTYPE html>
<html>
<head>
    <title>Weather App</title>
</head>
<body>
    <h1>Weather Check</h1>
</body>
</html>

9.Add City Input and Button
html
<input type="text" id="city" placeholder="Enter city name"> <button onclick="getWeather()">Get Weather</button> <div id="result"></div>

10.Add JavaScript to weather.html
html

<script>
    async function getWeather() {
        const city = document.getElementById("city").value;
        const response = await fetch("http://localhost:8000/weather", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ city: city })
        });
        const data = await response.json();
        if (data.detail) {
            document.getElementById("result").innerText = `Error: ${data.detail}`;
        } else {
            document.getElementById("result").innerHTML = `
                <p>City: ${data.city}</p>
                <p>Temperature: ${data.temperature}°C</p>
                <p>Weather: ${data.weather}</p>
            `;
        }
    }
</script>

fetch():Calls FastAPI endpoint(POST /weather)with the city name.
response.json():Converts the API response to JSON.
Error Handling:Shows errors(e.g., "City not found")or displays weather data.
innerHTML:Inserts HTML into the result div.
async/await：Waits for the API call to finish before proceeding.

11.Serve the HTML File
Update main.py(FastAPI) to serve weather.html at the root URL(/):
python

# Lets FastAPI send a file(like weathter.html)as a response
from fastapi.responses import FileResponse

# Serve the HTML file at the root URL
@app.get("/")
def read_root():
    return FileResponse("weather.html")

12.Run the Server and Check the Browser
uvicorn main:app --reload
go to http://localhost:8000/ ,you will see

Hello World service in Python

Zhao Xinhao — Sun, 24 Aug 2025 09:23:54 +0000

A "Hello World" service does one thing: it responds to request with the text "Hello, World!".

FastAPI is modern,fast,and provides automatic API documentation.
Here's a guide to creating a Hello World service with FastAPI:

1.Installation
First,install the required packages:

bash
pip install fastapi uvicorn

Unicorn is a super-fast server for Python that runs web applications.
FasAPI to create the application, and Uvicorn to start it and handle incoming web requests.

2.Basic Hello World Service
Create a file main.py:
simplest:
python

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def hello_world():
    return "helloworld"

improve:

from fastapi import FastAPI

# Create FastAPI instance
app = FastAPI(
    title = "Hello World API",
    description = "A simply Hello World service",
    version = "1.0.0"
)

# Define a simple GET endpoint
@app.get("/")
async def hello_world():
    return {"message": "Hello, World!"}

3.Running the Service
Using uvicorn directly

bash
uvicorn main:app --reload or
uvicorn main:app --reload --host 0.0.0.0 --port 8000

Means:
"Uvicorn,please run the FastAPI app named app from the main.py file.Watch for code changes and reload automatically.Let any device on the network connect to it, and serve it on port 8000."

4.Testing the Service
Once running, we can access:
http://localhost:8000 or http://127.0.0.1:8000
And you will get the {"message":"Hello, World!"} in brower.
It's done！If you want to keep going, here are next steps:

5.Add a New Endpoint
Try creating a new "greet" endpoint that takes a name as input:

python

# Define a GET endpoint about greet
@app.get("/greet/{name}")
def greet(name: str):
    return {"message": f"Hello, {name}!"}

Test it at: http://localhost:8000/greet/Alice.

6.Try a POST Request
Accept data(like a username)from the user:

python

from pydantic import BaseModel

class User(BaseModel):
    username: str

# Define a Post endpoint about login
@app.post("/login")
def login(user: User):
    return {"message": f"Welcome, {user.username}!"}

Using FastAPI's /docs page,go to http://localhost:8000/docs, find POST /login,click"Try it out",enter the json,and hit "Execute".Then you send the data to server.