{"id":13414,"date":"2018-03-01T10:17:04","date_gmt":"2018-03-01T09:17:04","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=13414"},"modified":"2018-03-01T15:20:32","modified_gmt":"2018-03-01T14:20:32","slug":"iniziamo-a-programmare-con-microbit","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/iniziamo-a-programmare-con-microbit\/","title":{"rendered":"Iniziamo a programmare con micro:bit"},"content":{"rendered":"<p>Per programmare con micro:bit non esiste un solo ambiente ma il <strong>contesto ideale<\/strong> &#8211; per aspiranti di ogni et\u00e0 &#8211; \u00e8 <a href=\"https:\/\/makecode.microbit.org\/\" target=\"_blank\" rel=\"noopener\">Microsoft MakeCode<\/a>, un pannello web completo di tutto il necessario. Lo scopo di questo tutorial \u00e8 accompagnare l&#8217;aspirante programmatore alla <strong>realizzazione del primo programma<\/strong> <strong>micro:bit<\/strong>. Dopo aver presentato l&#8217;ambiente\u00a0<span style=\"color: #333333; font-style: normal; font-weight: 300;\">Microsoft MakeCode svolgeremo un primo esercizio seguendo questi step:<\/span><\/p>\n<ul>\n<li>realizzazione del programma mediante l&#8217;uso di <strong>blocchi di codice<\/strong>;<\/li>\n<li>sperimentazione del prodotto nell&#8217;<strong>emulatore<\/strong> on line;<\/li>\n<li><strong>scaricamento del programma<\/strong> in formato esadecimale eseguibile;<\/li>\n<li>importazione dell&#8217;eseguibile sul <strong>microcontroller<\/strong>.<\/li>\n<\/ul>\n<p>I passi appena elencati saranno grosso modo quelli seguiti nella realizzazione di ogni progetto e tutto il necessario sar\u00e0 disponibile nell&#8217;ambiente web che stiamo per incontrare.<\/p>\n<h2>L&#8217;ambiente di lavoro<\/h2>\n<p>Quella che segue \u00e8 una panoramica su Microsoft MakeCode:<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_01.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13415\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_01.jpg\" alt=\"\" width=\"600\" height=\"377\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_01.jpg 600w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_01-300x189.jpg 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Abbiamo apposto quattro numeri\u00a0cerchiati in rosso per individuare altrettante <strong>zone dell&#8217;editor<\/strong> e tale numerazione \u00e8 riproposta nel seguente elenco:<\/p>\n<ol>\n<li><strong>emulatore micro:bit<\/strong>: in alto a sinistra del pannello possiamo vedere la rappresentazione di una faccia del micro:bit, quella dedicata all&#8217;interazione utente con led, pulsanti e pin. I programmi che realizzeremo andranno direttamente in esecuzione qui;<\/li>\n<li><strong>blocchi<\/strong>: un menu che propone i blocchi di codice da utilizzare suddivisi per categorie;<\/li>\n<li><strong>area di lavoro<\/strong>: qui verranno trascinati e incastrati tra loro i blocchi di codice. Agendo sulle linguette nella fascia alta dell&#8217;area si pu\u00f2 passare dalla visualizzazione a blocchi al corrispondente codice Javascript;<\/li>\n<li><strong>salvataggio e scaricamento del codice<\/strong>: il programma una volta preparato sar\u00e0 scaricabile per essere importato nel microcontroller o per essere successivamente ricaricato nell&#8217;editor.<\/li>\n<\/ol>\n<h2>I blocchi di codice<\/h2>\n<p>Come detto, per programmare \u00e8 sufficiente trascinare blocchi di codice nell&#8217;area di lavoro ed incastrarli tra loro. Il tutto sar\u00e0 agevolato da un approccio simile alle costruzioni: <strong>blocchi di funzione compatibili tra loro mostreranno punti di incastro complementari<\/strong>.<\/p>\n<p>Ogni blocco rappresenta un possibile elemento della programmazione sia per quanto riguarda il controllo del flusso del programma sia l&#8217;hardware (led, pin, bluetooth, sensori, etc.) tuttavia le forme cui essi aderiscono seguono lineamenti che fanno riferimento al ruolo che rivestono nel programma.<\/p>\n<p>Ci sono blocchi deputati a contenere <strong>gruppi di istruzioni<\/strong> e si presentano con una forma simile alla seguente:<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_02.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13419\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_02.jpg\" alt=\"\" width=\"300\" height=\"206\" \/><\/a><\/p>\n<p>Blocchi di questo tipo rappresentano elementi in grado di racchiudere il programma intero. Quello mostrato in figura determina quali azioni devono essere compiute &#8220;all&#8217;avvio&#8221; del programma. Al momento potrebbe sembrare un aspetto di poco conto ma si noti che<strong> i bordi esterni non hanno nessun incavo<\/strong> <strong>o sporgenza<\/strong> e ci\u00f2 indica che non possono essere contenuti in altri.<\/p>\n<p>Altri blocchi rappresentano <strong>azioni da eseguire<\/strong>, come il seguente che accende i led necessari a far apparire una stringa (personalizzabile) richiesta.<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_03.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13420\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_03.jpg\" alt=\"\" width=\"579\" height=\"100\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_03.jpg 579w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_03-300x52.jpg 300w\" sizes=\"auto, (max-width: 579px) 100vw, 579px\" \/><\/a><\/p>\n<p>In questo caso, incavo e sporgenza esterne dimostrano che questo tipo di blocco va incastrato in altri come quelli della categoria precedente. Ecco un possibile incastro permesso dall&#8217;editor:<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_04.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13421\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_04.jpg\" alt=\"\" width=\"632\" height=\"206\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_04.jpg 632w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_04-300x98.jpg 300w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/a><\/p>\n<p>Questo potrebbe essere il nostro <em>Hello world<\/em> con micro:bit infatti <strong>si tratta di un programma funzionante<\/strong> che fa scorrere il testo &#8220;Hello&#8221; composto con la matrice di led.<\/p>\n<p>Il blocco beige che contiene la stringa &#8220;Hello&#8221; fa parte della terza categoria di elementi: i <strong>blocchi per la manipolazione dei valori<\/strong>. Tra questi ultimi, troveremo quelli che permetteranno di svolgere azioni aritmetiche, confronti e gestione di variabili.<\/p>\n<p>Dopo questa breve introduzione disponiamo di tutti gli elementi per realizzare il nostro primo esempio con micro:bit.<\/p>\n<h2>Il primo programma con micro:bit<\/h2>\n<p>Come primo esempio, <strong>trasformeremo micro:bit in un contatore<\/strong> che manterr\u00e0 in memoria un valore che potr\u00e0 essere incrementato con la pressione del pulsante B e decrementato (se maggiore di 0) con la pressione del pulsante A.<\/p>\n<p>Questa la struttura di blocchi necessaria:<\/p>\n<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_05.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13422\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_05.jpg\" alt=\"\" width=\"400\" height=\"484\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_05.jpg 400w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2018\/02\/microbit_programmazione_blocchi_javascript_python_makecode_05-248x300.jpg 248w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p>Si noti alcuni aspetti interessanti:<\/p>\n<ul>\n<li>il programma denota l&#8217;anima <strong>&#8220;a eventi&#8221;<\/strong> di micro:bit. Abbiamo tre raggruppamenti di blocchi, ognuno dei quali risponde ad un diverso evento: il primo agisce <em>all&#8217;avvio<\/em>, il secondo alla <em>pressione di A<\/em>, il terzo alla <em>pressione di B<\/em>;<\/li>\n<li>con i blocchi rossi gestiamo le <strong>variabili<\/strong>. All&#8217;avvio inizializziamo la variabile <em>conteggio<\/em> a 0 e successivamente lo modifichiamo con un altro blocco rosso, <em>cambia<\/em>;<\/li>\n<li>come output utilizziamo esclusivamente la <strong>matrice a led<\/strong> sulla quale facciamo apparire il livello raggiunto dal contatore con il blocco azzurro <em>mostra numero;<\/em><\/li>\n<li>i blocchi verdi che vengono utilizzati costituiscono la <strong>logica condizionale<\/strong> che valuta se la variabile contiene un valore maggiore di zero prima di decrementarlo. Oltre al blocco <em>se allora<\/em> che costituisce l&#8217;if del programma, per rappresentare la condizione da valutare sono stati usati ben due blocchi: uno che effettua il confronto (verde) ed uno incaricato solo di estrarre il valore della variabile (rosso).<\/li>\n<\/ul>\n<p>Il codice scritto potr\u00e0 essere immediatamente provato nell&#8217;emulatore e azionando la linguetta &#8220;Javascript&#8221; in alto apparir\u00e0 la traduzione dei blocchi in Javascript che riportiamo nel seguente snippet:<\/p>\n<pre class=\"lang:js decode:true \">let conteggio = 0\r\ninput.onButtonPressed(Button.A, () =&gt; {\r\n    if (conteggio &gt; 0) {\r\n        conteggio += -1\r\n    }\r\n    basic.showNumber(conteggio)\r\n})\r\ninput.onButtonPressed(Button.B, () =&gt; {\r\n    conteggio += 1\r\n    basic.showNumber(conteggio)\r\n})\r\nconteggio = 0\r\nbasic.showNumber(conteggio)<\/pre>\n<p>Se lo si ha a disposizione, si pu\u00f2 <strong>importare l&#8217;eseguibile su micro:bit<\/strong>\u00a0con due semplici passaggi:<\/p>\n<ul>\n<li><strong>scaricamento del programma<\/strong> in formato esadecimale tramite la pressione del pulsante &#8220;Scarica&#8221;;<\/li>\n<li><strong>copia dell&#8217;eseguibile sul micro:bit<\/strong> collegato via USB al computer. In Windows, micro:bit verr\u00e0 rilevato come un normale driver e per mandare in esecuzione il programma sul dispositivo sar\u00e0 sufficiente collocarvi l&#8217;eseguibile scaricato al punto precedente.<\/li>\n<\/ul>\n<p>Nel video che segue, si pu\u00f2 avere una dimostrazione del funzionamento. Si noti che i numeri possono essere rappresentati uno alla volta nella matrice di led per questo quando si arriva al numero 10 si vedono le cifre scorrere.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/tg9bVTWQd8U?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Conclusioni<\/h2>\n<p>BBC micro:bit appare da subito un connubio perfetto tra utilit\u00e0, divertimento, economicit\u00e0 e completezza, ideale non solo per avvicinare chiunque al mondo della programmazione ma anche per progettare logiche da integrare in sistemi pi\u00f9 complessi attraverso connessioni elettriche e segnali bluetooth.<\/p>\n<p>Il nostro viaggio \u00e8 appena iniziato: a presto!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Per programmare con micro:bit non esiste un solo ambiente ma il contesto ideale &#8211; per aspiranti di&#8230;<\/p>\n","protected":false},"author":561,"featured_media":13433,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[1538,2052,2062,2055,2054],"class_list":["post-13414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial-pratici","tag-javascript","tag-microbit","tag-microcontroller","tag-microsoft-makecode","tag-programmazione-a-blocchi"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/13414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=13414"}],"version-history":[{"count":10,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/13414\/revisions"}],"predecessor-version":[{"id":13440,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/13414\/revisions\/13440"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media\/13433"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=13414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=13414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=13414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}