iOS-Lynkurs

Kurset er tiltenkt å fungere som et lynkurs for å raskest mulig få deg i gang med native apputvikling i Xcode. Det er delt inn i følgende hoveddeler:

• 🍏 Generell introduksjon til kurset og plattformen

• 🔨 Enkel gjennomgang av programmeringsspråket Swift og utviklingsverktøyet Xcode  

  • ✅ Klassisk oppgaveløsning av Swift oppgaver, hvor målet er å få alle testene til å fungere.

• 🤔 Demonstrasjon av hvordan man oppretter et enkelt iOS-prosjekt i Xcode, og de nødvendige stegene for å lage en app man kan bruke.  

  • 💻 Oppgaveløsning hvor man selv skal lage tilsvarende app på egen maskin.

• 📱Demonstrasjon av hvordan appen kan utvides med navigasjon og flere views med ytterligere funksjonalitet.  

  • ⭐️ Oppgaveløsning av utvidet funksjonalitet. Anbefalt forslag til rekkefølge er gitt under Lynkurs-03-App. Deltakere står fritt til å velge hvordan de ønsker å kombinere funksjonalitet selv. 🤠

=======================================================================================================================================

Oppsett

• 1: Koble til internett
• 2: Start Xcode
• 3: Finn fram et shell (Terminal, iTerm etc) og kjør:

cd ~/Desktop/
git clone https://github.com/bekk/iOS-Lynkurs
open iOS-Lynkurs/

Tips: For å finne og starte et program på macOS kan du bruke Spotlight! Trykk CMD + Space

=======================================================================================================================================

Snarveier i Xcode:

CMD + R bygger og kjører prosjekt.

CMD + B bygger prosjekt.

CMD + U kjører tester (dersom de er satt opp under appens Scheme)

CMD + Option + Enter åpner Assistant Editor.

CMD + F Søk i åpen fil

CMD + Shift + F Søk i hele prosjekt

CMD + 1 Åpner left toolbar (Filstruktur, Søk, Breakpoints etc)

CMD + Option + 1 Åpner right toolbar (Properties, Segues etc)

Option + klikk på metode, variabel eller klasse viser mer informasjon

Storyboard:

Knytte element i View til View Controller:

Hold inne Ctrl og klikk på et element (Button, Label, Text Field) og dra musepeker over i korresponderende View Controller i Assistant Editor. Slipp og velg om du vil ha en IBOutlet eller IBAction.

Åpne annen View Controller:

På samme måte kan man dra fra en Button over til et annen View Controller i Storyboard. Dette vil opprette en segue, som gjør at knappen åpner et annet view og legger det over sitt eget. Hvordan selve overgangen skal oppføre seg velges når man slipper Ctrl

Auto Layout:

Når man skal lage view layouts i iOS, kan man typisk enten bruke Stack Views eller Constraints. Les mer om Auto Layout på developer.apple.com

Auto Layout Constraints:

Tilsvarende IBOutlets kan man Ctrl + dra fra element til eget view for å stille inn såkalte Constraints, som kan ses på som regler som forteller hvordan UI skal se ut når appen kjører. Typiske Constraints er å midtstille horisontalt eller vertikalt, sette hvor stor relativ avstand det skal være til top, bunn, side eller andre elementer. Slik kan man lage en Auto Layout som oppfører seg likest mulig, uavhengig av skjermstørrelse eller skjermforhold.

Dette vil bli demonstrert flere ganger underveis i kurset.

Lynkurs-01-Swift

Prosjektet er en Command Line Tool satt opp sammen med et ekstra test-Target OS X Unit Testing Bundle.

Oppgaver:

Fiks koden i Person.swift, slik at alle testene i PersonTests.swift fungerer.

Eksempel:

//PersonTests.swift

func testAge() {
    XCTAssertTrue(kylie.age > 0, "should be older")
}

//Person.swift

init(firstName: String, lastName: String, gender: String, age: Int) {
    //...
    self.age = 0
}

Testen feiler fordi forventet age ikke blir returnert. Om man ser i konstruktøren til Person.swift, kan man se at self.age alltid blir satt til 0. Prøv å endre denne til verdien man får som argument.

Lynkurs-02-iOS

Lær deg basic iOS og Xcode ved å lage følgende:

Oppgaver:

Oppgave 1:

Lag det vi lagde på demoen, gjerne med litt ekstra farger og pynt.

Oppgave 2:

Fjern knappen og få labelen til å endre tekst ved at den lytter på endringer i input-feltet.

Tips:

Om ikke outlets eller actions fungerer, sjekk at du ikke har laget for mange knyttet til samme objekt.

Lynkurs-03-App

I denne delen skal du lage forskjellige views som tar i bruk forskjellige deler av funksjonaliteten på iOS. Lag et nytt prosjekt i Xcode ved å trykke File -> New Project.. -> Single View Application. Deretter kan du åpne Main.storyboard, her skal du bygge opp alle oppgavene.

Se gjerne på løsningsforslaget om du står fast.

Oppgaver:

Oppgavene går ut på å opprette egne views (ViewController i Storyboard + NavnViewControllers.swift) og knytte disse sammen med hovedviewet.

Oppgave 0: NavigationController

For at views skal kunne navigere tilbake til hoved viewet kan du velge å legge til en Navigation Controller.

Tips: Velg header hovedview i Main.storyboard, klikk på Editor -> Embed in.. -> Navigation Controller.

Oppgave 1: ConverterViewController

Implementer en View Controller hvor bruker kan konvertere fra fahrenheit til celsius og vice versa.

Tips:

Det er ofte en fordel å starte med å sette opp Text Fields og Text Labels i Storyboard først, som i Lynkurs-02-iOS. Knytt deretter disse opp mot en ny View Controller som IBOutlets.

Verdi hentes ut fra textfieldved å kalle textfield.text

For å oppdage endringer i et Text Field kan du implementere en lytter, hvor metoden handleValue kalles med tekstfeltet som argument når det skjer noe.

textfield.addTarget(self, action: #selector(handleValue(_:)), for: .editingChanged)

Deretter kan verdien fra det generiske input feltet håndteres

func handleValue(_ textField: UITextField) {
    if let value: Double = Double(textField.text!) {
        //Bruk verdi
    }
}

Verdier kan settes på tilsvarende måte med:

textField.text = "\(value)"

Oppgave 2: MapViewController

Implementer en View Controller som bruker Apple Maps til å vise markører gitt navn, breddegrader og lengdegrader. Det anbefales å lage et MKMapView i Storyboard og deretter knytte det opp mot View Controller via en IBOutlet.

For å kunne bruke MapView må du importere MapKit i tillegg til UIKit i klassen:

import UIKit
import MapKit

Opprett en liste med alle markørene du ønsker ha i kartet ditt. f.eks:

let annotation = MKPointAnnotation()
annotation.title = "Bekk Consulting AS"
annotation.coordinate = CLLocationCoordinate2D(latitude: 59.9037048, longitude: 10.7369906)

var markers: [MKPointAnnotation] = []
markers.append(annotation)

Disse kan du legge til på kartet ved å skrive:

mapView.addAnnotations(markers)

Oppgave 3: NetworkViewController

Hent data fra swapi.co og vis dem på en fornuftig måte. Bruk dette endepunktet på APIet: https://swapi.co/api/people/${id}/?format=json

Nettverkskall kan gjøres med innebygde URLSession:

func get(urlString: String) {

    let request = URLRequest(url: URL(string: urlString)!)
    let session = URLSession.shared

    let task = session.dataTask(with: request, completionHandler: { (data, response, error) in
        guard error == nil else { //Avbryter hvis det oppstod feil
            print("\(error)")
            return
        }

        guard let responseData = data else { //Avbryter om data ikke eksisterer
            print("Error: did not receive data")
            return
        }

        //Her kan vi bruke responsedata
    })
    task.resume()
}

For å kunne behandle dataobjektet (responseData) kan vi enten brukte det direkte, eller parse det om til andre formater som kan være greiere å jobbe med. Eksempelet viser hvordan vi kan gjøre om dataen til JSON:

    func parse(responseData: Data) {
        do {
            guard let data = try JSONSerialization.jsonObject(with: responseData, options: []) as? [String: AnyObject] else {
                print("Error: Serialization failed")
                return
            }

            //Bruk data som [String : AnyObject]

        } catch {
            print("Error: caught unknown error")
            return
        }
    }

JSON-objektet ser omtrent slik ut:

{
  "name": "Luke Skywalker",
  "height": "172",
  "mass": "77"
}

Felter i et slikt JSON-objekt kan hentes ut ved å skrive:

if let name = data["name"] as? String {
    // Bruk name
}

Dersom endepunktet er usikkert(HTTP) og ikke sikkert (HTTPS) er du nødt til å lage noen unntak i Info.plist for å kunne nå endepunktet.

Oppgave 4. SettingsViewController

Implementer en View Controller som kan lagre og hente data fra [UserDefaults](See https://developer.apple.com/reference/foundation/userdefaults).

UserDefaults er et enkelt key/value-lager tiltenkt enkel data som innstillinger og lignende. Det er ikke nødvendig å importere noe ekstra for å bruke UserDefaults. For å lagre en integer holder det å skrive:

UserDefaults.standard.set(value, forKey: "mykey")

Denne kan hentes ut på denne måten:

UserDefaults.standard.integer(forKey: "mykey")

Løsningsforslaget viser hvordan man kan representere denne verdien med en slider ved hjelp av UISlider:

Oppgave 5. MotionViewController

Implementer en View Controller som bruker CoreMotion til å utforske sensordata fra både akselerometeret og magnetometeret.

Obs: fungerer ikke på Simulator, krever at man kan teste på enhet.

import CoreMotion

let motionManager = CMMotionManager()
let updateIntervalInSeconds = 0.2

motionManager.accelerometerUpdateInterval = updateIntervalInSeconds
motionManager.startAccelerometerUpdates(to: OperationQueue.main) {(accelerometerData: CMAccelerometerData?, error: Error?) in
    // Bruk accelerometerData
}

Tips: Sjekk hva som finnes i accelerometerData med Option + klikk. Magnetometer kan brukes på tilsvarende måte.

Oppgave 6. TouchIDViewController

Implementer en View Controller som autentiserer fingeravtrykk med Touch ID.

Oppgave 7. ImageViewController

Hent og vis bilder lagret på simulator eller enhet.

Oppgave 8. CameraViewController

Ta bilder med kamera og bruk dem i App. Obs: fungerer ikke på Simulator, så krever at man kan teste på enhet.

Oppgave 9. ListViewController

Lag en liste hvor man kan legge til og slette elementer.

Tips: Sjekk ut File -> New Project.. -> Master-Detail Application

Andre tips:

Ikon

For å gi appen din et ikon/logo må du opprette PNGs etter retningslinjene til Apple og deretter legge de inn over gjeldende AppIcon i Assets.xcassets inne i Xcode. For å tilpasse et eksisterende bilde til logo-filter kan man bruke gratisverktøy som MakeAppIcon.com.