香港大學工程學院計算機科學系講師/教學顧問 崔俊傑博士

1. Dr. Chui Chun Kit
Lecturer , Teaching Consultant
Department of Computer Science, Faculty of Engineering
The University of Hong Kong
Kids can code!
Slides prepared by - Dr. Chui Chun Kit, http://www.cs.hku.hk/~ckchui/ for the event “寫Apps編程：ICT教學新潮流”
For other uses, please email : ckchui@cs.hku.hk

2. 2
External advisor of Let’s Code (Hong Kong)
Association Limited (香港創意程式推廣協會)
Lecturer/ Teaching consultant (講師/教學顧問),
The University of Hong Kong:
- Introduction to Computer Science
- Computer Programming
- Programming Technologies and tools
- Database Management Systems
- Modern technologies in WWW
- Final year projects (Computer Science)
- Web Technologies (MSc)
About Kit
Leader of the Interest Group for Computer
Science and Education in HKUCS
(電腦科技及教育小組)
Welcome!

3. Sharing
Coding training in tertiary education
電腦編程課程是怎樣的?
Coding for everyone (kids)
電腦編程的普及
Kids can code?
3

4. Can kids code?
Daniel Chao (10 years old) – invented
the iRead monthly apps
Students have to keep track of their daily reading
time and send the report to teacher every month
iRead - keep track of daily reading
hours  Email
to teachers
Reading
timer
4

5. Nick D'Aloisio (18 years old), founder of Summly
Summly, summarizes long
pieces of text into a few
representative sentences.
There are too much information!
We don’t have time to read every article / news
2013: sold to Yahoo! for a reported $30 million USD
Summly
Can kids code?
5

6. Coding
Coding / Computer Programming
is NOT just about writing codes…
學習電腦編程並不只是學習寫程式…
It is about problem solving
(這是一門學習運用電腦科技解決問題
的專業,著重於邏輯和創意思維的訓練)
– the study of using computer
technologies to solve real-life problems.
6

7. Coding and Technology
Coding and technology changes our world
編程與科技息息相關, 為我們的世界帶來變革
Online booking application
Smartcard payment application 7

8. Coding and Technology
Google map applications
(e.g., route planning)
Next dimension of Google Earth (模擬真實的3D世界)
http://www.youtube.com/watch?v=U8CMtRS6IUw
http://www.youtube.com/watch?v=N6Douyfa7l8
Google map floor plan (室內地圖和定位系統)
http://maps.google.com/help/maps/floorplans/
Google’s Trekker
Project
Google street view (街景圖片)
8

9. Coding
Acquire fundamental Coding / Computer
Programming skill and implement your ideas!
IDEA
Innovative thinking (革新的思維)
Creativity (創意)
Vision (對未來的遠見)
Programming
Skill set
(編寫程式的能力)
9

10. Our future?
Check out the following technologies that
will certainly change our future world.
Quadcopters
Cloud technologies
3D printing technologies
Self driving car / driverless car
Mobile technologies/ Google glass/ smart contact lens
10

11. Coding training in
tertiary edu.
Slides prepared by - Dr. Chui Chun Kit, http://www.cs.hku.hk/~ckchui/ for the event “寫Apps編程：ICT教學新潮流”
For other uses, please email : ckchui@cs.hku.hk

12. Coding training in HKU
All Engineering freshman have to learn programming.
Civil Engineering (土木工程)
Electrical and Electronic Engineering (電機電子工程)
Mechanical Engineering (機械工程)
…etc
Many non-engineering students also take the
programming courses in HKU.
Faculty of Business and Economics (經濟及工商管理學院)
…etc
12

13. Why coding is important?
Programming is a basic literacy (編程是學習科技的基本工具)
The students of today need to be able to
understand and control new technologies.
Understanding
technologies
It’s a way to create change
(編程是發揮創造力, 為未來帶來變革的工具)
“You have an idea for then next big tech
innovation? Great. Can you bring it to life?”
Inventing
new technologies
13

14. Coding – Stage 1
Variables (變數)
Flow of control (控制指令流程) (
repeat, if-else conditional
branching, switch)
Function / procedure
Programming language - The ability
to “communicate” with a computer
by giving sequence of instructions.
學會基本編程向電腦下達指令,控制電腦
Learning basic
programming language
學習基本編程語言
…etc
1
14

15. Coding – Stage 2
Program design - The ability to
plan, design and implement a
user-friendly software product
學會設計,管理, 編寫軟件的流程.
Introduction to software
engineering (軟件工程學)
Introduction to data management
(數據處理科技)
…etc
Learning basic
programming language
學習基本編程語言
Program design
學習如何設計軟件
2
15

16. Electronic commerce technologies
(電子商務科技)
Coding – Stage 3
Advanced Computer
Science Technology
更深入瞭解電腦科技
Advanced technologies - The study of
using various computer technologies
to solving real-life problems.
Internet technologies (互聯網科技)
Artificial intelligence (人工智能科技)
Learning basic
programming language
學習基本編程語言
Program design
學習如何設計軟件
Computer security technologies
(電腦安全科技)
3
16

17. Ultimate goal
Programming
skill set
Problem
formulation
Problem
solving
Coding
Creativity
I have
an idea!
Logical thinking,
Domain knowledge
This is my
invention!
This is my
strategy!
To foster intellectual creativity (創造力) & logical
thinking skills (邏輯思考能力) of our future generation.
17

18. Coding for
everybody (kids)
Slides prepared by - Dr. Chui Chun Kit, http://www.cs.hku.hk/~ckchui/ for the event “寫Apps編程：ICT教學新潮流”
For other uses, please email : ckchui@cs.hku.hk

19. Global trend
Estonia - Introducing computer
programming learning for all
children attending school
(starting from age 6) in 2012.
UK – UK Department for Education plans to teach
“computer science" to all children from age 5 in
2014.
19

20. HK Digital 21 strategy
Hong Kong – 2014 Digital 21 strategy (數碼21資訊科技策略):
Equipping students with programming capabilities can
help foster a logical (邏輯) and creative (創意思維) mindset.
Advises schools to allocate at least 30% of time of the
Computer Literacy subject to programming concepts at
junior secondary level.
Resource: http://www.digital21.gov.hk/eng/relatedDoc/download/2014D21S-booklet.pdf
建議學校應在初中生的電
腦課程中加入編寫程式的
部分，並提倡學校分配至
少30﹪的時間於課程之上
20

21. 21
Building-block programming. Scratch programming is
based on a building-block Metaphor.
Learners will drag-and-drop blocks from the library to create
“stacks” (procedures) that govern behaviors of the object.
// This is a sample C++ program
#include <iostream>
using namespace std;
int main(){
cout << "Hello!" << endl
return 0;
}
v.s.
Need to type the code and
easy to make syntax error
In function `int main()':
expected `;' before "return"
Simple! No syntax error! Interesting
and easy-to-use graphical interface .
21
Scratch

22. Example 1 – logical thinking
1
2
The blocks draw a Circle
1
2
1
2
1. Move 10 steps
2. Turn 10 degree
Repeat 36 times, turned 360
degrees in total. Can you use the
coding blocks to
draw the above
figure ?
22

23. Example 1 – logical thinking
Draw 35 circles – Repeat 36 times:
Draw one circle, turn right by 10 degree.
Draw one circle
1
2
1
2
1
1
2
…
23

24. Example 2 – Divide & conquer
Let’s build a shooting game!
Keyboard to control the
cannon stand, moving
along the y-axis
1
When the space
button is pressed,
fire!
2
Ghost moving up
and down.3
When the ghost is hit by the
bullet, say “Oops! It hurts!”4
24

25. Example 2 – Divide & conquer
Step 2. Design the actions of each object.
Movement (up and
down) controlled by
keyboard.
Cannon standBullet
Fire when space
is pressed.
Ghost
Move up and down
Say “Oops it hurts”
when get hit.
Action
Step 1. Define the objects in the application.

26. Example 2 – Divide & conquer
Move Bullet to Cannon stand
Make the Bullet visible
Move Bullet to left horizontally
until it touches the edge
Hide the Bullet
26
When part
What part
Problem solving:
Divide and
conquer – divide
the big task (fire
action) to a
number of
smaller subtasks
so that each
subtask can be
implemented
easily.
Fire

27. is a free programmable toolkit that
enables kids to create their own animated stories,
games and interactive art.
27
animated stories games interactive art
Kids can code!

28. Self-learning social platform
Scratch cloud – An online community that allows
everyone to share their Scratch applications, view and
comment on other’s projects.
You can also “See inside” other’s project and learn how they
develop the program block stacks of their applications.
28

29. Building apps is very easy...
Everything is right in front of you. Components and
programming blocks are in drawers. Just find, drag, and drop.
lets you
develop applications for Android
phones using a web browser.
Drag
Drop
I want to have
a button in my
apps 
App Inventor
29

30. Workshop series
2013 Easy coding: Scratch and App Inventor
Introduction to data management
Introduction to artificial intelligence
2014 Summer: Introduction to 3D printing technologies
01100101110
11001011101
10010110110
30

31. Our children, our future
Our goal is to enable our future generation
to become creators (創造者), not just
consumers (消費者) of technology.
This is my
invention!
v.s.
Professor Harold Abelson, MIT
Creator of MIT App Inventor
31

32. Let’s code!
Dr. Chui Chun Kit (傑)
ckchui@cs.hku.hk
Department of Computer Science
The University of Hong Kong
Slides prepared by - Dr. Chui Chun Kit, http://www.cs.hku.hk/~ckchui/ for the event “寫Apps編程：ICT教學新潮流”
For other uses, please email : ckchui@cs.hku.hk
Mr. John Huen
John.letscode@gmail.com
Let’s Code
Please contact

33. Self-learning resources
Online class - http://learnscratch.org/
33
Scratch wiki - The Scratch Wiki is a free, collaboratively-
written wiki that provides information about the Scratch
programming language
http://wiki.scratch.mit.edu/wiki/Scratch_Wiki