Kurs micro:bit – #1 – środowisko i pierwsze programy

Kurs micro:bit – #1 – środowisko i pierwsze programy

Pora poznać micro:bita w praktyce. Zaczniemy od szybkiego omówienia tej małej i kultowej płytki, wyboru środowiska oraz jego konfiguracji.

Stworzymy też pierwsze programy, dzięki którym wykorzystamy 25 diod do wyświetlania tekstów oraz prostych animacji.


Czym jest micro:bit?

Malutki micro:bit to niezwykle popularna płytka, dzięki której dosłownie każdy może zacząć swoją przygodę z elektroniką i programowaniem. Platforma ta jest chętnie używana przez dzieci i młodzież, jest więc ona również często wybierana przez rodziców i nauczycieli. Moduł, który powstał z inicjatywy BBC, okazał się świetnym narzędziem do nauki zgodnej z filozofią STEM (ang. science, technology, engineering, mathematics) i jest obecnie popularny na całym świecie.

Logo projektu micro:bit

Logo projektu micro:bit

Płytka micro:bit to właściwie miniaturowy komputerek z małym „procesorem”, dzięki któremu można tworzyć ciekawe urządzenia elektroniczne – ich zachowanie będzie zależne od wgranego programu. Platforma ta jest odporna na różne błędy (stosunkowo ciężko ją zepsuć) i można ją programować wiele razy (setki, tysiące) – płytka może zatem towarzyszyć każdemu majsterkowiczowi przez długie lata.

Jak zbudowany jest micro:bit?

Z przodu są 2 przyciski, których można używać we własnych programach, oraz wyświetlacz, który składa się z 25 czerwonych diod świecących. Na odwrocie micro:bita znajdziemy mikrokontroler (czyli mały „procesor”), magnetometr (cyfrowy kompas), akcelerometr (miernik przyspieszenia), gniazdo USB (używane do zasilania i wgrywania programu), przycisk Reset oraz złącze dla koszyka baterii, który dołączany jest do jednej z wersji micro:bita.

Charakterystycznym elementem micro:bita jest złote złącze rozszerzeń, które składa się z 50 punktów (po 25 na każdej stronie płytki). Dodatkowo 5 z tych wyprowadzeń łączy się z dużymi przelotkami (otworami o średnicy 4 mm), do których można się łatwo podłączyć. Z tych złotych złącz będziemy korzystać w następnej części kursu – na razie nic do nich nie podłączaj.

Jak tworzyć programy na micro:bit?

Podczas wykonywania ćwiczeń z tego kursu będziemy wykorzystywać oficjalny graficzny edytor, dzięki któremu każdy może tworzyć programy już po kilku minutach od startu. Wszystko dzięki temu, że kod jest tworzony z gotowych bloczków, które trzeba tylko ustawić w odpowiedniej kolejności.

Edytor Microsoft MakeCode dostępny jest w dwóch bliźniaczych wersjach: do pobrania na komputery (z systemem Windows w wersji 10) oraz w formie aplikacji dostępnej z poziomu przeglądarki internetowej (ta wersja działa najlepiej, gdy używa się Chrome’a w wersji 65 lub nowszej, ale inne przeglądarki również się sprawdzą – szczegóły w dalszej części kursu). Podczas tworzenia tego kursu korzystaliśmy z edytora dostępnego z poziomu przeglądarki. Uruchom go u siebie lub zainstaluj program na PC i przejdź dalej!

Zestaw elementów do kursu

 999+ pozytywnych opinii  Gwarancja pomocy  Wysyłka w 24h

Moduły do wykonania wszystkich ćwiczeń z kursu micro:bita dostępne są w formie gotowych zestawów! W komplecie m.in.: micro:bit, czujnik gestów i odległości oraz taśma diod RGB.

Zamów w Botland.com.pl »

Pierwszy program, mały wyświetlacz!

Najwyższa pora, aby ożywić naszą płytkę! Po uruchomieniu środowiska (w dowolnej wersji) wyświetli się ekran startowy, na którym zobaczymy (jeszcze pustą) listę naszych projektów i poradniki przygotowane przez twórców micro:bita. Zaczynamy od kliknięcia w duży fioletowy przycisk, aby utworzyć projekt.

Ekran startowy środowiska Microsoft MakeCode

Ekran startowy środowiska Microsoft MakeCode

Naszym oczom ukaże się edytor, dzięki któremu będziemy mogli programować płytkę. Znajdziemy tam (patrząc od lewej): symulator, listę bloczków oraz miejsce, w którym będziemy tworzyć program. Edytor jest dostępny w języku polskim, ale w kursie używamy wersji angielskiej i zachęcamy, aby właśnie taki język ustawić (zębatka w prawym górnym rogu > język > English).

Edytor programu dla micro:bita

Edytor programu dla micro:bita

Zacznijmy od prostego programu, który wyświetli na płytce ikonkę serca. Inaczej mówiąc, chcielibyśmy, aby po uruchomieniu micro:bita włączyły się diody, które będą symbolizowały kształt serca. Domyślnie po utworzeniu projektu dostępne są 2 niebieskie bloczki:

  • on start (podczas uruchamiania) – instrukcje umieszczone wewnątrz tego bloczka zostaną wykonane tylko raz, podczas włączania płytki.
  • forever (na zawsze) – instrukcje umieszczone wewnątrz tego bloczka będą wykonywane cały czas (w pętli), aż do wyłączenia zasilania płytki.

Do wyświetlania ikon na ekranie służy bloczek show icon, który znaleźć można w menu Basic.

Bloczek wyświetlający ikonę

Bloczek wyświetlający ikonę

Chcemy, aby ikona serca pokazała się po włączeniu, więc łapiemy kursorem i przeciągamy bloczek z ikoną serca do on start. Bloczek forever może pozostać pusty lub można go nawet usunąć – wystarczy kliknąć na niego PPM (prawym przyciskiem myszy) i wybrać opcję Delete Block.

Pierwszy program dla micro:bita gotowy!

Pierwszy program dla micro:bita gotowy!

Gotowe – stworzyliśmy pierwszy program na płytkę micro:bit! Natychmiast po wstawieniu nowego bloczka z ikoną serca symulator (po lewej stronie okna) zaczął działać i wyświetlił spodziewany obraz, jednak najciekawsze przed nami – pora przenieść program na płytkę.

Jak wgrać program na micro:bit?

Wgrywanie programów na płytkę jest niezwykle proste i ogranicza się właściwie do wciśnięcia jednego przycisku. Trzeba jednak wiedzieć, co i gdzie nacisnąć – wszystko zależy od tego, którą wersję edytora wybraliśmy. Poniżej opisane zostały 3 sposoby wgrywania.

Metoda 1: Wgrywanie z przeglądarki Chrome (zalecane)

Jeśli korzystamy ze środowiska online w Chromie, to możemy wykorzystać technologię webUSB, dzięki której program na płytkę wgra się bezpośrednio z przeglądarki. Wystarczy tylko raz sparować naszą płytkę ze środowiskiem. W tym celu podłączamy micro:bita do komputera za pomocą przewodu microUSB – system powinien wykryć nowe urządzenie i automatycznie zainstalować sterowniki.

Informacja o zainstalowaniu sterowników micro:bita

Informacja o zainstalowaniu sterowników micro:bita

Teraz w edytorze klikamy na ustawienia (ikona zębatki w prawym górnym rogu), a następnie wybieramy opcję parowania (Pair devices). W nowym oknie klikamy duży przycisk Pair device, a po chwili w lewym górnym rogu wyskoczy prośba o wydanie zgody na połączenie z płytką – klikamy więc Połącz.

Zgoda na programowanie przez przeglądarkę

Zgoda na programowanie przez przeglądarkę

Wszystko gotowe! Od teraz za każdym razem, aby wgrać program na płytkę, wystarczy kliknąć przycisk Download w lewym dolnym rogu edytora. Kilka sekund po naciśnięciu na płytce powinny zaświecić się wybrane diody.

Wgrywanie programu na micro:bit

Wgrywanie programu na micro:bit

Metoda 2: Wgrywanie z innej przeglądarki

W celu wgrania programu z przeglądarki, która nie obsługuje technologii webUSB, będziemy musieli ręcznie skopiować program na micro:bit. Podłączamy płytkę do komputera i czekamy, aż system da nam znać, że sterowniki zostały poprawnie zainstalowane (tak jak w metodzie 1). Płytka powinna być widoczna jako pamięć przenośna o pojemności około 64 MB (to bardzo dużo miejsca na programy).

micro:bit widoczny jako pamięć

micro:bit widoczny jako pamięć

Od teraz za każdym razem, aby wgrać program na płytkę, trzeba kliknąć przycisk Download – po chwili przeglądarka zacznie pobierać mały plik z rozszerzeniem hex, który będzie zawierał nasz program. Plik ten trzeba zapisać we wspomnianej wyżej pamięci. Po kilku lub kilkunastu sekundach program zostanie wgrany na micro:bit i zacznie działać, czyli w tym przypadku zobaczymy serce z diod świecących.

Ręczne zapisywanie programu na micro:bicie

Ręczne zapisywanie programu na micro:bicie

Metoda 3: Wgrywanie z edytora offline

Jeśli korzystamy z edytora w formie programu instalowanego na komputerze z systemem Windows 10, to wystarczy, że podłączymy micro:bit do komputera i (za pierwszym razem) odczekamy chwilę, aż zostaną zainstalowane niezbędne sterowniki. Następnie wystarczy nacisnąć przycisk Download, a nasz program trafi bezpośrednio na płytkę (analogicznie jak w metodzie 1).


Niezależnie od wybranej metody nasz micro:bit powinien w tej chwili wyglądać następująco:

Serce na płytce micro:bit – efekt działania pierwszego programu

Serce na płytce micro:bit – efekt działania pierwszego programu

Zapisywanie i nazywanie projektów

Pierwszy projekt za nami, teraz będzie ich coraz więcej. Na razie możemy pracować w jednym pliku, ale z czasem, gdy zaczniemy tworzyć bardziej rozbudowane programy, to warto będzie trzymać je w innych plikach – dzięki temu można łatwo wrócić do stworzonych wcześniej projektów.

Nazwę programu wpisujemy w polu tekstowym, które znajduje się w dolnej części okna. Wystarczy, że nazwa zostanie wpisana w to pole, nie należy naciskać przycisku z ikonką dyskietki – przycisk ten służy do pobrania programu w formie pliku hex, a w tym przypadku jest to zbędne.

Miejsce na wpisanie nazwy programu

Miejsce na wpisanie nazwy programu

Odpowiednie nazwy pozwolą nam szybko odszukać dany projekt w przyszłości. Warto więc wpisać taki tekst, dzięki któremu szybko rozpoznamy projekt na liście:

Widok na liście programów

Widok na liście programów

Przy okazji warto zapamiętać, że edytor dostępny z poziomu przeglądarki to tak naprawdę aplikacja działająca dzięki plikom, które ładowane są do pamięci przeglądarki podczas pierwszego uruchomienia edytora. Aplikacja ta zadziała w przeglądarce nawet wtedy, gdy PC nie będzie podłączony do internetu (oczywiście poza pierwszym uruchomieniem, kiedy pliki ładowane są do pamięci). Oznacza to, że programy zapisywane są na naszym komputerze nawet podczas korzystania z edytora online (nie są one trzymane na serwerze).

Wykonywanie operacji w pętli

Za nami pierwszy, bardzo prosty program (wyświetlenie serca). Dodajmy teraz drugą ikonę, tym razem będzie to trochę mniejsze serce. W tym celu dodajemy nowy bloczek show icon (lub klikamy prawym przyciskiem myszy na ten, który już mamy, i klikamy Duplicate). Następnie z listy rozwijanej, która pojawi się po kliknięciu serca, wybieramy inną ikonę, symbolizującą mniejsze serce:

Wybór drugiej ikony

Wybór drugiej ikony

Wgrywamy program i obserwujemy, co się dzieje. Jak zadziałał program? Tuż po starcie wyświetli się duże serce, a po chwili pojawi się druga ikona i tyle – tak już zostanie. Czyli wszystko przebiegło tak, jak zostało to zapisane w programie.

Przenieśmy teraz bloczki do pętli forever (wystarczy je złapać i przeciągnąć do nowej lokalizacji):

Nowa wersja programu

Nowa wersja programu

Wgrywamy program i obserwujemy, co się dzieje. Tym razem udało nam się uzyskać prostą animację – serce pulsuje, ponieważ ikony zmieniają się na przemian.

Pulsujące serce na płytce micro:bit – efekt działania programu w pętli

Pulsujące serce na płytce micro:bit – efekt działania programu w pętli

To jest właśnie różnica między umieszczaniem poleceń w bloczku on start oraz w bloczku forever. W pierwszym przypadku najpierw wyświetlana była jedna ikona, po chwili druga i program się kończył (nic więcej się nie działo). Za drugim razem, po wyświetleniu ikony mniejszego serca, program powracał na początek bloczka forever i wykonywał instrukcje ponownie (wyświetlił duże serce, małe i tak w koło).

Wyświetlanie tekstów na ekranie

Nasz mały ekran może wyświetlać również teksty. W tym celu potrzebny będzie bloczek, który nazywa się show string (słowo string oznacza w tym przypadku ciąg znaków, czyli tekst). Dodajemy nowy bloczek do poprzedniego programu – wstawiamy go w sekcji on start i wpisujemy wybrany tekst.

Bloczek wyświetlający tekst

Bloczek wyświetlający tekst

Po wgraniu programu na ekranie micro:bita zostanie przewinięty napis „WITAJ”, czyli wykona się cała instrukcja z sekcji on start, a następnie program przejdzie do instrukcji, które są w pętli forever.

Podsumowanie

Głównym celem tej części kursu było szybkie zaznajomienie się z podstawami środowiska oraz opisanie procedury wgrywania programów. Mamy już za sobą również pierwsze, bardzo proste programy. Warto już teraz samodzielnie poeksperymentować z micro:bitem i np. stworzyć animacje z innych ikon.

Czy wpis był pomocny? Oceń go:

Średnia ocena 4.9 / 5. Głosów łącznie: 30

Nikt jeszcze nie głosował, bądź pierwszy!

Artykuł nie był pomocny? Jak możemy go poprawić? Wpisz swoje sugestie poniżej. Jeśli masz pytanie to zadaj je w komentarzu - ten formularz jest anonimowy, nie będziemy mogli Ci odpowiedzieć!

W kolejnej części poznamy nowe bloczki, dzięki którym możliwe będzie m.in. reagowanie programu na przyciski. Zajmiemy się również podłączeniem modułów z serii Grove, dzięki czemu nasza płytka zyska znacznie więcej możliwości.

Autor kursu: Damian Szymański

Nawigacja kursu

diody, kurs, kursmicrobit, micro:bit, programowanie

Trwa ładowanie komentarzy...