STEM radionice 2022./2023.

Radioklub Pazin

1. termin

Upoznavanje i dogovor za rad

dobrodošli!

Radioklub Pazin

igraonice

Učenje i rad

STEM RADIONICE

(ali možete igrati igrice koje napravite sami!!!)

Upoznajmo se

098 366346

Ja sam Ivan Guštin, vaš mentor.

  • petak, 19:00

  • dva školska sata, pauza

  • pažljivo slušamo

  • čuvamo opremu

  • nema pića uz računala!!!

  • mobitel utišan i sa strane!!!

  • pospremamo

  • pomažemo jedni drugima

  • učimo jedni od drugih

  • vaša oprema?

Kako radimo?

Što ćemo učiti

  • 3D crtanje i printanje
  • Programiranje
    • Scratch
    • Python, C...
    • SQL
  • Roboti
    • mBot, crtanje, Xiaomi...
  • Arduino
  • RaspberryPi
  • Korištenje računala, aplikacija, web servisa
  • OpenStreetMap

ŠTO možemo IZRAĐIVATI

  • pametni kućanski aparati

    • usisavač

    • vremenska stanica

    • hranilica

  • Clockwork Briefcase

  • Balončići sapunice

  • Udaljeno upravljanje robotom

  • Udaljeno upravljanje svjetlima

  • Semafor za križanje

  • NFC kontrola ulaza

  • Bezkontaktni dezinficijens

  • Brojač zgibova

ŠTO VI ZNATE?

Što ste i gdje do sada učili i radili?

ŠTO ŽELITE NAUČITI?

Što želite naučiti? Što bi voljeli znati?

ŠTO ŽELITE IZRAĐIVATI?

Imate neku ideju ili želju? Sviđa vam se nešto predloženo?

Pitanja?

Što još nismo rekli?

2. termin

Crtanje
Odabir projekta

odabir

crtanje

Za one koji još nisu crtali u TinkeCAD-u ili se žele podsjetiti

odabir projekta

Za one koji već nešto znaju i žele raditi neki projekt

odabir PROJEKTA

Smjernice

  • odabrati nešto što vam je zanimljivo
  • nešto što već djelomično znate napraviti
  • ostalo ćete naučiti radeći projekt
  • ne odabrati preteško kao prvi projekt
  • možete modificirati i unaprijediti tuđi projekt
  • raditi samostalno ili timski
  • napraviti prototip u TinkerCAD-u ili sličnom
  • pomoć mentora
  • napravljeno vam vjerojatno ostaje za ponijeti

PRIJEDLOG PROJEKTA

Štedljivi stubišni automat za rasvjetu

  • neboder s više katova (3D maketa)
  • tipkalo
  • Arduino
  • tipka se onoliko puta na koji se kat
    hoće ići
  • svijetle ona svijetla koja trebaju

PRIJEDLOG PROJEKTA

Semafor na raskrižju

  • 3D printana maketa
  • Arduino + LED
  • + prilagodba prema prometu

PRIJEDLOG PROJEKTA

Pametna štedljiva ulična rasvjeta

  • 3D printana maketa
  • Arduino + LED
  • pali se kako prolaze ljudi ili vozila
  • + jačina prema mjesečini

PRIJEDLOG PROJEKTA

Ručni sat

  • Arduino
  • mali ekran
  • 3D printano kućište + pojas
  • osnovne funkcije sata

PRIJEDLOG PROJEKTA

Pametan ručni sat - smartwatch

  • Arduino
  • mali ekran
  • 3D printano kućište + pojas
  • temperatura, alarm...
  • notifikacije, upravljanje, otključavanje

PRIJEDLOG PROJEKTA

Hranilica za životinje

  • Arduino
  • 3D printano kućište
  • vremenski otvara spremište
  • životinja ima privjesak za otvaranje

PRIJEDLOG PROJEKTA

Kontrola ulaza

  • Arduino
  • 3D printano kućište
  • bedževi ili kartice
  • otvara ili ne otvara
  • prema osobi i vremenu
  • + prikaz imena

PRIJEDLOG PROJEKTA

Dodatne ideje

3. termin

Nastavak crtanja TinkerCAD

Simulatori Arduina i ostale elektronike

rad po skupinama

crtanje

Nastavak crtanja u TinkerCAD-u

SIMULATORI ELEKTRONIKE

TinkerCAD circuits
Wokwi

simulatori

MATERIJALI

4. termin

3D printanje iz TinkerCAD-a

Primjer simulacije Arduino sklopa u TinkerCAD-u

rad po skupinama

crtanje

Sliceanje i printanje 3D modela

SIMULAcija arduino sklopa

TinkerCAD circuits

5. termin

3D crtanje i printanje

TinkerCAD Arduino simulacije

rad po skupinama

3D

Crtanje i printanje

Arduino simulacije

TinkerCAD circuits

6. termin

Programiranje u Scratchu

TinkerCAD Arduino simulacije

rad po skupinama

SCRATCH

Uvod u programiranje

Arduino simulacije

TinkerCAD circuits

Scratch je jednostavan slikovni način programiranja, pogodan za učenje programiranja
početnika i mladih.

Micro:bit Blocks

mBot mBlock

Scratch

AppInventor

TinkerCAD 3D

i Circuits

micro:bit

Hardware micro:bita

Krenimo!

7. termin

Prezentacija STEMI projekta

Programiranje u scratch.mit.edu

TinkerCAD Arduino simulacije

8. termin

Prezentacija STEMI projekta

Programiranje u scratch.mit.edu

TinkerCAD Arduino simulacije

9. termin

STEMI: prijave, privole, upute, Hexapod

Programiranje u scratch.mit.edu i TinkerCAD Arduino simulacije

Prednosti i mane interneta

  • informacije
  • učenje
  • druženje
  • zabava

prednosti

  • laži, žutilo, prevare
  • gubljenje vremena
  • ovisnost, samoća
  • bullying

nedostaci

Prednosti i mane interneta

mail, PORTALI, DRUŠTVENE MREŽE, MESSENGERI

20. termin

Uvod u programiranje

Pisanje uputa računalu što i kako da radi.

Što je programiranje?

Uputa računalu što i kako da radi.

Što je program?

Osoba koja piše upute računalu što i kako da radi.

TKO je programER?

RAČUNALO

KORISNIK

RAČUNALO

HARDWARE

SOFTWARE

SOFTWARE

OPERACIJSKI SUSTAV

APLIKACIJE

GRAFIČKO SUČELJE

BIOS/FIRMWARE

PROGRAM

GLAVNI DIO PROGRAMA

PODACI

GRAFIČKO SUČELJE KORISNIKA

MREŽA I INTERNET

HARDWARE RAČUNALA

PROGRAMSKI JEZICI

"Jezik" na kojem pišemo upute računalu.

Python

C

C++

C#

Java

GoLang

JavaScript

BASIC

Assembler

Forth

Erlang

Elixir

Forth

Rust

Pascal

PHP

Perl

Swift

SQL

Ruby

zašto toliko jezika?

Svaki je namijenjen određenoj primjeni i ima svoje specifičnosti.

KOJI JE NAJBOLJI?

Ne postoji "najbolji". Postoje jezici prikladni za određenu namjenu i oni koje najbolje poznajemo.

OSNOVNE PODJELE JEZIKA

  • visoki/niski
    • niski: direktno pristupaju mogućnostima hardvera, brži, složeniji, duži
    • visoki: jednostavnije raditi složene operacije, kraći, sporiji
  • multiplatformski - oni koji bez ili uz minimalne izmjene rade na raznim računalima
  • kompajlerski/interpreterski/bytecode
    • kompajlerski - pretvaraju izvorni kod u birnarni/izvršni i onda se koriste
      • brži, vezani za platformu, nema uvida u izvorni kod
    • interpreterski - odmah se izvode
      • sporiji, potreban interpreter, lakše prenosiv, izvorni kod vidljiv
    • bytecode - nešto između (Java)

OSNOVNE NAMJENE JEZIKA

  • assembler - najniži i najbrži jezik, za upravljanje hardverom
  • C - operacijski sustavi, programi niske razine vezani za hardver, brzi programi
  • C#, C++, Go, Rust - napredniji objektni jezici/programi više razine, aplikacije
  • Java - prenosivi programi, mobilne aplikacije
  • Pyhton - univezalni jezik, prenosivi programi, visoka razina, sporije
  • PHP - web aplikacije
  • JavaScript - web aplikacije za klijentski browser, korisničke aplikacije
  • SQL - jezik za upravljanje bazama podataka
  • Swift - mobilne aplikacije
  • Perl, shell, awk, sed - skripte za administraciju i automatizaciju

TREBA LI ZNATI SVE PROGRAMSKE JEZIKE?

Ne, puno je važnije poznavati principe programiranja i algoritme koji su zajednički za sve programske jezike.

S tim znanjem možemo brzo usvojiti gotovo bilo koji drugi/novi programski jezik.

OSNOVE PROGRAMIRANJA

Niz pojmova zajednički svim programskim jezicima

OSNOVE PROGRAMIRANJA

  • naredba - "komanda" ili jedna uputa koja radi neku operaciju
    • početak/kraj programa ili programskog dijela (Begin, End...)
    • naredbe ponavljanja (for, while, until, loop...)
    • kontrola tijeka programa (if, then, else, elseif, case, switch...)
  • komentari - slobodan tekst uz pojedine dijelove programa koji nam pojašnjavaju što i kako nešto radi
  • varijable - "spremišta" ili "ladice" za pohranu podataka, informacija i raznih vrijednosti

OSNOVE PROGRAMIRANJA

  • osnovni tipovi podataka - osnovni element neke informacije
    • cijeli brojevi
    • brojevi s pomičnim zarezom
    • jedan alfanumerički znak
    • niz alfanumeričkih znakova
    • logički tip podatka
  • složeni tipovi podataka
    • cjeline složene od više različitih osnovnih tipova podataka
    • strukture, nizovi, matrice

OSNOVE PROGRAMIRANJA

  • operatori
    • unarni: logička negacija, negativan predznak, inkrement...
    • binarni (na dva podatka): zbrajanje, oduzimanje, množenje...
    • binarni (s binarnim brojevima): AND, OR, NOT, XOR, XNOR
    • logički: uspoređivanje vrijednosti, i/ili

OSNOVE PROGRAMIRANJA

  • potprogrami/procedure/funkcije
    • izdvojeni dijelovi programa
    • operacije koje se često pozivaju s više mjesta
    • preglednost
  • objekti/klase
    • skupine podataka i funkcija
    • definirana vidljivost, nasljeđivanje
    • preglednost, sigurnost

OSNOVE PROGRAMIRANJA

  • framework/library
    • veća skupina gotovih procedura/funkcija određene namjene
    • oslobađa nas pisanja često korištenih ili složenih programa

1

Planiranje, dizajniranje

2

Kodiranje, programiranje

3

Testiranje programa i
ispravljanje

grešaka

4

Održavanje programa, dograđivanje, unaprijeđenje, prilagođavanje

POSTUPAK PROGRAMIRANJA

ostali pojmovi u programiranju

  • editor - program za jednostavno pisanje programa
  • IDE - Integrated Development Environment
    • napredan program za programiranje
    • pomaže u pisanju
    • pomaže u traženju grešaka
    • olakšava timski rad
    • pomaže u kreiranju krajnjih aplikacija
  • debugging - traženje grešaka u programu, praćenje tijeka programa i vrijednosti varijabli, korak po korak

ostali pojmovi u programiranju

  • syntax highlighting - bojanje dijelova programa radi preglednosti

ostali pojmovi u programiranju

  • autocomplete/intellisense - dopunjava naredbe, prikazuje help

ostali pojmovi u programiranju

  • GitHub CoPilot - dopisuje dijelove programskog koda

ostali pojmovi u programiranju

  • verzioniranje
    • čuvanje izmjena u razvoju programa
    • vraćanje u bilo koju prethodnu točku razvoja
    • kompletiranje cjeline razvoja
  • kolaboracija
    • zajednički timski rad na jednom programu/projektu
    • maintainer, push/pull request
  • installer - kreira programski paket za distribuciju i instalaciju

ostali pojmovi u programiranju

  • frontend/backend
    • frontend - UI/UX, dizajn/korištenje, malo automatike
    • backend - pozadinski dio programa, na serveru, glavni dio
  • baze podataka - SQL
    • strukturirana pohrana različitih tipova podaka i informacija
    • posebnim upitima dobivanje željenih podataka iz baze

ostali pojmovi u programiranju

  • skripta/program/web aplikacija
    • skripta - kraći program, uže namjene, interpreterski, administracija/automatizacija
    • program/aplikacija - korisnički program za osobna računala ili pametne telefone/tablete
    • web aplikacija - program koji se koristi kroz web preglednik (browser), izvodi se i u pregledniku i na serveru

ostali pojmovi u programiranju

  • algoritmi
    • postupak i koraci rješavanja nekog problema
    • opći i složeni algoritmi
    • specifični i vlastiti algoritmi

ostali pojmovi u programiranju

  • formati zapisa datoteka
    • "binarni" - kompaktan, nečitljiv, univezalan
    • TXT - slobodni tekstulani zapis bez oblikovanja i kontrolnih znakova
    • CSV - redovi s više podataka odvojenih zarezom, TAB-om ili nekim znakom
    • JSON, XML - stablasti zapis složenih struktura podataka, čitljivo

ostali pojmovi u programiranju

  • API
    • Application Programmer's Interface
    • skup funkcija za vanjski/udaljeni pristup funkcijama i podacima
    • komunikacija između više različitih aplikacija ili sustava
    • pristup iz "naše" aplikacije prema nekom "servisu" na mreži ili internetu
    • nema direktnog pristupa programu ili podacima, već kontrolirano
    • sigurnost, jednostavnost, univerzalnost, standardizacija, heterogenost

Matematičarka

Ada lovelace

PROGRAMERI

NASA, Appolo

Margaret Hamilton

AI

Alan Turing

Microsoft

Bill Gates

PROGRAMERI

Linux

Linus Torvalds

Unix, C

Dennis Ritchie

CERN, Web

Tim Berners-Lee

PROGRAMERI

Python

Guido Van Rossum

Google

Larry Page

21. termin

SQL baze podataka

22. termin

Aplikacija "Telefonski imenik"

Python + SQLite baza podataka

23. termin

Aplikacija "Telefonski imenik"

Python + SQLite baza podataka + Tkinter GUI

PROGRAM

GLAVNI DIO PROGRAMA

PODACI

GRAFIČKO SUČELJE KORISNIKA

MREŽA I INTERNET

HARDWARE RAČUNALA

Python gui

Tkinter - jednostavna i popularna biblioteka
za kreiranje
GUI aplikacija
u Pyhtonu

Python gui

Python gui

28. termin

Web stranice i aplikacije

kako radi web

Klijent (client)

Poslužitelj (server)

1

2

WEB STRANICE

HTML - HyperText Markup Language - jezik kojim izrađujemo i oblikujemo Web stranicu

CSS - Cascading Style Sheets - jezik za napredno oblikovanje sadržaja web stranice

JS - JavaScript - programski jezik za izvođenje programskih operacija, događaja i interakcija na web stranici, primarno unutar preglednika

RWD

Responsive Web Design - automatsko prilagođavanje prikaza web stranice ovisno o uređaju i ekranu, implementacijom odgovarajućeg HTML i CSS

FRAMEWORKS

Gotove biblioteke i alati za bržu izradu složenijih (RWD) web stranica na višoj razini od osnovnog JavaScripta, ali i HTML/CSS.

Najpopularniji: jQuery, React, Vue, AngularJS

Tutoriali

RAZVOJNI ALATI

Alati: programiz.com, phpanywhere.com, Sublime, Notepad++, NetBeans, VisualStudio, PHPStorm

View web page source u pregledniku: Ctrl-U

Developer tools u pregledniku: F12 (Ctrl-Shift-I)

WEB APLIKACIJE

Program koji izvodi naprednije/složenije operacije kroz web stranice, nalazi se na web serveru i često koristi bazu podataka.

Najpopularniji jezici: PHP i Microsoft ASP.NET, sve više Node.JS

Najpopularnije baze: MySQL/PostreSQL i Microsoft SQL

FTP/Web server: radionice.rkp.hr
FTP login: radionice@radionice.rkp.hr
FTP password: y#]yn*_+Co+4

Dalje?

  • dovršit STEM komplete
  • uvod u C
  • OpenSCAD
  • nastavak Pythona + net + HW
  • Arduino/RPi projekti
  • korištenje korisničkih aplikacija i web servisa
  • STEMI
  • web stranice i aplikacije
  • CroCube
  • GPT
  • ...?