The document outlines a web development workshop at IIT Tirupati covering topics such as an overview of web development, hands-on experience with frontend frameworks like React via Next.js, and backend frameworks like FastAPI. It explains the functionality of APIs and details the features of FastAPI, highlighting its advantages like performance, ease of use, and reduced bugs. Additionally, the workshop includes instructions for interacting with databases, middleware use, CORS, and practical coding activities.

1. WEB DEV
WORKSHOP
IIT Tirupati | Ansh | Abhinav
GDSC

2. What will we learn today ?
1. Overview of web development
2. Frontend Frameworks with hands-on with React via Next.js
3. Backend Frameworks with hands-on with FastAPI
4. A full stack project Be My Valentine
5. Deployment of the Project
# Templates will be provided for the project development

3. Overview of a web application

4. API stands for Application Programming Interface. In the context of APIs, the word Application refers
to any software with a distinct function. Interface can be thought of as a contract of service between
two applications. This contract defines how the two communicate with each other using requests
and responses.
The frontend and backend communicate with each other through an Application Programming
Interface (API). The API acts as an intermediary that allows the frontend and backend to
communicate.
API API API …

5. Backend Frameworks

6. FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.8+
based on standard Python type hints.
The key features are:
A. Fast: Very high performance, on par with NodeJS and Go (thanks to Starlette and Pydantic).
One of the fastest Python frameworks available.
B. Fast to code: Increase the speed to develop features by about 200% to 300%. *
C. Fewer bugs: Reduce about 40% of human (developer) induced errors. *
D. Intuitive: Great editor support. Completion everywhere. Less time debugging.
E. Easy: Designed to be easy to use and learn. Less time reading docs.
F. Short: Minimize code duplication. Multiple features from each parameter declaration. Fewer
bugs.
G. Robust: Get production-ready code. With automatic interactive documentation.
H. Standards-based: Based on (and fully compatible with) the open standards for APIs:
OpenAPI (previously known as Swagger) and JSON Schema.
FASTAPI

7. Performance

8. Python
pip install fastapi uvicorn or py -m pip install fastapi uvicorn
https://fastapi.tiangolo.com/tutorial/first-steps/
Requirements

9. Basics & Setup
Path Parameters
Query Parameters
Request Body
Query & Patterns
Response Model
CronJobs
Middleware & CORS
Activity
● Word Counter
● SMTP Newsletter
Template
Virtual Environment
Coding
Connecting to Frontend
Deployment
Let’s Learn

10. from fastapi_utils.tasks import repeat_every
@router.on_event('startup')
@repeat_every(seconds=10)
async def clean_otp():
print("hi")
Cron jobs are a standard way to automate repetitive tasks on a server, such as
updating, installing, or monitoring
CRON JOBS

11. from dotenv import load_dotenv
import os
load_dotenv()
secret_key = os.getenv('SECRET_KEY') print(secret_key)
Storing Sensitive Data

12. Middleware is a software or service that allows parts of a system to communicate and
manage data. It acts as a bridge between different systems, applications, and databases.
A "middleware" is a function that works with every request before it is processed by any
specific path operation. And also with every response before returning it.
Middleware
CORS or "Cross-Origin Resource Sharing" refers to the situations when a frontend running in a
browser has JavaScript code that communicates with a backend, and the backend is in a
different "origin" than the frontend.
CORS

13. So, let's say you have a frontend running in your browser at http://localhost:8080, and its JavaScript is trying to
communicate with a backend running at http://localhost (because we don't specify a port, the browser will
assume the default port 80).
Then, the browser will send an HTTP OPTIONS request to the backend, and if the backend sends the appropriate
headers authorizing the communication from this different origin (http://localhost:8080) then the browser will
let the JavaScript in the frontend send its request to the backend.
To achieve this, the backend must have a list of "allowed origins".
In this case, it would have to include http://localhost:8080 for the frontend to work correctly.
CORS

14. PostgreSQL
MySQL
SQLite
Oracle
Microsoft SQL Server, etc.
pip install sqlalchemy
SQL (Relational Database)

15. In FastAPI, a "model" refers to a Python class that inherits from the BaseModel class provided by the
Pydantic library. Pydantic is a data validation and parsing library that FastAPI uses to define the structure
of data exchanged in your API. These models are used for automatic data validation, serialization, and
documentation generation.
Here's a simple example of a FastAPI model:
python
Copy code
from pydantic import BaseModel
class Item(BaseModel):
name: str
description: str = None
price: float
Models

16. Word Counter
SMTP Newsletter
SMTP:
server = smtplib.SMTP(HOST, PORT)
server.starttls()
server.login(FROM_EMAIL, PASSWORD)
server.sendmail(FROM_EMAIL, user.email, BODY )
server.quit()
Activity