ProCodeCG Kids Coding Camp – Creating Apps Day #3 – 4 Jan 2017

Standard

Day #3 πŸ™‚ Again the room was set up by Areli and fam πŸ™‚ Thanks so much πŸ™‚

IMG_0104

We finished our calculator apps and create some more πŸ™‚

IMG_0107

IMG_0105 2

IMG_0106

IMG_0108

We also add pop up warning window if there is a division by zero πŸ˜‰

IMG_0109

IMG_0110 IMG_0111

IMG_0112 IMG_0113

IMG_0114

 

IMG_0116 IMG_0117

Then we created a Xylophone app πŸ˜‰

IMG_0115

IMG_0118

Yeh, we code and play LOL

IMG_0119

Kids like to code inside the box

IMG_0120

Literally πŸ˜€

IMG_0122

IMG_0125

While the kids was having the break and playing. Capt. BR did some debugging while having lunch

IMG_0124

And Capt. Fizhan giving help to those who didn’t take a break πŸ˜€

IMG_0126

Our Xylophone! πŸ™‚

IMG_0127

IMG_0128 IMG_0129

IMG_0130 IMG_0131

It worked nicely and have been tested πŸ˜‰

IMG_0123

IMG_0132 IMG_0133

IMG_0134

The next app was To Do List App. It required some database and we used TinyDB to store the list. The block is quite complex but the kids finished it πŸ˜‰

IMG_0135

IMG_0151

IMG_0136 IMG_0137

IMG_0138

IMG_0144

Here are our Apps Programmers! πŸ™‚ Ready to create many more!

IMG_0141

Some screenshots πŸ™‚

Bildschirmfoto 2017-01-04 um 10.06.51 AM Bildschirmfoto 2017-01-04 um 12.17.00 PM

Bildschirmfoto 2017-01-04 um 12.17.06 PM Bildschirmfoto 2017-01-04 um 1.23.46 PM

Bildschirmfoto 2017-01-04 um 1.39.14 PM Bildschirmfoto 2017-01-04 um 1.49.44 PM

And what happened behind the screen πŸ˜€ πŸ˜€ πŸ˜€

IMG_0148 IMG_0149

IMG_0150

See you again kids! So glad to have you in class πŸ™‚ Tomorrow we will start learning Arduino Programming πŸ™‚

Advertisements

ProCodeCG Kids Regular Coding Class – 23 July 2016 – Exhibition Prep Part 1

Standard

Hello! Today we did some prep for the upcoming ProCodeCG Kids Exhibition πŸ˜‰ We also did lots of other things today πŸ™‚

IMG_7297

Azriel was preparing to present his code for the exhibition

IMG_7298

While Capt. Cinta giving jumpstart to Awa and Darrell πŸ™‚
IMG_7299

Edo helped Tyo to create Android apps with Thunkable

IMG_7301

We had a newcomer: Zahran πŸ˜‰ His little brother looked interested in what his big bro was doing, like any other ProCodeCG Kids LittleΒ Bros πŸ˜€
IMG_7302

Awa was catching up with the Cyber Security topic he missed last week

IMG_7303

We also had Vian back (after quite a long time), he was under Capt. Faris assistance πŸ™‚
IMG_7304

And later Azriel said there was something wrong going on with his code and he cancelled the presentation LOL

IMG_7305

Clarence and Prudence are the most quiet students in class. They were also keeping up with the Cyber Security thing and the finished it πŸ™‚
IMG_7306

Yaaay, our Capt. Reza was back! He came and before had a chance to unpack his back and set up his laptop, he already served the duty of helping other kid πŸ˜‰ ❀
IMG_7308

Faris, while helping Vian, was doing an investigation about the source code of Pokemon Go πŸ˜€ He downloaded the .apk and decompile it. And dissected it πŸ˜€

IMG_7333

We didn’t need the projector today because so many things were going on πŸ˜€

IMG_7309

Capt. Cinta started a new project we named: InstaKilo πŸ˜€ This is a simple apps supposed to look like Instagram where we have photos and people can like and leave comments πŸ™‚
IMG_7310

We’re developing it with Thunkable πŸ™‚

IMG_7312

Awa looked so serious! πŸ˜€
IMG_7313

So did Darrell πŸ™‚

IMG_7315

So did Zahran πŸ˜€
IMG_7316

Awa got the bestΒ tutor πŸ™‚ Look how happy he was πŸ˜€

IMG_7317

Yayyy Rezandra came too with a finished game in GameMaker for exhibition! All we need is adding scores and more features πŸ™‚
IMG_7319

The game looked like this πŸ™‚

IMG_7334

Muhammad came too! (with his little brother, so typical in ProCodeCG Kids Coding Class to see pairs of sibling like this πŸ˜€ )

IMG_7321

Azriel was very busy fixing his code while Reza was busy catching up
IMG_7322

We’re all busy!

IMG_7323
IMG_7324 IMG_7325

We’re busy and we discuss with each other to solve things
IMG_7326

This is Azriel’s code. Apparently there was some error related to the datatype (the method expect integer while the input parameter was float)

IMG_7327

Awa was working so hard he said Β he need to faint for a while πŸ˜€ πŸ˜€ πŸ˜€
IMG_7328

Malik came with his code in (pure) Java. A chatting apps.

IMG_7330

We just need to fix a few error.Β The code is written in Java. No visual programming, no drag and drop πŸ˜€
IMG_7332

Tyo and Edo were working on their code for exhibition
IMG_7335

Muhammad was doing some password cracking example
IMG_7336

Awa went to the other side of the class to check what other kids were doing πŸ™‚

IMG_7342

Any progress, Azriel?
IMG_7343

Prudence had finished her Cyber Security task and she moved on to the next challenge

IMG_7344

Reza did come late but he successfully caught up!
IMG_7345

One of the most entertaining things in this place is that we always find a pet πŸ˜€

IMG_7346

The cat just quietly napping on the table πŸ˜€
IMG_7347

And we will name it Thunkable πŸ˜€

IMG_7348

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 11 June 2016 – Thunkable

Standard

Today we learned new things and we got newcomers too πŸ™‚ We got Tyo and Muhammad joining the class πŸ™‚

IMG_3806

We tried Thunkable, a spin out of AppInventor to create apps and deploy it to Android phones πŸ™‚ This is a part of Coding Camp’s preparation, we tested all materials for Coding Camp in Regular Classes so we can find out any troubles that might occurs beforehand.

IMG_3807

Awa, the youngest one was given another task: creating games with Kodu πŸ™‚
IMG_3808

While Prudence and Clarence picking up where they left on Python CodeAcademy πŸ™‚

IMG_3809

So most of the kids worked on Thunkable
IMG_3810

The apps created with Thunkable can be run on Android phones or if the kids don’t have smartphones, they can download the .apk and run the apps on this simulator, KoPlayer πŸ™‚ Thanks to Faris for recommending this useful simulator πŸ˜‰

IMG_3811

Muhammad, our newcomer seemed to love working on CodeCombat πŸ™‚ He learned about sequence and loops today πŸ™‚
IMG_3812

And here’s our lead captain keeping up with Coding Camp preparation πŸ˜‰

IMG_3813

And another captain: Malik was working on an unbelievable project in Java! Pure Java (no Greenfoot) with Eclipse as the IDE.
IMG_3814

And this captain, Faris, has gone very far on codeSaya.com. He started to learn OOP in Python πŸ˜€

IMG_3815

These two, Prudence and Clarence were bored with CodeAcademy so they were tinkering around with HTML and JavaScript πŸ™‚
IMG_3816 IMG_3817
IMG_3818

While these guys working in groups on Reza’s computer πŸ™‚

IMG_3819

So everybody’s got their thing to do πŸ™‚ It might be different topics in different languages but they’re all doing some coding! πŸ™‚
IMG_3820

We still have a week for Coding Camp preparation, and we make sure all Captains are ready! This Lead Captain has to make sure everything goes right πŸ˜‰

IMG_3821

Next week we will learn about LUA πŸ˜‰

ProCodeCG codeMeetUp 3 August 2015 – CyberLabs – UI-UX and CSS to Optimize Your Website Design

Standard

Today, Rizky MW – Graphic Designer and Seprian Abdi B – Atom Project Manager from CyberLabs shared about UI – UX and CSS to Optimize Your Website Design.

FullSizeRender 2

UI (User Interface) and UX (User Experience) is very important. It is the key that makes users stays longer and use your apps.

FullSizeRender

Same kind of products with different designs will have different stories. Ones with good design will get more users.

FullSizeRender 12

Most of the audiences are web/apps designers, programmers or developers πŸ™‚

FullSizeRender 14

This is the story why CSS is so important for a layout design:

FullSizeRender 6 FullSizeRender 10 FullSizeRender 5

The presentation is brief but we asked many questions! πŸ˜‰

FullSizeRender 7

It is such a great opportunity to learn about this stuff from those who knows to design and generate apps! Thanks for sharing!

FullSizeRender 4

Next week we will have a start up sharing about its about-to-launch app named Pleasurr. This is a great app, you should not miss it! πŸ™‚

Related article:

http://aitinesia.com/cerita-kegiatan-cyberlabs-pentingnya-uiux-dan-css-untuk-mengoptimalkan-desain-website/

ProCodeCG codeMeetUp() 29 June 2015 – Start Your Digital Business with Zero Cost Investment

Standard

Today, Meirissa Farah Fhonna, Cloud Ecosystem from IBM gave a workshop titled “Start Your Digital Business with Zero Cost Investment”

IMG_2783 1

This is totally an interesting workshop!IMG_2784 1

Bluemix has so many things to offer!IMG_2785 1

To build your own apps, with zero cost investment. IBM Bluemix makes it possible.

IMG_2787 1

It is about speed and choice.

IMG_2788 1

IBM will help to save time. And money πŸ˜‰IMG_2790 1

We also did create our own chat apps using BlueMix! What a workshop! Thank you IBM!IMG_2815 1

See you again! πŸ™‚

ProCodeCG codeMeetUp() 25 May 2015 – Building Apps with IBM BlueMix

Standard

We have 3 speakers from IBM today, giving a workshop on “”Build Your Dream Apps Easily and Faster with Bluemix, The Digital Innovation Platform.”

IMG_0346 1

The first session is aboutΒ Cloud Concept by Ichsan Mulia Permata (Power AIX/Linux Specialist)

IMG_0349 1

IMG_0351 1

IMG_0353 1

The second session isΒ Bluemix Workshop by Meirissa Farah Fhonna (Cloud Ecosystem)

IMG_0287 1

IMG_0288

IMG_0289 1

IMG_0290 1

IMG_0292 1

IBM also has Global Entrepreneur Program for Cloud Startups!

IMG_0294 1

Go to this link to try!

IMG_0295 1

In this workshop we make a Twitter social analysis using BlueMix, without writing any codes!

IMG_0297 1

Main technical problems: internet connection, GRRR πŸ˜€

IMG_0299 1

Pak Ichsan is assisting Pak Budi Raharjo

IMG_0301 1

And the third session isΒ Softlayer Introduction by Riswandi Sinuraya (Softlayer Sales Representative)

IMG_0302 1

For participants who have successfully implement the social analysis, IBM gives each a merchandise! πŸ˜‰

IMG_0307 1

And this is us!!! πŸ™‚

IMG_0311 1 IMG_0310 1