Coursera 笔记

Module 02 · Web App Deployment using Flask

Hands-on Lab: Building and Deploying a Web App using Flask App动手实验:使用 Flask 构建和部署 Web 应用

In this section, you will work with routes and HTTP requests in Flask. When you click the Launch Application button below, the Theia tool in Skills Networks Labs along with the lab instructions will open in a new browser tab.
在本节中,您将学习如何在 Flask 中处理路由和 HTTP 请求。当您点击下方的"启动应用程序"按钮时,Skills Networks Labs 中的 Theia 工具以及实验说明将在新的浏览器标签页中打开。

Introduction 引言

In this lab, we createa a basic application of mathematical functions and deploy it over a web interface using Flask. The purpose is to connect all the pieces of knowledge gained in the course till now, and see the application development and deployment steps in action.
在本实验中,我们创建一个基本的数学函数应用程序,并使用 Flask 通过 Web 界面进行部署。目的是将课程至今所学的所有知识联系起来,并实际观察应用程序开发和部署步骤。

Estimated time needed: 30 minutes
预计所需时间:30 分钟

Objectives 目标

In this assignment you will:
在本作业中,你将:

  • Task 1: Create the mathematical functions.
    任务 1:创建数学函数。
  • Task 2: Package the functions and test the package.
    任务 2:打包函数并测试包。
  • Task 3: Web Deployment of the application package using Flask.
    任务 3:使用Flask 进行应用程序包的 Web 部署。

Task 1: Write the mathematical functions 任务 1:写出数学函数

In this task, you arre required to write a script that has functions to add, subtract and multiply two values. Let's call this script mathematics.py
在这个任务中,你需要编写一个脚本,该脚本具有添加、减去和乘以两个值的函数。我们将这个脚本命名为 mathematics.py 。

Follow the steps for this task.
按照以下步骤完成任务。

  1. Open a terminal window by using the menu in the editor: Terminal > New Terminal.
    通过编辑器中的菜单打开一个终端窗口:终端 > 新建终端。

  1. Go to the project home directory.
    前往project主目录。

  1. cd /home/project
  2. Run the following command to Git clone the project directory from the clone URL you had copied in the prework lab.
    运行以下命令,从您在预备实验中复制的克隆 URL 克隆项目目录。

  1. git clone https://github.com/ibm-developer-skills-network/hjbsk-build_deploy_app_flask
  2. Change to the practice_project folder.
    切换到 practice_project 文件夹。

  1. cd /home/project/hjbsk-build_deploy_app_flask
  2. Create folder named Maths and change to that directory.
    创建名为 Maths 的文件夹并切换到该目录。

  1. mkdir Maths
  2. cd Maths
  3. In the explorer, go to the Maths directory and create a new file called mathematics.py.
    在资源管理器中,进入 Maths 目录并创建一个名为 mathematics.py 的新文件。
  4. Add function summation which takes in the a and b as a number arguments, in mathematics.py.
    添加求和函数,该函数接收 a 和 b 作为数值参数,在 mathematics.py 中。

Click here for solution
点击此处查看解决方案

def summation(a, b):
    result = a + b
    return result
  1. Add function subtraction which takes in the a and b as a number arguments, in mathematics.py.
    添加减法函数,该函数接收 a 和 b 作为数值参数,在 mathematics.py 中。

Click here for solution
点击此处查看解决方案

def subtraction(a, b):
    result = a - b
    return result
  1. Add function multiplication which takes in the a and b as a number arguments, in mathematics.py.
    添加乘法函数,该函数接收 a 和 b 作为数值参数,在 mathematics.py 中。

Click here for solution
点击此处查看解决方案

def multiplication(a, b):
    result = a * b
    return result

Task 2Package the functions 任务 2:打包函数

  1. Create __init__.py file in the directory Maths.
    在目录 Maths 中创建 __init__.py 文件。
  2. Import the file mathematics.py to the __init__.py file.
    将文件 mathematics.py 导入 __init__.py 文件。
from . import mathematics
  1. Import the package Maths in server.py.
    在 server.py 中导入包 Maths 。
from Maths.mathematics import summation, subtraction, multiplication
  1. In the server.py, for end-point /, implement a method that renders the index.html.
    在 server.py 中,针对端点 / ,实现一个渲染 index.html 的方法。
@app.route("/")
def render_index_page():
    return render_template('index.html')
  1. In the space provided in server.py for the endpoint /sum implement a function that uses the appropriate summation function from the package you created in the previous part. The function should retrieve num1 and num2 as float inputs from the request parameters. It should then check if the result is a whole number using the is_integer() method. If it is, convert the result to an integer before returning it as a string.
    在 server.py 提供的空间中,为端点 /sum 实现一个函数,该函数使用你在上一部分创建的包中的适当求和函数。该函数应从请求参数中获取 num1 和 num2 作为浮点数输入。然后,它应使用 is_integer() 方法检查结果是否为整数。如果是,则在将其作为字符串返回之前将其转换为整数。
  2. In the space provided in server.py for the endpoint /sub implement a function that uses the appropriate subtraction function from the package you created in the previous part. The function should retrieve num1 and num2 as float inputs from the request parameters. It should then check if the result is a whole number using the is_integer() method. If it is, convert the result to an integer before returning it as a string.
    在 server.py 提供的空间中,为端点 /sub 实现一个函数,该函数使用你在上一部分创建的包中的适当减法函数。该函数应从请求参数中获取 num1 和 num2 作为浮点数输入。然后,它应使用 is_integer() 方法检查结果是否为整数。如果是,则在将其作为字符串返回之前将其转换为整数。
  3. In the space provided in server.py for the endpoint /mul implement a function that uses the appropriate multiplication function from the package you created in the previous part. The function should retrieve num1 and num2 as float inputs from the request parameters. It should then check if the result is a whole number using the is_integer() method. If it is, convert the result to an integer before returning it as a string.
    在 server.py 提供的空间中,为端点 /mul 实现一个函数,该函数应使用你在上一部分创建的包中的适当乘法函数。该函数应从请求参数中获取 num1 和 num2 作为浮点数输入。然后,它应使用 is_integer() 方法检查结果是否为整数。如果是,则在将其作为字符串返回之前将其转换为整数。

Task 3Web Deployment of the application package using Flask 任务 3:使用Flask 部署应用程序包到 Web

  1. Change current directory on the terminal to the hjbsk-build_deploy_app_flask directory and run the server from your terminal.
    在终端中将当前目录更改为 hjbsk-build-deploy_app_flask 目录,并从您的终端运行服务器。
cd /home/project/hjbsk-build_deploy_app_flask && python3.11 server.py
  1. You will see that the server starts up in port 8080.
    您将看到服务器在端口 8080 上启动。
  2. Click on the Skills Network button on the left, it will open the Skills Network Toolbox. Then click the Other then Launch Application.
    点击左侧的 Skills Network button ,它将打开 Skills Network Toolbox 。然后点击 Other ,再点击 Launch Application 。
    From there you should be able to enter the port number.
    从那里您应该能够输入端口号。

Connect to port 8080and click Launch button.
连接到端口 8080 并点击 Launch 按钮。

  1. A new browser window opens up with the index page as shown below.
    将打开一个新的浏览器窗口,显示如下索引页面。

Test your application for the desired outputs. Some examples are shown below.
测试您的应用程序以获得预期输出。以下是一些示例。

(Optional) Practice exercise (可选)练习练习

Interested learners can try to incorporate error handling capability in this deployed application. For e.g. in case the interface receives non numerical entries for mathematical operations, what should the system response be?
感兴趣的学员可以尝试在这个已部署的应用程序中添加错误处理功能。对于e.g,如果接口在数学运算中接收到非数字输入,系统应该如何响应?

Conclusion 结论

Congratulations! You have completed the tasks for this project.
恭喜!您已完成此项目的任务。

By the end of this lab, you have:
在本实验结束时,您将:

  1. Created functions that perform mathematical operations.
    创建了执行数学运算的函数。
  2. Created a package for these functions.
    为这些函数创建了一个软件包。
  3. Deployed the application that uses this package on localhost using Flask.
    在本地使用 Flask 部署了使用该软件包的应用程序。

Authors 作者

Shivam

Change Log 变更日志

Date (YYYY-MM-DD)  日期(YYYY-MM-DD) Version  版本 Changed By  更改者 Change Description  更改描述
2025-05-22 1.2 Ritika Joshi Modified the instructions as part of Content Analysis
在内容分析中修改了说明
2023-07-13 1.1 Abhishek Gagneja Modified the instruction set
修改了指令集
2023-06-28 1.0 Shivam Created initial version of the lab
创建了实验的初始版本

© IBM Corporation 2023. All rights reserved. © IBM Corporation 2023。版权所有。