Piszemy aplikację Tyflopodcastu dla systemu iOS! Vol. 1

A, dawno nic nie programowaliśmy razem a, jako że tak czy tak mam do zrobienia żeczony projekt, postanowiłem, że w tym wpisie, albo serii wpisów (to zależy od długości tego artykułu) poprowadzę Was przez proces pisania nowej aplikacji od zera.

Zanim zaczniemy bazgrolić.

Programowanie to nie tylko pisanie kodu, ale też design interfejsu, testowanie, poprawne nazywanie opcji, wymyślanie układów kart, kupienie sobie normalnej klawiatury, czy inne takie mało ciekawe rzeczy. Cały proces wypadałoby zacząć od podstawowych założeń, czyli na przykład „Co aplikacja ma robić?”

Aplikacja Tyflocentrum ma za zadanie:

• Wyświetlać katalog wszystkich audycji z serwisu Tyflopodcast
• • Pozwalać użytkownikowi na filtrowanie audycji wedłóg ustalonych kategorii
• Pozwalać użytkownikowi na przeszukiwanie zasobów serwisu wedłóg słów kluczowych
• Pozwalać użytkownikowi pobierać audycje na urządzenie, a także zapisywać je w swojej bibliotece
• Pozwalać użytkownikowi na przeglądanie zasobów serwisu Tyflo Świat

Jak na razie to byłoby na tyle. Jeżeli uda się zrealizować te założenia, to wówczas będzie można myśleć o powolnym rozbudowywaniu aplikacji o nowe funkcje.

Następna rzecz to ustalenie sobie jakiegoś układu interfejsu.

Piszemy aplikację iOS więc pasowałoby, aby interfejs był spójny z resztą tego środowiska, tak więc mój koncept wygląda tak:

• Nagłówek z nazwą aktualnej kategorii, zakładki czy konkretnej audycji
• Treść charakterystyczna dla kontekstu
• Kontrolki pozwalające na manipulację treścią charakterystyczną dla kontekstu
• Pasek kart z następującymi elementami
  
  • Nowości: zbiór najnowszych zasobów
  • Podcasty: wyświetlenie podcastów wedłóg kategorii
  • Artykuły: Wyświetlenie artykułów wedłóg ich kategorii
  • Szukaj: otwarcie wyszukiwarki zasobów.
  • Więcej: na zapas

Tak to się przedstawia. Pewnie jak już poczuję interfejs swojego “dzieła” pod palcami to lekko coś tutaj pozmieniam ale na razie niech będzie tak.

Ostatnia rzecz przed rozpoczęciem właściwego pisania dotyczy wyboru środowiska pracy. Jako, że piszemy aplikację dla systemów Apple to najlepszym (moim zdaniem) wyborem będzie język Swift i środowisko Swift UI.

Jak ktoś nie słyszał to Swift jest następcą stareńkiego już języka Objective C, który to z kolei jest stworzonym przez firmę NextStep, w pełni kompatybilnym ze standardem C językiem programowania używanym do pisania aplikacji dla systemu MacOS, czy później iOS.. Natomiast Swift UI jest następcą stareńkich już frameworków UI Kit i App Kit (odpowiednio iOS i MacOS) służących z grubsza do tworzenia interfejsów graficznych. Nie oznacza to oczywiście, że teraz już wogóle nie korzysta się z App Kit czy UIKit, ale mamnadzieję że w tym artykule nie będziemy musieli testować tego na własnej skórze.

Jeżeli chcecie za mną podąrzać i uruchamiać mój kod, musicie oczywiście zainstalować aplikację XCode ze sklepu App store. Po tym przydługim wstępie przejdźmy w reszcie do roboty.

Konfiguracja XCode

Tę część można spokojnie pominąć, jeżelikorzystaliście już wcześniej ze środowiskaXCode. Jeżeli nie, to ten paragrafpozwoli Wam rozpocząć pracę z wmiarę wygodnymi ustawieniami. Środowisko programistyczne jest jednakbardzoprywatnym programem,więc prędzej czy później zaczniecie je sobie dostosowywać już wedłóg własnych preferencji, no ale każdy gdzieś zaczynał, no nie? 😉

Po otwarciu Xcode ukaże się nam swego rodzaju launcher gdzie mamy między innymi listę ostatnio uruchamianych projektów, przycisk służący do stworzenia nowego projektu, przycisk pozwalający nam sklonować projekt z usługi kontroli wersji czy w reszcie pole wyboru pozwalające na wyłączenie pokazywania tego launchera przy starcie XCode. Osobiście polecam go wyłączyć, gdyż wszystkie te operacje możemy w razie potrzeby wywołać z klawiatury, a to okno wymaga od nas kilku kliknięć, by przejść dalej co skutecznie spowalnia naszą pracę.

Jak już odznaczymy pole wyboru pokazywania okna startowego przy starcie aplikacji, polecam przjeść do preferencji aplikacji XCode. Jak w przypadku większości programów w systemie MacOS, wystarczy użyć skrótu klawiszowego COMMAND+,

Zakładka “General” zawiera podstawowe opcje, takie jak wygląd aplikacji. Tutaj nie potrzebujemy niczego zmieniać, no może poza opcjami “Mac test parallelization” i “Simulator test parallelization”, jednakże znaczenie tych opcji wykracza poza założenia tego artykułu.

Dalsza zakładka (Accounts) jest już sporo ważniejsza gdyż to tutaj możemy dodać nasze konto deweloperskie Apple. Nawet jeżeli nie jesteśmmy zarejestrowanymi deweloperami, warto sobie to Apple ID dodać, bo będziemy mogli podpisywać aplikacje certyfikatem generycznym. Jeżeli jesteśmy zarejestrowanym deweloperem, to na liście obok w tabelce pojawią się wszystkie nasze zespoły. W moim wypadku jest to tylko jeden element o nazwie “Arkadiusz Swietnicki”. To pod tą właśnie nazwą będą publikowane moje aplikacje w sklepie App STore. Ja polecam sobie dodać jeszcze konto Github. Nawet, jeżeli nie planujemy udostępniać kodu naszych aplikacji całemu światu, to przecież nikt nie zabroni nam utworzyć sobie prywatnego repozytorium. Jest to o tyle fajne, że w razie awarii dysku czy innych nieprzewidzianych wypadków, nasze dane są bezpieczne na serwerach.

Dalej mamy kartę “Behaviors” gdzie to możemy ustawiać, co program ma robić gdy wystąpi konkretne zdarzenie. Tutaj polecam w drzewku wybrać gałąź “Build” i włączyć ogłaszanie mową dla zdarzeń “Starts”, “Succeeds”, “Fails”. Wiem, że opcja “generates new issues” może być kusząca ale zakładając, że nie piszemy olbrzymich, wielomodułowych aplikacji dostaniemy tylko niepotrzebny spam, bo “Generates new issues” wystąpi razem z “Fails”. Jeżeli zainteresowałem was programowaniem i po przeczytaniu tego artykułu wiecie, że to jest to to jeszcze w gałęzi “Playgrounds” polecam włączyć mowę dla zdarzenia “Generates output”.

Zakładki “Navigation” i “Themes” możemyna razie pominąć. W zakładce “TextEditing” w kategorii “Display” polecam wyłączyć opcję “Wrap lines to editor width”. Ustawienie to powoduje zawijanie wierszy, ale jako że Swift i Swift UI słyną z długich linii to to zawijanie przynajmniej mnie wprowadza w błąd.

W kategorii “Editing” ja osobiście niczego nie zmieniam, ale wiem, że wiele osób frustrują automatyczne podpowiedzi czy wstawianie nawiasów.

Teraz najważniejsza rzecz jeżeli chodzi o użytkowników VoiceOvera, czyli kategoria “Indentation”. Bardzo serdecznie polecam zmienić opcję “Prefer ident using” ze “Spaces” na “Tabs”. Sprawi to,że zamiast czterech spacji per wcięcie będziemy mięli tylko jeden znak tabulacji. Zalety tegorozwiązania sąoczywiste: strzałkowanie przez linię (w programowaniu robi się to bardzo często) będzie odbywalo się dużo szybciej. Pozostałe opcje w tej kategorii to już tylko i wyłącznie osobiste preferencje. Jeżeli jesteście nowicjuszami to jeszcze nie wiecie, co będzie dla Was najlepsze, a jeżeli wiecie co i jakto polecam tutaj sobie poustawiać.

Dalej mamy między innymi zakładkę “Keybinds”. Ja nie jestem fanem remapowania komend klawiaturowych, więc niestety nie powiem Wam, co i jak się tutaj obsługuje. Dalsze zakładki nie dotyczą już naszego projektu w żaden sposób, więc pozwolę sobie je pominąć.

Tworzenie i konfiguracja projektu

Gdy środowisko Xcode jest już z grubsza gotowe do pracy, możemy przejść w reszcie do konfiguracji naszego projektu. Aby utworzyć nowy projekt, należy nacisnąć skrót CMD+SHIFT+N, względnie przejść do menu File > New > Project, ale to sporo więcej klikania. Gdy ukaże się nam okno tworzenia nowej aplikacji w pierwszym kroku musimy ustalić, co takiego chcemy pisać. Tak więc najpierw musimy wybrać platformę, dla której chcemy tworzyć. Wiem, że opcja :Multiplatform” może być kusząca, niemniej jednak na razie prosiłbym o zaznaczenie opcji “iOS”.

Po kliknięciu w “Next” ukaże się nam okno, w którym to musimy wprowadzić kilka informacji. Poniżej opiszę wszystkie znajdujące się w nim pola:

• Product name: Jest to nazwa naszej aplikacji. To właśnie tą nazwą nasz program będzie przedstawiał się w systemie, czy sklepie AppStore.
• Team: Tutaj wybieramy, do jakiego zespołu przypisany jest nasz projekt. Wpływa to M.IN na to, jakie certyfikaty będą używane dla podpisów.
• Bundle identifier: unikalny identyfikator naszej aplikacji w formacie Reverse DNS. Na przykład dla hipotetycznego oficjalnego klienta Eltena, mogłoby to wyglądać tak: link.elten.eltenify. W moim przypadku jest com.nunosoft.tyflocentrum.
• Interface: jakiego frameworka do interfejsu chcemy używać? Jak wspomniałem wyżej, my używamy Swift UI, także zostawiamy to pole bez zmian.
• Language: Swift czy może Objective C? Przez to, że wybraliśmy Swift Ui jako framework, nie ma możliwości używania Objective C jako głównego języka, nie przeszkadza to jednak w pisaniu w nim fragmentów naszej aplikacji.
• Use Core Data: czy chcemy używać frameworka do baz danych? Chcemy, ale nie chcemy, gdyż nasze potrzeby będą… specyficzne? W każdym razie pole zostaje odznaczone
• Host in cloud kit: Czy chcemy korzystać z Applowskich serwerów w naszej aplikacji. Zostawiamy, jak jest bo synchronizację z iCloud rozwiążemy inaczej, jeżeli będzie mi się chciało :D.
• include tests: Odznaczamy. Testy jednostkowe są fajne, ciekawe i potrzebne ale nie, jak robi je za nas IDE.

Klikamy w “Next” i ukazuje nam się okno zapisu plików. Tutaj wszystko, no może poza ścieżką zapisu jest OK. Ja swój projekt zapisałem na dysku iCloud, Wam też polecam wybrać jakąś dogodniejszą niż biurko lokalizację.

Po kliknięciu w “Create” i odczekaniu chwilki wylądujemy w naszym nowo stworzonym mikroświecie. Powitać! Jeżeli macie Maca z procesorem M1 lub nowszym, polecam wcisnąć sobie skrót CMD+R i odczekać jakiś czas. CMD+R uruchamia naszą aplikację, i chociaż na razie jest to pusty szablon, to przynajmniej mi zawsze dawało to motywację do działania :).

nasz projekt jest już w miarę gotowy do pisania. Dlaczego w miarę? A no dlatego, że jest kilka rzeczy, które warto ustawić już na początku. Pierwszą z nich jest minimalna wersja systemu iOS na jakiej będzie działał nasz program. Domyślnie XCode ustawia najnowszą możliwą wersję systemu (w moim przypadku iOS 16.1). Jest to spowodowane faktem, że wtedy mamy możliwość nieograniczonego korzystania ze wszystkich nowych funkcji API. Warto jednak pamiętać o tym, że jest całkiem sporo osób które nie mogą/nie chcą aktualizowac systemu iOS do najnowszej wersji. Jeżeli nie mamy jakichś konkretnych powodów, dla których akurat potrzebujemy korzystać z SDK systemu iOS 16, możemy spokojnie zejść do starszej wersji. Dzięki temu automatycznie poszerzymy potencjalną bazę użytkowników pozwalając im korzystać z naszej aplikacji. Tyflocentrum mogę zdegradować do iOS 15, gdyż to wtedy programiści otrzymali możliwość tworzenia własnych pokręteł do voiceOvera (źródło tutaj).

Przechodząc od teorii do praktyki, należy wcisnąć skrót CMD+1 aby przesunąć kursor do TZW. nawigatora, który to jest zbiorem wszystkich plików i grup wchodzących w skład naszego projektu.

Następnie przechodzimy na samą górę drzewa do samego projektu. Program XCode automatycznie zaktualizuje prawy widok o nowe informacje, w tym wypadku będzie to okno właściwości projektu. Tam przechodzimy do zakładki “General”, potem klikamy w “Minimum Deployments”, “iOS” i zmieniamy “16.X” na “15.X”, gdzie X oznacza numer podwersji na przykład 15.6.

Zmian nie trzeba w żaden sposób zapisywać. Po opuszczeniu zakładki “Deployment targets” zostaną one zachowane automatycznie..

Dalszy krok jest już sporo ciekawszy, gdyż będziemy tworzyli model danych. “A co to jest ten model danych?” – możecie zapytać. Najprościej mówiąc, jest to szablon, który informuje komputer o tym, jakie dane, w jakiej kolejności, jakiego rozmiaru i rodzaju chcemy przechowywać. Jak wspomniałem przy okazji omawiania podstawowych założeń projektu jedną z funkcji aplikacji ma być możliwość zapisywania zasobów do biblioteki, w celu ich późniejszego pobrania, odsłuchania i tak dalej. Jak to zwykle w programowaniu bywa istnieje wiele sposobów na osiągnięcie tego celu. Tym bardziej popularnym jest użycie mechanizmu UserDefaults, ale od razu mówię że to jest na prawdę zły pomysł. Tak, może i jest prostrzy, ale UserDefaults nie służy do zapisywania danych takich, jak zapisane artykuły, a jak sama nazwa wskazuje służy raczej do zapisu preferencji użytkownika czy innych, prostych danych. Dzieje się tak dlatego, że system ładuje wszystko, co zapisaliśmy w UserDefaults zaraz po uruchomieniu. A jak wiadomo, im więcej danych, tym dłuższy loading. CoreData nie cierpi na tę przypadłość, gdyż jest to baza danych, więc służy do właśnie takich rzeczy.

Aby utworzyć taki model należy najpierw wcisnąć skrót CMD+N, względnie przejść do menu “File” > “New” > “File”. Następnie, omijając zakładki “Platform” i “Template filter” w polu “Template chooser” wybrać “CoreData”, a następnie “Data model”.

Ja model nazywam dokładnie tak, jak projekt czyli w tym przypadku “Tyflocentrum”.

Po utworzeniu modelu XCode automatycznie załaduje go do prawego widoku. Idziemy tam i klikamy “New entity”. I znowu pora na teorię: Modele składają się z podmiotów (entities), a podmioty mają atrybuty (attributes). Podmioty to obiekty, na przykład “Książka”, “Człowiek”, “Kwiotek”, a atrybuty to na przykład “imię”, “wiek”, “zawód”. I tak nasz podmiot musi otrzymać nazwę “LocalResource”. Wypełniamy to zatem i klikamy w “New attribute”. Poniżej opiszę atrybuty wraz z ich typami i krótkim wyjaśnieniem co i jak.

CDN. Chcecie dalej? Bo appka już prawie gotowa.