Skip to content

FI 0

Jump to bottom
Asko Kauppi edited this page Apr 18, 2021 · 11 revisions

Hacklab Helsinki #web-kehitys kurssi 21.4.2021 -

0. Kehitysympäristön pystytys

sirkusteltta

Nämä toimet on tarkoitus tehdä ennen kurssin alkua.

Tarvitset

  • Tietokoneen, jossa noin 2GB levytilaa vapaana

    Oli aika järkytys huomata, että git-klooni node_modules-hakemistoineen vie noin paljon. Ei ole tarkoitus, mutta tähän hätiin levyn tarvetta en myöskään lähde optimoimaan. 🥶

  • Mieluiten ison ja tarkan näytön. Minimissään 1080 (HD).

    Etenkin kun samaan aikaan meillä on videoyhteys menossa ja toivottavasti tehdään jotain koodausta IDE:llä, on turha koettaa liian pienellä tirkistysreiällä. Yksi mahis on hoitaa etäyhteys puhelimella / tabletilla, niin tietokoneen näyttö jää kokonaan IDE:lle.

  • Bash-ohjelmointialustan

    Mikä vain Linux käynee (ei ole testattu).

    Windowsille kannattaa asentaa WSL2 ja siihen esim. Ubuntu 20.04 LTS. Ohjeet englanniksi (Microsoft)

    • Seuraa Manual installation steps
    • Windowsin pitää olla version 10 ja aika uusi sellainen.tarkemmin

    Verrokiksi toiset ohjeet: Install Ubuntu on Windows 10 (Ubuntu)

    Tarvitsemme bash:ia, koska vaikka projekti on npm-vetoinen (ja npm löytyy Windowsille suoraan), käännöksissä jne. käytetään Unix-työkaluja ja skriptejä siellä täällä. Toisaalta myös Microsoft itse suosittelee Linux on Windows -ratkaisua veppikehitykseen.

    Macin käyttäjille HomeBrew:n asennus on aika välttämätön.

  • JRE 1.8 tai uudemman

    Tämä tarvitaan Firebase:n emulaattoreita varten, jotka on toteutettu Javalla.

    Suosittelen uudempaa kuin Firebase:n mainitsema perustaso.

Testataan!!!

$ bash --version
GNU bash, version 3.2.57(1)-release (x86_64-apple-darwin20)
Copyright (C) 2007 Free Software Foundation, Inc.

Versiolla ei niin väliä ole. Bash 3.x lienee kuitenkin hyvä olla.

$ java --version
openjdk 14.0.2 2020-07-14
OpenJDK Runtime Environment (build 14.0.2+12-46)
OpenJDK 64-Bit Server VM (build 14.0.2+12-46, mixed mode, sharing)

Integrated Development Environment (IDE)

Kehitysympäristö tarkoittaa editoria, joka osaa:

  • näyttää lähdekoodin värillisesti "syntaksikorostettuna" (syntax highlight)
  • näyttää mahd. kielioppivirheet jo editoinnin aikana

Lisäksi IDE mahdollistaa ohjelmien kääntämisen ja kehittämisen (debuggaus) saman ohjelmiston sisältä, mutta tämä ei välttämättä ole tarpeen. On myös ihan ok käyttää normaalia komentoriviä kääntämiseen ja selaimen kehitystyökaluja vianetsintään.

Suositeltavia:

  • Visual Studio Code

    Microsoftilta, ilmainen. Hyvin yleisesti käytetty.

  • WebStorm

    IntelliJ:n fronttieditori. Kurssin pitäjän valinta.

    Maksaa eur 59 / 47 / 35 / v (vuosittain aleneva hinta); 30 pv ilmainen koekäyttö.

WebStormiin pyydetään kurssin osallistujille ilmainen käyttöavain. Voit ottaa aluksi koekäyttöön ja antaa lisenssiavaimen kurssin kuluessa.

Kurssin tarkoituksena ei ole tutustua itse työkaluihin, joten jos IDE on sinulle uusi, ota tässä vaiheessa aikaa tutustuaksesi sen perusominaisuuksiin esim. katsomalla videoita ja kokeilemalla jonkun projektin editointia.

Huom: Visual Studio Code:n suhteen sinun pitää olla osaavampi. WebStormin suhteen kurssin pitäjä pyrkii tarpeen tullen auttamaan. :)

Pluginit

Osa IDE:n toiminnallisuudesta tulee lisäosista. WebStormin käyttäjälle suosittelemme seuraavien lisäosien asentamista (Preferences > Plugins):

  • .env files support

Tarkista lisäksi, että seuraavat plugarit ovat päällä:

  • Node.js
  • Vue.js
  • Git
  • EditorConfig

Vastaavasti VS Code:lla asenna ainakin plugarit Vetur ja EditorConfig.

Node ja npm

Node.js on JavaScript-pohjainen palvelinohjelma, jota käytetään yleisesti myös selainsovellusten rakennusalustana.

npm (Node package manager) on Node:n riippuvuuksien hallintatyökalu, jonka kautta saamme selainprojektin tarvitsemat kirjastot. Se asentuu Noden yhteydessä.

Myös muita, npm:ää ehkä parempia työkaluja riippuvuuksien hallintaan on olemassa (mm. yarn ja pnpm). Kurssilla riittää kuitenkin perus-npm.

Noden versiot

Noden parilliset versiot (12, 14, ...) ovat stabiileja ja tarkoitettu tuotantokäyttöön. Parittomat (15, ...) ovat uusimpien ominaisuuksien kokeiluun (kehittäjille) tarkoitettuja.

Kurssille käy mikä tahansa 14.3 -versiota uudempi. Tällä hetkellä (huhtik. 2021) Node tarjoaa:

node-versiot veppisivulla

Valitse jompi kumpi noista.

Huom. Useat ohjeet Internetissä suosittelevat nvm-työkalun asennusta. Se mahdollistaa samanaikaisesti useiden eri node-versioiden hallinnan. Tällä kurssilla emme kuitenkaan tarvitse sitä, joten - ellei sinulla jo ole nvm käytössä - asenna pelkkä Node haluamastasi versiosta.

Microsoftin ohjeet suosittelevat WSL2:n ja nvm:n käyttöä, mutta kurssille riittää pelkän tietyn Node-version asennus. Voit joko edetä heidän WSL2-ohjeiden mukaan tai tehdä pelkän Node-asennuksen Linux-kohdan ohjeita seuraten.

Nodesource instructions:

$ curl -fsSL https://deb.nodesource.com/setup_15.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Tuo komento noutaa verkosta paketin ja asentaa sen juurikäyttäjänä. Tavallaan arveluttavaa, mutta de facto -tapa Node.js:n asentamiseen.

$ brew install node

Muut komentorivityökalut

Repomme npm-paketointi ja skriptit olettavat, että koneeltasi löytyvät lisäksi (ainakin) seuraavat työkalut:

$ grep --version
grep (BSD grep) 2.5.1-FreeBSD

$ sed --version
# macOS:lla aiheuttaa virheilmoituksen. Ok: BSD 'sed' ei sisällä versionumerointia.

$ curl --version
curl 7.64.1 (x86_64-apple-darwin20.0) libcurl/7.64.1 (SecureTransport) LibreSSL/2.8.3 zlib/1.2.11 nghttp2/1.41.0
Release-Date: 2019-03-27
Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp smb smbs smtp smtps telnet tftp 
Features: AsynchDNS GSS-API HTTP2 HTTPS-proxy IPv6 Kerberos Largefile libz MultiSSL NTLM NTLM_WB SPNEGO SSL UnixSockets

Versioiden ei tarvitse tietenkään olla ihan samoja.

Tarvittaessa asenna puuttuvat työkalut (esim. sudo apt install curl tai brew install curl).

Markdown-editori (valinnainen)

Projektin dokumentointi on tehty Markdown -syntaksilla.

On hyvä, jos käytössäsi on kykenevä editori .md-tiedostojen käsittelyyn. IDE-laajennukset kelpaavat paremman puutteessa (niissä on "preview"-jolla näet tiedoston luettavammassa muodossa), mutta kurssin pitäjä arvostaa erillistä editoria.

Jos Markdown on sinulle täysin uusi asia, voi olla hyvä, että tutustut sen syntaksiin lyhyesti (noin 5min) ennen kurssin alkamista, esim. tästä.

Esimerkkejä editoreista:

OS Comments
MarkdownPad Windows Kehitys näyttää jääneen vuoteen 2013; toimiiko Windows 10:llä?
Markdown Monster Windows kurssin pitäjän Windows-valinta v.2019
Linux
macOS

Kurssin pitäjän valinta Macille on ollut MacDown, mutta sillä on inhottava bugi kuvien renderöinnin kanssa. Ei siis aivan ideaali.

Seuraavaksi: Firebase:n asennus

Kuvat: Wikimedia Commons

Clone this wiki locally