Politechnika Wrocławska  -  Wydział Informatyki i Telekomunikacji  -  Inżynieria systemów informatycznych, studia II stopnia

 "Programowanie aplikacji mobilnych"
  INEU00220  LABORATORIUM    '2023/24 sem. ZIM         

Terminy: Poniedziałek 09:15-11:00  oraz  wtorek 15:15-16:55
Miejsce:
Lab. 2.3 / C16
Prowadzący:  
dr Marek Piasecki
Konsultacje:
 http://marek.piasecki.staff.iiar.pwr.wroc.pl/dydaktyka/ogloszenia 
ePortal:W04ITE-SM0220G # L # Programowanie aplikacji moblinych - Zajęcia laboratoryjne

Terminarz spotkań i oceny zadań:

Przykładowy - archiwalny grafik obecności i ocen (z poprzedniej edycji kursu):

Przykładowe zadania laboratoryjne (obowiązujące zadania będą podawane na eportalu):


Laboratorium (A0)  -  Konfiguracja środowiska Android Studio
Zapoznanie się ze środowiskiem programistycznym:
  1. Przeglądnij materiały pomocnicze - rozdziały:
    1) Installing Android Studio
    2) An Android Studio Tutorial
    3) Creating an Android Virtual Device (AVD) in Android Studio
    4) Using and Configuring the Android Studio AVD Emulator
    5) A Tour of the Android Studio User Interface
    6) Testing Android Studio Apps on a Physical Android Device
    podręcznika "Android Studio Giraffe Essentials – Kotlin Edition"
    z portalu Techotopia.
     
  2. Zapoznaj się z podrozdziałem (1.x) "Installing Additional Android SDK Packages"
     a następnie użyj SDK Manager aby sprawdzić/zainstalować/odinstalować odpowiednie Android SDK ( tzn. oprogramowanie platform, przykłady, narzędzia, dokumentacje, itp) dla wybranej wersji systemu Android (API level)
  3. Zapoznaj się z rozdziałami nr pokazującymi jak za pomocą Virtual Device Manager mozna utworzyć nową instancję emulatoratora dla dowolnej wersji API.
    Na przykład, dla tego API Level które zostało pobrane/skonfigurowane w zadaniu (b)
  4. Przetestuj proces tworzenia / kompilacji / uruchamiania przykładowej aplikacji wykorzystującej "Empty View Activity".
    Do testów, wykorzystaj urządzenie wirtualne (emulator) utworzone w zadaniu (c).
  5. Użyj narzędzia View > Tool Windows: LogCat, Device File Explorer, Emulator do obserwacji stanu emulatora (lub rzeczywistego urządzenia) oraz testowanej aplikacji.
  • Instalacja Android Studio dla systemów operacyjnych Windows, MacOSX i Linux


 
Laboratorium (A1)   -  Analiza cyklu życia Aktywności w aplikacji Android.
Pobierz z Internetu, rozpakuj i przetestuj w środowisku Android Studio przykładową  aplikację LifeCycle demo z  archiwum V. Matosa,
a następnie spróbuj wykonać własną wersję takiej aplikacji, która będzie sygnalizować zmiany wewnętrznego stanu Aktywności, poprzez wyświetlanie powiadomień za pomocą obiektów klasy Toast:.
      Toast.makeText(this, "onCreate", 1).show();
zaimplementuj w ten sposób działanie metod obsługujących wybrane podstawowe wydarzenia:  onCreate, onStart, onResume, onSaveInstanceState, onPause, onStop, onDestroy, onRestart.

Podpowiedź:
To zadanie będzie łatwiejsze gdy wykorzystasz opcję menu
    Code > Override Methods…      (skrót Ctrl+O)
dostępną w środowisku Android Studio.

Zaobserwuj i zanotuj sekwencje komunikatów Toast wyświetlanych po::
  1. Kliknięciu programowego przycisku EXIT (w oknie aplikacji)
  2. Kliknięciu sprzętowego przycisku BACK  (na telefonie)
  3. Kliknięciu sprzętowego przycisku HOME  (na telefonie)
  4. Kliknięciu przycisku połączenia telefonicznego (CALL - zielona słuchawka)
  5. Przytrzymaniu przycisku odłożenia słuchawki (HANG-UP -  czerwona słuchawka)
  6. Otrzymaniu tekstowej wiadomości SMS (z innego emulatora lub telefonu)
  7. Po otrzymaniu połączenia głosowego (z innego emulatora lub telefonu).
Za każdym razem wróć do tego samego podtsawowego stanu "running",
poprzez otwarcie okna z listą zainstalowanych aplikacji (launch pad),
i przywrócenie/uruchomienie aplikacji, klikając na jej ikonie.

Zaobserwowane sekwencje komunikatów opisz i skomentuj, w formie sprawozdania, w pliku o nazwie:  Laboratorium_1.txt  lub  Laboratorium_1.pdf

Materiały/slajdy pomocnicze:
       - Android Application's Life Cycle
Dla grup które nie miały wykładu o systemie Android:
        - Android "Hello World"
   
 
Laboratorium (A2)   -   Implementacja aplikacji wykonującej proste obliczenia
  1. Wzorując się na wskazówkach:
    - z zestawu slajdów Android Devlopment Introduction  (ze stron nr: 32-39)
    - lub przykładowego kalkulatora napiwku omówionego w podrozdziale nr 2.3.2
       z książki "Unlocking Android",
    napisz własny program "Kalkulatora/Przelicznika kursu walut". Jako punkt startowy można wykorzystać domyślny szablon  Empty Activity

  2. Wykorzystaj widok Android Monitor (ikona narzędzi w lewym dolnym rogu),
    lub narzędzie / perspektywę DDMS (Tools > Android > Android Device Monitor),
    oraz wydruki kontrolne wykonywane w kodzie Java za pomocą  poleceń:
    Log.i( "TAG", "Tekst komunikatu");
    do śledzenia działania programu i sygnalizowania błędów.
Inne materiały pomocnicze:

 
Laboratorium (A3)  -  ANDROID -  Ćwiczenia z projektowaniem "responsive" UI
Oprogramuj jednoekranową aplikację (single Activity app) demonstrującą wykorzystanie komponentów dziedziczących po klasie View (Layouts, Widgets) do skonstruowania interfejsu użytkownika, który będzie się dynamicznie dopasowywał do: wielkości (small, normal, large, ... itd), rozdzielczości (ldpi, mdpi, ... itd) i orientacji (port, land, square) wyświetlacza:
  1. Program demostrujący różne możliwości zmian koloru/rozmiaru/typu czcionki tekstów wyświetlanych w etykietach lub oknach edycyjnych, jako rezultat klikania na różnych przyciskach lub wyboru różnych opcji menu.

  2. Aplikacja standardowego kalkulatora arytmetycznego, z zestawem klawiszy numerycznych oraz klawiszy podstawowych operacji arytmentycznych (+,-,*,/).
Materiały pomocnicze:

 
Laboratorium (A4)  -  ANDROID -  aplikacje złożone z wielu okien/aktywności
Oprogramuj złożoną wielo-okienkową aplikację, demonstrującą wykorzystanie obiektów klasy Intent oraz metody startActivity(...) do uruchamiania własnych oraz wbudowanych aktywności systemu Android (takich jak: Contacts, PhoneDialer, WebBrowser, GoogleMap). Klikanie przycisków umieszczonych w głównym oknie/aktywności tego programu powinno powodować:   
  1. Wyświetlenie listy kontaktów zapisanych w telefonie (a w wersji zaawansowanej: wybór jednego z kontaktów).
  2. Napisanie wiadomości SMS, której treść oraz odbiorca (numer telefonu) będą wprowadzane za pomocą dwóch pól EditText.
  3. Wyświetlenie mapy (GoogleMap) dla miejsca, którego współrzędne geograficzne tzn. długość i szerokość geograficzna będą wprowadzane w polach EditText.
Przykładowe instrukcje takich wywołań startActivity można znależć w prezentacji Android Intents na stronach nr: 10-26.
  1. Ostatni przycisk powinien uruchamiać nową dodatkową aktywność, w całości napisaną przez studenta, za pomocą metody startActivityForResult(...).
    Aktywność ta będzie otrzymywać parametry z okna głównego (a po zakończeniu działania zwracać wynik) w obiekcie klasy Bundle.
Wykorzystanie obiektów klasy Bundle do przekazywania argumentów jest omówione w wyżej wymienionej prezentacji na stronach nr 44-48, a przykładowa aplikacja realizująca funkcjonalność sumowania dwóch otrzymanych liczb (Example 17), jest zaprezentowana na stronach od 49 do 60.  
Inne materiały pomocnicze:
Tutorial na temat Intencji oraz Aktywności w systemie Android (aut. Lars Vogel):
  -  Android Intents - Tutorial
Zmiany w systemie nadawania uprawnień (od API Level 23 - Android 6.0)
  - Requesting Permissions at Run Time


Laboratorium (A5)  -   Przesyłanie danych poprzez SMS/MMS (Telephony API)
Napisz aplikację "TelephonyDemo", która zademonstruje jak należy oprogramować następujące funkcjonalności:
  1. Odczyt podstawowych informacji o parametrach i stanie modułu telefonii
    (CallState, PhoneType, NetworkType, subscriber SIM ID, itp) 
    dokumentacja:  [Listing 7.1]  oraz  android.telephony.TelephonyManager
  2. Blokowanie połączeń wychodzących (dla wybranych numerów)
    dokumentacja:  [Listing 7.6]
  3. Programowa obsługa przychodzących wiadomości SMS oraz automatyczne wysyłanie odpowiedzi (np. danych personalnych odbiorcy i jego aktualnej geo-pozycji).
    dokumentacja:  [Listing 7.7 and 7.8] ,  android.telephony.SmsManager
  4. Monitorowanie zmian stanu kanału łącza głosowego oraz transmisji danych
    (np. dostępności Internetu czy zmian mocy/jakości sygnału GSM)
    dokumentacja:  [Listing 7.2] ,  android.telephony.PhoneStateListener
Materiały pomocnicze:
  - Chapter 7. Telephony API  - przykładowy rozdział z podręcznika "Android in Action"
  - Requesting Permissions at Run Time - jak rozwiązać problem odmowy uprawnień
    (permission denied error) gdy targetSdkVersion jest 23 lub nowsze.

Android   Projekt własnej aplikacji Android

Laboratorium (Projekt-Android)
  • Temat projektu może być wybrany/zaproponowany przez studenta.
    Powinien być zgłoszony za pomocą eportalu oraz zaakceptowany przez prowadzącego.
      
  • Zadanie jest realizowane indywidualnie przez cztery kolejne spotkania laboratoryjne:
    - na pierwszym spotkaniu należy przedstawić/zgłosić opis wybranego tematu
       (wstępnie uzgodnionego z prowadzącym laboratorium)
    - podczas kolejnych laboratoriów (L8-L9-L10) będzie mozliwość indywidualnego
       zaprezentowania postępów pracy nad projektem.   
    - po trzecich prezentacjach (najpóźniej do 10 stycznia 2022) należy przysłać kod
       źródłowy wykonanego projektu (do oceny).
    Do przysyłanego projektu należy dołączyć 3-5 stronicowe sprawozdanie opisujące: wybrany temat, co planowano zrobić, co wykonano, co się nie udało (i dlaczego), jakie materiały wykorzystano podczas samodzielnego studiowania wybranego "zagadnienia"
       
  • Zakres projektu powinien uwzględnić przynajmniej dwa wybrane zagadnienia z dziedziny technologii mobilnych, które nie były realizowane na wcześniejszych laboratoriach, np:
    1. mobilna baza danych (SQLite)
    2. obsługa wbudowanych sensorów: akcelerometr, żyroskop, magnetometer, gps, czujnik światła, kamera, itp
    3. Internet - transmisja danych, synchronizacja, web services
    4. generowanie grafiki 3D oraz animacji na urządzeniach mobilnych
    5. komunikacja Bluetooth pomiędzy różnymi urządzeniami mobilnymi oraz wymiana danych z komputerami PC
  • Aplikacja powinna mieć interfejs użytkownika o średniej złożoności (3-4 widoki / aktywności lub fragmenty) dopasowujący się do konfiguracji i orientacji urządzenia.




iOS   Programowanie aplikacji dla iOS 10 / 11, w języku Swift 4 / 5
Laboratorium (i1)  - Wprowadzenie iOS/Swift, środowisko Xcode, HelloWord
Zadanie domowe:
W ramach przygotowania do pierwszego laboratorium z tematu iOS, zapoznaj się z dwoma wprowadzającymi video-wykładami kursu  "Developing iOS 10 Apps with Swift"
dostępnymi na YouTube:
lub nowszej edycji tego samego kursu z roku 2018 Developing iOS 11 Apps with Swift  
Podczas laboratorium:
Praktyczne ćwiczenia z programowaniem aplikacji w środowisku Xcode
oraz zapoznanie się z podstawowymi elementami składowymi projektu dla systemu iOS
  1. Wykorzystaj wskazówki z rozdz.16 podręcznika iOS10/Swift z portalu Techotopia:
    Chapter 16. Creating an Interactive iOS 10 App
    do napisania własnej aplikacji "Konwerter Walut", o analogicznych funkcjonalnościach jak aplikacja konwertera walut dla systemu Android
    (napisana podczas laboratorium A2)

  2. W wersji zaawansowanej, zamiast prostego konwertera walut, można oprogramować kalkulator matematyczny o funkcjonalnościach podobnych do aplikacji kalkulatora dla systemu Android (z historią), wykonanej podczas laboratorium A3.
Materiały uzupełniające:
  - Dokumentacja on-line języka programowania Swift w wersji 5.x
  - Podręcznik programowania z portalu Techotopia - iOS 10 App Development Essentials

Położenie wybranych/użytecznych opcji oraz przycisków "narzędzi" w Xcode 12.x


Laboratorium (i2)  cykl życia ViewController-a, Storyboard i przejścia (Segues)
  1. Zapoznaj się z cyklem życia ViewController-a oraz jego istotną rolą w typowej dla iOS  architekturze Model-View-Controller. Materiały:
      - slajdy CS193p - Lecture 6 - View Controller Life cycle
      - oraz odpowiadające im video 
         (omówienie lifecycle rozpoczyna się od 40 minuty)

    Napisz prostą jednoekranową aplikację demonstrującą cykl życia ViewController-a która będzie miała zaimplementowane wszystkie podstawowe metody cyklu życia
    (tzn.. viewDidLoad, viewWill/DidAppear, viewWill/DidDisappear, viewWillTransitionToSize, ..., etc). Jako bazę, można wykorzystać interfejs aplikacji konwertera czy kalkulatora wykonanej podczas pierwszego laboratorium iOS (i1).

    Do debuggowania (wizualizacji) sekwencji kolejnych stanów cylku życia, wykorzystaj funkcję print(...) , które mają podobne znaczenie jak  Toast  lub   wydruki  Log.i( ) podczas wizualizacji cyklu życia aktywności w systemie Android. 

  2. Zapoznaj się z techniką wizualnego tworzenia przejść (Segue) pomiędzy różnymi ViewController-ami złożonej aplikacji iOS, zawierającej wiele widoków/ekranów:
    Techotopia - Chapter 24 - Using Storyboards and Segues in XCode 8

    Wzorując się na pomyśle aplikacji "Psychologist"
    (wykorzystywanej jako demo do archiwalnego wykładu na temat iOS z roku 2011 "Lecture 6: Multiple MVCs and Segues" , którego demonstracja jest pokazana  pokazana podczas ostatnich kilku minut tego video , zaczynając od momentu 1h 7min)

    napisz podobną aplikację "Doradca kierunku studiów", która będzie wspomagać studenta/kandydata w wyborze kierunku/specjalności na wydziale Elektroniki.
    Wykorzystaj pytania typu: Czy bardziej cię interesuje hardware czy software? Czy interesuje cię łączenie elektroniki i mechaniki? Jaki jest twój ulubiony język programowania: Java, C, Asembler? itp. 


Laboratorium (i3)  Komponent TableView(Controller), Architektura Master-Detail
  1. Zapoznaj się z materiałami prezentującymi zasady implementacji UITableView oraz TableViewController w architekturze aplikacji dla iOS:
      - z wprowadzającym tutorialem - Getting Started With UITableView in Swift 
      - slajdami CS193 Lecture.11: Drag and Drop, Table View, and Collection View
         lub video do tego wykładu (1h 30min)
    Bardziej zaawansowane tutoriale można znaleźć na witrynie Apple Developer:
      - Create Table Views (master TableView)
      - Implementing Navigation  (connect with detail Meal sub-View)
    lub Techotopia:
      26) An Overview of iOS 11 Table Views
      27) Using Xcode 9 Storyboards to Build Dynamic TableViews
      28) Implementing iOS 11 TableView Navigation

  2. Napisz przykładową aplikację implementującą szablon Master-Detail,
    która wykorzystuje główny TableViewController (master) do wyświetlania wielowierszowej listy przykładowych elementów (np. samochodów, zwierząt, ...)
    oraz szczegółowy (detail) ViewController do zaprezentowania szczegółowego opisu wybranego elementu w/w listy.

    Domyślnym tematem, może być aplikacja wyświetlająca ogólną listę wszystkich kierunków na wydziale Elektroniki oraz szczegółowe informacje o specjalnościach  na wybranym kierunku.

    W zależności od preferencji, można w tym celu wykorzystać listę Static_Cells  wyświetlających stałą listę listę elementów (predefiniowanych w Storyboard)
    lub dynamicznie tworzoną listę Dynamic_Prototypes  (której zawartość może być dynamicznie pobierana z lokalnej tablicy lub zewnętrznej bazy danych).

Inne materiały:
     


Universal Windows Platform

Archiwalne laboratoria:   WinMobile:  W1   ,  W2  ,  W3 

Windows 10 Mobile Programowanie aplikacji mobilnych
dla systemu Windows 10
(Universal Windows Platform)

Laboratorium (W1)  -  Środowisko programisty UWP, HelloWord, Cykl życia
Zadanie domowe:
W ramach przygotowania do pierwszego laboratorium z tematu Windows Mobile, zapoznaj się z dwoma wprowadzającymi prezentacjami z portalu Get started with Windows apps : 
oraz przykładem aplikacji kalkulatora:
Podczas laboratorium:
Praktyczne ćwiczenia z programowaniem aplikacji w środowisku Visual Studio 2015
oraz zapoznanie się z możliwościami tworzenia aplikacji na urządzenia mobilne
z wykorzystaniem Universal Windows Platform:
  1. Wykorzystaj wskazówki z materiałów zadania domowego, do napisania własnej aplikacji "Konwerter Walut", o analogicznych funkcjonalnościach jak aplikacja konwertera walut dla systemu Android (z laboratorium A2)

  2. W wersji zaawansowanej, zamiast prostego konwertera walut, można oprogramować kalkulator matematyczny o funkcjonalnościach podobnych do aplikacji kalkulatora (z historią) dla systemu Android, wykonanej podczas laboratorium A3.
Materiały pomocnicze:
Archiwalne materiały dla Windows Phone 8.1 (duża część jest nadal aktualna)


Laboratorium (W2)  Adaptacyjny interfejs użytkownika. Page Navigation - nawigacja i przekazywanie danych pomiędzy stronami (ekranami) aplikacji.
  1. Przeczytaj wybrane rozdziały z podanego poniżej podręcznika "Windows 10 ... for beginners":
      - UWP-008 - XAML Layout with Grids
      - UWP-009 - XAML Layout with StackPanel
      - UWP-017 - XAML Layout with RelativePanel
    Następnie wykorzystaj zawarte w nich wskazówki do napisania aplikacji zaawansowanego matematycznego kalkulatora (z historią), który będzie adaptacyjnie dopasowywał swój interfejs do rozmiaru oraz orientacji ekranu urządzenia. Uwzględnij przynajmniej trzy różne rozmiary ekranu oraz reakcje na zmianę orientacji (pionowa/pozioma) dla przynajmniej jednego rozmiaru.
            Dodatkowe informacje na temat adaptacji interfejsu dla różnych wielkości/orientacji ekranu oraz różnych urządzeń (za pomocą VisualStates) są opisane w rozdziałach UWP-037-039.
            Przykładowa demonstracja adaptacji: SimpleVisualStateTriggerExample
    wybrana z podanego poniżej repozytorium przykładów do tego podręcznika.
       
  2. Zapoznaj się z rozdziałem UWP-019-Working with Navigation i wykonaj aplikację demonstrującą przejścia pomiędzy ekranami/stronami połączone z przekazywaniem parametrów. Aplikacja nie musi robić niczego "sensownego" ale powinna się składać przynajmniej z 3 stron (Page), a przejścia powinny być inicjowane przez klikanie na umieszczone na tych stronach przyciski oraz przycisk "back".
Materiały pomocnicze:
  - Chanel_9/MSDN kurs: "Windows 10 Development for Absolute Beginners" (Video)
  - podręcznik: "Windows 10 Development for Absolute Beginners" (PDF)
     oraz repozytorium przykładów do wszystkich rozdziałów (dostępne na github).


Laboratorium (W3)    Dystrybucja aplikacji poprzez sklep Microsoft Store
  1. Przygotuj środowisko - załóż konto developerskie:

    W tym celu, wykorzystaj swoje istniejące konto studenckie (lub załóż nowe)
    na platormie Azure for Students
    Studenckie konto Azure może być założone z wykorzystaniem dowolnego identyfikatora / adresu email, ale do weryfikacji statusu studenta trzeba będzie wykorzystać (podać) uczelniany adres email z numerem indeksu studenta.

    Następnie wykorzystując darmowy kod rejestracyjny (voucher) z platformy Azure,
    który można aktywować wybierając opcje:
    Education > Oprogramowanie > Microsoft Store > Aktywuj

    student Azure

    po przekierowaniu, załóż darmowe konto developerskie na portalu
    Microsoft Centrum partnerskie: https://partner.microsoft.com/
    (jako identyfikator developera wykorzystaj ten sam email co w Azure for Student)

    Opublikowanie własnej aplikacji wykonasz wybierając opcje:
    https://partner.microsoft.com/pl-pl/dashboard
    Centrum Partnerskie > Windows i Xbox > Przegląd > Utwórz nową aplikację

    Microsoft > Centrum partnerskie > Utwórz

  2. Szczegółowy opis procesu zakładania konta i przeprowadzenia publikacji jest zamieszczony na stronie Centrum developerów systemu Windows:
  3. Po pomyślnym zakończeniu procesu publikacji, przeslij do prowadzącego laboratorium odsyłacz umożliwiający pobranie i przetestowanie aplikacji
    ( Beta testing and targeted distribution )
       
       
ARCHIWALNE materiały z poprzedniej edycji kursu 2017/2018:
  1. Przestudiuj następujące instrukcje:
      - rozdział nr 56 z książki  "Windows 10 Development for Absolute Beginners"
         UWP-056 - Submitting to the Windows Store
      - oraz slajdy Developers Guide to Windows  10 - Submit App (PPTx)
         lub odpowiadające im video (57min)
    demonstrujące jak:
      - wykorzystać Windows Dev Center dashboard do przygotowania publikacji
         własnej aplikacji w sklepie Windows App Store.
      - oraz jak udostępnić aplikację beta testerom z urządzeniami Windows 10

  2. Następnie wykorzystaj zdobytą wiedzę do zarejestrowania się jako developer aplikacji Windows i użyj DevCenter dashboard do publikacji wybranego programu UWP, z dotychczasowych laboratoriów, w sklepie Windows App Store.
    Poprawne zakończenie procesu publikacji należy potwierdzić wysyłając do instruktora prowadzącego laboratorium list z odsyłaczem do wersji beta/testowej  (lub targeted distribution page) w Windows Store.

    Szczegółowa instrukcja jak założyć darmowe/studenckie konto developera:
      - Windows Store registration with student code obtained from Microsoft Imagine
    W skrócie:
         0) Podczas zakładania konta, rejestracji oraz dostępu do WidnowsDevCenter
             najlepiej korzystaj z przeglądarek Microsoft (Edge lub Internet Explorer).
             Niektóre strony są niepoprawnie interpretowane w innych przeglądarkach
             takich jak FireFox, Chrome, Opera, Safari, itp.
             W tych innych, czasem pomaga praca w trybie prywatnym / incognito.
         1) załóż swoje konto edukacyjne na Microsoft Imagine
             lub ogólne konto Microsoft (jedno konto - wszystkie usługi Microsoft)
         2) potwierdź swój status studenta,
              przez wybranie "Account -> Please verify your student status",
              wybranie metody "School email address" i podanie adresu studenta PWr
              (na ten adres przyjdzie list z odpowiednim linkiem)
         3) Pobierz darmowy "Registration Code" do Dev Center :
             "Microsoft Imagine > Downloads > Software Catalog > Windows Store"
         4) załóż konto developera w Windows Dev Center
             i po wypełnieniu danych personalnych, podaj "Promo code"
             pobrane Microsoft Imagine.
            Dalej według podanej powyżej instrukcji.