Developing Apps and Web Software

Purpose and Uses of Apps and Web Tools

🎯 (CT5-EVL-01, CT5-DPM-01)

📌 Explore the purpose and uses of apps and web-based tools

An app is a program made for one purpose. It runs on a phone, tablet or computer. A web-based tool is a program you use in a web browser, usually without installing anything.

The purpose of a program is the reason it exists. Its uses are the ways people actually use it. A bus timetable app might have the purpose of showing when buses leave. Its uses include checking the next bus and planning a trip.

To explore an app, look at more than one side. Ask who it is for, what problem it solves and what could go wrong for some people.

How Society Has Shaped Apps and Web Software

🎯 (CT5-EVL-01)

📌 Explore how the changing needs of society have influenced the evolution of app and web development, including the impact of apps and web software on a range of industries

Apps and web software change because people’s needs change. When many people began to carry phones with cameras and maps, developers made apps for photos, directions and messages. When people wanted to order, pay and book from home, web software grew to meet those needs.

Each change brings effects, good and bad. An app can save a family a phone call. It can also collect more personal information than people expect. Developers must think about both sides.

To explore the impact, ask two questions. Who gained from the change? Who might have been left out? A booking app helps busy people, but it can be harder for someone without a smartphone.

Inputs, Storage, Transmission and Outputs

🎯 (CT5-DAT-01, CT5-THI-01)

📌 Explore inputs, storage, transmission, processes and outputs in apps or web-based tools

Most apps and web tools follow this pattern. Data goes in, may be kept, may move, is worked on and comes out.

• Input is data that goes into the app, such as a typed task or a tapped tick box.
• Storage is where data is kept. It might be on your device, or in a database on a server. A database is an organised store of data. A server is a computer that keeps data for other devices.
• Transmission is data moving from one device to another, often over the internet.
• Process is what the app does with the data, such as sorting, checking or calculating.
• Output is what the app shows or sends back, such as a list, a reminder or a sound.

Features of Existing Code

🎯 (CT5-OPL-01, CT5-THI-01)

📌 Identify, define and visually represent the function and purpose of elements and features of existing code

Developers often read code that someone else wrote. To understand it, find each element, which is a part of the code. An element might be a variable, a line that asks for input, or an operator such as + that joins things together. A variable is a labelled box that holds a value.

Use three steps:

1. Identify each element.
2. Define it in one sentence. Say what it does, its function, and why the app needs it, its purpose.
3. Represent it visually, by drawing a labelled picture with a line from each label to its part of the code.

Here is a short greeting program written in Python, a widely used programming language. Line 1 is the comment.

# A tiny greeting program.
name = input("What is your name? ")   # asks a question and keeps the reply
greeting = "Hello, " + name           # joins two pieces of text
print(greeting)                       # shows the result on the screen

Functional Requirements

🎯 (CT5-DPM-01, CT5-THI-01)

📌 Specify the functional requirements of an app, including stating the purpose of a solution, describing use cases and developing test cases of inputs and expected outputs

A functional requirement says what an app must do. Each one is a short, numbered sentence that begins “The app must”.

To specify functional requirements, work through four steps:

1. State the purpose. Write one sentence that says why the app exists.
2. Describe a use case. A use case is a short story of one user doing one task.
3. List the requirements. Number them, such as FR1 and FR2.
4. Write test cases. Each one has an input and an expected output.

Non-Functional Requirements of an App

🎯 (CT5-DPM-01, CT5-DES-01)

📌 Specify the non-functional requirements of an app

• Subscription or purchase cost.
• Motivation or engagement.

A non-functional requirement says how well an app works, rather than what it does. It covers cost, speed, ease of use, how the app looks and feels (appearance), privacy and engagement. Like functional requirements, each one must be something a tester can check.

Subscription or purchase cost

Some apps charge a monthly fee or sell extras inside the app. Decide the cost rule before you build. For example: “The app must be free for students and must not show paid extras.” A tester checks this by looking at every screen for prices.

Motivation or engagement

Engagement means how much people keep using an app. Designers may add points, badges or streaks to keep people motivated. Write the rule first. For example: “The app must give a badge after every five quizzes completed.” Be careful, though. Messages that make people feel guilty for logging off do not support wellbeing.

Here are some requirements for the Class Quiz app from the previous section:

Social, Ethical and Legal Responsibilities

🎯 (CT5-SAF-01)

📌 Consider the social impacts and ethical and legal responsibilities in software development

Software affects more than the person who uses it. A social impact is an effect on a community or on how people live and work together. An ethical choice is about what is fair, honest and respectful. A legal responsibility is something the law requires.

Social impacts can be good. An app can make a task faster or give more people access to information. Some impacts are harmful. An app can take time from sleep or family, or leave out people without good internet at home.

Ethical choices are often about honesty and permission. Be clear about what the app does with data. Ask permission before you collect personal information, which is anything that can identify a person, such as a name, address or photo.

Two Australian laws are a good starting point:

• The Privacy Act 1988 (Cth) includes the Australian Privacy Principles. They set rules for many organisations and government agencies that collect, store and use personal information. The Office of the Australian Information Commissioner (OAIC) publishes guidance on the Act.
• The Copyright Act 1968 protects original work, such as code, images, music and writing. Usually you need permission, or a licence that allows your use, before you copy someone else’s work. There are limited exceptions for some uses, such as study, so ask your teacher when you are not sure.

Diverse Users and Culturally Respectful Design

🎯 (CT5-DES-01, CT5-SAF-01)

📌 Explore app and web software considering the perspectives of diverse groups, including Aboriginal and Torres Strait Islander Peoples, culturally and linguistically diverse people, people of different ages and gender, and people with disability

• Avoiding cultural assumptions, for example users do not always have a first and last name.
• Collective ownership of images and artworks, for example Indigenous Cultural and Intellectual Property (ICIP).
• Protocols and permissions for capturing and displaying images, voice or video of Aboriginal people.

A design that works well for one group can leave another out. Ask who might find it hard to use, or feel left out.

Avoiding cultural assumptions

A sign-up form with a “first name” and a “last name” box assumes everyone has both. Some people use only one name, or put their family name first. A kinder design asks for “the name you go by”.

Collective ownership of images and artworks

Indigenous Cultural and Intellectual Property (ICIP) covers the cultural knowledge, stories, designs and artworks of Aboriginal and Torres Strait Islander Peoples. It is often owned by a whole community, not just one artist. Do not use a community’s artwork without its agreement. Credit the artists and community the way they ask.

Protocols for images, voice and video

Many Aboriginal and Torres Strait Islander communities have their own protocols, which are agreed ways of acting with respect. These can cover who gives permission to share a person’s image, voice or video. Do not invent protocols. Ask the community first. Made-up example: a youth club asks the people in its event photos, and the hosting community, before sharing them.

Agile Tools for Project Work

🎯 (CT5-DPM-01, CT5-COL-01)

📌 Experiment with agile tools when developing projects

Programmers rarely build a whole app in one go. Many teams use an agile approach instead. An agile team splits the work into small pieces, builds one piece, shows it to people, and then decides what to do next.

Agile work uses a few simple tools. You can try them with paper or a free spreadsheet:

• Backlog. A list of every task the project needs, with the most important tasks at the top.
• Board. Three columns: To Do, Doing and Done. Each task is written on a card that moves from left to right.
• User story. A one-line task written from the user’s point of view, such as “As a student, I want to see my homework due dates, so I can plan my week.”

To experiment with a tool means to try it, see what it does and decide whether it helps. Here is one way to do that.

Agile teams work in iterations, which are short cycles of planning, building, showing and reviewing. The last section in this part looks at planning with iterations.

Evolution of Apps and Web Applications

🎯 (CT5-EVL-01)

📌 Describe how apps and web applications have evolved in response to people's needs and opportunities

Software changes because people’s needs change. A tool that worked well in the past may not meet today’s needs. New devices and new networks also open up new chances, or opportunities, for software to help.

These steps show the big ideas behind the change. They are simplified, not a full history.

• Programs on one computer. Early software was written for one machine. People used it one at a time.
• Web pages. The web let people read pages on different computers. Early pages were mostly text, joined by links.
• Web applications. Later, web pages could do more. You can edit a shared document or order a meal in a browser, without installing a program first.
• Mobile apps. Many phones and tablets have touch screens, cameras and location features. An app is a program made for these devices, often downloaded from an app store.

Each step answered a need or used a new opportunity. A need is something people want solved, such as keeping in touch with family far away. An opportunity is a new chance, such as a phone with a camera.

To describe a change, say what changed, what caused it and give one example. For instance: “Phones added touch screens and location features, so people could use maps while they walked.”

Apps, Web Software and Real-World Challenges

🎯 (CT5-EVL-01, CT5-SAF-01)

📌 Outline how app and web software address environmental, lifestyle, societal and economic challenges, including cyber safety

• Access, equity, diversity, representation, sensitivities.
• Stereotyping, empowerment.
• Demographics, popularity, digital footprint.

Apps and web software can help with real challenges. A challenge is a problem that affects many people, such as wasting energy or spending money wisely. Software can help, but it can also create new risks. To outline a challenge, give the problem, how it helps and one risk.

Use these four groups to organise your ideas:

• Environmental. An app could show how much power a household uses, so people can spot waste.
• Lifestyle. A step-tracking app can encourage healthy habits.
• Societal. A web page can share news from a local council, library or youth club with anyone online.
• Economic. A small shop can take orders through a web form, saving staff time.

Access, equity and representation

Access is whether people can use the software at all. Equity is fairness, so everyone has a fair chance to use it. Representation means showing a range of people fairly. Diversity means the range of backgrounds, languages, ages and abilities people have. Sensitivities are things that could upset or hurt a group. A design that assumes everyone has a first and last name leaves some people out. Use images or stories of Aboriginal and Torres Strait Islander Peoples only with permission from the community.

Stereotyping and empowerment

Stereotyping is a fixed, often unfair idea about a group, such as assuming what boys or girls like. Software can repeat stereotypes through its pictures and words. Empowerment is when software helps people make their own choices and feel in control.

Popularity and digital footprint

A digital footprint is the trail of data you leave online. A demographic is a group defined by facts such as age or location. Some apps rank content by popularity, such as likes or downloads. Popular is not always useful to everyone.

Design Principles and Accessibility

🎯 (CT5-DES-01)

📌 Explore design principles and issues relevant to apps

• Accessibility and inclusion, such as Web Content Accessibility Guidelines (WCAG).
• Augmentative and alternative communication (AAC).
• Design principles, such as cognitive load, consistency, hierarchy, or meaningful feedback and error messages.

A design principle is a rule of thumb that helps a screen work for people. Good design makes an app easy to use.

Accessibility and inclusion

Accessibility means people with a wide range of abilities can use an app. Inclusion means the app welcomes everyone. This includes people who use a screen reader (a program that reads the screen aloud), people who cannot use a mouse, and people who find small text hard to read.

The Web Content Accessibility Guidelines (WCAG) are published by the World Wide Web Consortium (W3C). Examples include text alternatives for images and clear contrast between text and its background.

Augmentative and alternative communication (AAC) helps people who find speech hard to use another way to communicate. Examples include picture boards, symbol grids and devices that speak selected words. Apps can support AAC with large buttons and spoken output.

Design principles in practice

• Cognitive load is how much a person has to think about or remember at once. Keep each screen to a few clear choices.
• Consistency means things work and look the same way on every screen.
• Hierarchy means the most important things look the most important, such as the biggest heading at the top.
• Meaningful feedback tells the user what just happened, such as “Message sent”.
• Error messages say what went wrong and how to fix it. “Please type a message first” is better than “Error 17”.

Here is a short HTML example:

<!-- Alt text describes the picture for a screen reader -->
<img src="team-photo.jpg" alt="Netball team holding a trophy after a win">

<!-- The label tells the user what the button does -->
<button type="button">Send message</button>

A screen reader reads the alt text and the button label aloud. A user who cannot see the screen still learns what the picture shows and what the button does. The comments are notes for coders, so a screen reader does not read them.

Alternative Design Options

🎯 (CT5-DES-01, CT5-DPM-01)

📌 Generate alternative designs and evaluate them against the requirements to select a preferred design

Good designers do not stop at the first idea. To generate alternatives, sketch two or three quick designs for the same problem. Make each one different in its big idea, not just its colours.

Then evaluate each design against the requirements you wrote earlier. Use the same requirements for every design, so the comparison is fair.

Design C fails a must-have, because it hides the rest of the week. Design B fails the phone-readability test, and only partly meets the two-tap must-have. Design A passes both musts and the should-have, so it is the preferred design. Give that reason in one sentence when you choose it.

Data Collection, Privacy and Security

🎯 (CT5-SAF-01, CT5-DAT-01)

📌 Investigate data collection and interpretation adhering to privacy and cybersecurity principles, including specify what data is collected, who owns it, and how it will be protected

Data collection is gathering information from people, through forms, surveys, sign-ins or what an app records about how it is used. Privacy means people keep control over their own information. Cybersecurity means protecting data and systems from being stolen, changed or lost.

To investigate data collection, answer three questions before you build:

1. What data is collected? List each item. Ask whether the app really needs it, and keep only what it needs.
2. Who owns it? The person it describes, the school and the app’s makers may each have a say.
3. How will it be protected? Plan who can see it, where it is stored and when it is deleted.

The Privacy Act 1988 (Cth) includes the Australian Privacy Principles, which the Office of the Australian Information Commissioner (OAIC) explains. They are a useful guide for any app, including a class project.

Interpreting the data needs care too. Twenty answers from one class do not show what the whole school thinks. Say what the data can and cannot show.

When data is about Aboriginal and Torres Strait Islander communities, the community may have a say in how it is collected, owned and used. This idea is called Indigenous Data Sovereignty. Ask the community before you collect or share anything about them.

Data Types and Code Structure

🎯 (CT5-DAT-02, CT5-OPL-01)

📌 Represent data and code to facilitate computation, including selecting appropriate data types, structuring code systematically and understanding data type limitations

A computer must know what kind of data it is holding. A data type tells the computer what kind of value a piece of data is and what you can do with it. Choosing the right data type makes code correct and easier to read.

Good code is also structured. Give each variable a clear name, put the steps in order (input, then process, then output), and add comments that explain why each step is there.

# Each value has the right data type
student_name = "Alex"      # string: text in quotes
year_level = 8             # integer: a whole number
ticket_price = 4.50        # float: a number with a decimal point
is_member = True           # Boolean: True or False

total = ticket_price * 2   # arithmetic works on numbers
print(student_name, "owes", total)   # prints: Alex owes 9.0

Data types also have limits. Text that looks like a number is still text, so adding it joins the characters together:

age_text = "13"                 # a string, because of the quotes
print(age_text + "1")           # joins the text: prints 131
print(int(age_text) + 1)        # converts to a whole number first: prints 14

Object-Oriented Language Features

🎯 (CT5-OPL-01)

📌 Identify and define the features of an object-oriented programming language

An object-oriented programming language organises code around objects. An object is a thing in a program that holds its own data and can carry out its own actions. Python is an object-oriented language, and it also lets you write code without objects.

• Class. A blueprint that describes a type of object. A cookie cutter is a good analogy: it sets the shape, but it is not a cookie.
• Object. One thing made from a class. Each cookie cut with the cutter is an object.
• Attribute. A piece of data an object holds, such as a player’s name or score.
• Method. An action an object can do. In Python, a method is a function written inside a class.
• Encapsulation. Keeping an object’s data and actions together. Other code should change the data through the object’s own methods.
• Inheritance. A new class can take on the attributes and methods of an existing class, then add its own.

Here is a short example with a class, two attributes and a method:

class Player:                          # the blueprint for a player
    def __init__(self, name, score):   # runs when a new object is made
        self.name = name               # attribute: the name this object holds
        self.score = score             # attribute: the score this object holds

    def add_points(self, points):      # method: an action this object can do
        self.score = self.score + points

player1 = Player("Sam", 0)             # create one object from the class
player1.add_points(5)                  # call a method on that object
print(player1.name, player1.score)     # prints: Sam 5

The diagram below also shows Priya, a second object made from Player. Her score is 3, and it is kept separate from Sam’s score.

Algorithm Flowcharts and Pseudocode

🎯 (CT5-OPL-01, CT5-COM-01)

📌 Represent algorithms using flowcharts and pseudocode

An algorithm is a set of steps that solves a problem. You can show one in words, as a flowchart, or as pseudocode. A flowchart uses shapes and arrows. Pseudocode is a short, structured description of the steps. It looks a little like code, but it is written for people to read.

NESA does not publish one fixed set of symbols for this course, so this page uses common conventions. Use the same ones throughout a project.

Pseudocode uses plain keywords in capitals: INPUT, OUTPUT, SET ... TO ..., IF ... THEN ... ELSE ... END IF, WHILE ... END WHILE and FOR EACH ... END FOR. Here is a youth club sorting members into groups by age:

START
INPUT age
IF age >= 13 THEN
    OUTPUT "Teen group"
ELSE
    OUTPUT "Junior group"
END IF
END

Your Own and Existing Algorithms

🎯 (CT5-OPL-01, CT5-THI-01)

📌 Design their own and modify existing algorithms for apps

You will often write a new algorithm, and you will often change one someone else wrote. Most real apps are changed many times, so both skills matter.

Design your own

1. Write the problem in one sentence.
2. List the inputs and the outputs.
3. Write the steps in order, as pseudocode or a flowchart.
4. Check that every step uses only things you have listed.

Modify an existing algorithm

Read the existing algorithm first, and predict its output for one input. Then decide on one change and make only that change. Test with inputs that check both the old and the new behaviour. Here is a small existing program that checks whether a canteen order can be bought:

money = 6.00
price = 4.50
if money >= price:
    print("Order accepted")
else:
    print("Not enough money")

The change: show the change owed. Add one new line, and change the message:

money = 6.00
price = 4.50
change = money - price                 # the new line: work out the change
if money >= price:
    print("Order accepted. Change:", change)
else:
    print("Not enough money")

Sub-Programs and Code Modules

🎯 (CT5-OPL-01, CT5-THI-01)

📌 Explore the use of sub-programs and code modules in programming code

A sub-program is a named block of code that does one job. In Python, a sub-program is called a function. You write it once and use it as many times as you need. A module is a separate file of code, or a built-in collection of code, that a program can bring in and use.

Here is a function that does one job. It takes two scores, works out their average and gives the answer back:

# A sub-program (function) that does one job
def calculate_average(score1, score2):
    total = score1 + score2
    return total / 2           # return sends the answer back

# The main program uses the sub-program
average = calculate_average(7, 9)
print("Average:", average)     # prints: Average: 8.0

The values 7 and 9 go into the function. The function gives back 8.0, and the main program stores it in average.

A module brings in code that someone else has written and tested. Python includes a built-in module called math, so this short program works out a square root:

import math                   # bring in the built-in math module

print(math.sqrt(16))           # square root of 16: prints 4.0

Operators in Code and HTML

🎯 (CT5-OPL-01)

📌 Compare operators within existing programming code or HTML, including arithmetic, logical and relational operators

An operator is a symbol or word that does a job on values. The three main kinds are shown in the table below.

Here is one line of each kind in a short Python program:

score = 15
print(score // 4)                      # arithmetic: whole-number division, prints 3
print(score % 4)                       # arithmetic: remainder, prints 3
print(score / 4)                       # arithmetic: normal division, prints 3.75
print(score >= 10)                    # relational: prints True
print(score == 15 and score < 20)    # logical: both must be True, prints True
print(not score > 20)                 # logical: flips the result, prints True

HTML is markup, so a web page has no operators of its own. In HTML, the equals sign in a tag, such as width="200", sets an attribute. It is not a comparison. Operators appear in the code that works with a page. In CSS, calc() uses arithmetic:

/* calc() uses arithmetic inside a CSS value */
.banner {
  width: calc(100% - 40px);   /* the full width, minus 40 pixels */
}

JavaScript placed in a web page can use all three kinds of operator.

Single-Purpose Code Modules

🎯 (CT5-THI-01, CT5-OPL-01)

📌 Explore the application of code modules that perform discrete functions

A discrete function is separate from the others and does one clear job. A module that performs a discrete function is a piece of code with one purpose. A large app is built from many modules, and each one does its own job.

Think of a school canteen. One person takes orders, one packs food and one handles money. Each person has one job. If one person is away, someone else can take over that job without changing how the others work.

A homework app might be split into modules like this:

• Check login: is the username and password correct?
• Add task: save a new homework task.
• Show week: list the tasks due this week.
• Mark done: change one task to done.

Here is one of those modules written as Python functions. The first function has one job: check that a name is not empty.

def is_valid_name(name):
    # One job: check that a name is not empty
    return len(name.strip()) > 0

def make_greeting(name):
    # One job: build a greeting message
    return "Hello, " + name + "!"

# The main program uses each module for its one job
player = "  Priya  "
if is_valid_name(player):
    print(make_greeting(player.strip()))   # prints: Hello, Priya!

Because each function does one job, you can test it on its own. The empty string should give False, and the name Sam should give True.

Desk Checking Algorithms by Hand

🎯 (CT5-OPL-01, CT5-DPM-01)

📌 Validate algorithms with desk checking

Desk checking means checking an algorithm by hand. You follow the steps yourself, using sample inputs, and write down each variable after every step. Programmers also call this tracing. You can do it on paper, before or after you write any code.

Use a trace table. Make one column for each variable and one row for each step. After each step, fill in the row with the values the variables now hold. Here is a simple algorithm that adds up three prices:

SET total TO 0
FOR EACH price IN [2.00, 3.50, 1.50]
    SET total TO total + price
END FOR
OUTPUT total

The output matches the sum of the prices, 2.00 + 3.50 + 1.50 = 7.00, so the algorithm passes this check.

Test a typical input first, then an edge case. An edge case sits at the limit of a rule, such as money that is exactly equal to a price. Ask: if a student has exactly enough money, does the algorithm accept the order? The canteen rule IF money >= price says yes. Check that this is the rule you really want.

Real-World Problems and Stakeholder Needs

🎯 (CT5-DPM-01, CT5-THI-01)

📌 Define a real-world problem or need that can be solved by an app, including breaking it down into manageable parts and interviewing stakeholders to identify their needs

A good app starts with a real problem, not with a feature. A problem says what is wrong and who it affects. A need says what people require to fix it. You should be able to describe both in plain words before you think about any design.

Follow these steps to define a problem:

1. Write the problem in one or two sentences.
2. Decompose it. This means breaking a complex problem into smaller parts that are easier to understand and solve.
3. List the stakeholders. These are the people affected by the problem or by the app, such as users, teachers and parents.
4. Interview the stakeholders to find out what they need.

Interviews work best with open questions. An open question needs more than yes or no, such as “What happens when you look for a book that is on loan?” A closed question, such as “Would you like an app?”, pushes people towards an answer. Ask what happens now, then what would help. Write answers down, and ask permission before you record anything. Keep names private unless the person agrees to be named.

Existing Solutions to Similar Problems

🎯 (CT5-DPM-01, CT5-EVL-01)

📌 Evaluate existing solutions to the problem or related problems

Before you build, look at what already exists. An existing solution might be an app, a website, a paper system or a routine people already follow. To evaluate it, judge it against clear criteria, then give a reasoned judgement.

1. Find two or three existing solutions to the same or a related problem.
2. Choose criteria from your requirements, such as speed, privacy, cost and accessibility.
3. Rate each solution against each criterion.
4. Say what to keep, what to change and what to leave out.

Read the privacy notice of any app you evaluate, and check what it says about data. Do not copy code, pictures or designs unless their licence allows it, and always credit the creator. Copyright protects original work under the Copyright Act 1968.

Iterative Project Planning

🎯 (CT5-DPM-01, CT5-COL-01)

📌 Plan and manage a project using an iterative approach

Project management means planning and organising a project, watching time and resources, and finishing it so it meets its goals. An iterative plan breaks the project into short cycles called iterations. Each iteration produces a working part of the app, and you review it before you start the next one.

To plan a project this way, follow four steps:

1. List all the work the app needs.
2. Group the work into iterations. Give each one a goal and a “done when” test.
3. Put the iterations in order, and set a rough time for each one.
4. At the end of each iteration, review the work and decide what to change next.

Here is a plan for a simple quiz app:

Each review asks the same question: what should change before the next iteration? A plan that does all the design first, then all the building, then all the testing is sometimes called a waterfall plan. It is harder to change once a stage is finished.

From Design to a Working App

🎯 (CT5-OPL-01, CT5-DPM-01)

📌 Produce and implement an app using the preferred design in a general-purpose or object-oriented programming language

To produce and implement an app means to turn your chosen design into a working program. The design is the plan. You can write the program in a general-purpose programming language, one used for many kinds of program, such as Python. You can also use an object-oriented programming language, which groups data and actions into objects.

Build in small steps. Do not write the whole app at once. A good order is:

1. Build the simplest version that does one job.
2. Test that job before you add anything else.
3. Add one feature, then test again.
4. Check the app against your design. Does it still match the plan?

UI, UX and Event-Driven Programming

🎯 (CT5-DES-01, CT5-OPL-01)

📌 Develop the user interface (UI) and user experience (UX) of an app, including using event-driven programming to respond to user input

The user interface (UI) is the part of an app that people see and touch, such as buttons and menus. The user experience (UX) is how the app feels to use: clear, quick and pleasant.

Many apps are event-driven. An event is something that happens, such as a click or a key press. The program waits for events. When one happens, it runs the code linked to it. That code is an event handler.

This JavaScript example uses a button with the id send-btn and a paragraph with the id message. An id is a name that lets code find an element. Put the script after these elements in the page.

// Find the button and the paragraph by their ids.
const button = document.getElementById('send-btn');
const output = document.getElementById('message');

// When the button is clicked, run this function.
button.addEventListener('click', function () {
  output.textContent = 'Training moves to 5 pm on Friday.';
});

The first two lines find the elements. The rest says: when the button is clicked, put the message in the paragraph.

Content and Presentation with HTML and CSS

🎯 (CT5-OPL-01, CT5-DES-01)

📌 Develop a web page or app that separates content and presentation using HTML and cascading style sheet (CSS)

HTML (HyperText Markup Language) gives a web page its content: headings, paragraphs and links. CSS (Cascading Style Sheets) controls the presentation: colours, fonts and spacing. Keeping them in separate files is what “separating content and presentation” means.

This matters because you can change the look of a whole site by editing one CSS file. The words in the HTML stay the same.

To build a small club page:

1. Write index.html with the content only.
2. Create style.css in the same folder.
3. Link them with one line in the head section.
4. Add one rule at a time, and check the page after each one.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Netball Updates</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Netball Updates</h1>
  <p>Training moves to 5 pm on Friday.</p>
</body>
</html>

/* style.css: presentation only, no words */
body {
  font-family: Arial, sans-serif;
  background-color: #eef6ff;
}

h1 {
  color: #1d4ed8;
}

p {
  font-size: 18px;
}

The link line tells the browser to apply the rules in style.css to this page. The words still come only from index.html.

Style the page with CSS

Try the example in the lab below. Change the look, and watch the preview and the style.css panel change together, so you can see which line of CSS does which job. Then try the challenge.

Project Notebook Documentation

🎯 (CT5-COL-01)

📌 Document the design and implementation of the solution in a project notebook

A project notebook is a record of your project as it develops. It can be paper, digital or a shared folder. It answers two questions: what did you make, and why did you make it that way?

Write in it as you work, not only at the end. Otherwise you will forget the reasons behind your choices. Use these sections:

• Problem and users: the need, and who it is for.
• Design: sketches, the chosen design and why it beat other ideas.
• Build: what you coded in each version, with short extracts or screenshots.
• Testing: test cases, results and bugs found.
• Changes: what you changed after testing, and what you would do next time.

These three entries come from a notebook for the netball message app. Here, T1 means test 1, which checks that a short message can be sent.

Existing Code for Apps

🎯 (CT5-OPL-01, CT5-THI-01)

📌 Interpret and modify existing programs (code) for apps

Interpret means to work out what a program does by reading it. Modify means to change it so it does something new or better. Many apps are built on existing code, so you must understand a program before you change it.

To interpret a program, read it once without changing anything. Then write one plain sentence for each line. Predict the output for a sample input, then run the program to check.

# Existing code: the ticket total for a school trip.
name = input("What is your name? ")
tickets = int(input("How many tickets? "))
price = 12                  # made-up price per ticket
total = tickets * price
print("Hi " + name + ", your total is $" + str(total) + ".")

To modify it, the club offers $5 off for groups of five or more. Add these two lines after line 5:

if tickets >= 5:
    total = total - 5      # made-up group discount

Test it. Sam with 2 tickets prints $24. Sam with 5 tickets prints $55, because 5 times 12 is 60, and 60 minus 5 is 55.

Modular Code and Functions

🎯 (CT5-OPL-01, CT5-THI-01)

📌 Design and implement modular programs (code) with functions for apps

A function is a named set of instructions that does one job. You can use it again and again. A module is a file that holds related functions. Building a program from small functions, sorted into modules, is called modular design.

A function usually has a name that says what it does. It may have parameters, which are the inputs it needs, written inside the brackets. It may also have a return value, which is the result it sends back.

This receipt program uses three functions, each with one job:

def get_total(price, quantity):
    # Multiply the price by the quantity and return the result.
    return price * quantity

def add_fee(amount):
    # Add a made-up $1 booking fee and return the new amount.
    return amount + 1

def show_receipt(name, total):
    # Print the receipt. This function returns nothing.
    print("Receipt for " + name + ": $" + str(total))

# The main part uses the functions above.
total = add_fee(get_total(4, 3))
show_receipt("Sam", total)

The main part does no maths itself. It passes the work to the functions and uses the results. The output is Receipt for Sam: $13.

When a program grows, move the functions into a file called receipts.py. Another file can then use them with import receipts. Each file stays short, and each function can be tested on its own.

Algorithms and Data Structures in Apps

🎯 (CT5-OPL-01, CT5-DAT-02)

📌 Apply selected algorithms and data structures for apps

A data structure is a way of storing many pieces of data so a program can use them. A list is a common one. A list keeps items in order, such as a list of scores or player names. An algorithm is the step-by-step method that works on the data.

Three common algorithms for lists are:

• Total: go through every item and add it up.
• Find the highest: keep the biggest value so far, and compare each item with it.
• Search: check each item in turn until you find the one you want.

Here is the find-the-highest algorithm applied to a list of four scores.

scores = [12, 7, 15, 9]   # a list of four scores
highest = scores[0]       # start with the first score

for score in scores:      # check every score in turn
    if score > highest:   # is this one bigger?
        highest = score   # if so, remember it

print("Highest score:", highest)   # prints: Highest score: 15

The trace table follows the algorithm one score at a time.

Test Cases and Debugging

🎯 (CT5-OPL-01, CT5-DPM-01)

📌 Validate programs using test cases and debug a range of errors

To validate a program means to check that it does what it should. A test case has an input, an expected output (what should happen) and a result, pass or fail. To debug means to find and fix errors.

There are three common kinds of error:

• Syntax error: the code breaks the language rules, such as a missing colon. The program will not run.
• Runtime error: the program stops while it runs, such as int("five"), because “five” is not written as digits.
• Logic error: the program runs but gives the wrong answer.

This discount function has a logic error. It should take 10 per cent off the total.

def apply_discount(total):
    # Should take 10 per cent off the total.
    return total * 0.1    # BUG: this keeps only 10 per cent

Write the expected outputs first, then run the tests.

The fix is to keep 90 per cent. Change the line to return total * 0.9, then run all three tests again.

To debug, read the error message if there is one. Print the values in the middle of the code. Change one thing at a time, then test again.

Object-Oriented Features Explained

🎯 (CT5-OPL-01)

📌 Describe the features of an object-oriented programming language

An object-oriented programming language groups data and actions together into objects. An object is like one player on a sports team. It has its own data, such as a score, and it can do things, such as scoring.

Think of a cookie cutter. The cutter is like a class, the plan. Each cookie is an object made from it, with its own topping. The key features are:

Here is a small Python class for a player:

class Player:
    # The class is the plan. Each Player object is built from it.
    def __init__(self, name):      # runs when a new Player is made
        self.name = name           # attribute: the player’s name
        self.score = 0             # attribute: starts at zero

    def add_points(self, points):  # method: an action the object can do
        self.score = self.score + points

sam = Player("Sam")                # make one object from the class
sam.add_points(5)                  # use a method on that object
print(sam.name, sam.score)         # prints: Sam 5

The word self means “this particular object”.

The diagram below shows three objects made from this class. Sam has a score of 5, from the code above. Ali has a score of 3, and Lee has a score of 0. Each object keeps its own values.

Object-Oriented Programs in Practice

🎯 (CT5-OPL-01)

📌 Interpret and extend or implement an object-oriented program (code)

Interpret an object-oriented program by tracing it. Follow each line and write down what changes. Extend a program by adding a new attribute or method. To implement a program from a plan, turn each part of the plan into a class, an attribute or a method.

Use the Player class from the last section. Here is one new method, added inside the same class. The other methods stay the same.

class Player:
    # The __init__ and add_points methods stay the same.

    def is_winner(self):
        # Return True when the score is 10 or more, otherwise False.
        return self.score >= 10

The trace table follows the program one step at a time.

At step 3 the score is 11. Eleven is 10 or more, so the method gives True.

To implement a class from a plan, write the class name. List the attributes in the setup method. Write one method for each action in the plan. Then make one object and test each method.

Specialist Computing Terminology

🎯 (CT5-COM-01)

📌 Select and use specialist terminology in context

Specialist terminology means the technical words used in computing, such as algorithm, function and test case. Using these words correctly shows that you understand the idea. Using them loosely can confuse your teacher and your team.

To select a term, pick the one that fits the idea exactly. To use it in context, put it in a sentence that shows its meaning. Check the glossary if you are not sure.

Compare these two descriptions of the same idea:

• Weak: the thing in the code does the adding when you press the button.
• Strong: when the user clicks Send, the event handler calls the function that adds the message to the list.

Iterative Development Records

🎯 (CT5-DPM-01, CT5-COL-01)

📌 Create a record of project development demonstrating iterative design and evaluation

Iteration means repeating a process, where each cycle builds towards a better result. In app development, one cycle goes through four steps: design, build, test and evaluate. If the design must change, the cycle goes back to design. Each cycle gives a new version.

A version log is a simple table with one row per cycle. It records what changed, the evidence behind the change and the next step. Keep every version, because you may need to go back.

This log follows the netball message app. T1 is “send a short message”, T2 is “press Send with the box empty”, and T3 is “send a long message”.

Self and Peer Review of Projects

🎯 (CT5-DPM-01, CT5-COL-01)

📌 Evaluate their own project and that of their peers using predetermined functional and non-functional requirements

To evaluate something is to judge how well it works. For a software project, you judge it against the requirements you wrote at the start. Those requirements are your rules for what good looks like.

A functional requirement says what the software must do. For example: “The app must save each player’s score.” A non-functional requirement says how well it must work. For example: “A player must be able to read the questions on a phone.”

A predetermined requirement is one you set before you look at the work. This matters. If you write the rules after you see the app, you can make them fit what you built.

To review your own project or a peer’s, use four steps:

1. Turn each requirement into a yes or no question. For example: “Does the app save a score?”
2. Test each question by using the app. Write down what you saw.
3. Give a judgement for each one: met, partly met or not met.
4. For each requirement not fully met, write one specific suggestion.

Responsibilities and Cybersecurity in Solutions

🎯 (CT5-SAF-01)

📌 Evaluate whether solutions meet social, ethical and legal responsibilities and cybersecurity principles

Software has responsibilities to the people who use it. Three kinds matter most. Social responsibilities ask whether the software helps people fairly. Ethical responsibilities ask whether it is honest and respectful. Legal responsibilities ask whether it follows the law.

In Australia, the Privacy Act 1988 (Cth) is a law about how personal information is handled. The Australian Privacy Principles are the main rules within that law. Personal information is anything that can identify a real person, such as a name or a birthday.

Cybersecurity means protecting computers, data and networks from harm. A secure solution keeps data away from people who should not see it. It also keeps the data accurate and the service working when people need it.

To evaluate a solution, use a checklist. Answer each question with evidence from the solution, not a guess.

• Does it collect only the data it needs?
• Do users know what is collected, and have they agreed?
• Is personal data protected from people who should not see it?
• Does it treat all users fairly, including people with a disability?
• Does it use images, music and code the maker is allowed to use, and credit the source?

Test Data for Algorithms and Code

🎯 (CT5-OPL-01, CT5-DAT-02)

📌 Use selected data to check an algorithm and programming code by testing

To test code, run it with test data: the inputs you choose. Before you run it, write the expected output, which is the answer the code should give.

Choose three kinds of test data:

• Typical data is normal, such as 3 items.
• Boundary data sits on the edge of a rule, such as the item that reaches a limit.
• Invalid data should be rejected, such as -1 item.

A school canteen charges $2.00 per item, capped at $10.00.

# Canteen total: $2.00 per item, capped at $10.00
def canteen_total(items):
    total = items * 2.00      # work out the price
    if total > 10.00:         # check the cap
        total = 10.00
    return total              # give the answer back

1. Write the expected output for each input first.
2. Run the code and write down the actual output.
3. If the two match, the test passes.

The last row shows a bug, a mistake in the code. It accepts -1 and charges a negative price. Fix it, then run every test again.

Tracing Algorithms and Test Cases

🎯 (CT5-OPL-01, CT5-DPM-01)

📌 Validate algorithms and programs through tracing and test cases

To validate an algorithm or program, check that it is correct. Two methods help. The first is tracing. The second is running test cases.

A variable is a labelled box that holds a value. To trace, follow the algorithm one step at a time, and write down each value as it changes. You can trace on paper, with no computer. Tracing by hand is a kind of desk check.

1. Draw a table with one column for each variable, and one for the output.
2. Go through the algorithm one line at a time.
3. Write each new value in the table as it changes.
4. Compare the final output with the expected output.

Here is a trace of the canteen code from the last section, with 6 items.

The final output is $10.00, which matches the expected output. This trace passes. Next, run the code with test cases. Each test case is one set of inputs with its expected output. Record whether each actual output matches.

Ethics and Security in Your Project

🎯 (CT5-SAF-01)

📌 Relate social, ethical and cybersecurity considerations of a software project

To relate a consideration to your project, connect it to something in your project. Name the consideration. Then name the feature it applies to, and what you did about it.

Three kinds of consideration are worth thinking about:

• Social: who can use the project, and who might be left out?
• Ethical: is the project honest and fair? Does it credit other people’s work?
• Cybersecurity: is data protected from people who should not see it?

The table shows one way to link them to a class quiz app.

Never use real people’s details when you test. Make up names, such as “Test Student 1”. A licence is the permission that says how someone else’s work can be used. Always check it before you use an image.

Careers in Software Development

🎯 (CT5-EVL-01)

📌 Explore careers in software development

Software development is the work of designing, building, testing and looking after programs and apps. Many jobs connect to it. Not every one of them involves writing code.

Here are some common roles. Job titles change between companies, so use these as a starting point:

• App or software developer: builds and updates programs and apps.
• Web developer: builds and looks after websites and web apps.
• Tester: checks that software does what its requirements say.
• User experience (UX) designer: plans how a product looks and feels to use.
• Cybersecurity specialist: protects systems and data from harm.
• Business analyst: finds out what users and clients need from the software.

The skills in this unit link to these jobs. Writing test data is a tester’s skill. Listing requirements is a business analyst’s skill. Thinking about privacy is a cybersecurity skill.

There are several ways into these jobs. Some people go to university. Others study at TAFE, do an apprenticeship or traineeship, or learn on the job. Your school careers adviser can help you compare these pathways.