Web Applications and Flask programming

Question 1

Define a native application.

Answer 1

A native application is an application software that is developed for use on a particular platform or device

Question 2

State 3 advantages of using native applications over web applications.

Answer 2

1. Native applications tend to have more direct access to device features, such as the camera, GPS and accelerometer, as compared to web applications
2. more user friendly
3. Native applications can function without Internet access, unlike web applications
4. functions the same way on all devices hence = Native applications are usually more efficient than web applications because native applications are customised for a specific platform

Question 3

State 5 disadvantages of using native applications over web applications

Answer 3

1. platform dependant and hence, More costly to develop native applications as every platform and operating system requires a different version of the native application, unlike web applications, which can run on any device that can run a web browser (higher cost of setup)
2. difficulty in maintaining code base as there is a need to update and cater to different code for differet versions and different platforms (difficult)
3. Native applications require users to install updates, either manually or automatically, which creates more hassle as compared to web applications, which do not require its users to install updates (hassle)
4. Users have to download and install native applications in order to use them, creating more hassle as compared to web applications, which do not require any download or installation to be used (installation incurs large memory space)
5. less easily shared and requires sharing of files of native app unlike web that only requires a URL (hassle)

Question 4

Define a web application.

Answer 4

A web application is an application software that runs on a web server and is accessed by a web browser

Question 5

State 3 advantages of using web applications over native applications. (5 in total)

Answer 5

1. Web applications are more platform independent than native applications because web applications can run on any platform that can run a web browser, unlike native applications, which require a specific version of the native application to be developed for each platform
2. It is easier to maintain a web application with a single code base as compared to a native application with multiple code bases for different versions for different platforms
3. Users do not need to install updates to use web applications because the updating is done on the server-side, unlike native applications, which require users to install updates
4. Users do not need to download and install web applications to use them, unlike native applications, which require users to download and install them
5. Web applications are more easily shared as compared to native applications as users only need to share a URL in order to share a web application, while users have to share the program files of a native application in order to share it

Question 6

State 3 disadvantages of using web applications over native applications. (4 in total)

Answer 6

1. Web applications usually have less access to device features, such as the camera, GPS and accelerometer, as compared to native applications
2. Web applications may not function in the same way across different browsers or even different versions of the same browser
3. Web applications require Internet access in order to be used, unlike native applications
4. Web applications may have a less ideal user experience as compared to native applications because web applications are not customised for any specific platform, while native applications are more user friendly as they are customised for specific platforms and OS.

Question 7

What are the roles of HTML and CSS in creating a web application?

Answer 7

HTML is used to structure the content and give it semantic meaning

CSS is responsible for the design, styling, and layout of the content

Question 8

How is the GET method and POST method different in sending data? (2 differences)

Answer 8

1. Sending data using the GET method appends the data being sent to the URL, making it less secure while sending data using the POST method does not cause the data being sent to appear in the URL, making it more secure
2. Flask defaults to using the GET method while in order to use the POST method, it must be specified in both the HTML form attribute and the Python function

Question 9

What is the role of Flask in creating a web application?

Answer 9

Python operates in the background to process user requests and return a response.

Question 10

When should GET method be used when sending data?

Answer 10

When data is collected in the form of a non-sensitive input

Question 11

When should POST method be used when sending data?

Answer 11

Mostly used in sending forms, especially when handling file uploads, or sensitive data.

Question 12

What are the 10 usability principles?

Answer 12

CURVE:
1. Consistency and standards (follow estabished conventions)
2. User control and freedom (allow users to undo and exit easily)
3. Recognistion rather than recall (making options visible)
4. Visibility of system status (keep users informed of wht happening)
5. Error prevention, detection, recognistion and recovery (provide clear error messages)

HAME:
6. Help and documentation (offer useful help if needed)
7. Aesthetic and minimalist design (clean and uncluttered)
8. Match between system and real world (use familar language and concepts)
9. Effeciency and flexibility of use (allow both beginners and experts to use)

Question 13

What is User Control and Freedom? What is an example of it?

Answer 13

User have the freedom to navigate and perform actions, including undoing accidental actions.

For example, support undo, redo, and cancel (to exit from the current interaction)

Question 14

What is Flexibility and Efficiency of Use? What is an example of it?

Answer 14

Able to transform itself to suit multiple users, allowing people to pick whatever way that works for them.

Example: Shortcut buttons, personalisation and customisation. May transform itself for novice and advanced users eg. advanced settings.

Question 15

What are the tags that must be present in an HTML document?

Answer 15

html
head
title
body

Question 16

What is the minimal code for a Flask app?

Answer 16

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route(…)
def function1():
# retrieve any required request data from request obj
# jinja template files must be in ‘templates’ folder
return render_template(‘index.html’) # replace with appropriate template name

app.run() # by default, runs on 127.0.0.1:5000

Question 17

The following HTML snippet is used in index.html to capture user input and send it to the ‘/’ route with a GET request:

input type=”text” name=”search”

What is the Python code used to retrieve the data in the route function?

Answer 17

remember to import request first

…
data = request.args[‘search’]

Question 18

The following HTML snippet is used in index.html to capture user input and send it to the ‘/’ route with a POST request:

input type=”text” name=”search”

What is the Python code used to retrieve the data in the route function?

Answer 18

remember to import request first

…
value = request.form[‘search’]

Question 19

The following Python code is used to retrieve data from user input sent to the route ‘/profile’:

@app.route(‘/profile’, methods=[“POST”])
def search():
value = request.form[‘address’]
…
return render_template(‘profile.html’, data=value)

Write the HTML needed to implement this form.

Answer 19

Brainscape does not support HTML, so the angled tag brackets are omitted here

# note that the value attribute of the element determines the label shown on the submit button

form action=’/profile’ method=’post’
input type=’text’ name=’address’
input type=’submit’ value=’Submit’
/form

Question 20

The following Python code is used to retrieve data from user input sent to the route ‘/search’:

@app.route(‘/search’, methods=[“GET”])
def search():
value = request.args[‘query’]
…
return render_template(‘search.html’, data=value)

Write the HTML needed to implement this form.

Answer 20

Brainscape does not support HTML, so the angled tag brackets are omitted here

# note that the value attribute of the element determines the label shown on the submit button

form action=’/search’ method=’get’
input type=’text’ name=’query’
input type=’submit’ value=’Submit’
/form

Question 21

Write HTML for a page asking for user input

Answer 21

Brainscape does not support HTML, so the angled tag brackets are omitted here

# note that the value attribute of the element determines the label shown on the submit button

html
head
title
/title
/head
body
form action=’/destination’ method=’get’
label
/label
input type=’text’ name=’name’
input type=’submit’ value=’Submit’
/form
/body
/html

Question 22

Write HTML for a form with a single text input field and a submit button

Answer 22

Brainscape does not support HTML, so the angled tag brackets are omitted here

# note that the value attribute of the element determines the label shown on the submit button

form action=’/destination’ method=’get’
label
/label
input type=’text’ name=’name’
input type=’submit’ value=’Submit’
/form