Laboratorium 1 - Wprowadzenie do Xcode i SwiftUI

Zasady oceniania

Podczas każdego z laboratoriów przyrostowo realizowana będzie aplikacja mobilna na systemy firmy Apple. Kod źródłowy aplikacji ma być umieszczany w przygotowanych wcześniej repozytoriach katedralnej instancji GitLab. Na wykonanie każdego z laboratoriów przewidziany jest czas 90 minut w trakcie zajęć, a następnie dodatkowe 7 dni na umieszczenie rozwiązania w repozytorium. Każdy z etapów powinien być oznaczony tagiem w repozytorium.

Uwaga

W przypadku gdy tag zostanie utworzony później niż na dzień przed następnymi zajęciami ocena za laboratorium jest zerowana.

Każde z laboratoriów stanowi 20% oceny z tej części przedmiotu, ocena końcowa jest średnią z części iOS oraz Android. Obecność na laboratoriach jest obowiązkowa.

Cel laboratorium

Podczas cyklu 5 spotkań będziemy tworzyć prostą aplikację z opisami wartych do odwiedzenia miejsc. Na pierwszym laboratorium zapoznamy się ze środowiskiem programistycznym Xcode, składnią języka Swift oraz podstawami frameworka SwiftUI. W ciągu kolejnych zajęć będziemy rozwijać aplikację, dodając nowe funkcjonalności i ucząc się kolejnych aspektów programowania na urządzenia Apple.

Przygotowanie

Utwórz projekt Xcode, pamiętając o:

• wybraniu wyłącznie iOS jako platformę docelową,
• wybraniu odpowiedniej nazwy produktu w konwencji camelCase,
• oraz odpowiedniego identyfikatora organizacji w odwróconym zapisie domenowym.

Nie wybieraj żadnego mechanizmu przechowywania danych ani testów jednostkowych.

W katedralnym systemie GitLab znajdziesz swoją osobistą grupę do tworzenia repozytoriów na wyniki wykonania ćwiczeń laboratoryjnych.

Utwórz w tej grupie projekt o ścieżce MyFavPlaces. Kod aplikacji powinien znaleźć się w repozytorium tego projektu. W głównym katalogu repozytorium powinien znaleźć się plik o rozszerzeniu .xcodeproj¹, a pozostałe pliki powinny być zorganizowane w sposób przyjęty dla projektów Xcode.

Uwaga

Wszystkie czynności związane z systemem kontroli wersji Git możesz wykonać z poziomu Xcode. Nie jest to oczywiście jedyny sposób, ale tak będzie najszybciej i najłatwiej. W tym celu wykonaj poniższe kroki.

1. Na komputerach w laboratorium wygodniej będzie skorzystać z dostępu HTTPS niż SSH, potrzebny więc będzie token dostępowy. W panelu Preferences swojego konta GitLab wybierz zakładkę Access Tokens i utwórz nowy token posiadający co najmniej uprawnienia:

   • api, aby mógł tworzyć repozytoria,
   • read_repository,
   • oraz write_repository.

2. Skopiuj token do schowka i ewentualnie zapisz. Jest on wyświetlany tylko raz, po utworzeniu!

3. Wejdź do preferencji Xcode i w zakładce Accounts utwórz nowe konto typu GitLab self-hosted:

   

4. W swoim projekcie, wejdź do drugiej od lewej zakładki nawigatorów (Source Control navigator), w niej wybierz zakładkę Repositories i w sekcji Remotes wybierz New (...) remote.... Pamiętaj aby:

   • jako właściciela (Owner) wybrać utworzoną dla Ciebie grupę (np. PUM 2025 – Jan Kowalski),
   • projekt ustawić jako prywatny (Private).

Zadania

To laboratorium oparte jest o sekcję Creating and combining views z tutoriala Introducing SwiftUI od Apple.

Stosy pionowe i poziome

W pliku ContentView.swift – pliku głównego widoku aplikacji – rozwiń kod o następujące elementy:

• zmień wyrównanie tekstu w istniejącym już kontenerze pionowym (VStack) do lewej strony,
• zmień styl tekstu „Hello, world!” na tytuł,
• dodaj kontener poziomy (HStack) poniżej istniejącego tekstu, w którym umieścisz dwa teksty: „Foo” i „bar”,
• poziomą linią wydziel nową sekcję na opis składający się z podtytułu (nagłówka 2. poziomu) i akapitu tekstu.

W oknie podglądu (Canvas, ⌥⌘⏎) powinieneś zobaczyć efekt podobny do poniższego:

Uzupełnij kod, by stylistycznie przybliżyć go do efektu końcowego, przedstawionego na początku tej instrukcji.

Awatar – logotyp miejsca

W katalogu projektu utwórz nowy plik z szablonu SwiftUI View o nazwie stosownej dla jego przeznaczenia, np. CircleImage.swift. Widok ten posłuży jako komponent wyświetlający okrągły awatar (logotyp) miejsca. W tym celu:

• dodaj do katalogu zasobów (Assets) nowy zbiór obrazów (Image Set), możesz w nim wykorzystać dowolny obrazek (np. wykorzystany przeze mnie logotyp Klubu Studio),
• w nowym widoku umieść obrazek z zasobów, korzystając z inicjalizatora Image("nazwa_zasobu"),
• zmień wysokość obrazka do 260 punktów,
• przytnij obrazek do kształtu koła,
• dodaj biały obrys,
• dodaj cień.

Zadbaj o to, by grafika przeskalowała się proporcjonalnie, dopasowała się do swojego rodzica, i nie była zniekształcona. W oknie podglądu powinieneś zobaczyć efekt podobny do poniższego:

Zdjęcie w tle

Utwórz kolejny widok SwiftUI o nazwie stosownej dla jego przeznaczenia, np. BackgroundImage.swift. Widok ten posłuży do wyświetlania zdjęcia w tle. W tym celu:

• dodaj do katalogu zasobów (Assets) nowy zbiór obrazów (Image Set), możesz w nim wykorzystać dowolne zdjęcie (np. wykorzystane przeze mnie zdjęcie Klubu Studio),
• w nowym widoku umieść obrazek z zasobów, korzystając z inicjalizatora Image("nazwa_zasobu"),
• zmień szerokość obrazka na szerokość rodzica.

Zadbaj o to, by grafika przeskalowała się proporcjonalnie, wypełniła swojego rodzica, i nie była zniekształcona. W oknie podglądu powinieneś zobaczyć zdjęcie wypełniające cały ekran.

Wskazówka

By pobrać szerokość rodzica, możesz skorzystać z widoku pomocniczego GeometryReader, który przekazuje do swojego potomka informacje o dostępnej przestrzeni:

GeometryReader { geometry in
   Image("nazwa_zasobu")
      .resizable()
      .scaledToFill()
      .frame(width: geometry.size.width)
}

Kompozycja widoków

W głównym widoku aplikacji umieść nowo utworzone elementy: zdjęcie w tle, z wysokością ustawioną na 300 punktów, oraz okrągły awatar, przesunięty w górę o 130 punktów (połowę jego wysokości). Umieść je, razem z istniejącym już kontenerem VStack, w kontenerze umożliwiającym przewijanie zawartości w pionie. Edytuj teksty w aplikacji, by opisywały wybrane przez Ciebie miejsce. W oknie podglądu powinieneś zobaczyć efekt podobny do poniższego:

W górnej części ekranu został spory margines przeznaczony na pasek statusu systemu iOS (safe area). Nie powinno się umieszczać w nim treści aplikacji, natomiast jest to możliwe, a zdjęcie nie powinno wpływać na jego czytelność. Usuń margines, tak by zdjęcie wypełniało obszar poniżej paska statusu.

To również dobry moment na korektę zdjęcia w tle, jeżeli zostało ono zniekształcone. By nie przełączać się między plikami, generując kolejne przeładowania podglądu, możesz wyświetlić podgląd innego widoku, wywołując go w makrze #Preview.

Wyślij rozwiązanie

Rozwiązanie umieść w gałęzi main swojego repozytorium. Pamiętaj o wypchnięciu zmian na serwer! Zadanie powinno znaleźć się w repozytorium najpóźniej do kolejnych zajęć Twojej grupy. Do oceny będzie brany pod uwagę tag lab01 utworzony przed terminem kolejnych zajęć.

Footnotes

1. Tak naprawdę jest to katalog, jednak macOS czasami traktuje katalogi jako tzw. paczki, np. .app. ↩