Moj prvi program u MakeCodeu

Kako micro:bitu dajemo upute

Do sada smo istraživali struju, LED lampice, otpornike, breadboard i male elektroničke sklopove. Sada upoznajemo micro:bit – mali računar koji možemo programirati.

Micro:bit sam po sebi ne zna što želimo da napravi. Mi mu trebamo dati jasne upute.

Te upute zovu se program ili kod.

Danas ćemo koristiti Microsoft MakeCode. To je program u kojem ne moramo odmah pisati teške naredbe slovima. Umjesto toga, koristimo obojene blokove koje povlačimo, slažemo i povezujemo kao slagalicu.

MakeCode je službeni editor za početak rada s BBC micro:bitom i namijenjen je posebno učenju programiranja pomoću blokova.

Naša misija

Danas ćemo naučiti:

• Otvoriti novi projekt u MakeCodeu.
• Dati projektu ime.
• Pronaći osnovne kategorije blokova.
• Povlačiti blokove u prostor za programiranje.
• Pokrenuti program u simulatoru.
• Prebaciti program na pravi micro:bit.
• Koristiti on start, forever, tipke A i B te LED ekran.
• Napraviti nekoliko kratkih programa.

Na kraju radionice moći ćeš reći:

Ja sam napisao/la program koji govori micro:bitu što treba napraviti.

Što je MakeCode?

MakeCode je alat u kojem stvaramo programe za micro:bit.

Otvaramo ga u web pregledniku na računaru ili tabletu: makecode.microbit.org.
U izborniku sa desne strane se uvijek nalazi veza prema MakeCodeu.

Kada otvorimo novi projekt, obično vidimo nekoliko važnih dijelova ekrana:

1. Simulator: Pokazuje mali micro:bit na ekranu i pokreće naš program
2. Kategorije blokova: Tu biramo vrste naredbi, primjerice Basic, Input i Loops
3. Blokovi: Naredbe koje povlačimo u program
4. Radni prostor: Veliko mjesto na kojem slažemo program
5. Download: Preuzima program za pravi micro:bit

Prije nego što program prebacimo na pravi micro:bit, možemo ga isprobati na simulatoru (1).

MakeCode blokovi se spajaju u program, a simulator omogućava da program testiramo izravno u editoru.

Sigurna pravila za računar i micro:bit

Prije nego počnemo, prisjetimo se važnih pravila radionice:

• Računar koristimo samo kada voditelj kaže da je vrijeme za rad na računaru.
• Ne otvaramo igre, YouTube, društvene mreže ni druge stranice koje nisu dio radionice.
• Igranje na računaru tijekom radionice je zabranjeno.
• Kada voditelj objašnjava, ne klikamo i ne mijenjamo program.
• Micro:bit držimo za rubove.
• Ne povlačimo micro:bit za USB kabel.
• Ne spajamo žice, LED-ice ili baterije na micro:bit bez upute voditelja.
• Ako završimo zadatak ranije, pitamo voditelja za dodatni izazov.

Računar je naš alat za stvaranje, programiranje i testiranje — nije igračka tijekom radionice.

Kako napraviti novi projekt

Korak 1: Otvori MakeCode

Otvori web preglednik i idi na makecode.microbit.org.
Zatim klikni na: New Project

Korak 2: Daj projektu ime

Upiši ime koje opisuje tvoj program.

Na primjer: Moj prvi program

Klikni na: Create

Korak 3: Pogledaj početne blokove

U novom projektu MakeCode obično prikazuje dva velika bloka: on start i forever.

On start i forever

On start: napravi jednom

Blok on start koristi se za naredbe koje micro:bit treba napraviti samo jednom, kada se uključi ili kada program počne.

Primjeri:

• Prikaži moje ime.
• Prikaži broj 7.
• Pozdravi korisnika.
• Postavi početni broj bodova na 0.

Forever: ponavljaj stalno

Blok forever koristi se za naredbe koje micro:bit treba ponavljati stalno.

Primjeri:

• Prikazuj srce koje kuca.
• Stalno provjeravaj je li pritisnuta tipka.
• Stalno provjeravaj je li mračno.
• Stalno prati temperaturu.

U MakeCodeu se on start izvršava na početku programa, a forever ponavlja naredbe neprekidno dok micro:bit radi.

Kako se blokovi slažu?

Blokovi imaju različite oblike.
Neki blokovi mogu stajati jedan ispod drugoga, kao naredbe u popisu:

• Pokaži tekst
• Pokaži ikonu
• Pričekaj
• Pokaži drugi tekst
  Neki blokovi su posebni početni blokovi, kao on start, forever ili kada je pritisnuta tipka A.

U MakeCodeu blok povučemo mišem ili prstom, prenesemo ga u radni prostor i pustimo na mjesto gdje se može spojiti.

Ako je blok na pravom mjestu, MakeCode će pokazati da se može spojiti.

Kategorije blokova

Na lijevoj strani MakeCodea nalaze se kategorije blokova.
Za početak ćemo najviše koristiti ove:

• Basic: Tekst, brojevi, ikone, LED prikaz, pauza
• Input: Tipke A i B, tresenje, nagib, zvuk i drugi ulazi
• Music: Zvukovi i melodije
• LED: Crtanje vlastitih slika na LED ekranu
• Radio: Komunikacija između micro:bitova
• Loops: Ponavljanje naredbi
• Logic: Pravila ako i inače
• Variables: Brojači, bodovi i vrijednosti koje se mijenjaju
• Math: Matematičke operacije
• Advanced: Napredne kategorije blokova, koje ćemo koristiti u nekim radionicama i objasniti po potrebi.

Na početku ne moramo koristiti sve kategorije. Dovoljno je naučiti nekoliko blokova i napraviti nešto što radi.

Programi za vježbu

Program 1: Pozdrav, micro:bit!

Što program treba napraviti?

Kada program počne:

• Prikaži moje ime.
• Prikaži srce.

Prije nego što počnemo slagati MakeCode blokove, korisno je najprije objasniti što želimo da micro:bit napravi. To možemo napraviti pomoću pseudokoda ili dijagrama toka.

Pseudokod je zapis programa običnim, jednostavnim riječima. Izgleda pomalo kao program, ali računalo ga ne može pokrenuti. Pišemo ga zato da ljudi lako razumiju redoslijed koraka.

Dijagram toka je crtež programa. Korake crtamo u okvirima, a strelicama pokazujemo kojim redoslijedom micro:bit prelazi s jednog koraka na drugi.

Pseudokod i dijagram toka pomažu nam da najprije smislimo rješenje, a zatim ga lakše pretvorimo u MakeCode blokove. Pseudokod opisuje radnje i njihov redoslijed riječima, dok dijagram toka prikazuje korake i njihov tijek pomoću okvira i strelica.

Primjer 1: Pozdrav, micro:bit!

U ovoj vježbi želimo da micro:bit na početku pokaže naše ime, a zatim srce.

Pseudokod:

KADA PROGRAM POČNE
PRIKAŽI MOJE IME
PRIKAŽI SRCE
KRAJ

Dijagram toka:

U MakeCodeu taj plan pretvaramo u blok on start, a unutar njega dodamo show string i show icon. Blok on start izvršava naredbe kada program počne.

Kako odabrati pravi način planiranja?

• Koristi pseudokod kada želiš brzo zapisati što program treba napraviti.
• Koristi dijagram toka kada želiš nacrtati redoslijed koraka i lakše vidjeti što se događa nakon kojeg događaja.

Za jednostavan program možeš koristiti samo pseudokod.

Za program s više tipki, senzora, odluka ili ponavljanja korisno je napraviti i dijagram toka.

Najvažnije je najprije znati odgovor na ova pitanja:

• Što pokreće program?
• Što micro:bit treba napraviti?
• Kojim redoslijedom treba raditi?
• Treba li program nešto ponavljati ili čekati događaj?

Blokovi koje trebamo

Iz kategorije Basic:

• show string
• show icon
  
  

Kako složiti program

U blok on start postavi:

Testiraj u simulatoru

Pogledaj micro:bit na lijevoj strani ekrana.

Trebao bi prikazati tvoje ime koje prolazi preko LED ekrana, a zatim ikonu srca.

Izazovi:

• Promijeni srce u smajlić.
• Prikaži omiljeni broj nakon imena.
• Napiši kratku poruku, primjerice: BOK!.

Program 2: Srce koje kuca

Sada ćemo napraviti program koji se stalno ponavlja.

Što program treba napraviti?

• Pokaži veliko srce.
• Pričekaj.
• Pokaži malo srce.
• Pričekaj.
• Ponovi stalno.

Blokovi koje trebamo

Iz kategorije Basic:

• show icon
• pause (ms)
  
  

Koristit ćemo blok forever.

Kako složiti program

U blok forever postavi:

Broj 500 znači pola sekunde.

• 1000 ms = 1 sekunda
• 500 ms = pola sekunde

Testiraj

U simulatoru bi srce trebalo izgledati kao da kuca.

Izazovi:

• Promijeni vrijeme pauze na 200 ms. Je li srce brže?
• Promijeni vrijeme pauze na 1000 ms. Je li srce sporije?
• Umjesto srca napravi treptajući smajlić.
• Napravi animaciju od dvije ili tri svoje LED slike.

Program 3: Tipka A i tipka B

Micro:bit ima dvije velike tipke na prednjoj strani: A i B

Možemo mu dati pravilo:

• Ako pritisnem A ⇒ pokaži jednu stvar.
• Ako pritisnem B ⇒ pokaži drugu stvar.

Što program treba napraviti?

Kada pritisnem A:

• prikaži slovo A

Kada pritisnem B:

• prikaži slovo B

Pseudokod:

KADA JE PRITISNUTA TIPKA A
PRIKAŽI SLOVO "A"
KADA JE PRITISNUTA TIPKA B
PRIKAŽI SLOVO "B"

Dijagram toka:

Pojednostavljeni dijagram toka:

Ovdje micro:bit ne radi sve odmah na početku. On čeka da se dogodi događaj: pritisak tipke A ili B. MakeCode blok on button pressed pokreće naredbe kada se pritisne odabrana tipka.

Blokovi koje trebamo

Iz kategorije Input:

• on button A pressed
• on button B pressed
  
  

Iz kategorije Basic:

• show string
  
  

Kako složiti program

U prvi događaj stavi:

U drugi događaj stavi:

Testiraj

Na simulatoru klikni tipku A.

Trebao bi se prikazati tekst A.

Zatim klikni tipku B.

Trebao bi se prikazati tekst B.

Izazovi:

Promijeni program tako da:

• Tipka A prikaže tvoje ime
• Tipka B prikaže tvoj omiljeni broj
• Tipke A+B prikažu srce

Program 4: Digitalna kockica

Sada ćemo napraviti malu elektroničku kockicu.

Kada protresemo micro:bit, on će prikazati nasumičan broj od 1 do 6.

Pseudokod:

KADA MICRO:BIT PREPOZNA TRESENJE
ODABERI NASUMIČAN BROJ OD 1 DO 6
PRIKAŽI ODABRANI BROJ

Dijagram toka:

Micro:bit ima senzor koji može prepoznati tresenje. Blok on shake pokreće naredbe kada micro:bit registrira taj pokret.

Što program treba napraviti?

Kada micro:bit protresemo:

• izaberi nasumičan broj od 1 do 6
• prikaži taj broj

Blokovi koje trebamo

Iz kategorije Input:

• on shake
  
  
  Iz kategorije Math:
• pick random 0 to 10
  
  
  Iz kategorije Basic:
• show number
  
  

Kako složiti program

U blok on shake postavi:

Testiraj

Na simulatoru pronađi mogućnost tresenja micro:bita ili upotrijebi pravi micro:bit.

Svaki put kada ga protreseš, trebao bi pokazati broj između 1 i 6.

Izazovi:

• Napravi kockicu koja daje broj od 1 do 10.
• Napravi da/ne odluku: DA ili NE.
• Napravi čarobnu kuglu koja prikazuje MOŽDA, DA ili NE.
• Dodaj ikonu smajlića nakon broja 6.

Program 5: Brojač bodova

Sada ćemo napraviti mali brojač.

Za to nam treba varijabla.

Varijabla je kao kutijica s imenom u koju micro:bit može spremiti broj ili neki drugu vrstu podatka.

Na primjer:

• bodovi = 0

Kada pritisnemo tipku A, možemo dodati jedan bod:

• bodovi = bodovi + 1

Kada pritisnemo tipku B, možemo pokazati koliko imamo bodova.

Što program treba napraviti?

Na početku:

• bodovi = 0

Kada pritisnem A:

• dodaj 1 bod

Kada pritisnem B:

• pokaži broj bodova

Blokovi koje trebamo

Iz kategorije Variables:

• Make a Variable
• set bodovi to 0
• change bodovi by 1
  
  
  Iz kategorije Input:
• on button A pressed
• on button B pressed
  
  
  Iz kategorije Basic:
• show number
  
  

Kako složiti program

Najprije izradi varijablu: bodovi

Zatim složi:

Testiraj

Pritisni tipku A nekoliko puta.
Pritisni tipku B.

Micro:bit bi trebao pokazati ukupan broj pritisaka.

Izazovi:

• Neka tipka A dodaje 1 bod.
• Neka tipka B oduzima 1 bod.
• Neka tipke A+B pokažu trenutačni rezultat.
• Dodaj pravilo: ako broj bodova dođe do 10, pokaži veliko srce.

Simulator i pravi micro:bit

Prije prebacivanja programa na pravi micro:bit, uvijek ga prvo pogledaj u simulatoru.

Simulator može pokazati:

• Hoće li se prikazati tekst.
• Hoće li ikona treptati.
• Što se dogodi kada pritisnemo A ili B.
• Kako radi brojač.
• Kako se ponaša program pri tresenju.

Ipak, simulator nije potpuno isti kao pravi uređaj.

Na pravom micro:bitu možemo:

• Pritisnuti prave tipke.
• Protresti uređaj.
• Vidjeti stvarne LED-ice.
• Kasnije spojiti breadboard, senzore, vanjske LED-ice i druge komponente.

Simulator je odličan za prvu provjeru. Pravi micro:bit je mjesto na kojem testiramo stvarni izum.

Kako prebaciti program na micro:bit

Kada program radi u simulatoru, možemo ga prebaciti na pravi micro:bit.

Korak 1: Spoji micro:bit

• Spoji micro:bit USB kabelom na računar.
• Drži micro:bit za rubove i ne vuci kabel.

Korak 2: Klikni Download

• U MakeCodeu klikni na Download

Ovisno o računaru i pregledniku, MakeCode može:

• ponuditi povezivanje s micro:bitom,
• preuzeti datoteku programa,
• pomoći da datoteku pošaljemo na micro:bit.

Korak 3: Pričekaj prijenos

• Kada micro:bit prima program, njegova mala žuta lampica na stražnjoj strani može treptati.
• Ne odspajamo USB kabel dok prijenos traje.

Korak 4: Testiraj

• Kada prijenos završi, micro:bit odmah počinje pokretati novi program.
• Ako program ne radi kako očekujemo:
  • Vratimo se u MakeCode.
  • Provjerimo blokove.
  • Ispravimo grešku.
  • Ponovno preuzmemo program.
  • Testiramo ponovno.

Uobičajeni postupak je izrada projekta, testiranje u simulatoru, klik na Download, povezivanje micro:bita USB kabelom i prijenos programa na uređaj.

Ako program ne radi

Programiranje je istraživanje. Sasvim je normalno da prvi pokušaj ne radi savršeno.

Kada program ne radi, to zovemo debugging.

Kontrolna lista za program

• Je li blok u pravom dijelu programa?
• Treba li blok biti unutar on start, forever ili događaja tipke?
• Jesi li odabrao/la pravu tipku A ili B?
• Jesi li upisao/la pravi tekst ili broj?
• Je li blok stvarno spojen s ostalim blokovima?
• Radi li program u simulatoru?
• Jesi li kliknuo/la Download nakon promjene programa?
• Je li micro:bit spojen USB kabelom?
• Jesi li pričekao/la da prijenos završi?
• Može li prijatelj ili voditelj pogledati program drugim očima?
• Pogreška nije kraj projekta. Pogreška je trag koji nam pokazuje što trebamo provjeriti.

Što smo naučili?

• Program je skup uputa koje dajemo micro:bitu.
• MakeCode koristi obojene blokove za početak programiranja.
• Simulator nam pokazuje kako će program raditi.
• on start izvršava naredbe jednom.
• forever stalno ponavlja naredbe.
• Tipke A i B mogu pokrenuti različite dijelove programa.
• Micro:bit može prikazati tekst, broj, ikonu ili vlastitu LED sliku.
• Micro:bit može reagirati na tresenje.
• Varijabla može spremiti broj, primjerice broj bodova.
• Program prvo testiramo, zatim ga prebacujemo na pravi micro:bit.
• Debugging znači pronaći i popraviti grešku u programu.

Pitanja za kraj

Razgovaraj na Discord-u. (pridruži se)