La oss bygge en chatteapplikasjon!

Ada Codehub workshop med Benedicte fra FINN onsdag 25. oktober 2021

Sist oppdatert: 7. oktober kl. 10:15

For at du skal få så mye tid som mulig til å jobbe med oppgaven i workshopen så er det veldig lurt å sette opp noen småting på forhånd.

1 Finn deg en ren tekst-editor

For å skrive kode så må vi ha en ren tekst-editor!

Her fungerer det aller meste. Hvis du er vant med å programmere bruker du kanskje PyCharm, eller Atom, eller Visual Studio Code eller noe lignende allerede. Da kan du hoppe videre til kapittel 2.

Det har absolutt ingen ting å si akkurat hvilken teksteditor du bruker. Men hvis du aldri har brukt en ren tekst-editor før, så er det instruksjoner her for å installere Visual Studio Code.

1.1 Installer Visual Studio Code

  1. Last ned Visual Studio Code her
  2. På macOS dobbeltklikk på zip-filen og kopier programmet inn i Programmer-mappen. På Windows dobbeltklikk på installasjonsfilen og følg instruksjonene

1.2 Sjekk at du kan kjøre kommandoer i Terminalen

Åpne opp Terminal-vinduet ved å gå til View -> Terminal i topp-menyen på Visual Studio code.

Terminalen dukker opp nederst:

Og den ser sikkert litt annerledes ut på din maskin. Men ikke tenk på det!

  1. Klikk innenfor Terminal-vinduet og skriv ls hvis du har macOS og dir hvis du har Windows

  2. Trykk enter

  3. Du skal nå ha fått en liste med mapper og filer. Hvis noe gikk galt ville du ha fått en feilmelding!

    Det skal se ca. sånn ut:

Gratulerer! Du har nå kjørt din første Terminal-kommando!

2 Installer Node.js

Vi kommer til å bruke React i workshopen. Det er et rammeverk som er basert på Node.js

  1. Last ned Node.js her
  2. Dobbeltklikk på msi-filen hvis du er på Windows eller pkg-filen hvis du er på macOS og følg instruksjonene for å installere

2.1 Andre måter å installere på

N.B.: Dette er bare for de spesielt interessert!

2.2 Sjekk at den er installert

Sjekk at Node.js er installert ved å kjøre (skrive inn i Terminalen og trykke Enter) følgende kommando i Terminalen:

$ npm

Merk: Du skal bare skrive det som kommer etter dollartegnet.

Hvis du får dette ut så er alt installert:

$ npm

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    /home/benedicte/.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.14.13 /home/benedicte/.nvm/versions/node/v14.16.1/lib/node_modules/npm

3 Last ned pre-koden

I workshoppen skal vi fortsette på et React-prosjekt som jeg har kickstartet.

  1. Last ned denne zip-filen og pakk den ut

  2. Åpne opp mappen du lastet ned i Visual Studio Code ved å. Det skal se slik ut:

3.1 Sjekk at du kan kjøre prosjektet

  1. Skriv følgende i Terminalen:

    $ npm install

    Det skal se ca. sånn ut:

  2. Skriv følgende i Terminalen:

    $ npm start

    Det skal se ca. sånn ut:

  3. Hvis nettleservinduet ikke åpner seg gå til denne lenken

Du er nå klar for workshop! Vi sees!

Hvis du har lyst til å forberede deg mer, ta en titt på et par videoer på YouTube om React. Prøv så å navigere deg litt rundt i filene i prosjektet, forsøk å endre på ting og se hva som skjer med nettsiden.

Det er ikke farlig å bare endre på ting og se hva som skjer!