Tecnologías móviles - 03

Fundamentos de Apps móviles / Sesión 1

Código/Dni Apellidos y Nombres Fecha

2021400021 / 76389588 Cardenas Ytuza Fernando Luigui 17/03/2024

Actividades

1. Creación de un nuevo proyecto Android

En el Android Studio, Crea un Nuevo Proyecto:

Ilustración - 1 “Creando proyecto nuevo”

En el cuadro de diálogo New Project seleccione Empty Activity. Presione el botón Next

Ilustración - 2 “Seleccionamos Empty Views Activity y presionamos Next”

En el cuadro de diálogo New Project coloque como Nombre de la aplicación HolaMundo y en Language seleccione
Java. haga click en el botón Finish.

Ilustración - 3 “Nombre de la aplicación y selección de lenguaje”

Lo que se muestra a continuación es el proyecto inicial con los archivos: MainActivity.java y activity_main.xml en la
ventana principal del IDE del Android Studio.

Ilustración - 4 “Visualización predeterminada al momento de crear nuevo proyecto”

Ejecute la ‘app’ presionando el botón play (Mayús+F10). Si no se tiene un Dispositivo Virtual hay que crear uno
nuevo. Después de ejecutar la app aparecerá el emulador del dispositivo en ejecución.

Ilustración - 5 “Ejecutando proyecto”

En el archivo MainActivity.java agregue el siguiente código enmarcado:

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView tvSaludo = new TextView(this);
tvSaludo.setText("¡Bienvenido a tu primera app!!");
setContentView(tvSaludo);
}
}

Ilustración - 6 “Ejecutando proyecto después de agregar el nuevo código”

Puede ver las apps presionando el botón de home del emulador, observe que su aplicación HolaMundo está
instalado.

Ilustración - 7 “Emulador y la app creada”

Depuración de un proyecto: Para realizar la depuración de la app en caso de producirse un error, se coloca un punto
de quiebre haciendo click en el borde izquierdo de la línea del código fuente. Luego selecciona Run>Debug para
ingresar al modo de depuración.

Ilustración - 8 “Mostrando opciones de debug”

2. Modificando la app

En el archivo MainActivity.java retorne al código original y agregue el código enmarcado. Observe que la función
setContentView recibe como parámetro el activity_main, que representa el diseño (layout) de tu app.

import android.widget.Toast;
import android.os.Bundle;
import android.view.View;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void btnSaludo(View view) {
Toast.makeText(this, "Nuevo Saludo", Toast.LENGTH_LONG).show();
}
}

Ilustración - 9 “Retornando al código original”

 Ilustración - 10 “Vista predeterminando en emulador”

En el archivo activity_main.xml modifique el código como se ve en el siguiente listado. Para visualizar el código
XML presione Ctrl+B (Code).

<LinearLayout 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"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:text="Mi primer app Android!" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
 android:layout_marginTop="50dip"
android:text="Haz click!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</LinearLayout>

Ilustración - 11 ”Código para agregar botón”

Luego presione la pestaña Design, seleccione el control Button y luego en la sección Common Attributes para el
atributo onClick elija la función btnSaludo.
 Ilustración - 12 “Agregando boton”

Ejecute la aplicación.

Ilustración - 13 “Haciendo click para que aparezca una notificación”

Observe que se agregó automáticamente el código en Xml del evento onClick.

Ilustración - 14 “Al presionar el botón”

Ejercicios

1. Realice un informe donde resuelva los siguientes ejercicios:

Complete desde el punto 7 (Task 5) hacia adelante del sitio de Android developer:

https://developer.android.com/codelabs/android-training-hello-world?index=..%2F..%2Fandroid-training#6

• Cómo ejecutar tu app en el dispositivo Android mediante Wi-Fi

Comenzando con el task 5 de Android developer.

Ilustración - 15 “Curso task 5”

Que aprenderé:

• Cómo habilitar un dispositivo Android para que ejecute apps desde Android Studio
• Cómo conectar y ejecutar una app desde Android Studio en un dispositivo Android físico

Habilitando depuración por USB:

En tu dispositivo Android, presiona Configuración > Acerca del teléfono. Presiona Número de compilación (Build
number) siete veces.
 Ilustración - 16 “Número de compilación (Presionamos 7 veces)”

Regresa a Configuración y presiona Sistema > Opciones para desarrolladores. Si no ves la opción Opciones para
desarrolladores (Developer options), presiona Opciones avanzadas (Advanced options).

Ilustración - 17 “Opción de desarrollador”

Presiona Opciones para desarrolladores (Developer options) y, luego, el botón de depuración por USB (USB
Debugging) a fin de activarlo.

Ilustración - 18 “Activación de depuración por USB”

En Android Studio, haz clic en Tools > SDK Manager. Se abrirá el diálogo Preferences > Appearance & Behavior >
System Settings > Android SDK.

Ilustración - 19 “Opción tools (SDK Manager)”

Haz clic en la pestaña SDK Tools. Selecciona Google USB Driver y haz clic en OK.

Ilustración - 20 “Instalación de Google USB Driver”

Conecta tu dispositivo Android a la computadora con un cable USB. Aparecerá un cuadro de diálogo en tu
dispositivo, en el que se te pedirá que permitas la depuración por USB.

Ilustración - 21 ”Permitir depuración por USB al conectar el dispositivo a mi laptop”

En la versión de Android Studio de tu computadora, asegúrate de que el dispositivo esté seleccionado en el menú
desplegable. Haz clic en Este es el ícono de ejecución de Android Studio.

Ilustración - 22 “Dispositivo seleccionado”

Verificando en el dispositivo la aplicación de registro de estudiante que diseñé

Ilustración - 23 ”Ejecutando aplicación (se muestra en el dispositivo móvil la aplicación en ejecución)”

• Cómo ejecutar tu app en el dispositivo Android mediante Wi-Fi

En Android Studio, selecciona Pair Devices Using Wi-Fi del menú desplegable de configuraciones de ejecución.

Ilustración - 24 “Opción de unión mediante wifi”

Se abrirá el cuadro de diálogo Pair devices over Wi-Fi.

Ilustración - 25 ”Ventana de QR para la conexión con el dispositivo”

Ve a Developer options, desplázate hacia abajo hasta la sección Debugging y activa la opción Wireless
debugging.

Ilustración - 26 “Depuración inalámbrica activada en el dispositivo”

Si quieres vincular el dispositivo con un código QR, selecciona Vincular dispositivo mediante código QR y, luego,
escanea el código QR que se muestra en la computadora. Alternativamente, si deseas vincular el dispositivo
con un código de vinculación, selecciona Vincular dispositivo con un código de vinculación y, luego, ingresa el
código de 6 dígitos.

Ilustración - 27 “Opción para vincular dispositivo mediante código QR”

Aparecerá la cámara para poner acercarla al código QR.

Ilustración - 28 “Conectado ambos dispositivos”

Ilustración - 29 “Verificamos la conexión con el dispositivo móvil”

 Haz clic en la opción para ejecutar y podrás implementar la app en tu dispositivo.

Ilustración - 30 “Ejecutando mediante WIFI”

En el dispositivo móvil vemos que aparece nuestra aplicación sin ningún cable conectado, solo con el Wifi.

Ilustración - 31 “Ejecutando aplicación sin ningún cable”

Crea un nuevo proyecto, diseñando la interfaz para el registro de datos de estudiante.

-Diseñando la interfaz en Android studio.

Código

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

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="REGISTROS DE ESTUDIANTES"
android:textSize="24sp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.07" />
<ImageView
android:id="@+id/imageView"
android:layout_width="125dp"
android:layout_height="342dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="@drawable/img" />
<EditText
android:id="@+id/nombre"
android:layout_width="273dp"
android:layout_height="50dp"
android:ems="10"
android:hint="Nombres"
android:inputType="text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.505"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.35" />
<EditText
android:id="@+id/apellido"
android:layout_width="273dp"
android:layout_height="49dp"
android:ems="10"
android:hint="Apellidos"
android:inputType="text"
app:layout_constraintBottom_toTopOf="@+id/codigo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.505"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/nombre"
app:layout_constraintVertical_bias="0.5" />

<EditText
android:id="@+id/codigo"
android:layout_width="273dp"
android:layout_height="43dp"
android:ems="10"
android:hint="Código"
android:inputType="number"
app:layout_constraintBottom_toTopOf="@+id/carrera"
 app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.517"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/apellido"
app:layout_constraintVertical_bias="0.5" />
<EditText
android:id="@+id/carrera"
android:layout_width="271dp"
android:layout_height="45dp"
android:ems="10"
android:hint="Carrera"
android:inputType="text"
app:layout_constraintBottom_toTopOf="@+id/correo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/codigo"
app:layout_constraintVertical_bias="0.5" />
<EditText
android:id="@+id/correo"
android:layout_width="271dp"
android:layout_height="45dp"
android:layout_marginTop="466dp"
android:ems="10"
android:hint="Correo"
android:inputType="text|textEmailAddress"
app:layout_constraintBottom_toTopOf="@+id/fecha"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
<EditText
android:id="@+id/fecha"
android:layout_width="269dp"
android:layout_height="48dp"
android:ems="10"
android:hint="dd/mm/aaaa"
android:inputType="datetime"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.691" />
<RadioButton
android:id="@+id/femenino"
android:layout_width="102dp"
android:layout_height="42dp"
android:text="Femenino"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.178"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/fecha"
app:layout_constraintVertical_bias="0.164" />
<RadioButton
android:id="@+id/masculino"
 android:layout_width="112dp"
android:layout_height="44dp"
android:text="Masculino"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.58"
app:layout_constraintStart_toEndOf="@+id/femenino"
app:layout_constraintTop_toBottomOf="@+id/fecha"
app:layout_constraintVertical_bias="0.165" />
<Button
android:id="@+id/registrar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Registrar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/femenino"
app:layout_constraintVertical_bias="0.271" />
</androidx.constraintlayout.widget.ConstraintLayout>

Compilando mi interfaz de registro de estudiantes de la UCSM.

Ilustración - 32 “Interfaz para registrar estudiantes”

Cuestionario

¿Qué importancia tiene el desarrollo de Aplicaciones móviles frente al desarrollo de aplicaciones web?

El desarrollo de aplicaciones móviles y el de aplicaciones web son dos áreas cruciales en la tecnología moderna,
cada una con su propia importancia y beneficios distintivos.

Actualmente, todos tenemos un móvil de uso personal y en él una multitud de aplicaciones instaladas, las cuales a
veces muchas no utilizamos pero sabemos que si no las tuviéramos descargadas nos faltaría algo. Vivimos en una
era en la cual estamos acostumbrados a pulsar sobre un icono para iniciar cualquier tipo de actividad.

¿Qué App Móviles son las que más se utilizan en el mercado?

Las apps mas utilizadas o con un gran alcance de descargas según We are Social que recolectó más de 100 millones
de data points en más de 30 países entre enero y diciembre de 2023.

TikTok ha desbancado a Instagram (que pasó de liderar el top a secundarlo), llevándose así el título de la app más
descargada en móviles a nivel mundial. Por su parte, Facebook y WhatsApp mantuvieron el mismo lugar del año
pasado, quedando en tercer y cuarto puesto respectivamente.

Telegram y WhatsApp Business conservan el mismo sexto y noveno puesto del listado, respectivamente. Cabe
destacar el descenso de varias aplicaciones importantes, como Snapchat, que pasó del puesto 5 al 7; Facebook
Messenger, del octavo al décimo lugar; y la incorporación de Temu, el marketplace chino con bajísimos precios que
se convirtió en la app más descargada de España, ubicándose en el octavo Puesto. Spotify quedó fuera del listado
(en 2022 había ocupado el puesto 10).

Bibliografía y referencias

Setup Android Studio | Android Basics Compose - First Android app | Android Developers. (s. f.). Android
Developers. https://developer.android.com/codelabs/android-training-hello-world?index=..%2F..%2Fandroid-
training#6

Develoop. (2022, 1 septiembre). La importancia de las app. Develoop Software. https://www.develoop.net/es/la-

importancia-de-las-app/

Ruiz, A. (2024, 6 febrero). Top: las apps más descargadas del mundo. Marketing 4 Ecommerce.
https://marketing4ecommerce.net/top-apps-mas-descargadas-en-espana-en-mundo/

Kemp, S. (2024, 31 enero). Digital 2024: Global Overview Report — DataReportal – Global Digital Insights.
DataReportal – Global Digital Insights. https://datareportal.com/reports/digital-2024-global-overview-report