NodeJS og Express – Installer NodeJS – Javascript

View Github Repository Open presentation in a new window

Trude

See all presentation from Trude

NodeJS og Express – Installer NodeJS – Javascript

0 0

kurs-node-presentasjon

On Github Trude / kurs-node-presentasjon

Lag en webapp med

NodeJS og Express

Magnus Westergaard og Trude Martinsen, Steria

Installer NodeJS

http://nodejs.org

http://www.sublimetext.com/

Agenda

  • Introduksjon
  • Node, Express og Jade med eksempler
  • Lag en webapp selv!
  • Pizza
  • Øl!
Notater....

Javascript

  • Laget av Brendan Eich på midten av 90-tallet
  • C-lignende syntaks
  • Mest brukt for skripting i nettleser
JavaScript opprinnelig laget hos Netscape Laget for å være enkelt Kom også raskt mulighet for serverside skripting med JS

Hadde lenge et litt dårlig rykte ...

Title scroll

Cursor trail

AJAX

Autocomplete Gjorde det mulig å lage mer dynamiske nettsider Endre innhold på en side uten å laste den på nytt Populariteten rundt JS økte -> mer arbeid ble gjort -> rammeverk, best practices

Node

  • Laget av Ryan Dahl i 2009
  • Plattform som bruker JS som skriptingspråk
  • Bygget rundt Googles V8 JS-motor
V8 er JS-motoren brukt i Chrome

Node

http://nodejs.org

  • Kan kjøre JS utenfor nettleseren
  • Innebygd HTTP-server
  • Godt egnet til webapper
Notater....

Eksempel

Hello world

Hello World i konsoll

Node

http://nodejs.org

  • npm - package manager
  • Aktivt community
I bruk hos LinkedIn, Microsoft, ...

Webapp

  • Brukergrensesnitt i nettleseren
  • Logikk og tilstand på server Evt persistering i database ...

Eksempel

Hello world i nettleseren

Meh ...

Express

http://expressjs.com

  • Rammeverk for å lage webapps i Node
  • Routing
  • Behandling av requests fra nettleser
  • Skriving av response tilbake
Notater

Eksempel

Hello world i nettleseren v 2.0

Litt enklere!

... men fortsatt stygt

Jade

http://jade-lang.com

  • Templating-språk for å produsere HTML
  • Basert på innrykk
  • Variabler, iterasjon, if-else ...
  • Støtter også JavaScript i templates
HAMLish

Eksempel

Hello world i nettleseren v 3.0

Dagens byggeklosser

Node

Express

Jade

Dagens oppgave

Lag mastermind!

Hva er mastermind?

Fire farger er skjult Målet er å gjette riktige farger på riktig posisjon Får tilbakemelding etter hver gjetning Gjett alle riktig på færrest mulig forsøk

Utgangspunkt

Ta opp koden og vis.

Forslag til fremgangsmåte

  • Lagre forsøk som blir sendt fra nettleseren
  • Finn ut antall i rett farge med rett plassering
  • Finn ut antall i rett farge med feil plassering
  • Send feedback på forsøk tilbake til nettleseren
  • Når man har klart det, implementer mulighet for å starte på nytt
  • Annet:
    • Legg til flere farger
    • Lag tilfeldig fasit hver gang spillet startes på nytt
    • Implementer at spilleren setter opp fasit
  • https://github.com/emagnus/kurs-node-mastermind

Oppsummering

Naturlige utvidelser

Database i bunnen for persistering

Mer fancy brukergrensesnitt

MEAN-stack

Presentasjon: https://github.com/Trude/kurs-node-presentasjon

Løsning: https://github.com/Trude/Mastermind

Takk for oss!