ProCodeCG Kids Regular Coding Class – 22 September 2018

Standard

Hello Saturday πŸ™‚ Time for being productive πŸ˜‰

IMG_5111

IMG_5112

Today Fadhlan is ready to finish mounting all the components to his robot

IMG_5092

IMG_5109

IMG_5126

IMG_5138

IMG_5151

IMG_5153

IMG_5163

Capt. Faris helped Fadhlan modifying the code

IMG_5159

IMG_5164

IMG_5165

IMG_5166

Edo still learn shell scripting while trying to install Linux on VirtualBox

IMG_5093

IMG_5101

IMG_5110

Nadine creates some coding for design

IMG_5094

IMG_5106

IMG_5113

Djalu continue his game in GameMaker

IMG_5095

IMG_5100

IMG_5119

IMG_5131

IMG_5150

and we got a newcomer: Al

IMG_5096

Al had to finish Minecraft Hour of Code challenge

IMG_5102

IMG_5120

IMG_5121

Al had beaten the first challenge πŸ™‚ Now the next πŸ˜‰

IMG_5134

IMG_5149

Al’s sister: Ifa also joined us πŸ™‚ And she was given different challenge than Al’s

IMG_5097

IMG_5103

IMG_5116

IMG_5132

IMG_5133

Agham continue learning programming logics with Blockly

IMG_5098

Capt. Faris helped Agham to proceed with the difficult parts

IMG_5104

IMG_5108

Harraz finished Minecraft Hour of Code today and continues creating his game in GameMaker

IMG_5099

IMG_5105

IMG_5115

IMG_5124

IMG_5125

IMG_5152

IMG_5156

Fathan made lots of progress with his PVZ game πŸ™‚

IMG_5118

IMG_5117

IMG_5129

IMG_5130

IMG_5139

IMG_5140

IMG_5142

IMG_5144

IMG_5147

Capt. Faris project: creating API for an Android app πŸ™‚

IMG_5122

The app

IMG_5160

IMG_5162

IMG_5161

We also have Mohan today πŸ™‚ Welcome to the club πŸ™‚

IMG_5127

Mohan went through the intro by doing the Minecraft Hour of Code challenge πŸ™‚

IMG_5128

IMG_5148

IMG_5157 IMG_5158

Mohan looks so excited, and so were Al and Ifa. Thank for joining us, see you again next week πŸ˜‰

*Photos and video are also available here

 

 

 

 

ProCodeCG Kids Regular Coding Class – 8 September 2018

Standard

Saturday is time to learn different things than what we learn at school πŸ™‚

IMG_4275

Sam is still working on his Plants vs Zombie remaking project in GameMaker πŸ™‚ The game is quite complex, he has to think and work hard to make it work

IMG_4257

IMG_4254

This game requires lots of tricks and advanced techniques

IMG_4266

IMG_4267

IMG_4289

IMG_4292

Nadine wanted to learn some Scratch Programming to create Google logo πŸ™‚

IMG_4259

IMG_4256

Nadine can modify each letter with codes

IMG_4262

IMG_4263

IMG_4264

The variation is infinite πŸ™‚

IMG_4269

Nadine can add dialogue between the letters too πŸ™‚

IMG_4280

IMG_4281

IMG_4286

While Capt. Faris is still making API for an Android Apps to memorize Quran

IMG_4258

IMG_4260

IMG_4265

IMG_4285

IMG_4293

IMG_4294

And of course Fadhlan got loads of work to do with the robot. He has to prepare for the upcoming young scientist competition

IMG_4261

Fadhlan has to add ultrasonic sensors and one power source to the robot

IMG_4268

Engineers space of work is never neat πŸ˜€ Look at that hanging hot solder *Fadhlan kept yelling to warn people to stay away from it πŸ˜€

IMG_4270

The code

IMG_4279

IMG_4290

IMG_4299

IMG_4301

Vian decided to learn Python today. So we installed and update things so he can start to code in Python πŸ˜‰

IMG_4271

IMG_4303

Vian said that he wants to learn some Machine Learning with Python πŸ˜€

IMG_4284

Yogi is very serious game creator. He’s been working on this race car game, and he keeps making it better each week

IMG_4272

He added details and more codes to it

IMG_4277

IMG_4282

IMG_4287

Yogi pays attention to every details πŸ™‚ The result is: amazing πŸ™‚

IMG_4296

IMG_4302

Fathan is also developing a Plants vs Zombie in GameMaker

IMG_4273

IMG_4278

IMG_4283

Β 

IMG_4288

IMG_4295

In our class we don’t do things for competition but to learn and have fun πŸ™‚ No pressure unnecessary because life is hard enough! πŸ˜‰

*Photos and videos is also available here πŸ™‚

Β 

Β 

Β 

ProCodeCG Kids Coding Camp – Creating Mobile Apps – Day #3 – 24 June 2017

Standard

Day #3 of Creating Mobile Apps Coding Camp πŸ™‚

IMG_2262

Fikra had finished all the tasks given in worksheet πŸ™‚

IMG_2264

And then Capt. Zaki supervise him to create his own app πŸ™‚

IMG_2270

IMG_2280//embedr.flickr.com/assets/client-code.js

The app πŸ™‚

IMG_2271

IMG_2272

With the rest of the class πŸ™‚

IMG_2286

See you again on the next coding camp, or regular class πŸ™‚

ProCodeCG Kids Coding Camp – Creating Mobile Apps – Day #2 – 23 June 2017

Standard

Creating Mobile Apps Coding Camp Day #2 πŸ™‚

Fikra (left) and Capt. Zaki (right)

IMG_2155

Fikra created a Login Apps today πŸ™‚

This is when the wrong password entered

IMG_2164

And when the correct one entered, the apps will go to the other screen πŸ™‚

IMG_2166

Fikra also created an app to generate random numbers

IMG_2172

A random number will appear each time the button is pressed πŸ™‚

IMG_2173

This is Fikra’s Calculator πŸ™‚

Addition

IMG_2198

Substraction

IMG_2200

Multiplication

IMG_2201

Division

IMG_2202

Wooow, lots of achievement today πŸ™‚ Tomorrow we will learn more plus Fikra will get a challenge πŸ™‚

ProCodeCG Kids Coding Camp – Creating Mobile Apps – Day #1 – 22 June 2017

Standard

There’s only one kid registering to Creating Mobile Apps Coding Camp so we decided to merge the class with IoT Programming Coding Camp πŸ™‚

IMG_2057

Capt. Zaki is giving Fikra full supervision for Creating Mobile Apps πŸ˜‰

IMG_2061

IMG_2090

Today Fikra learned basic logic and programming with Blockly

IMG_2073

Tomorrow Fikra will start to code mobile apps with Thunkable πŸ™‚

IMG_2078

IMG_2085

We have lots of apps to create, will be reporting about it tomorrow πŸ™‚

IMG_2093

ProCodeCG Kids Coding Camp – Creating Apps Day #1 – 2 Jan 2017

Standard

Hello! Day #1 of Creating Apps πŸ˜‰

Areli and Mom arrived earlier than us today and the set up the class so neatly, thanks Areli and Mom! πŸ™‚

IMG_9871

Let’s introduce our apps programmers in the class today: Indra

IMG_9872

Areli

IMG_9873

Ardian

IMG_9874

Dea

IMG_9875

and Michael! πŸ™‚

IMG_9876

We warmed ourself up by doing challenges on Blockly Games so we will be used to the syntax and the nature of Thunkable programming

IMG_9877 IMG_9878

We have lots of trails of different kind of challenges πŸ™‚

IMG_9879

Capt. Syahna with documents and stuff

IMG_9880

Capt. Zaki assisting Areli

IMG_9881

The class went very well, each kid had different ways to deal with the challenge

IMG_9914 IMG_9915

IMG_9916

IMG_9921

This is Areli’s long code on Blockly section Turtle, level 7 πŸ™‚

IMG_9919

A very long one and works very well πŸ™‚

IMG_9920

This one is level 10 of Pond section. Capt. Zaki created this code to help Mike finished his πŸ™‚

IMG_9922

This is Areli’s Turtle level 8

IMG_9923

and Mike Pond’s

IMG_9927

Lunch time! πŸ™‚

IMG_9924 IMG_9925

IMG_9926

After lunch we started creating our own Android apps! We create the apps using Thunkable and then generate this QR Code to be scanned by any Android phones using the same network and the app will be downloaded right into the phone and ready to use! πŸ˜‰

IMG_9928 IMG_9931

This one is Dea’s app πŸ™‚

IMG_9935

One button will show the pic and the other one will hide it πŸ™‚

IMG_9936

This one is Indra’s

IMG_9949

And Areli’s πŸ™‚

IMG_9950

Ardian and Mike still had trouble with their phone and the simulator so we will definitely try again tomorrow πŸ™‚

Here is the screenshots of some things we did today πŸ™‚

Bildschirmfoto 2017-01-02 um 9.46.02 AM Bildschirmfoto 2017-01-02 um 11.08.08 AM

Bildschirmfoto 2017-01-02 um 11.58.24 AM Bildschirmfoto 2017-01-02 um 1.47.51 PM

Bildschirmfoto 2017-01-02 um 1.47.53 PM

Going to make more interesting apps tomorrow! πŸ™‚

ProCodeCG Kids Coding Camp – Creating Apps – Day #3

Standard

Creating Apps, the last day!

Today we did some improvements to our previous guessing number game. Now we add a label text giving a clue whether the guess is too small or too big.

99 is to big

Bildschirmfoto 2016-07-02 um 9.44.31 AM

while 30 is too small

Bildschirmfoto 2016-07-02 um 9.44.39 AM

and 60 is the correct answer! πŸ™‚ the number is generated randomly each time.
Bildschirmfoto 2016-07-02 um 9.44.49 AM

We created new blocks and deactivated the old one (a very cool visual of commenting out the code ;))

Bildschirmfoto 2016-07-02 um 9.48.53 AM

Then we add a number of try to the code
Bildschirmfoto 2016-07-02 um 9.58.34 AM

Now we can see how many tries it takes to guess the correct number

Bildschirmfoto 2016-07-02 um 10.11.03 AM
Bildschirmfoto 2016-07-02 um 10.11.10 AM Bildschirmfoto 2016-07-02 um 10.11.32 AM

The next is creating an app to determine whether a number is even or odd
Bildschirmfoto 2016-07-02 um 10.53.02 AM Bildschirmfoto 2016-07-02 um 10.53.05 AM
Bildschirmfoto 2016-07-02 um 10.53.10 AM

We also tried how to connect to Google Maps

Bildschirmfoto 2016-07-02 um 11.15.53 AM

Thunkable gives access to latitude and longitude from Google Maps
Bildschirmfoto 2016-07-02 um 11.16.06 AM

The last one is creating an app to determine how old are you by entering your birthday date

Bildschirmfoto 2016-07-02 um 12.24.19 PM

We did lots of trial and modifications
Bildschirmfoto 2016-07-02 um 1.15.35 PM

We use DatePicker to get the birthday date input

Bildschirmfoto 2016-07-02 um 1.27.12 PM

The app still need to be improved, too bad we were running out of time!
Bildschirmfoto 2016-07-02 um 1.27.19 PM

This is the class in the morning, before more kids showing up

IMG_5637

Kids are very happy to play the apps on their own smartphones
IMG_5638 IMG_5640

Everyone has different version of code. This is Capt. CG’s
IMG_5644

And this is Capt. Zaki’s. Looks totally different πŸ˜€

IMG_5645

Break time
IMG_5646 IMG_5647

Kids are kids. They played hide and seek during break time πŸ˜€
IMG_5648

And after that, we still struggling to make the code work πŸ˜€

IMG_5649

Because today’s topic is advanced apps in Thunkable, most of the kids got headache LOL
IMG_5652

The block of code was too long
IMG_5653

And lots of logics to be figured out

IMG_5654

We didn’t have time to finalize the code and had to pack up
IMG_5655

And say goodbye to the last day of ProCodeCG Coding Camp!

IMG_5657

But don’t worry we’ll be back in six month! πŸ˜‰

ProCodeCG Kids Coding Camp – Creating Apps – Day #2

Standard

Creating Apps, Day #2 πŸ˜‰

We created a game today! πŸ˜‰ A simple game we used to code with GML (GameMaker Language). This Pong Game is a very good example to introduce canvas, objects, image, sounds, arrangement and control πŸ™‚

Bildschirmfoto 2016-07-01 um 9.29.43 AM

Some of the code

Bildschirmfoto 2016-07-01 um 10.02.32 AM

The whole code
Bildschirmfoto 2016-07-01 um 10.33.40 AM

Next we created a simple calculator

Bildschirmfoto 2016-07-01 um 12.54.19 PM

The code
Bildschirmfoto 2016-07-01 um 12.54.21 PM

The calculator on the simulator

Bildschirmfoto 2016-07-01 um 1.26.22 PM

And we also created a guess game
Bildschirmfoto 2016-07-01 um 5.33.00 PM

the code is still very simple, we will improve it tomorrow πŸ™‚

Bildschirmfoto 2016-07-01 um 5.33.04 PM

This is when the guess is wrong
Bildschirmfoto 2016-07-01 um 5.39.26 PM

And this is when the guess is correct πŸ™‚

Bildschirmfoto 2016-07-01 um 5.40.12 PM

For each app we just generate the QR Code and everybody can play πŸ™‚
IMG_5529 IMG_5530

The GodFather Captain gave us a visit again πŸ™‚
IMG_5531

Capt. Zaki, as usual, preparing today’s lesson

IMG_5532
IMG_5535

GodFather Captain busy with the Gizwits πŸ˜€
IMG_5536 IMG_5537

Oh wow, this kid really got a style πŸ˜€
IMG_5538

And this one always hide behind something πŸ˜€

IMG_5539

LOL! πŸ˜€
IMG_5540 IMG_5541

Capt. Cinta assisting Mail
IMG_5542 IMG_5543

Friday’s Prayer break
IMG_5544

We created some games apps and play πŸ˜€

IMG_5545

or listening to music
IMG_5546

Or just checking up handphone

IMG_5547

After the break, Capt. Zaki explained about the calculator

IMG_5553
IMG_5554

WithΒ Capt. Cinta navigating the screen

IMG_5555

Yep, it works πŸ˜‰
IMG_5556

IMG_5571IMG_5557

In two days, kids gots lots of new apps on their smartphones
IMG_5558

Capt. Zaki and Capt. Cinta, always love to see kids in teamwork πŸ˜‰ ❀

IMG_5559

Zahra and Icha
IMG_5561

Ara
IMG_5562

Edo and Thoriq

IMG_5563

Ozan (and Capt. Fizhan)
IMG_5564

Farrell and Mail

IMG_5565

Rheino
IMG_5566

Fayza

IMG_5567

Fadhlan
IMG_5568

Nadhira

IMG_5569

Tian
IMG_5570

After all kids got the app worked, we call it a day!
IMG_5573 IMG_5574

Will create more apps tomorrow! πŸ˜‰

 

ProCodeCG Kids Coding Camp – Creating Apps – Day #1

Standard

First day of Creating Apps! πŸ™‚

Today we learn how to create android apps with Thunkable

Thunkable is a spin off of App Inventor. It is a very friendly tools to create mobile apps

Bildschirmfoto 2016-06-30 um 9.56.10 AM

And after the apps ready, it can be exported using QR Code or as .apk to be downloaded to computer, and run with a simulator.

Bildschirmfoto 2016-06-30 um 9.41.18 AM

As the beginning, we create a button that will display a picture when it is clicked
Bildschirmfoto 2016-06-30 um 10.00.50 AM

Thunkable use drag and drop coding (very similar to Blockly)

Bildschirmfoto 2016-06-30 um 10.06.49 AM

A recommended simulator is KoPlayer (for PC) or BlueStacks (for Windows and Mac). This is how the app looks like on BlueStacks for Mac
Bildschirmfoto 2016-06-30 um 10.30.18 AM

The next app we created is a login form

Bildschirmfoto 2016-06-30 um 1.13.21 PM

The code
Bildschirmfoto 2016-06-30 um 1.13.34 PM

How it looks like on BlueStacks
Bildschirmfoto 2016-06-30 um 1.24.18 PM

If we enter the correct user id and password, it will go to the next screen

Bildschirmfoto 2016-06-30 um 1.24.23 PM

Then we add some back button
Bildschirmfoto 2016-06-30 um 1.39.23 PM

And some time picker too

Bildschirmfoto 2016-06-30 um 1.47.40 PM

Before the class started
IMG_5431

Capt. Cinta and Capt. Syahna

IMG_5432

Edo, Thoriq and Fauzan
IMG_5433

Fadhlan and Fayza

IMG_5434

Zahra and Icha
IMG_5435

Capt. Zaki and Capt. Fizhan

IMG_5436

Capt. Zaki preparing the lessons today
IMG_5437

The QR Code

IMG_5442

Everyone can read it and use the app on their android phone
IMG_5443

Capt. Cinta assisting Fadhlan

IMG_5444

Lots of things to do today because we had to do lots of setups for each computer and smartphones

IMG_5447
IMG_5450

This is Tian
IMG_5451

Ismail

IMG_5452

Nadhira
IMG_5453

Capt. Zaki assisting Fayza

IMG_5454

Rheino
IMG_5455

Fadhlan
IMG_5456

Ara
IMG_5457

Zahra and Icha having fun πŸ˜€

IMG_5458

Edo and Thoriq too πŸ˜€
IMG_5459

Ozan looks so happy too πŸ™‚

IMG_5460

Today our GodFather Captain visited us again and shared some stories about electronic devices and information technology πŸ™‚
IMG_5462 IMG_5464

He showed us Gizwits
IMG_5465

The kids were really interested

IMG_5466

ProCodeCG is so going to make class or coding camp “IOT for Kids” πŸ˜‰
IMG_5467

Back to work again

IMG_5468
IMG_5469 IMG_5470

This is how the app looks like on kids android smartphones
IMG_5445
IMG_5471 IMG_5472
IMG_5473 IMG_5474
IMG_5475 IMG_5476
IMG_5477 IMG_5478

This is too fun! We will continue this tomorrow! πŸ™‚

ProCodeCG Kids Regular Coding Class 16 Jan 2016 – Creating Apps

Standard

Today we continue working on our client-server code in Python, login password in Scratch, countdown to 2015 code in Python and creating apps with App Inventor! πŸ˜‰

This is Farrell demonstrating his solar system’s orbit code in Python πŸ˜‰ The code use real data from NASA and it is really interesting to see the track of each planets based on their speed and Astronomical Unit (AU). The code use Python turtle library to draw the trajectory πŸ˜‰

IMG_3751

Faris is working on his Android Studio and Malik is debugging his Python client-server code.

IMG_3752

Reza, on the corner has created his own counter with start and stop button, and he had created some apps with Apps Inventor before so it is easy for him to follow the class today πŸ™‚

We have a new student today, Aliyah, the girl on the back with stripes shirt, is waiting for her emulator loading πŸ™‚

IMG_3753

We have a little company leading the class today! πŸ˜€

IMG_3754

How cute! πŸ˜‰ ❀

IMG_3757IMG_3758

Today we create one button and one image with App Inventor. We will set the image to be invisible.

Bildschirmfoto 2016-01-16 um 6.06.17 PM

When the button is clicked, the image will be visible πŸ™‚ The coding is using Blockly πŸ™‚

Bildschirmfoto 2016-01-16 um 11.07.46 AM

After the code is finished, we build the project.

Bildschirmfoto 2016-01-16 um 6.13.01 PM

And then connect it to the Android Emulator (should be downloaded and installed first. And the computer should be restarted).

Bildschirmfoto 2016-01-16 um 6.14.10 PM

If there is any emulator updates then before running the project, it will download the update first.

Bildschirmfoto 2016-01-16 um 6.06.54 PM

This is the emulator

Bildschirmfoto 2016-01-16 um 11.06.34 AM

And there we go! We have it running! πŸ˜‰

Bildschirmfoto 2016-01-16 um 7.48.24 PM

Bildschirmfoto 2016-01-16 um 11.00.39 PM

The problem with App Inventor that it needs a stable and fast internet connection. The connection and loading process is so slow, we should do something else to wait until it displays our project on the simulator. Hopefully we can figure out how to make it work smoothly because today some computers cannot be installed with the emulator and the ones with emulator installed took hundred years for the emulator to show up.

We will work on it next week! πŸ™‚