इस ट्यूटोरियल में, हम बैकएंड के लिए FastAPI, फ्रंटएंड के लिए HTML और CSS और एक का उपयोग करके एक बुनियादी ब्लॉग ऐप बनाएंगे। बुनियादी CRUD (बनाएं, पढ़ें, अपडेट करें, हटाएं) संचालन करने के लिए JSON फ़ाइल।
फास्टएपीआई पायथन के साथ एपीआई बनाने के लिए एक आधुनिक वेब फ्रेमवर्क है, जो अपनी सादगी, गति और एसिंक्रोनस संचालन के लिए अंतर्निहित समर्थन के लिए जाना जाता है।

नीचे कार्यान्वयन इस तरह दिखेगा:

आवश्यकताएँ

आरंभ करने से पहले, सुनिश्चित करें कि आपने निम्नलिखित इंस्टॉल कर लिया है:

• पायथन 3.7
• फास्टएपीआई
• यूविकॉर्न (फास्टएपीआई एप्लिकेशन चलाने के लिए)

FastAPI और Uvicorn इंस्टॉल करने के लिए, आप पाइप का उपयोग कर सकते हैं:

pip install fastapi uvicorn python-multipart

प्रोजेक्ट संरचना

यहां बताया गया है कि परियोजना की संरचना कैसे की जाएगी:

/blog_app
    ├── static
    │   └── style.css
    ├── templates
    │   ├── index.html
    │   ├── post.html
    │   ├── create_post.html
    ├── blog.json
    ├── main.py

चरण 1: फास्टएपीआई की स्थापना

एक main.py फ़ाइल बनाएं जिसमें FastAPI एप्लिकेशन होगा।

from fastapi import FastAPI, Request, Form
from fastapi.responses import HTMLResponse, RedirectResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
import json
import os

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")

templates = Jinja2Templates(directory="templates")

# Load or initialize blog data
BLOG_FILE = "blog.json"

if not os.path.exists(BLOG_FILE):
    with open(BLOG_FILE, "w") as f:
        json.dump([], f)


def read_blog_data():
    with open(BLOG_FILE, "r") as f:
        return json.load(f)


def write_blog_data(data):
    with open(BLOG_FILE, "w") as f:
        json.dump(data, f)


@app.get("/", response_class=HTMLResponse)
async def home(request: Request):
    blogs = read_blog_data()
    return templates.TemplateResponse("index.html", {"request": request, "blogs": blogs})


@app.get("/post/{post_id}", response_class=HTMLResponse)
async def read_post(request: Request, post_id: int):
    blogs = read_blog_data()
    post = blogs[post_id] if 0 




  
  
  चरण 2: HTML और CSS सेट करना


टेम्प्लेट फ़ोल्डर में, निम्नलिखित HTML फ़ाइलें बनाएं:

index.html

यह फ़ाइल सभी ब्लॉग पोस्ट सूचीबद्ध करेगी।





    
    
    
    


    
Blog Posts
    Create New Post
    

        {% for post in blogs %}
        

            
{{ post.title }}
            
{{ post.content[:100] }}...
            Read more
            

                Delete
            
        
        {% endfor %}
    







post.html

यह फ़ाइल ब्लॉग पोस्ट की पूरी सामग्री प्रदर्शित करेगी।





    
    
    
    


    
{{ post.title }}
    
{{ post.content }}
    Back to Home







create_post.html

इस फ़ाइल में नई पोस्ट बनाने का फ़ॉर्म होगा.





    
    
    
    


    
Create a New Post
    

चरण 3: सीएसएस के साथ स्टाइलिंग

स्थैतिक फ़ोल्डर में, कुछ बुनियादी स्टाइल जोड़ने के लिए एक style.css फ़ाइल बनाएं।

body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

a {
    text-decoration: none;
    color: #0066cc;
}

.post {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

button {
    background-color: #ff4d4d;
    border: none;
    padding: 5px 10px;
    color: white;
    border-radius: 3px;
    cursor: pointer;
}

button:hover {
    background-color: #ff1a1a;
}

input, textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

चरण 4: एप्लिकेशन चलाना

अब जब सब कुछ सेट हो गया है, तो Uvicorn का उपयोग करके फास्टएपीआई एप्लिकेशन चलाएं।

uvicorn main:app --reload

अपने ब्राउज़र में http://127.0.0.1:8000 पर जाएं, और आपको ब्लॉग होमपेज देखना चाहिए।

एक असाइनमेंट के रूप में, आप पूर्ण-स्टैक वेब ऐप बनाने के लिए केवल JSON के बजाय डेटाबेस ?️ का उपयोग कर सकते हैं।
डेटाबेस के साथ, आप अधिक सुविधाएं जोड़ सकते हैं, प्रदर्शन में सुधार कर सकते हैं, और समग्र यूआई/यूएक्स को बढ़ा सकते हैं? बेहतर उपयोगकर्ता अनुभव के लिए।

इस ब्लॉग के लिए बस इतना ही! अधिक अपडेट के लिए बने रहें और अद्भुत ऐप्स बनाते रहें! ?✨