Introduction:
In this blog post, I will explain how to use Business application studio to create a python app in BTP cloud foundry.
Prerequisite:
Tutorial Link: Create an Application with Cloud Foundry Python Buildpack
Setup:
- Create a new dev space.
- Create a new project from template of type basic multi-target application.
- Create a directory named 'quizapp' with the structure as below.
- The contents of files are as below. 'manifest.yml' contains the application name.
applications:
- name: QuizApp
- runtime.txt :
python-3.11.7
- requirements.txt:
requests~=2.31.0
flask~=3.0.2
gunicorn~=21.2.0
- Procfile:
web: gunicorn -b 0.0.0.0:$PORT app:app
- app.py:
from flask import Flask, render_template, request
import requests
import random
list_of_questions = []
DB_URL = "https://opentdb.com/api.php"
list_of_options = {
"Books": 10,
"Film": 11,
"Music": 12,
"Television": 14,
"Video Games": 15,
"Comics": 29
}
app = Flask(__name__)
@app.route('/')
def home():
return render_template('home.html', options=list(list_of_options.keys()))
@app.route('/quiz', methods=['POST'])
def display_quiz():
selected_option = request.form['choice']
query_params = {
"amount": 30,
"category": list_of_options[selected_option],
"type": "multiple"
}
response = requests.get(url=DB_URL, params=query_params)
data = response.json()['results']
random.shuffle(data)
global list_of_questions
list_of_questions = []
list_of_questions = data[:10]
for ques in list_of_questions:
options = ques['incorrect_answers']
options.append(ques['correct_answer'])
random.shuffle(options)
ques['options'] = options
return render_template('quiz.html', questions=list_of_questions)
@app.route('/submit', methods=['POST'])
def submit_quiz():
score = 0
for index, ques in enumerate(list_of_questions, start=1):
user_answer = request.form.get(f"question_{index}")
correct_answer = ques['correct_answer']
if user_answer == correct_answer:
score += 1
return render_template('result.html', score=score)
if __name__ == "__main__":
app.run()
- home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="static/home.css" rel="stylesheet">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<title>Category for Entertainment Quiz</title>
</head>
<body>
<h1>Do you have a passion for entertainment?</h1>
<form action="{{url_for('display_quiz')}}" method="post">
<label for="dropdown">Select a category for Quiz:</label>
<select id="dropdown" name="choice">
{% for option in options %}
<option value="{{ option }}">{{ option }}</option>
{% endfor %}
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- quiz.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="static/quiz.css" rel="stylesheet">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<title>Entertainment Quiz</title>
</head>
<body>
<h1>Quiz Questions</h1>
<form action="{{ url_for('submit_quiz') }}" method="post">
<ol>
{% set question_index = namespace(value=1) %}
{% for ques in questions %}
<li>
<p>{{ loop.index }}. {{ ques['question'] | safe }}</p>
<ul>
{% for option in ques['options'] %}
<li>
<label>
<input type="radio" name="question_{{question_index.value}}" value="{{ option }}">
{{ option | safe}}
</label>
</li>
{% endfor %}
{% set question_index.value=question_index.value+1 %}
</ul>
</li>
{% endfor %}
</ol>
<input type="submit" value="Submit">
</form>
</body>
</html>
- result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="static/result.css" rel="stylesheet">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<title>Quiz Result</title>
</head>
<body>
<h1>Quiz Result</h1>
<div id="result-container">
<p>Your score is: {{ score }} out of 10</p>
</div>
</body>
</html>
- For css files, you can style as per your preference.
Deploy
Log in to SAP BTP, Cloud Foundry environment:
cf login
Deploy the application on Cloud Foundry:
cf push
After successful deployment, the application will be visible in dev space.
Conclusion:
- Flask web framework is used along with Jinja2 template. All the html files are inside 'templates' folder and all css/image files are under the 'static' folder.
- For quiz question generation, Trivia API is used.
- Demo Execution: Video link.
- SAP Managed Tags:
