Kids Can Code

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 : [email protected]

http://www.cs.hku.hk/~ckchui/

mailto:[email protected]

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!

Sharing

Coding training in tertiary education 電腦編程課程是怎樣的?

Coding for everyone (kids) 電腦編程的普及

Kids can code?

3

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

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

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

Coding and Technology

Coding and technology changes our world 編程與科技息息相關, 為我們的世界帶來變革

Online booking application

Smartcard payment application 7

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

http://www.youtube.com/watch?v=U8CMtRS6IUw

http://www.youtube.com/watch?v=N6Douyfa7l8

http://maps.google.com/help/maps/floorplans/

Coding

Acquire fundamental Coding / Computer Programming skill and implement your ideas!

IDEA Innovative thinking (革新的思維)

Creativity (創意)

Vision (對未來的遠見)

Programming Skill set

(編寫程式的能力) 9

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

Coding training in

tertiary edu.




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

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

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

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


Program design 學習如何設計軟件

2

15

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 (人工智能科技)


Program design 學習如何設計軟件

Computer security technologies (電腦安全科技)

3

16

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

Coding for

everybody (kids)




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

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

http://www.digital21.gov.hk/eng/relatedDoc/download/2014D21S-booklet.pdf



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

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

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

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

Example 2 – Divide & conquer

Step 2. Design the actions of each object.

Movement (up and down) controlled by keyboard.

Cannon stand Bullet

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.

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

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!

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

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

Workshop series

2013 Easy coding: Scratch and App Inventor

Introduction to data management

Introduction to artificial intelligence

2014 Summer: Introduction to 3D printing technologies

011001011101100101110110010110110

30

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

Let’s code!

Dr. Chui Chun Kit (傑)

[email protected]

Department of Computer Science

The University of Hong Kong


Mr. John Huen

[email protected]

Let’s Code

Please contact





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

http://learnscratch.org/

http://learnscratch.org/

http://wiki.scratch.mit.edu/wiki/Scratch_Wiki