Learn to code

(2020-1-IT02-KA229-079756_3)

- Erasmus+ project -

MPS"Panajot Ginovski" - SkopjeN. Macedonia

14.02. - 18.02.2022

"Generating the digital biosphere by coding"

Learn to code, code to learn

"In some ways, programming is like painting. You start with a blank canvas and certain basic raw materials. You use a combination of science, art, and craft to determine what to do with them."

- Andrew Hunt writer of books on software development

MPS"Panajot Ginovski"

Why is coding important?How is coding implement in your education system?

Coding

Presentation

About us

"Everyone should learn how to code, it teaches you how to think."

15.02.2022 - MU Python and microbit

Day 2

- Steve Jobs

What song best describes you?

Day 2

Offline editor

Online editor

• The MU editor can be downloaded from multiple sites https://codewith.mu/
• It is important to select the appropriate version for your operating system.
• Programming with MU provides a very simple way to transfer programs to the microbit.
• When we use this editor, it offers us commands and this is why is programming with MU is very simple.

If you want to access online version of MicroPython, this is the link to the online editor

If we want to use the possibilities embedded into the microbit, we must write this command in the editor

microbit library (IDE)

* - (import everything)

Important

Images

We can display various symbols, signs and images on the microbe with the help of LED. And in MicroPython there are pictures that we can display. In MU the display of images is explained in the following example. Example: from microbit import * display.show (Image.SQUARE)

The command that is used for display something on the microbit screen is display.show

Command for screen display

HEART, HEART_SMALL, HAPPY, SMILE, SAD, CONFUSED, ANGRY, ASLEEP, SURPRISED, SILLY, FABULOUS, MEH, YES, NO, CLOCK1, CLOCK2, CLOCK3, CLOCK4, CLOCK5, CLOCK6, CLOCK7, CLOCK8, CLOCK9, CLOCK10, CLOCK11, CLOCK12, ARROW_N, ARROW_NE, ARROW_E, ARROW_SE, ARROW_S, ARROW_SW, ARROW_W, ARROW_NW, TRIANGLE, TRIANGLE_LEFT, CHESSBOARD, DIAMOND, DIAMOND_SMALL, SQUARE, SQUARE_SMALL, RABBIT, COW, MUSIC_CROTCHET, MUSIC_QUAVER, MUSIC_QUAVERS, PITCHFORK, XMAS, PACMAN, TARGET, TSHIRT, ROLLERSKATE DUCK, HOUSE, TORTOISE, BUTTERFLY, STCKFIGURE, GHOST, SWORD, GIRAFFE, SKULL, UMBRELLA, SNAKE.

The command that is used for display something on the microbit screen is display.show

Command for images embedded in microbit

from microbit import* sleep (5000) display.scroll (button_a.was_pressed())

• On microbit , we don't have the possibility to use a classic keyboard., instead we can use the A and B buttons.
• For "OUTPUT" data and screen display are used 5x5 LEDs , but buttons A and B are used for "INPUT" data.

• Code that will count how many times the B button is pressed in 10 seconds

from microbit import* Sleep (10000) B = (button_b.get_presses()) display.show (str(b))

Examples

Input command - buttons A or B

from microbit import * while True: if button_a.is_pressed(): temp = temperature() display.scroll("The temperature is:" + str(temp) + " C") sleep(100)

Example - a code that displays the temperature in the room when the button A is pressed.

Command If

from microbit import* for x in range (1, 6) display.show(str (x)) sleep (1000)

Example - Code for displaying the numbers from 1 to 5.

The FOR command is one of the most important loops in programming. The FOR command repeats commands from beginning to end, with the number of iterations being regulated by a step that increases the variable. FOR variable in range (value_start, value{_end): commands

Command For

from microbit import * while True: display.scroll("Zdravo!") display.show(Image. HEARTSMALL) sleep(2000)

Example - Code that will write the message "Hello" and then display a small heart. This is repeated as long as the microbit is on.

Unlike For, the While command does not have a defined number of iterations, (For will be repeated a number of times, and While will be repeated until the condition is fulfill). A feature of While is that there is no set condition to be fulfill, instead of that is statement "True" = condition fulfilled

Command While

"Learning to write programs stretches your mind and helps you think better, creates a way of thinking about things that I think is helpful in all domains."

16.02.2022 - App Inventor

Day 3

- Bill Gates

Why an educational application?

• Education policymakers are increasingly realizing the need and benefits of using educational applications on the learning process, so these "new tools" are being used more and more.

• Interactivity in applications teaches us rules, customization, problem solving, collaboration, goal setting and all that is often presented in a fun way.

An educational application is an application that is intended for educational purposes only or an application that can be used to achieve an educational purpose. Educational applications are designed to help people learn about certain topics, to expand concepts, to enhance their own development, to understand a historical event or other culture, to help learn a skill ....

Definition

Educational application

• Interactive content - students do something to enhance interaction and retain a great deal of attention
• Easy navigation - simple interface offline - every student does not have access to the internet, so it is good for the educational application to have its own offline version -
• Gamification - students enjoy playing games. Gamification is important and will attract more users because it does not impose learning.
• Feedback - good educational applications provide feedback on what has been done and achieved. It is important that the feedback is positive so that it does not act demotivating. Self-explanatory (information instead of instruction)

Features of a good educational application

• If we want to create or code applications, it's not necessary to write commands that need to remember the syntax, but it will be done with the help of predefined blocks.
• For that purpose we can use an online platform designed by a group of professors and students from the Massachusetts Institute of Technology - Laboratory for Computer Science and Artificial Intelligence (MIT Computer Science & Artificial Intelligence Lab).
• The platform is an intuitive and visual coding environment that allows anyone, especially children, to create a functional application for smartphones and tablets running the Android operating system. Even beginners can create a simple, usable application in less than 30 minutes. Using blocks in the coding process makes it easier to create complex applications in a much shorter time than using traditional programming commands. The MIT App Inventor project seeks to democratize software development by enhancing the knowledge and skills of all people, especially young people, to move from using technology to creating.

MIT App Inventor application coding platform

• The main screen of application will be open
• If you have not created applications yet, the list of projects is

empty and to get started you need to click on Start new project. If you have already created projects, the project you last worked on will open.

• Log in with your gmail account and password.

• If you want to use MIT App Inventor, all you need is a Google Account.
• To activate the application, in the browser (Chrome) type the following address: http://appinventor.mit.edu/ and click on the orange button "Create Apps"

Create an account with MIT App Inventor

To track the development of the application, download the MIT AI2 Companion App from the Google Play Store and install it on your phone or tablet. After installing the AI2 Companion app, you can connect your smart Android device to the App Inventor project and test what you do live. The computer and mobile device must be connected to the same WiFi network. In the Design window, click Connect and select AI Companion from the drop-down menu:

The "Design Window" opens

Next step

When you start a new project, the initial window opens, that window is the window that will open the application when it starts. Its name Screen 1 can not be changed unlike all the next ones that will be inserted in the application. You can change the color of the background, insert an image as a background, set the animation how it will open, set the orientation (horizontally, vertically or on the sensor), put a header, put a slider and so on. Components of the Component Selection Palette User interface (user interface) - contains elements that are visible in the display section. They are most often used: - Button - an interactive button that presses an action. The button can change an image, write text and specify dimensions. Changes are made in the customization section. The buttons are automatically assigned the Button name and input row number. The button name can be changed and associated with its function - Image - used to insert a static image, usually as a decoration. The image can be resized and rotated at a given angle. - Label - text that usually serves to explain parts of the application. You can change the background color or text, set the dimensions, and select left, right, or center alignment

Start window

In the Design window, click Connect and select AI Companion from the drop-down menu:

Next step

Layout - helps to arrange the elements on the screen. - horizontal arrangement - used when elements need to be arranged horizontally. Dimensions can be set and an image can be inserted. - vertical arrangement - used when elements need to be arranged vertically. Dimensions can be set and an image can be inserted. - Table Arrangement - is used to arrange the elements in a table. Dimensions and number of rows of rows and columns can be specified. Media - most commonly used - player - insert a sound or melody that has a predefined duration, and only the volume can be adjusted (invisible element) - sound - insert sound whose duration can be adjusted (invisible element) Drawing and animation - canvas - a two-dimensional rectangular surface sensitive to touch, on which can be drawn and on which the elements sprites and balls can move. You can change the background color or add an image. The thickness of the line with which it is drawn is also defined. - Sprite - an element with the same characteristics as a ball that can be painted or changed color. It is placed only on the canvas and can interact with other elements, react to touch or drag on the canvas. - Ball - an element in the form of a circle (ball) on which only the color can be changed. It is placed only on the canvas and can interact with other elements, react to touch or drag on the canvas

Give the project a name. Drag a button into the display area .

In the application we will put a picture of a kitten and a picture of a dog and we will program by clicking on the picture of the kitten to hear "meow", and by clicking on the picture of the dog to hear"Av av". We can search for sounds online or record them on a computer or phone. These elements need to be prepared before coding can begin.Start a new project by selecting Start new project from the Projects drop-down menu.

In this example we will show how you can interact between image and sound.

Application 1: Picture and sound

You can rename the button by clicking Rename at the bottom of the item list. This is recommended to be done in applications that have a large number of buttons so as not to confuse their functions. We rename the first button to Dog. In the adjustment section we change the parameters of the button. For this application we will choose the button without a background, we will delete the text for the button and we will put a picture of a dog that we previously saved on the computer. If the picture is too big, take them we adjust its dimensions to fit the screen. Because the mobile device is connected to the computer on its device we see all the changes.

Application 1: Picture and sound 1

We put the appropriate sound files in the settings. We are now ready to start coding.

We rename both of these elements. These are invisible elements and will not be visible on the screen of the mobile device.

In the display section we have two buttons with two images. Now we add the sounds. Extract the Player item from the Media section. We do this twice because we need the sounds of barking and meowing.

In the same way we add a second button and put a picture of a kitten on it.

Application 1: Picture and sound 2

We put the appropriate sound files in the settings. We are now ready to start coding.

We rename both of these elements. These are invisible elements and will not be visible on the screen of the mobile device.

In the display section we have two buttons with two images. Now we add the sounds. Extract the Player item from the Media section. We do this twice because we need the sounds of barking and meowing.

In the same way we add a second button and put a picture of a kitten on it.

Application 1: Picture and sound 3

Now you can prepare the installation version, but also download the working version of the application to your computer. The working version has the extension aia and its name is ime _na_proektot.aia.

Button components blocks Blocks of sound components

Application 1: Picture and sound 4

The installation version has an apk extension and its name is ime _na_proektot.apk. To download the working version do the following: Click on Projects, then Export selected project (aia) to my computer. The working version is downloaded to your computer. If you share it with someone, they will be able to work on it by selecting Importproject (aia) from my computer.

Application 1: Picture and sound 5

Click Build, then App (save apk to my computer). The installation version is downloaded to your computer. You can email this version to someone to be able to install it on your smartphone (phone or tablet). For installation it is necessary to do the following: To install any of the applications when downloaded to the phone, you need to click on the icon that represents the application and enable installation from Unknown Sources. It usually asks if to continue even though the application is unknown, but if it does not allow installation, the following should be done: Go to "Settings> Applications" and check in "Unknown Sources". For newer versions of Android: "Settings> Security" or "Settings> Security & Screen Lock" is checked at "Unknown Sources" and confirmed with "Confirm".

Click Build, then App (save apk to my computer). The installation version is downloaded to your computer. You can email this version to someone to be able to install it on your smartphone (phone or tablet).

Application 1: Picture and sound 6

- creating programs for micro:bit with MU Puthon- development of simple applications with APP inventor

17.02.2022 - Workshops

Day 4