Angular

Workshop 1

Samuel Šramko

Na čom budeme pracovať

• Learn IT
  • IS pre program IT Absolvent
  • zdieľanie záznamov v kurze, slidov
  • školiteľ - workshop - študenti

Na čom budeme pracovať

• Školiteľ si vytvorí kurz
• do kurzu pridá študentov
• správa kont

• študent vidí svoje kurzy
• vidí záznamy videí a slidy
• zoznam domácich úloh
• bonus - Slack

Na čom budeme pracovať

• Desktop aj mobil
• čo najrýchlejšie a najlacnejšie :-)
• BE aj FE
• deploy na Heroku

Mockup

• rýchly nástrel UI
• lacné, len pre základný rámec so zákazníkom

• moqups, sketch

Profil lektora

Pridanie kurzu

Vytvorenie študenta

Detail kurzu - Lektor

Detail kurzu - Študent

Technológie

• HTML, CSS
• Bootstrap 3
• JavaScript
• git

HTML

• text + (formátovacie) značky
  • pre univerzity
  • farba, písmo
  • obrázky, tabuľky
  • formuláee
• veľmi jednoduché
• vzhľad veľmi dobre upraviť nejde

• http://help.websiteos.com/websiteos/example_of_a_simple_html_page.htm
• https://www.w3schools.com/html/

CSS

• jazyk pre úpravu vzhľadu
• viac vlastností
  • rozmery, odsadenie
  • pozadie, rámiky
  • tiene, animácie
• je možné zmeniť skoro všetko
  • button, input, ...
• pravidla môžu platiť pre viac prvkov zároveň

• https://www.w3schools.com/css/

Bootstrap

• kolekcia už hotových CSS pravidel
• dokumentácia s príkladmi
• najpoužívanejší CSS framework
• aktuálne sa pracuje na v4, major je stále v3
• alternatívy Foundation, MaterialUI

• https://getbootstrap.com/docs/3.3/

jsbin.com

• rýchle vyskúšanie
  • HTML
  • CSS
  • JS
• aut. ukladanie
• zdieľanie

• Domáca úloha
  • jsbin - veci z bootstrapu - tabuľka, formulár, navbar, atď

Chrome Dev Tools

• inspect element
• zvýrazňovanie elementov
• $0
• úprava HTML/CSS
• (copy & paste)

• https://developers.google.com/web/tools/chrome-devtools/

Prototyp

• statická skoro-aplikácia
• vlastný adresár (repo)
• *.html soubory
  • add-workshop.html
  • add-student.html
  • detail-workshop-lektor.html
  • detail-workshop-student.html

git

• git add .
• git commit
• git push origin/master

• http://try.github.com

JavaScript

• jazyk určený (pôvodne) pre oživenie webu
• ako jazyk nic moc
  • chyby (== vs ===)
  • nelogickosti
  • treba dávať pozor
• je ale všade

• https://www.w3schools.com/js/

EcmaScript

• ES3, ES5
• ES6/ES2015
• ES7/ES2016
• ES2017, ...

• ES je špecifikácie
• JS je implementácia

ES2015/2016

• const, let
• arrows
• classes
• template strings
• import/export
• rest, spread, destruct
• async-await

• https://github.com/lukehoban/es6features

TypeScript

• strict superset of JavaScript
• adds optional static typing and class-based OOP
• compiled back to plain JS to targeted version - tsc compiler (tsconfig.json)
• classes, interfaces, enums, public/private methods
• decorator functions
• Angular 2 is written in TypeScript, it uses classes, decorators (annotations), interfaces, static types, etc.
• every JS library can be imported in *.ts files, only type definition must be generated via typings

• https://www.typescriptlang.org/play/