Kurs Swift - Lekcja 2: Jak zbudowane są aplikacje
W tej krótkiej lekcji poznamy nieco niezbędnej do programowania teorii. W poniższym wpisie postaram się wytłumaczyć w sposób wysoce uproszczony fundamentalną dla programowania w Swift kwestię, jaką jest wzorzec MVC (Model-View-Controller).
Co będzie nam potrzebne?
Komputer Mac z zainstalowanym Xcode..
Wiedza zdobyta w dwóch poprzednich lekcjach (Lekcja 0 i Lekcja 1).
Krok 1: Programowanie obiektowe
Zanim przejdziemy do omówienia wzorca MVC, przybliżymy sobie pojęcie programowania obiektowego. Aby zrozumieć, na czym polega idea programowania obiektowego musimy cofnąć się do pierwotnego sposobu programowania - programowania imperatywnego. W przypadku programowania imperatywnego program budujemy jako sekwencję instrukcji zmieniających jego stan. Kod źródłowy składa się zatem z poleceń zmieniających krok po kroku stan programu, aż do uzyskania oczekiwanego wyniku końcowego. Dla przykładu możemy napisać kod opisujący samochód:
var color: String
var model: String
color = "biały"
model = "Mercedes SLK"
println("Mój \(color) \(model)")
Mamy zatem program wykonujący krok po kroku zapisane instrukcje.
Programowanie obiektowe zakłada, iż program jest zbiorem obiektów, które komunikują się ze sobą za pomocą przesyłanych komunikatów, przy pomocy zrozumiałych dla siebie interfejsów. Programowanie obiektowe różni się od programowania imperatywnego gdzie dane i procedury nie są ze sobą bezpośrednio związane. Program zbudowany w języku obiektowym jest nadal sekwencją instrukcji, lecz instrukcje te wykonywane są przez poszczególne zdefiniowane wcześniej obiekty. Powtórzymy powyższy przykład tym razem stosując metodykę programowania obiektowego. Po pierwsze stworzymy obiekt reprezentujący samochód - będzie to klasa o nazwie Car zawierającą dwie właściwości String - color oraz model.
class Car {
var color: String?
var model: String?
}
Mając klasę Car wykonamy ten sam kod co poprzednio, tym razem obiektowo:
var myCar = Car()
myCar.color = "biały"
myCar.model = "Mercedes SLK"
println("Mój \(myCar.color!) \(myCar.model!)")
W następnej lekcji przyjrzymy się bliżej klasom i obiektom. Tym razem, jak wcześniej wspomniałem przejdźmy do omówienia modelu MVC.
Krok 2: Model-View-Controller
Model-View-Controller (pol. Model-Widok-Kontroler) jest to wzorzec architektoniczny służący do organizowania struktury aplikacji posiadających graficzne interfejsy, zakładający podział aplikacji na trzy główne części:
- Model – jest zestawem klas odpowiadających za reprezentację danych.
- Widok – opisuje, jak wyświetlić pewną część modelu w ramach interfejsu użytkownika.
- Kontroler – przyjmuje dane wejściowe od użytkownika i reaguje na jego poczynania, odpowiedzialny jest za logikę aplikacji oraz za komunikację pomiędzy modelem a widokiem.
Posługując się przykładami powyżej zbudujemy aplikacje wyświetlającą napis na ekranie jak w pierwszej lekcji. Widok zawierał będzie pojedynczą etykietę Label. Kontroler odpowiedzialny będzie za wyświetlanie tekstu.
Model
Modelem w naszej aplikacji zostanie klasa Car. Aby utworzyć klasę z górnego menu wybieramy File > New > File... W sekcji iOS po lewej stronie okna dialogowego, wybierzmy Source. W głównej części okna zaznaczamy Swift File. Klikamy na przycisk Next. W następnym oknie dialogowym, które pojawi się na ekranie, nadajemy nazwę "Car.swift". W utworzonym pliku wpiszemy:
class Car {
var color: String?
var model: String?
}
W ten sposób stworzyliśmy model naszej aplikacji.
View
Widok tworzymy analogicznie do widoku tworzonego w naszym pierwszym programie na iOS opisanym w lekcji 0.
Controller
Nasz kontroler zawarty został w pliku ViewController.swift, a dokładniej w klasie ViewController
. W tym przypadku wykorzystamy funkcję viewDidLoad()
odpowiedzialną za instrukcje wykonywane po wczytaniu widoku. Przedtem stworzymy jednak ujście IBOutlet pozwalające na odwołanie się do utworzonej w widoku etykiety Label. Jak stworzyć IBOutlet nauczyliśmy się w lekcji 1. Po utworzeniu ujścia dla etykiety o nazwie label w funkcji viewDidLoad() wpiszemy poniższy kod.
var myCar = Car()
myCar.color = "biały"
myCar.model = "Mercedes SLK"
label.text = "Mój \(myCar.color!) \(myCar.model!)"
Za pomocą kodu tworzymy nowy obiekt myCar
będący odzwierciedleniem klasy Car. Póżniej nadajmy naszemu autu właściwości, tj. nazwę modelu model
i kolor color
. Ostatnim zapisem zmieniamy teks wpisany w etykiecie label
. Całość kodu wyglądać będzie następująco:
class ViewController: UIViewController {
@IBOutlet var label: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
var myCar = Car()
myCar.color = "biały"
myCar.model = "Mercedes SLK"
label.text = "Mój \(myCar.color!) \(myCar.model!)"
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
Wzorzec MVC dla utworzonej aplikacji prezentować się będzie mniej więcej tak:
Podsumowanie
W tej krótkiej lekcji poznaliśmy kluczowy do pisania programów w Swift paradygmat programowania, jakim jest programowanie obiektowe oraz omówiliśmy wzorzec MVC. W kolejnej lekcji przyjrzymy się bliżej klasom i obiektom. Kolejna lekcja już za około dwa tygodnie.