SlideShare a Scribd company logo
1 of 17
WEB DEV
WORKSHOP
IIT Tirupati | Ansh | Abhinav
GDSC
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
Overview of a web application
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 …
Backend Frameworks
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
Performance
Python
pip install fastapi uvicorn or py -m pip install fastapi uvicorn
https://fastapi.tiangolo.com/tutorial/first-steps/
Requirements
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
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
from dotenv import load_dotenv
import os
load_dotenv()
secret_key = os.getenv('SECRET_KEY') print(secret_key)
Storing Sensitive Data
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
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
PostgreSQL
MySQL
SQLite
Oracle
Microsoft SQL Server, etc.
pip install sqlalchemy
SQL (Relational Database)
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
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
Web Dev 21-01-2024.pptx

More Related Content

Similar to Web Dev 21-01-2024.pptx

Technology Stack Discussion
Technology Stack DiscussionTechnology Stack Discussion
Technology Stack Discussion
Zaiyang Li
 
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010 Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger
 
Practices and tools for building better APIs
Practices and tools for building better APIsPractices and tools for building better APIs
Practices and tools for building better APIs
NLJUG
 
REST - What's It All About? (SAP TechEd 2012, CD110)
REST - What's It All About? (SAP TechEd 2012, CD110)REST - What's It All About? (SAP TechEd 2012, CD110)
REST - What's It All About? (SAP TechEd 2012, CD110)
Sascha Wenninger
 

Similar to Web Dev 21-01-2024.pptx (20)

Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
 
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
JHipster Conf 2018 : Connect your JHipster apps to the world of APIs with Ope...
 
Getting started with dotnet core Web APIs
Getting started with dotnet core Web APIsGetting started with dotnet core Web APIs
Getting started with dotnet core Web APIs
 
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
 
An Introduction to Websphere sMash for PHP Programmers
An Introduction to Websphere sMash for PHP ProgrammersAn Introduction to Websphere sMash for PHP Programmers
An Introduction to Websphere sMash for PHP Programmers
 
Spring diy projects
Spring diy projectsSpring diy projects
Spring diy projects
 
Technology Stack Discussion
Technology Stack DiscussionTechnology Stack Discussion
Technology Stack Discussion
 
Intro To Spring Python
Intro To Spring PythonIntro To Spring Python
Intro To Spring Python
 
Introduction to Google App Engine with Python
Introduction to Google App Engine with PythonIntroduction to Google App Engine with Python
Introduction to Google App Engine with Python
 
Best practices and advantages of REST APIs
Best practices and advantages of REST APIsBest practices and advantages of REST APIs
Best practices and advantages of REST APIs
 
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010 Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
 
Practices and tools for building better APIs
Practices and tools for building better APIsPractices and tools for building better APIs
Practices and tools for building better APIs
 
Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)
 
Mrigendra kumar bharti resume
Mrigendra kumar bharti resumeMrigendra kumar bharti resume
Mrigendra kumar bharti resume
 
Apitesting.pptx
Apitesting.pptxApitesting.pptx
Apitesting.pptx
 
Implementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPCImplementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPC
 
REST - What's It All About? (SAP TechEd 2012, CD110)
REST - What's It All About? (SAP TechEd 2012, CD110)REST - What's It All About? (SAP TechEd 2012, CD110)
REST - What's It All About? (SAP TechEd 2012, CD110)
 
Adding Rules on Existing Hypermedia APIs
Adding Rules on Existing Hypermedia APIsAdding Rules on Existing Hypermedia APIs
Adding Rules on Existing Hypermedia APIs
 
The Complete Guide to API Development in 2022.pdf
The Complete Guide to API Development in 2022.pdfThe Complete Guide to API Development in 2022.pdf
The Complete Guide to API Development in 2022.pdf
 
PPT for Seminar.pptx
PPT for Seminar.pptxPPT for Seminar.pptx
PPT for Seminar.pptx
 

Recently uploaded

Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
EADTU
 

Recently uploaded (20)

Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
Our Environment Class 10 Science Notes pdf
Our Environment Class 10 Science Notes pdfOur Environment Class 10 Science Notes pdf
Our Environment Class 10 Science Notes pdf
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
What is 3 Way Matching Process in Odoo 17.pptx
What is 3 Way Matching Process in Odoo 17.pptxWhat is 3 Way Matching Process in Odoo 17.pptx
What is 3 Way Matching Process in Odoo 17.pptx
 
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdfUGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
UGC NET Paper 1 Unit 7 DATA INTERPRETATION.pdf
 
Simple, Complex, and Compound Sentences Exercises.pdf
Simple, Complex, and Compound Sentences Exercises.pdfSimple, Complex, and Compound Sentences Exercises.pdf
Simple, Complex, and Compound Sentences Exercises.pdf
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17Model Attribute _rec_name in the Odoo 17
Model Attribute _rec_name in the Odoo 17
 
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptxHMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
HMCS Vancouver Pre-Deployment Brief - May 2024 (Web Version).pptx
 
Tatlong Kwento ni Lola basyang-1.pdf arts
Tatlong Kwento ni Lola basyang-1.pdf artsTatlong Kwento ni Lola basyang-1.pdf arts
Tatlong Kwento ni Lola basyang-1.pdf arts
 
Economic Importance Of Fungi In Food Additives
Economic Importance Of Fungi In Food AdditivesEconomic Importance Of Fungi In Food Additives
Economic Importance Of Fungi In Food Additives
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
Transparency, Recognition and the role of eSealing - Ildiko Mazar and Koen No...
 
dusjagr & nano talk on open tools for agriculture research and learning
dusjagr & nano talk on open tools for agriculture research and learningdusjagr & nano talk on open tools for agriculture research and learning
dusjagr & nano talk on open tools for agriculture research and learning
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
OSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & SystemsOSCM Unit 2_Operations Processes & Systems
OSCM Unit 2_Operations Processes & Systems
 
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdfFICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
FICTIONAL SALESMAN/SALESMAN SNSW 2024.pdf
 

Web Dev 21-01-2024.pptx

  • 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 …
  • 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
  • 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