Wstęp do aplikacji mobilnych

Aplikacje mobilne

Czym są aplikacje mobilne?

Aplikacja mobilna to program komputerowy zaprojektowany specjalnie do działania na urządzeniach przenośnych – smartfonach i tabletach. W odróżnieniu od programów desktopowych musi uwzględniać mały ekran dotykowy, ograniczoną baterię, mobilny internet i czujniki (GPS, akcelerometr, kamera).

Aplikacje mobilne pobieramy ze sklepów: Google Play (Android) lub App Store (iOS).

Rodzaje aplikacji mobilnych

System operacyjny Android

Android to mobilny system operacyjny rozwijany przez Google, oparty na jądrze Linux. Każdy smartphone z Androidem to właściwie komputer z pełnym systemem operacyjnym.

Krótka historia

Warstwy systemu Android

Android zbudowany jest warstwowo – każda warstwa korzysta z usług warstwy poniżej:

Narzędzia – JDK, SDK, Android Studio

JDK – Java Development Kit

JDK (Java Development Kit) to zestaw narzędzi niezbędnych do pisania i uruchamiania programów w Javie i Kotlinie. Zawiera:

SDK – Software Development Kit

SDK (Software Development Kit) to zestaw narzędzi i bibliotek do tworzenia aplikacji dla konkretnej platformy. Android SDK zawiera wszystko czego potrzebujesz do pisania aplikacji na Androida:

Android Studio

Android Studio to oficjalne IDE (zintegrowane środowisko programistyczne) Google do tworzenia aplikacji na Androida. Zawiera wszystko w jednym miejscu:

Instalacja Android Studio

• 1
  Pobierz instalator

  Wejdź na developer.android.com/studio i kliknij „Download Android Studio”. Wybierz wersję dla swojego systemu (Windows / macOS / Linux).

• 2
  Uruchom instalator

  Windows: uruchom plik .exe jako administrator. Zaakceptuj domyślne ustawienia – Android Studio automatycznie zainstaluje JDK i SDK.

• 3
  Kreator konfiguracji (Setup Wizard)

  Przy pierwszym uruchomieniu kreator pobiera komponenty SDK. Wybierz Standard installation. Pobieranie może trwać kilka minut – potrzebne jest połączenie z internetem (~1.5 GB).

• 4
  Sprawdź instalację

  Po zakończeniu pojawi się ekran startowy „Welcome to Android Studio”. Instalacja zakończona pomyślnie.

• 5
  Sprawdź SDK Manager

  W menu: More Actions → SDK Manager. Upewnij się że zainstalowany jest Android SDK dla co najmniej jednej wersji systemu (najlepiej najnowszej).

Tworzenie pierwszej aplikacji

Nowy projekt krok po kroku

• 1
  New Project

  Na ekranie startowym kliknij New Project, lub z menu: File → New → New Project.

• 2
  Wybierz szablon: Empty Activity

  W oknie „New Project” wybierz Empty Views Activity. To najprostszy szablon – jeden ekran, jeden plik Kotlin, jeden plik XML.

• 3
  Konfiguracja projektu

  Name: MojaAplikacja
  Package name: com.example.mojaaplikacja (unikalny identyfikator w Google Play)
  Language: Kotlin
  Minimum SDK: API 26 (Android 8.0) – obejmuje ok. 95% urządzeń

• 4
  Kliknij Finish

  Android Studio wygeneruje projekt i pobierze zależności przez Gradle. Pierwsze otwarcie może trwać 1–2 minuty.

Struktura projektu – co i gdzie

MainActivity.kt – wygenerowany kod

package com.example.mojaaplikacja    // pakiet – unikalny identyfikator

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

// MainActivity dziedziczy po AppCompatActivity
// AppCompatActivity = klasa bazowa dla wszystkich ekranów aplikacji
class MainActivity : AppCompatActivity() {

    // onCreate() – wywoływana gdy ekran jest tworzony
    // To punkt startowy aktywności
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Podłącz plik XML jako wygląd tego ekranu
        setContentView(R.layout.activity_main)
    }
}

activity_main.xml – wygenerowany layout

<?xml version="1.0" encoding="utf-8"?>

<!-- ConstraintLayout = układ z pozycjonowaniem względem krawędzi -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- TextView = pole tekstowe -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        <!-- Poniższe atrybuty centrują element na ekranie -->
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Emulator – wirtualny telefon

Emulator (AVD – Android Virtual Device) to wirtualny telefon działający na Twoim komputerze. Możesz testować aplikację bez fizycznego urządzenia.

Uruchomienie emulatora

• 1
  Otwórz AVD Manager

  W Android Studio: kliknij ikonę telefonu z zielonym plusem na pasku narzędzi, lub Tools → Device Manager.

• 2
  Utwórz nowe urządzenie wirtualne

  Kliknij + Create Device. Wybierz model telefonu np. Pixel 6. Kliknij Next.

• 3
  Wybierz wersję systemu

  Wybierz obraz systemowy np. API 34 (Android 14). Jeśli nie jest pobrany – kliknij Download obok nazwy.

• 4
  Uruchom aplikację

  Kliknij zielony przycisk ▶ Run (lub Shift+F10). Android Studio skompiluje projekt, uruchomi emulator i zainstaluje na nim aplikację.

Fizyczny telefon zamiast emulatora

1. Ustawienia → Informacje o telefonie
2. Kliknij „Numer kompilacji" 7 razy
   → pojawi się „Jesteś teraz deweloperem"
3. Ustawienia → Opcje deweloperskie
4. Włącz „Debugowanie USB"
5. Podłącz telefon kablem USB
6. W Android Studio wybierz swój telefon z listy urządzeń

Zmiana wyglądu GUI

GUI (Graphical User Interface) aplikacji definiujemy w pliku XML. Możemy to robić na dwa sposoby: wizualnie przez Layout Editor lub ręcznie edytując kod XML.

Przykład – zmiana tekstu i dodanie przycisku

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="24dp">

    <!-- TextView z ID – żeby odwołać się do niego z kodu Kotlin -->
    <TextView
        android:id="@+id/tvPowitanie"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Witaj w mojej aplikacji!"
        android:textSize="22sp"
        android:textStyle="bold"
        android:textColor="#1976D2"
        android:layout_marginBottom="24dp" />

    <!-- Button z ID – kliknięcie obsłużymy w Kotlinie -->
    <Button
        android:id="@+id/btnKliknij"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kliknij mnie!" />

</LinearLayout>

Obsługa przycisku w Kotlinie

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Znajdź widoki po ich ID zdefiniowanych w XML
        val tvPowitanie = findViewById<TextView>(R.id.tvPowitanie)
        val btnKliknij  = findViewById<Button>(R.id.btnKliknij)

        // Ustaw co ma się stać po kliknięciu przycisku
        btnKliknij.setOnClickListener {
            tvPowitanie.text = "Przycisk został kliknięty!"
        }
    }
}

Podstawowe pojęcia Androida

Aktywność (Activity)

Aktywność to jeden ekran aplikacji z którym użytkownik może wchodzić w interakcję. Każdy ekran – lista kontaktów, szczegóły kontaktu, ustawienia – to osobna aktywność.

Każda aktywność musi być zarejestrowana w AndroidManifest.xml. Android Studio robi to automatycznie przy tworzeniu nowej aktywności.

// AppCompatActivity = klasa bazowa z obsługą wstecznej kompatybilności
class MainActivity : AppCompatActivity() {

    // onCreate – aktywność jest tworzona (wywoływana raz)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)  // podłącz layout
    }

    // onResume – aktywność jest widoczna i aktywna
    override fun onResume() {
        super.onResume()
    }

    // onPause – inna aktywność przeszła na pierwszy plan
    override fun onPause() {
        super.onPause()
    }

    // onDestroy – aktywność jest niszczona (np. po wyjściu z aplikacji)
    override fun onDestroy() {
        super.onDestroy()
    }
}

Układ (Layout)

Układ (Layout) to niewidoczny kontener który organizuje rozmieszczenie widoków na ekranie. Określa jak widoki są ułożone względem siebie. Piszemy go w pliku XML.

<!-- LinearLayout – elementy jeden pod drugim -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"   <!-- szerokość = ekran -->
    android:layout_height="match_parent"  <!-- wysokość = ekran -->
    android:orientation="vertical"        <!-- dzieci jeden pod drugim -->
    android:padding="16dp"
    android:gravity="center_horizontal">  <!-- dzieci wyśrodkowane poziomo -->

    <!-- Pierwszy element -->
    <TextView
        android:text="Nagłówek"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!-- Drugi element – marginTop = odstęp od poprzedniego -->
    <Button
        android:text="Przycisk"
        android:layout_marginTop="12dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Widok (View)

Widok (View) to podstawowy element interfejsu użytkownika – wszystko co widać na ekranie to widok. Każdy przycisk, tekst, obrazek, pole tekstowe to osobny widok.

Relacja: Activity ↔ Layout ↔ View

Zadanie – pierwsza własna aplikacja