Dette er første blogginnlegg i en serie av artikler der vi vil se på forskjellige tema innen programmering – noe vil bli på norsk, noe på engelsk.

I dagens arbeidsmarked kan det virke som om det er én jobb som er trygg å satse på; programmerer. Ikke bare er det en trygg jobb – det er også et spennende, utfordrende og variert yrke. Og best av alt – det eneste du egentlig trenger for å komme i gang er en PC, pågangsmot, og lysten til å skape noe. Alle kan drive med programmering!

Her i Appex er i alle fall erfaringen at én ting er viktigere enn både utdannelse og erfaring, og det er LIDENSKAP! Er du oppriktig interessert og brenner for å skape noe er du allerede kommet veldig langt.

Programmering er et bredt fagfelt – et system vil normalt bestå av flere deler/lag; et brukergrensesnitt, forretningslogikk/API og en database. Å beherske alle delene av en løsning tar tid, men den beste måten å lære seg programmering på – er å programmere noe.

Finn deg et hobbyprosjekt du kan bruke for å lære deg programmering – dette er også gull verdt hvis du skal søke jobb; det viser at du er interessert, og kan være vel så bra som relevant utdanning og erfaring fra næringslivet.

Hva begynner du med?

Når du programmerer kan en oppgave løses på mange måter, og det finnes et utall forskjellige teknologier og programmeringsspråk som kan brukes.

Man snakker også ofte om «best practices» innen programmering, men ikke tenk for mye på dette i starten – bare få noe til å virke slik at du ikke stopper opp og mister motivasjonen. Etterhert vil du få et bedre grunnlag for å forstå best practices, og du kan gradvis innføre mer komplekse løsninger.

Og husk; sitter du fast er Google din venn! Stackoverflow.com inneholder også enorme mengder spørsmål og svar innen programmering, og du har også mulighet til å spørre andre utviklere om hjelp her.

Verktøy

Det finnes masse gratis programmer du kan bruke når du skal programmere, så begynn med å laste ned disse (alle er gratis, i alle fall til privat bruk):

Installer disse programmene, og du er klar til å begynne å programmere :-)

Utvikling av en webløsning

Når du utvikler en moderne webløsning er det i hovedsak tre teknologier du vil bruke; HTML, CSS og JavaScript. I første omgang er det fornuftig å fokusere kun på disse tre teknologiene. Ofte vil du også ha en webserver som genererer HTML basert på innhold i en database, men dette vil vi komme tilbake til i et senere blogginnlegg.

Ved å bruke disse tre teknologiene vil du kunne lage og designe statiske HTML-sider, men du vil også kunne hente data fra et API (Application Programming Interface) og lage en mer «levende» løsning. F.eks. kan du lage deg et firmasøk ved å hente opplysninger fra Brønnøysund (https://data.norge.no/search/site/brreg), eller en visning av været ved å hente data fra yr.no (http://om.yr.no/verdata/xml/).

HTML

HTML (Hyper Text Markup Language) er et programmeringsspråk du bruker for å sette opp websider, der du deler opp websiden i forskjellige elementer – headere, footere, sections, articles, tables, osv.. Med HTML forteller du nettleseren hva websiden din inneholder – men ikke nødvendigvis så mye om hvordan det ser ut.

Prøv deg frem med forskjellige elementer, og se gjerne på andre websider hvordan HTML er bygget opp. Dersom du bruker Chrome kan du trykke F12 (Cmd+alt+i på Mac) for å få opp Developer Tools, og derfra se på oppbyggingen av HTML-filen.

<html>
    <head>
        <title>Tittelen til siden</title>
    </head>
    <body>        
        <h1>Her er en overskrift</h1>
        <p>Her er et avsnitt med litt tekst...</p>                
        <p class="green-stuff">... og her er et avsnitt til, med litt mer tekst!</p>                
        <p id="clock">Hva er klokken?</p>
    </body>
</html>

Her kan du se hvordan dette ville sett ut i nettleseren: https://jsfiddle.net/de42svcp/1/ og her har du noen aktuelle kurs/veiledninger:

CSS

CSS (Cascading Style Sheets) derimot, har kun fokus på hvordan websiden skal se ut. Med CSS angir du f.eks. fargevalg, skriftstørrelser, avstand mellom elementer, o.l. CSS filen hentes inn i HTML-filen (du kan også legge inn CSS direkte i HTML-filene dine, men dette anbefales normalt ikke).

Det er mange muligheter å velge hva stilene skal gjelde for – typisk vil du gjerne angi at en overskrift skal ha en spesiell skriftstørrelse, at en spesiell skrifttype skal brukes e.l., mens andre ganger vil du legge inn «klasser» eller legge inn stiler kun for et spesielt element.

Igjen er Developer Tools lurt å bruke aktivt, her kan du se hvilke stiler som gjelder for de forskjellige elementene på en nettside, og i tillegg fjerne/legge til stiler for å teste hvordan det påvirker utseendet.

En enkel CSS-fil kan f.eks. se ut slik ut, og hvis vi bruker den sammen med HTML-filen ovenfor vil teksten i dokumentet få rød skrift siden dette er definert for hele «body» elementet, mens det siste avsnittet vil få grønn skrift siden den har blitt definert med klassen «green-stuff». Elementet med ID «clock» vil få fargen grå, mens overskriften vil få en annen skrifttype enn resten av teksten slik det er satt opp her:

body {
    color: red;
    font-family: Arial;
}

h1 {
    font-family: Helvetica;
    margin-top: 10px;
}

.green-stuff {
    color: green;
}

#clock {
    color: gray;
}

Se resultatet her: https://jsfiddle.net/de42svcp/4/ og her er noen aktuelle kurs/veiledninger:

JavaScript

JavaScript brukes til å styre oppførselen til en webløsning – det som gjør en webløsning levende. Hva som skjer når du trykker på en knapp styrer du f.eks. med JavaScript. Du kan også koble deg til en server og hente/lagre informasjon og endre data som vises i skjermbildet med JavaScript.

Normalt vil JavaScript legges i egne filer, som da importeres i HTML-filene de skal brukes i, og i større løsninger tar man gjerne også i bruk et rammeverk som håndterer dette.

Hvis koden under legges inn i HTML-filen vil den hvert sekund oppdatere elementet «clock» og sette inn dato/klokkeslett som tekst i det elementet:

setInterval(() => {           
    document.getElementById("clock").innerHTML = Date().toString();
}, 1000);

Se resultatet her: https://jsfiddle.net/de42svcp/5/ og her er noen aktuelle kurs/veiledninger:

“Rammeverk” som kan være greie å bruke

Selv om det er relativt enkelt å komme i gang med webutvikling, finnes det også haugevis av komponenter og rammeverk som gjør det enda enklere – f.eks. kan du bruke et CSS-rammeverk for å få løsningen din til å se bra ut, eller et JavaScript rammeverk for å håndtere mange av oppgavene som kan være vanskelig å programmere.

Jeg vil likevel anbefale deg å prøve å gjøre det selv i starten slik at du skjønner hvordan rammeverkene fungerer.

Noen rammeverk som kan være greie å se på i starten:

  • Bootstrap – et CSS-rammeverk som gjør det enkelt å få en løsning til å se bra ut og til å se bra ut på forskjellige skjermstørrelser: http://getbootstrap.com/
  • Jquery – et JavaScript bibliotetek som er både elsket og hatet, men som kan forenkle jobben i alle fall i mindre løsninger: https://jquery.com/
  • Aurelia – et rammeverk for å utvikle JavaScript applikasjoner – kan også brukes i kombinasjon med f.eks. Jquery, men løser også en del av de samme utfordringene: http://aurelia.io/

I tillegg finnes det millioner av store og små biblioteker eller komponenter du kan bruke i løsningene dine – du finner stort sett der du leter etter på Google :-)

Til slutt

Når du mestrer HTML/CSS/JavaScript har du kompetanse til å lage websider, og du kan koble deg til eksisterende API’er for å hente ut eller lagre data. Med andre ord kan du lage fullt fungerende webløsninger.

Lykke til!

I neste blogginnlegg vil vi se nærmere på hva du bør gjøre for å komme i gang med utvikling av ditt eget API, hvilke teknologier som kan være fornuftige å starte med, og hvordan du lagrer dataene dine i en database.