Construcción de aplicaciones móviles

Universidad del Quindío
Programa de Ingeniería de Sistemas y Computación
Título: Primera Aplicación Android con Kotlin
Docente: Carlos Andrés Florez V.

Primera Aplicación Android con Kotlin

Introducción

En esta guía, crearemos una aplicación Android sencilla utilizando Kotlin y Jetpack Compose. La aplicación mostrará un mensaje de bienvenida. El objetivo es familiarizarnos con la estructura básica de una aplicación Android y comprender cómo funcionan los componentes principales.

Instalación del Entorno de Desarrollo

Antes de comenzar, es importante tener instalado Android Studio. Se puede descargar desde aquí. Asegúrese de instalar la última versión y de configurar el SDK de Android.

Creación del Proyecto

Para crear un nuevo proyecto en Android Studio, siga estos pasos:

1. Abrir Android Studio

Inicie Android Studio y seleccione “New project”.

2. Seleccionar Plantilla

Elija la plantilla “Empty Activity” y haga clic en “Next”. Android Studio generará una estructura básica para nuestra aplicación.

Existen varias plantillas disponibles para teléfonos, tablets, wearables, TV y automóviles. Para este proyecto, seleccionamos “Empty Activity” para centrarnos en los conceptos básicos.

3. Configurar el Proyecto

Ahora, configure el proyecto con los siguientes detalles:

Como se mencionó anteriormente, un problema de Android es la fragmentación de versiones. Seleccionar una versión mínima adecuada es crucial para asegurar la compatibilidad con la mayoría de los dispositivos. Al día de hoy, Android 9.0 (Pie) es una opción sólida que equilibra características modernas y compatibilidad, además al seleccionar esta versión, garantizamos que nuestra aplicación pueda ejecutarse en aproximadamente el 94% de los dispositivos Android activos.

Haga clic en “Finish” para crear el proyecto.

Estructura del Proyecto

Una vez creado el proyecto, verá una estructura de archivos similar a la siguiente en el panel del proyecto:

app
├── manifests
│   └── AndroidManifest.xml                             # Archivo de configuración principal (permisos, componentes, etc.)
├── kotlin+java                                         # Código fuente de la aplicación
│   ├── com.example.demoapp                             # Paquete principal de la aplicación
│   │   ├── ui.theme                                    # Temas y estilos de la aplicación
│   │   │   ├── Color.kt                                # Definiciones de colores
│   │   │   ├── Theme.kt                                # Definiciones de temas
│   │   │   └── Type.kt                                 # Definiciones de tipografía
│   │   └── MainActivity.kt                             # Actividad principal de la aplicación
│   ├── com.example.demoapp (androidTest)               # Pruebas instrumentadas (para pruebas que requieren un dispositivo o emulador)
│   └── com.example.demoapp (test)                      # Pruebas unitarias
├── res                                                 # Recursos de la aplicación
│   ├── drawable                                        # Imágenes y gráficos
│   ├── mipmap                                          # Iconos de la aplicación en diferentes resoluciones
│   ├── values                                          # Valores como cadenas, colores y estilos
│   └── xml                                             # Archivos XML adicionales (configuraciones, API keys, etc.)
└── Gradle Scripts                                      # Archivos de configuración de Gradle
    ├── build.gradle.kts (Project: DemoApp)             # Configuración de nivel de proyecto
    ├── build.gradle.kts (Module: app)                  # Configuración de nivel de módulo
    ├── libs.versions.toml (Version Catalog "libs")     # Catálogo de versiones para dependencias
    └── settings.gradle.kts (Project Settings)          # Configuración de ajustes del proyecto      

Las carpetas y archivos más importantes se muestran en el diagrama anterior, y cada uno tiene un propósito específico en la estructura del proyecto Android. A continuación, se describen brevemente algunos de los archivos y carpetas clave:

AndroidManifest.xml

El archivo AndroidManifest.xml se encuentra en la carpeta manifests. Este archivo es crucial para cualquier aplicación Android, ya que define la estructura básica de la aplicación, incluyendo sus componentes (actividades, servicios, receptores, etc.), permisos necesarios y otras configuraciones esenciales.

Un ejemplo básico de un archivo AndroidManifest.xml podría verse así:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.DemoApp">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.DemoApp">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Se destacan los siguientes elementos:

Actividad principal MainActivity.kt

Abra el archivo MainActivity.kt ubicado en el paquete com/example/demoapp/. Este archivo contiene la actividad principal de la aplicación. Debería verse algo así:

package com.example.demoapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.demoapp.ui.theme.DemoAppTheme

/*
 * La actividad principal de la aplicación. Toda la lógica de la interfaz de usuario comienza aquí.
 */
class MainActivity : ComponentActivity() {

    /*
     * Esta función se llama automáticamente cuando la actividad es creada. Aquí es donde configuramos el contenido de la actividad.
     */
    override fun onCreate(savedInstanceState: Bundle?) {
        // Llamar al método onCreate de la superclase
        super.onCreate(savedInstanceState)
        // Habilitar el modo Edge-to-Edge para una mejor experiencia visual
        enableEdgeToEdge()
        // Configurar el contenido de la actividad utilizando Jetpack Compose
        setContent {
            // Aplicar el tema personalizado de la aplicación
            DemoAppTheme {
                // Se define la estructura principal de la interfaz de usuario
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    // Llamar a la función Greeting para mostrar el mensaje de bienvenida
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

// Función composable que muestra un mensaje de saludo
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

// Función de vista previa para el editor de Android Studio. Esta función no se ejecuta en tiempo de ejecución, solo sirve para previsualizar la UI.
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    DemoAppTheme {
        Greeting("Android")
    }
}

Pruebas instrumentadas

Las pruebas instrumentadas se encuentran en la carpeta com.example.demoapp (androidTest). Estas pruebas se ejecutan en un dispositivo Android o emulador y se utilizan para verificar el comportamiento de la aplicación en un entorno real. Android Studio genera automáticamente un archivo de prueba de ejemplo llamado ExampleInstrumentedTest.kt, que contiene una prueba básica para demostrar cómo funcionan las pruebas instrumentadas en Kotlin.

package com.example.demoapp

import androidx.test.platform.app.InstrumentationRegistry
import androidx.test.ext.junit.runners.AndroidJUnit4

import org.junit.Test
import org.junit.runner.RunWith

import org.junit.Assert.*

/**
 * Instrumented test, which will execute on an Android device.
 *
 * See [testing documentation](http://d.android.com/tools/testing).
 */
@RunWith(AndroidJUnit4::class)
class ExampleInstrumentedTest {
    @Test
    fun useAppContext() {
        // Context of the app under test.
        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
        assertEquals("com.example.demoapp", appContext.packageName)
    }
}

En este caso, la prueba useAppContext verifica que el contexto de la aplicación bajo prueba tenga el nombre de paquete esperado.

Pruebas unitarias

Las pruebas unitarias se encuentran en la carpeta com.example.demoapp (test). Estas pruebas se utilizan para verificar que las unidades individuales de código (como funciones y métodos) funcionen correctamente. Android Studio genera automáticamente un archivo de prueba de ejemplo llamado ExampleUnitTest.kt, que contiene una prueba básica para demostrar cómo funcionan las pruebas unitarias en Kotlin.

package com.example.demoapp

import org.junit.Test

import org.junit.Assert.*

/**
 * Example local unit test, which will execute on the development machine (host).
 *
 * See [testing documentation](http://d.android.com/tools/testing).
 */
class ExampleUnitTest {
    @Test
    fun addition_isCorrect() {
        assertEquals(4, 2 + 2)
    }
}

Archivos Gradle

Los archivos Gradle se encuentran en la carpeta Gradle Scripts. Estos archivos son esenciales para la construcción y configuración del proyecto. Cuando se crea un nuevo proyecto en Android Studio, se generan automáticamente dos archivos build.gradle.kts:

Adicionalmente, se incluye un archivo libs.versions.toml que actúa como un catálogo de versiones para gestionar las dependencias de manera centralizada.

Ejecutar la Aplicación

Para ejecutar la aplicación hay dos métodos principales:

1. Usar un dispositivo físico

Para ejecutar la aplicación en un dispositivo físico, siga estos pasos:

2. Usar un emulador

Para ejecutar la aplicación en un emulador, siga estos pasos:

⚠️ Importante: Tenga en cuenta que la primera vez que inicie un emulador, puede tardar varios minutos en arrancar completamente. Además, asegúrese de que su computadora tenga suficientes recursos (RAM y CPU) para ejecutar el emulador de manera eficiente ya que puede ser exigente en términos de rendimiento.

Logcat

Logcat es una herramienta integrada en Android Studio que permite ver los registros (logs) generados por la aplicación y el sistema Android en tiempo real. Es especialmente útil para depurar y monitorear el comportamiento de la aplicación durante su ejecución.

Para acceder a Logcat, siga estos pasos:

Además, puede agregar declaraciones de log en su código utilizando la clase Log de Android para generar mensajes personalizados que le ayuden a rastrear el flujo de ejecución y el estado de la aplicación.

Dentro de la función Greeting, puede agregar una declaración de log como se muestra a continuación:

Log.d("Greeting", "Greeting function called with name: $name")

Importe la clase Log al inicio del archivo:

import android.util.Log

Y ejecute la aplicación nuevamente. Ahora, en Logcat, podrá ver el mensaje de log cada vez que se llame a la función Greeting.

Material Design

Jetpack Compose ofrece soporte integrado para Material Design a través de la biblioteca androidx.compose.material3. Esta biblioteca proporciona una amplia gama de componentes de UI que siguen las pautas de Material Design, como botones, tarjetas, barras de navegación, entre otros.

Material Design es un sistema de diseño desarrollado por Google que proporciona directrices y componentes para crear interfaces de usuario atractivas, intuitivas y consistentes en aplicaciones móviles y web. Al utilizar Material Design en Jetpack Compose, los desarrolladores pueden aprovechar una amplia gama de componentes predefinidos que siguen estas directrices, lo que facilita la creación de aplicaciones visualmente atractivas y funcionales.

Además incluye:

Por este motivo, es recomendable utilizar los componentes de Material Design siempre que sea posible para garantizar una experiencia de usuario coherente, además de aprovechar las mejores prácticas de diseño establecidas por Google.


Actividad práctica

Revise la documentación oficial de Material Design y explore los diferentes componentes disponibles en la biblioteca, como botones, tarjetas, barras de navegación, entre otros. También revise la sección de estilos: iconos, tipografía y colores.