Below is a simple laboratory exercise where students create a web calculator using Python and Flask, run it in the Cloud Shell terminal, and deploy it to Google Cloud Run.
1. Open Google Cloud Console
Open the Google Cloud Console and select your project.
Then open:
Cloud Shell ā Terminal
We will create the application directly in the built-in Cloud Shell.
2. Create a project folder
In the Cloud Shell terminal, run:
mkdir calculator
cd calculator
3. Create the Python application
Run:
nano app.py
Paste the following code:
from flask import Flask, request, render_template_string
# Create the Flask application
app = Flask(__name__)
# HTML, CSS and calculator interface
HTML = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloud Calculator</title>
<style>
/* Remove default browser spacing */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main page */
body {
font-family: Arial, Helvetica, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background:
linear-gradient(
135deg,
#667eea,
#764ba2
);
padding: 20px;
}
/* Calculator container */
.calculator {
width: 100%;
max-width: 400px;
padding: 30px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.25);
color: white;
}
/* Calculator title */
h1 {
text-align: center;
font-size: 32px;
margin-bottom: 10px;
}
/* Subtitle */
.subtitle {
text-align: center;
color: rgba(255, 255, 255, 0.75);
margin-bottom: 25px;
font-size: 14px;
}
/* Input fields */
input,
select {
width: 100%;
padding: 15px;
margin-bottom: 15px;
border: none;
border-radius: 12px;
font-size: 17px;
outline: none;
background: rgba(255, 255, 255, 0.9);
color: #333;
transition: 0.2s;
}
/* Input focus effect */
input:focus,
select:focus {
transform: scale(1.02);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.3);
}
/* Operation selector */
select {
cursor: pointer;
font-weight: bold;
}
/* Calculate button */
button {
width: 100%;
padding: 15px;
border: none;
border-radius: 12px;
font-size: 18px;
font-weight: bold;
color: white;
cursor: pointer;
background:
linear-gradient(
135deg,
#ff6a00,
#ee0979
);
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.2);
transition: all 0.2s;
}
/* Button hover effect */
button:hover {
transform: translateY(-2px);
box-shadow:
0 12px 25px rgba(0, 0, 0, 0.3);
}
/* Button click effect */
button:active {
transform: scale(0.98);
}
/* Result box */
.result {
margin-top: 25px;
padding: 20px;
border-radius: 15px;
text-align: center;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Result label */
.result-title {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 8px;
}
/* Result number */
.result-value {
font-size: 36px;
font-weight: bold;
word-break: break-word;
}
/* Cloud Run label */
.cloud-run {
margin-top: 25px;
text-align: center;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
/* Mobile devices */
@media (max-width: 450px) {
.calculator {
padding: 22px;
}
h1 {
font-size: 28px;
}
}
</style>
</head>
<body>
<div class="calculator">
<h1>š§® Calculator</h1>
<div class="subtitle">
Simple calculator powered by Python
</div>
<form method="POST">
<!-- First number -->
<input
type="number"
name="num1"
step="any"
placeholder="Enter first number"
required
>
<!-- Mathematical operation -->
<select name="operation">
<option value="+">
ā Addition
</option>
<option value="-">
ā Subtraction
</option>
<option value="*">
āļø Multiplication
</option>
<option value="/">
ā Division
</option>
</select>
<!-- Second number -->
<input
type="number"
name="num2"
step="any"
placeholder="Enter second number"
required
>
<!-- Calculate button -->
<button type="submit">
Calculate
</button>
</form>
{% if result is not none %}
<div class="result">
<div class="result-title">
Result
</div>
<div class="result-value">
{{ result }}
</div>
</div>
{% endif %}
<div class="cloud-run">
āļø Running on Google Cloud Run
</div>
</div>
</body>
</html>
"""
# Main calculator route
@app.route("/", methods=["GET", "POST"])
def calculator():
# No result when the page is opened
result = None
# Process the form after clicking Calculate
if request.method == "POST":
# Get the two numbers
num1 = float(request.form["num1"])
num2 = float(request.form["num2"])
# Get the selected operation
operation = request.form["operation"]
# Perform the calculation
if operation == "+":
result = num1 + num2
elif operation == "-":
result = num1 - num2
elif operation == "*":
result = num1 * num2
elif operation == "/":
if num2 == 0:
result = "Cannot divide by zero"
else:
result = num1 / num2
# Display the HTML page
return render_template_string(
HTML,
result=result
)
# Start the application
if __name__ == "__main__":
app.run(
host="0.0.0.0",
port=8080
)
"""
# Process calculator requests
@app.route("/", methods=["GET", "POST"])
def calculator():
result = None
if request.method == "POST":
# Get numbers from the form
num1 = float(request.form["num1"])
num2 = float(request.form["num2"])
# Get selected operation
operation = request.form["operation"]
# Perform calculation
if operation == "+":
result = num1 + num2
elif operation == "-":
result = num1 - num2
elif operation == "*":
result = num1 * num2
elif operation == "/":
if num2 == 0:
result = "Cannot divide by zero"
else:
result = num1 / num2
return render_template_string(HTML, result=result)
# Start the web server
if __name__ == "__main__":
app.run(
host="0.0.0.0",
port=8080
)
Save the file:
Ctrl + O ā Enter ā Ctrl + X
4. Create requirements.txt
Run:
nano requirements.txt
Add:
Flask
gunicorn
Save and exit.
5. Test the application in Cloud Shell
Install Flask:
pip install -r requirements.txt
Start the application:
python app.py
The terminal should show something similar to:
Running on http://127.0.0.1:8080
To open the application, use Web Preview in Cloud Shell and select port 8080.
Now the calculator should appear in your browser.
6. Stop the local server
Return to the terminal and press:
Ctrl + C
7. Create a Dockerfile
Run:
nano Dockerfile
Paste:
FROM python:3.12-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY app.py .
CMD exec gunicorn --bind :8080 --workers 1 --threads 8 --timeout 0 app:app
Save and exit.
8. Deploy the calculator to Cloud Run
From the same folder, run:
gcloud run deploy calculator \
--source . \
--region europe-central2 \
--allow-unauthenticated
Google Cloud will build the application and deploy it to Cloud Run.
When deployment finishes, you will receive a URL similar to:
https://calculator-xxxxx-uc.a.run.app
9. Open the calculator
Copy the URL from the terminal and open it in your browser.
You now have a public web calculator running on Google Cloud Run.
What students have learned
After completing the laboratory, students should understand:
- Python ā application logic.
- Flask ā web application framework.
- HTML/CSS ā user interface.
- Cloud Shell ā built-in Google Cloud terminal.
- Dockerfile ā describes how to build the application container.
- Cloud Run ā runs the container as a web service.
- Public URL ā allows users to access the application over the Internet.
Simple architecture
User
ā
Web Browser
ā
Cloud Run
ā
Container
ā
Flask Application
ā
Calculator Logic
This is a good beginner Cloud Run laboratory because students can see the complete path from writing Python code in the terminal to deploying a real web application to the cloud.
Top comments (0)