Aplikacje mobilne - React Native

  1. Zadania do wykonania

Lab. nr 1 - aplikacja startowa: kalkulator

  • - należy utworzyć repozytorium o nazwie aplikacje-mobilne-dane-nr_grupy, gdzie zamiast 'dane' wpisujemy nazwisko lub nr indeksu; będzie ono podstawą zaliczenia przedmiotu,
  • - w ww. repozytorium umieszczamy kolejne zrealizowane zadania w osobnych folderach i z osobnymi plikami README.md,
  • - dokumentacja startowa dla React Native,
  • - dokumentacja startowa Android Developers,
  • - dokumentacja startowa dla Xamarin,
  • - poniższe zagadnienia powinny zostać zrealizowane:
    • dla wybranej technologii: instalacja pakietów i tworzenie projektu, ustawienia projektu, korzystanie z serwera deweloperskiego,
    • wykorzystanie podstawowych komponentów i API dla wybranej technologii, np. dla React Native,
    • zapoznanie z komponentami dla wybranej technologii i ich użycie, np. dla React Native,
    • projekt prostego kalkulatora wraz z opisem, przykłady tutaj.
  • - w każdym z zadań można użyć Expo lub React Native CLI lub create-react-native-app,
  • - należy opisać w pliku README.md co zostało zrealizowane, za co odpowiada wybrany fragment kodu (komponent, funkcja lub klasa) oraz dołączyć zrzuty aplikacji (lub zdjęcia ekranu telefonu, jeśli nie uda się zrobić standardowego zrzutu).

Lab. nr 2 - responsywne layouty + nawigacja

Start
  • - zadanie bazuje na rozdziałach nr 15 i 16 literatury bazowej,
  • - należy zapoznać się z:
  • - poniższe zagadnienia powinny zostać zrealizowane:
    • należy utworzyć 3 ekrany za pomocą react-navigation,
    • do przechodzenia między ekranami można użyć stack-navigator,
    • na każdym ekranie powinny się znaleźć przyciski pozwalające przejść do dwóch pozostałych ekranów,
    • każdy ekran powinien byc "ostylowany" w innym stylu niż pozostałe ekrany, z wykorzystaniem Flexboxa (m.in. poprzez moduły StyleSheet i Platform),
    • style należy utworzyć w pliku styles.js i zaimportować w odpowiednim miejscu,
    • należy umieścić na ww. ekranach informacje, czym jest spread operator, czym są rest parameters oraz do czego służy 'hook' useState,
    • ➕ za modyfikacje layoutów (tak, by były inne niż te w przykładach).

Lab. nr 3 - renderowanie listy danych + obsługa progresu Start

  • - zadanie bazuje na rozdziałach nr 17 i 18 literatury bazowej,
  • - wskazane zapoznanie się (odświeżenie wiedzy) z:
  • - poniższe zagadnienia powinny zostać zrealizowane:
    • wskazane użycie kodu z lab. nr 2, po to żeby mieć kilka ekranów 🌞
    • na pierwszym ekranie należy zaimplementować sortowanie i filtrowanie danych; danymi niech będzie 100 pseudolosowych liczb całkowitych z zakresu (0, 1000),
    • na drugim ekranie należy zaimplementować "leniwe ładowanie" (lazy loading) listy danych; danymi niech będą pseudolosowe litery,
    • na ekranach od nr 3 do nr 5 należy zaimplementować progres krokowy (step progress); na kolejnych ww. ekranach powinny znaleźć się elementy ActivityIndicator, ostylowane inaczej na każdym z ekranów 3-5,
    • ➕ za modyfikacje kodu (tak, by były inne niż te w przykładach).

Lab. nr 4 - obsługa danych wprowadzanych przez użytkownika + modale Start

  • - zadanie bazuje na rozdziałach nr 20 i 21 literatury bazowej,
  • - wskazane zapoznanie się (odświeżenie wiedzy) z:
  • - poniższe zagadnienia powinny zostać zrealizowane:
    • wskazane użycie kodu z lab. nr 2, po to żeby mieć kilka ekranów 🌞
    • na pierwszym ekranie należy zaimplementować "przegląd" możliwości komponentu 'TextInput'; należy wykorzystać odpowiednie propsy i/lub stan danego komponentu.
    • na drugim ekranie należy zaimplementować obsługę co najmniej dwóch komponentów 'Select'; niech zmiana w jednym selektorze powoduje zmiany w pozostałych selektorach; można pokusić się o pobieranie danych do selektorów z wybranych API (np. z ćwiczeń dotyczących asynchronicznego Javascript).
    • na trzecim ekranie należy zaimplementować obsługę przełącznika 'Switch', tak aby po zmianie jego położenia pojawiał się modal z pseudolosową liczbą.
    • na czwartym ekranie należy zaimplementować wybór daty i czasu; po wciśnięciu przycisku 'Wyświetl termin' powinien pojawić się alert z wybranymi parametrami czasowymi.
    • na piątym ekranie należy zaimplementować "aktywny" modal + pasywne powiadomienia za pomocą ToastAndroid (lub jego odpowiednika w iOS); można wykorzystać funkcję setTimeout() na czas trwania obietnicy (Promise) i w tym czasie powinien być aktywny modal; ww. powiadomienie powinno się pojawić po rozwiązaniu obietnicy (resolve of Promise object).
    • ➕ za modyfikacje kodu (tak, by były inne niż te w przykładach).

Lab. nr 5 - obsługa gestów użytkownika Start

  • - zadanie bazuje na rozdziale nr 22 literatury bazowej,
  • - wskazane zapoznanie się (odświeżenie wiedzy) z:
  • - poniższe zagadnienia powinny zostać zrealizowane:
    • wskazane użycie kodu z lab. nr 2, po to żeby mieć kilka ekranów 🌞
    • na pierwszym i na drugim ekranie należy zaimplementować użycie komponentu ScrollView, na każdym z nich powinnny być różne style (Flexbox) oraz widoczny pasek przewijania (scrollbar)
    • na trzecim ekranie należy zaimplementować użycie komponentów TouchableOpacity i TouchableHighlight; na ➕ można pokusić się o użycie komponentu WebView po naciśnięciu przycisku,
    • na czwartym ekranie należy zaimplementować obsługę przesunięć palcem (komponent Swipeable);
    • ➕ za modyfikacje kodu (tak, by były inne niż te w przykładach) i za dodatkowe ekrany (np. druga wersja z komponentem Swipeable lub użycie komponentu Pressable).

Lab. nr 6 - obsługa obrazów + tryb offline Start

  • - zadanie bazuje na rozdziałach nr 23 i 24 literatury bazowej,
  • - wskazane zapoznanie się (odświeżenie wiedzy) z:
  • - poniższe zagadnienia powinny zostać zrealizowane:
    • wskazane użycie kodu z lab. nr 2, po to żeby mieć kilka ekranów 🌞
    • na pierwszym ekranie należy zaimplementować ładowanie dwóch obrazków (komponent Image) - pierwszy za pomocą właściwości 'uri', a drugi z użyciem metody require(),
    • na drugim ekranie należy zaimplementować zmianę rozmiaru ładowanego obrazka za pomocą komponentu Slider, (można też na pierwszym ekranie załadować jeden obrazek ze sliderem i na drugim ekranie podobnie),
    • na trzecim ekranie należy zaimplementować 'leniwe' ładowanie obrazka oraz renderowanie wybranego zestawu ikon,
    • na kolejnym ekranie należy zaimplementować detekcję łączności z siecią i wyświetlić odpowiednią informację,
    • na kolejnym ekranie należy zaimplementować obsługę zapisu danych aplikacji za pomocą AsyncStorage,
    • na ostatnim ekranie należy zaimplementować obsługę synchronizacji danych aplikacji (np. stanu wybranych elementów), w przypadkach łączności z siecią i jej braku,
    • ➕ za modyfikacje kodu (tak, by były inne niż te w przykładach).

Lab. nr 7 - wykorzystanie bazy danych w aplikacji mobilnej Start

Lab. nr 8 - obsługa map + geolokacja Start

  • - (marzec 2021 r.) mogą wystąpić problemy z uruchomieniem projektów React Native, wykorzystujących geolokację!!!
  • - zadanie bazuje na rozdziale nr 19 literatury bazowej i wybranej dokumentacji (linki poniżej),
  • - wskazane zapoznanie się (odświeżenie wiedzy) z:
  • - poniższe zagadnienia powinny zostać zrealizowane:
    • wskazane użycie kodu z lab. nr 2, po to żeby mieć kilka ekranów 🌞
    • na kolejnych ekranach należy zaimplementować obsługę geolokacji w React Native,
    • z powodu braku kompatybilności między odpowiednimi wersjami pakietów (m.in. do geolokacji) wybór zagadnień do praktycznego opracowania (dotyczących geolokacji), pozostawiam autorowi 🌻,
    • ➕ za modyfikacje kodu (tak, by były inne niż te w przykładach).

Zasady zaliczenia przedmiotu Start

  1. Dowolny język do realizacji zadań, tam gdzie da sie zastosować inne niż wskazane w czasie zajęć. Preferowany React Native, ale można używać innych technlogii i języków (np. Java, Ionic, Xamarin itp. itd.). Inne opcje po konsultacji z prowadzącym.
  2. Zadanie należy zrealizować do kolejnych zajęć - max. 5 punktów,
    - do tygodnia opóźnienia w realizacji zadania - max. 3 punkty,
    - przekroczenie obu terminów - max. 1 punkt,
    - za wysyłanie linków do cudzych repozytoriów - max. 1 punkt,
    - ww. daty wskazane są w pliku z ocenami.
  3. Zrealizowane zadanie należy umieścić na portalu GitHub (lub BitBucket) i wysłać link do prowadzącego (Slack).
  4. Zadanie należy zaprezentować osobiście prowadzącemu na laboratorium (zdalnie popre udostępnianie ekranu).
  5. Pierwsze laboratorium jest "rozruchowe" - można oddawać zadania, ale nie trzeba.
  6. Zadania dla React Native bazują na omawianej na zajęciach literaturze bazowej.
  7. Brak odpowiedniej liczby punktów spowoduje konieczność stworzenia nowych projektów.
  8. Do każdego zadania dobrze jest dodać pliki (dodać do repozytorium) zawierające zrzuty działającej aplikacji. Przyspieszy to proces sprawdzania.
  9. Brak znajomości utworzonej aplikacji powoduje obniżenie oceny.