Projekt końcowy — kompletna aplikacja MAUI i zadanie kontrolne

Po co się tego uczymy?

Czas połączyć wszystko, czego nauczyłeś się w całym dziale, w jeden spójny projekt — dokładnie w takiej formie, w jakiej zadania pojawiają się na egzaminie zawodowym INF.04. To najlepszy sposób sprawdzenia, czy potrafisz samodzielnie zaprojektować i zbudować kompletną aplikację mobilną od zera, bez podpowiedzi krok po kroku. Lekcja zawiera też krótkie zadanie kontrolne z pytaniami powtórkowymi z wcześniejszej części działu (layouty, kontrolki, zdarzenia).

Teoria

Zaprojektujemy aplikację "Moje Zadania" — menedżer zadań do zrobienia, łączący WSZYSTKIE kluczowe mechanizmy poznane w tym dziale. Wymagania funkcjonalne:

Lista zadań wyświetlana w CollectionView (nazwa, termin wykonania, status: do zrobienia/wykonane), z możliwością odznaczenia jako wykonane przez kliknięcie (technika BindingContext z lekcji o listach danych);
Dodawanie nowego zadania przez osobną stronę formularza (nawigacja PushAsync/PopAsync z lekcji o nawigacji) z pełną walidacją (nazwa niepusta, termin nie z przeszłości — klasa WalidatorZadania zwracająca krotkę (bool ok, List<string> bledy, Zadanie? model), jak w lekcji o modelach i walidacji);
Trwałe przechowywanie zadań w bazie SQLite (lekcje 17-18), żeby dane przetrwały zamknięcie aplikacji;
Ustawienia użytkownika zapisane przez Preferences (np. domyślne sortowanie listy: po terminie czy po nazwie; czy pokazywać wykonane zadania);
Oddzielenie logiki od UI — cała komunikacja z bazą w osobnej klasie ZadaniaDatabase, walidacja w osobnej klasie, code-behind stron jako cienka warstwa "kleju" (lekcja o MVVM).

Zalecana struktura projektu, łącząca wszystkie zasady poznane w tym dziale:

MojeZadaniaApp/
├── Modele/
│   └── Zadanie.cs
├── Logika/
│   └── WalidatorZadania.cs
├── Data/
│   └── ZadaniaDatabase.cs
├── App.xaml / App.xaml.cs         (inicjalizacja bazy, App.Database)
├── MainPage.xaml / .xaml.cs       (lista zadań, CollectionView)
├── DodajZadaniePage.xaml / .xaml.cs (formularz z walidacją)
└── UstawieniaPage.xaml / .xaml.cs  (Preferences)

Podejdź do tego zadania tak, jak podszedłbyś do prawdziwego zadania egzaminacyjnego: najpierw narysuj na kartce układ każdego ekranu (który layout gdzie, jaka nawigacja między stronami), potem zaprojektuj model danych i metody walidatora, dopiero potem zacznij pisać kod — dokładnie w tej kolejności, jakiej uczy dział "Programowanie konsolowe" o projektowaniu oprogramowania (analiza wymagań → projekt → implementacja).

Zadanie kontrolne — pytania powtórkowe. Zanim przejdziesz do projektu, sprawdź swoją wiedzę z wcześniejszej części działu (layouty, kontrolki, zdarzenia) w sekcji "Ćwiczenie samodzielne" poniżej — to typ pytań teoretyczno-praktycznych, jaki pojawia się w części pisemnej egzaminu INF.04.

Schemat

MainPage.xaml (lista zadań)                DodajZadaniePage.xaml (formularz)
┌────────────────────────────┐              ┌──────────────────────────┐
│ CollectionView              │  Push/PopAsync│ Entry (nazwa)             │
│  - klik = odznacz wykonane   │◄────────────►│ DatePicker (termin)       │
│  - Button "Dodaj zadanie"    │              │ WalidatorZadania.Sprawdz()│
│  - Button "Ustawienia"       │              │ Button "Zapisz"           │
└──────────────┬──────────────┘              └──────────────────────────┘
               │                                          │
               ▼                                          ▼
      ZadaniaDatabase (Data/)  ◄──────────────  App.Database.ZapiszZadanieAsync(model)
      GetZadaniaAsync / ZapiszZadanieAsync /
      AktualizujZadanieAsync / UsunZadanieAsync
               │
               ▼
        zadania.db3 (FileSystem.AppDataDirectory)

UstawieniaPage.xaml ──► Preferences.Default.Set/Get (sortowanie, pokazuj wykonane)

Przykład z życia

Tego typu aplikacja to niemal dokładnie to, co mogłoby być prawdziwym zadaniem na egzaminie zawodowym INF.04 — prosty, samodzielny system do zarządzania własnymi zadaniami, łączący formularz, listę, bazę danych i ustawienia w jedną spójną, kompletną aplikację mobilną, analogicznie do milionów podobnych aplikacji "to-do" dostępnych w sklepach z aplikacjami.

Ćwiczenie samodzielne

Zadanie kontrolne — 7 pytań powtórkowych (odpowiedz pisemnie, bez uruchamiania Visual Studio, dokładnie jak w części pisemnej egzaminu):

W aplikacji mobilnej chcesz umieścić pola tekstowe jedno pod drugim, a pod nimi przyciski ułożone obok siebie w jednym wierszu. Jakich layoutów użyjesz i jak połączysz je w XAML, aby uzyskać taki efekt? (2 pkt)
Użytkownik ma wprowadzić dane w kilku polach tekstowych, ale ekran telefonu jest zbyt mały, by wszystko się zmieściło. Jakiego elementu MAUI użyjesz, by umożliwić przewijanie zawartości strony? Zapisz fragment kodu XAML. (2 pkt)
W aplikacji mobilnej chcesz wyświetlić pole do wpisania tekstu z podpowiedzią (np. "Wpisz swój e-mail"). Jaką kontrolkę zastosujesz i jak ustawić w niej podpowiedź (placeholder)? Zapisz przykład w XAML. (1 pkt)
W aplikacji mobilnej chcesz, aby po kliknięciu przycisku pojawił się komunikat (Alert) z informacją dla użytkownika. Jak to można zrealizować w kodzie C# w pliku MainPage.xaml.cs? (2 pkt)
W aplikacji mobilnej chcesz umożliwić użytkownikowi przełączanie między dwoma stanami (np. "Tryb ciemny" - włączony/wyłączony). Jakiej kontrolki użyjesz? Zapisz przykład w XAML i wskaż, jaka właściwość określa jej stan. (2 pkt)
Wyjaśnij, czym różni się ContentPage, FlyoutPage i TabbedPage w aplikacjach mobilnych MAUI. Podaj przykład zastosowania każdej z nich. (1 pkt)
W aplikacji .NET MAUI chcesz, aby po kliknięciu przycisku uruchomiła się metoda w pliku MainPage.xaml.cs. Jak połączyć przycisk z metodą i jak powinna wyglądać taka metoda? (2 pkt)

Maksymalna liczba punktów: 12. Sprawdź swoje odpowiedzi z lekcjami o layoutach (4-5), kontrolkach (6-8) i obsłudze zdarzeń (9-10) z wcześniejszej części tego działu.

Następnie: zanim napiszesz jakikolwiek kod projektu końcowego, narysuj na kartce: (1) jak mają wyglądać wszystkie trzy ekrany aplikacji "Moje Zadania", (2) jakie pola ma mieć klasa Zadanie, (3) jakie metody potrzebuje klasa bazy danych i klasa walidatora. Dopiero potem zacznij implementację.

Zadania do pracy własnej

Zaimplementuj sam model Zadanie (Nazwa, Termin, Wykonane) i podstawowy interfejs z CollectionView wyświetlającym listę na sztywno wpisanych (przykładowych) zadań w pamięci — bez jeszcze bazy danych ani formularza dodawania.
Dodaj do powyższego pełną stronę formularza dodawania nowego zadania z walidacją (osobna klasa WalidatorZadania sprawdzająca niepustość nazwy i termin nie wcześniejszy niż dzisiaj) oraz możliwość odznaczania zadań jako wykonane kliknięciem na liście — na razie bez trwałego zapisu (dane tylko w pamięci, znikają po zamknięciu aplikacji).
Zaimplementuj CAŁY projekt opisany w teorii: pełny CRUD na bazie SQLite (dodawanie, wyświetlanie, odznaczanie jako wykonane, usuwanie), walidację formularza, stronę ustawień z Preferences (przełącznik "pokazuj wykonane zadania" i wybór sortowania: po terminie albo alfabetycznie po nazwie), oraz zachowanie podziału na foldery Modele/Logika/Data z jasno rozdzielonymi odpowiedzialnościami. Na koniec przygotuj projekt do publikacji zgodnie z lekcją 26 (poprawny ApplicationId, numer wersji, build w trybie Release).

Typowe błędy

Rozpoczynanie od razu od kodu, bez planowania struktury — dla projektu tej wielkości (kilka stron i klas współpracujących ze sobą) brak planu prawie zawsze prowadzi do konieczności przepisywania sporej części kodu w połowie pracy.

Umieszczanie WSZYSTKIEGO w code-behind głównej strony — jeśli MainPage.xaml.cs ma kilkaset linijek z logiką bazy danych, walidacją i obsługą UI wymieszanymi razem, to znak, że zasada oddzielenia logiki od UI z lekcji 13 nie została zastosowana.

Pomijanie walidacji "bo i tak wiem, co wpiszę podczas testowania" — egzamin i prawdziwi użytkownicy zawsze znajdą sposób, żeby wpisać coś nieoczekiwanego (pusta nazwa, data z przeszłości) — aplikacja bez walidacji zachowa się nieprzewidywalnie przy pierwszym takim przypadku.

Zapominanie o odświeżeniu listy po operacji na bazie danych — dokładnie ten sam błąd, co w lekcjach o SQLite: InsertAsync/UpdateAsync/DeleteAsync zmieniają bazę, ale NIE odświeżają automatycznie ItemsSource na ekranie.

Nawiązanie do egzaminu zawodowego

Ten projekt końcowy łączy WSZYSTKIE efekty INF.04.6 (środowisko, elementy UI, formularze, listy, baza danych, przechowywanie preferencji) z elementami INF.04.3 (projektowanie, struktury danych) i praktyczną wiedzą SQL z INF.03.4 — to najbardziej kompletne podsumowanie działu "Aplikacje mobilne (.NET MAUI)" i najlepsze przygotowanie do podobnych zadań na prawdziwym egzaminie zawodowym. Gratulacje z ukończenia całego działu — od pierwszego "Hello World" w XAML, przez layouty, kontrolki, zdarzenia i nawigację, aż po pełny projekt z bazą danych gotowy do publikacji w sklepie.