IFN666 Web and Mobile Application

Development

Lecture 1 - Introduction

School of Computer Science

Faculty of Science

CRICOS No. 00213J

Queensland University of Technology
 CRICOS No.
00213J
Acknowledgement

• In keeping with the spirit of

Reconciliation, we acknowledge
the Traditional Owners of the
lands where QUT now
stands, and recognise that these
have always been places of
teaching and learning.
• We wish to pay respect to their
Elders - past, present and
emerging - and acknowledge the
important role Aboriginal and
Torres Strait Islander people
continue to play within the QUT
community.

real world
R
a university for the
2
CRICOS No. 00213J
 Respect and Inclusion
• At QUT, we strive to create an environment of respect –
where everyone is welcome, comfortable participating,
and free from harassment.

• This unit is governed by QUT student code of conduct,

and I want to thank you for doing your part towards
building an inclusive community.

• If you feel uncomfortable, or if there are any other issues

that need addressing, please contact me, or any other
member of the teaching team – we're happy to assist.

real world
R
a university for the
3
CRICOS No. 00213J
 An Agenda

• Unit Overview
• Getting Started with JavaScript
– Javascript: Modern (ES2015++)
– Language Basics
– The tricky bits

a university for the real world

R
4
CRICOS No. 00213J
Content, assignments and people

UNIT OVERVIEW

a university for the real world

R
5
CRICOS No. 00213J
 Web vs Mobile

Client Server

a university for the real world

R
6
CRICOS No. 00213J
 The Web - Static

• Static Web (Web 1.0)

Client Server
Request

Response

a university for the real world

R
7
CRICOS No. 00213J
 The Web - Dynamic

• Server Side Processing (Web 2.0 e.g. PHP)

Client Server

a university for the real world

R
8
CRICOS No. 00213J
 Client Side – Web vs Mobile

• Client Side Processing (React, React.Native)

Client Server

a university for the real world

R
9
CRICOS No. 00213J
 Server Side

• Server Side Processing (Node, MySQL)

Client Server

a university for the real world

R
10
CRICOS No. 00213J
 The Context of this unit
• Industry focussed
– Real Web and mobile development
– Not a Wordpress website creation
• No exam
– All assignments
– Students like programming
– Learn by doing (programming)
• Students need to be strong programmers
– We assume you have basic programming experience already

a university for the real world

R
11
CRICOS No. 00213J
 Unit content and the Assignment
• The material necessary for the assignment will be
introduced gradually.
• The prerequisites for the assignment are:
– Week 1,2: JavaScript Foundations

– Week 3,4,5: React Client Side

– Week 6,7: Mobile
– Week 8 : Web and Mobile App Design

– Week 9,10: Node/Express, MySQL Server Side

– Week 11: Security

a university for the real world

R
12
CRICOS No. 00213J
 Extension Material

• Weeks 12 – 13,  Broader and Advanced Topics in Web

Development
• Alternative client frameworks, more server side stuff,
guest lectures, and unit review

a university for the real world

R
13
CRICOS No. 00213J
 Learning Approaches

• Blended learning
– lectures,
– online resources,
– practicals and
– your own practice
• Feedback
– Ask the teaching staff for advice 
o During lectures/practicals
o Make appointment for consultation
– Ask peers in online forum via Slack
– Read written feedback for project assignments

a university for the real world

R
14
CRICOS No. 00213J
 Assessment Tasks
• All assignments
– Assessment 1: 10%, coding exercises (automatically marked)
• Due Week 4
– Assessment 2: 40%, Client side web programming project
• Due Week 8
– Assessment 2: 50%, Capstone programming project
• Due Week 13
– All assessment items are Individual
• No exam

a university for the real world

R
15
CRICOS No. 00213J
 AMS Programming Assignment
• Multiple small programming (JavaScript) exercises
– 20-50 lines of code per exercise
• Weight 10%
• Each explores a set of technologies (e.g. Node and JS)
• Using Automated Marking System
– Write the code in an IDE
– Copy to the AMS
– Input code to a server, get back a mark
• Rapid Feedback
• Due early semester (Week 4)

a university for the real world

R
16
CRICOS No. 00213J
 Web Programming Assignment

• Use JavaScript and React to develop a dynamic web

application
– 500-1000 lines of code

• Weight 40%

• Due Mid Semester (Week 8)

a university for the real world

R
17
CRICOS No. 00213J
 Capstone Programming Assignment

• Use JavaScript, React, React.Native to develop a

dynamic web and mobile experience
– 500-1000 lines of code
• Handle server side

• Weight 50%

• Due End of Semester (Week13)

a university for the real world

R
18
CRICOS No. 00213J
 Late Assignment Policy

• 48-hour late submission period with no application

required. Not applicable to exams or presentations

• Apply for a longer (formal) extension if there are special

circumstances

a university for the real world

R
19
CRICOS No. 00213J
 Academic Integrity
• Do not cheat
– Ask for help if needed
– Cheating is never the solution
• Outsourcing assessable work to other people or
programs, including AI tools, is a breach of QUT’s
academic integrity policy.
– Never submit an assessment item completed by other people or
programs e.g. ChatGPT
• Penalty is severe
– from a grade reduction to exclusion from QUT
• Appropriate reference
– always required if you use any resources or AI tools to help your
study.

a university for the real world

R
20
CRICOS No. 00213J
 Resources
An elegant and well structured
introduction to modern JS.

This does not assume that you

have extensive programming
experience.

And it is free on line.

https://eloquentjavascript.net/

Links to other online resources will also

be provided.

a university for the real world

R
21
CRICOS No. 00213J
 Resources (cont.)

https://medium.freecodecamp.org/the-react-handbook-b71c27b0
a795

a university for the real world

R
22
CRICOS No. 00213J
What you should have done

ASSUMED KNOWLEDGE

a university for the real world

R
23
CRICOS No. 00213J
 HTML and CSS
• Lecture and Practical
in Canvas under
“Preliminary Work -
HTML and CSS”
• W3 School
• Provided some
preliminary tutorials

see https://www.w3schools.com/html/

a university for the real world

R
24
CRICOS No. 00213J
 CSS and Web Design

If you choose not to listen to them, your web pages may end up
looking like this:
http://oneterabyteofkilobyteage.tumblr.com/

a university for the real world

R
25
CRICOS No. 00213J
 Programming Experience
• Variables and assignment
• Operators and expressions JavaScript code snippet
(arithmetic, logical, binary, let total = 0, count = 1;
comparison) while (count <= 10) {
total += count;
• Selection: Conditional statements
count += 1;
(if…then) }
• Iteration: Loops (while, do while, for, console.log(total); // → 55

for each)
• Collections (Arrays and others)
• Reading someone else’s code
• Writing (human) readable code

real world
R
a university for the
26
CRICOS No. 00213J
 Experience in IFN666

• Beyond technical experience (more than coding)

– Designing web and mobile applications
– Writing and understanding algorithms
– Understanding and describing system design
– Designing and implementing test plans
– Writing system/user documentation

real world
R
a university for the
27
CRICOS No. 00213J
People and Timetables

SOME ADMIN

a university for the real world

R
28
CRICOS No. 00213J
 About Us
Jinglan Zhang
Unit coordinator and Lecturer
Senior Lecturer, School of Computer Science
Jinglan.Zhang@qut.edu.au

Tutor
Ben Rowe
b2.rowe@qut.edu.au

a university for the real world

R
29
CRICOS No. 00213J
 About me
• Jinglan Zhang
• Senior Lecturer, School of computer science
• Research in computing applications and data
science
– Big data analysis, visualization, interaction
– Environmental monitoring
– The web
– IT for people with disability, older adults, refugees,
homeless prevention
• Teaching:
– Web Computing, Object Oriented Programming,
Operating Systems, Computer Graphics

https://staff.qut.edu.au/staff/jinglan.zhang

real world
R
a university for the
30
CRICOS No. 00213J
 IFN666 Slack - Help each other
• Study smart and study together in Slack! It’s a faster,
simpler way to talk, share files, and get work done.
• Join IFN666 2023 Slack here:
https://join.slack.com/t/qutifn6662023/shared_invite/zt-1pjliul68-A4yyWotOKgCeZfbGWaaK_g

• Students help students

• Tutors will check from time to time
• Contact teaching team directly if you need immediate
attention
• Student Success Group online (Wednesdays) or in the
Library (V Block), 10am-4pm, Monday-Friday, starting
from Week2.

a university for the real world

R
31
CRICOS No. 00213J
 What: Help with math, science, engineering or 
IT content from volunteer students with skills 
and expertise in these areas.

STIMulate is available on campus and online

from week 2 through to week 13. 

When/Where: please visit 
https://stimulate.qut.edu.au/ for detailed
timetables of what expertise is available, and
when. 

a university for the real world

R
32
CRICOS No. 00213J
 Conclusion
• IFN666 won’t be an easy unit
• But: it will be fair and (hopefully) interesting
• Lots of programming/technical knowledge
– Challenging large scale projects
– Workshops designed to walk you through at
moderate pace
• Need to work though the semester
– You cannot leave everything to the last minute
– Tip: Don’t fall behind or you will become overwhelmed!
• Ask for help when needed
– Lecturer, tutors, peers

real world
R
a university for the
IFN666 - Lecture 1 33
CRICOS No. 00213J