Saltar al contenido

Cómo programar una aplicación de prueba en Android

Cómo programar una aplicación de prueba en Android

Este tutorial es para principiantes que no tienen (o tienen muy poca) experiencia en desarrollo. Después de completar el tutorial, debería poder crear una aplicación que consta de lo siguiente:

  • visualización de una pregunta en la pantalla con 3 respuestas para elegir
  • posibilidad de validar una respuesta con un simple toque
  • visualización de un mensaje que indica si la respuesta es verdadera o falsa

Por supuesto, no tiene que detenerse en una sola pregunta. Cuando el tutorial esté completo, debería poder crear tantas preguntas como desee en su aplicación.

Resumen

1. ¿Qué necesitamos?

Si ya ha leído nuestro primer tutorial (que le recomiendo encarecidamente que lo haga antes de pasar al tutorial a continuación), sabe que no se puede crear una aplicación de Android con un editor de texto simple.

Necesitarás el última versión de JDK (Kit de desarrollo de Java). Este paquete es necesario para hacer programas en java, también hay que diferenciarlo de JRE (Java Runtime Environment) que permite ejecutar programas (en resumen: no tiene herramientas de desarrollo). En Windows, solo tiene que instalar el JDK desde esta página. En Linux debería encontrarlo en repositorios o mediante un PPA.

Usaré el mismo software que en el primer tutorial, a saber Estudio de Android. Si aún no lo ha instalado, lo encontrará siguiendo el enlace oficial proporcionado por Google. Si está utilizando Linux, puede descargarlo e instalarlo desde el sitio oficial, pero en muchos casos debería encontrarlo directamente en los repositorios. Si, como yo, usa arch, lo encontrará en el AUR. Generalmente, asegúrese de tener una versión actualizada.

Por supuesto, también necesitará un dispositivo Android para probar su aplicación. No olvide instalar el Controladores ADB porque de lo contrario, Android Studio no detectará su teléfono inteligente.

smartphone héroe jessica Solo ves la interfaz de una aplicación en la pantalla, todo lo que hay detrás es misterioso. © ANDROIDPIT

2. ¿Qué necesita saber antes de comenzar?

Vamos a hacer cosas mucho más complejas que las que hemos visto en el tutorial anterior. Antes de comenzar, es necesario explicar varios conceptos clave.

Diseño / Actividad

Su aplicación mostrará contenido en la pantalla. Interactuarás con tu pantalla y tu acción abrirá una nueva pantalla. Tomemos un ejemplo concreto: nuestra aplicación de prueba (futura). Verás en una primera pantalla una pregunta y tres botones clicables (las respuestas), interactúas presionando uno de ellos, luego aparece una nueva pantalla e indica si la respuesta es buena o mala.

Por lo tanto, deberá crear un diseño para cada una de estas pantallas, es decir, una apariencia, en archivos .xml. Tenga la seguridad, lo guiaremos paso a paso, pero ya sabe un poco sobre el tema ya que ya hemos editado un archivo XML al crear nuestro Hello World.

Clase Java

En pocas palabras, el código en Java representa todos los procesos necesarios para que la aplicación funcione, conectando la interfaz de usuario basada en diseños con los procesos de gestión de elementos oscuros. Cuando creas que has terminado tu aplicación, necesitas compilar el código para poder usarlo en tu teléfono y si has hecho un lío en la programación se te informará en ese momento.

aplicación androidpit quiz Así es como se verá nuestra aplicación. ¡No podría estar más sobria! © ANDROIDPIT

Para los principiantes, es particularmente difícil sumergirse en un código java. El objetivo de este tutorial no es solo lograr nuestro objetivo (crear una pregunta, posibles respuestas y mostrar un resultado), sino también descubrir algunos fragmentos de código y comprenderlos. Esto puede ser largo y complejo, pero el placer de tener éxito es aún mayor. Todos los códigos para este ejercicio están disponibles al final del ejercicio.

3. ¿Qué problemas podemos encontrar?

Cuando escribe en código, cada carácter cuenta. Un error tipográfico evitará que su aplicación funcione, así que tenga cuidado de no ingresar una coma al presionar n, o un signo de exclamación al presionar m, etc.

La compilación puede ser problemática, había recibido un mensaje que explicaba que la compilación había fallado debido a Build Tools. Solo ve a Archivo> Estructura del proyecto> Propiedades> Versión de herramientas de compilación> 23.0.3 en lugar de 24.0.1.

AndroidPIT Escena de asesinato 10 Si tienes algún problema, ¡no lo saques de tu teléfono! © ANDROIDPIT

Si no ve los cambios en la interfaz cuando edita los códigos xml, verifique si su versión de JDK y su versión de Android Studio están actualizadas.

4. Desarrollo

Ahora vayamos al meollo del asunto: crear la aplicación. Te aconsejo que te tomes el tiempo de asimilar el contenido de cada paso antes de pasar al siguiente, querer ir más rápido que la música es la mejor forma de cometer errores.

a. Creación de proyectos

Nada es más fácil. Si está iniciando el software por primera vez solo tiene que hacer clic en "Iniciar un nuevo proyecto de Android Studio", de lo contrario, solo debe hacer clic en la parte superior izquierda de Archivo> Nuevo> Nuevo proyecto. Luego complete las siguientes ventanas de acuerdo con sus preferencias, pero sea simple: solo estamos interesados ​​en teléfonos inteligentes / tabletas (no es necesario Android Auto o TV). Además, te aconsejo que ingreses la misma información que yo para que podamos entendernos a lo largo del tutorial.

Elija 'Actividad vacía' ya que crearemos todo nosotros mismos. En lo que a mí respecta, entré com.my-test en tanto que Dominio de la empresa, prueba dentro Nombre de la aplicación, Activity_monquestionnaire como nombre del diseño y mainQuestionnaireActivity como nombre de la actividad.

Una vez que se haya completado y validado toda la información, su proyecto debería cargarse (bastante lentamente, si su computadora no es una flecha). Asegúrese de que el nombre del directorio para sus clases de Java sea efectivamente com.mon_test.test, y no mon_test.com o com.com.mon_test.com. Por supuesto, puede ingresar el nombre de paquete que desee (por ejemplo, my_test.com.test) pero recuerde usar siempre el mismo nombre en todas sus clases de Java y su manifiesto, en la línea al principio donde ingresa el nombre del paquete. !

B. Editar diseños

Una vez que su proyecto se haya cargado, debería ver un árbol a la izquierda que le permitirá navegar entre archivos. Al crear el proyecto, el propio software creó ciertos elementos. En nuestro árbol, podemos ver un directorio 'res'. Abrámoslo usando la pequeña flecha al lado, y entre los nuevos elementos que ahora se muestran podemos encontrar 'diseño'. Debería encontrar su archivo XML recién creado, con el nombre que le dio.

Diseño 1: la pregunta

Llamé a este archivo activity_monquestionnaire.xml. Ábralo, encontrará una interfaz vacía en la vista previa. En esta actividad mostraremos nuestra pregunta y sus tres posibles respuestas. Por supuesto, puede usar la función de texto de la paleta para agregar texto, o botones en los que ingresará sus respuestas. Como somos guerreros y no queremos usar los gráficos de vista previa, haremos clic en 'Texto' debajo de la paleta para que podamos editar el código.

Estamos aquí en la edición del código de actividad. Comience su código con estas líneas:


<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"

android: layout_width = "match_parent"

android: layout_height = "match_parent"

android: orientación = "vertical"

android: padding = "20dp">


Algunas de estas líneas se generaron por defecto, el resto no son lo suficientemente importantes como para ser mencionadas en este tutorial. Lo que es más interesante es la siguiente parte que nos permite agregar algo de texto.

  • Adición del texto "Pregunta 1"

<TextView

android: id = "@ + id / textTitle"

android: layout_width = "wrap_content"

android: layout_height = "wrap_content"

android: layout_gravity = "center_horizontal"

android: text = "Pregunta 1"

android: textSize = "50sp">


Los controles están entre vigas (< et >). La primera parte entre los chevrones "abre" el comando, la segunda con / después de <se cierra. Todo lo que encuentre dentro le permite configurar texto TextView es un comando para mostrar texto.

En nuestro ejemplo, encontramos 'android: layout_gravity = "center_horizontal"' que le permite centrar el texto. Por supuesto, Android: text = "Pregunta 1" le permite mostrar la 'Pregunta 1' en la pantalla. El comando textSize le permite ajustar el tamaño del texto. Puede cambiar estos valores y ver los cambios en la vista previa para elegir el aspecto que desee.

Continuemos con el código. Ahora podemos mostrar la pregunta "¿Cuál es la capital de Francia?" nuevamente usando TextView.


<TextView

android: id = "@ + id / textResult"

android: layout_width = "323dp"

android: layout_height = "210dp"

android: gravedad = "centro"

android: text = "¿Cuál es la capital de Francia?"

android: textSize = "30sp">


Una vez hecho esto, ahora podemos mostrar las respuestas en la pantalla, una debajo de la otra, cada una en un botón. Entonces ya no usaremos TextView ya que queremos un botón.


<Botón

android: id = "@ + id / buttonRoll"

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: layout_gravity = "centro"

android: padding = "20dp"

android: text = "Marsella"

android: textSize = "18sp">


El comando , pero tenga cuidado de cambiar el ID de cada botón. Por ejemplo, para Marsella puse android: id = "@ + id / buttonRoll", para París puse android: id = "@ + id / buttonRoll2" y para Toulouse android: id = "@ + id / buttonRoll3". Más adelante veremos por qué es importante la identificación.

Ahora tenemos nuestra pregunta y 3 posibles respuestas. Comprueba que has cerrado el pedido. con al final del texto. Recuerde guardar su proyecto con regularidad, nunca se sabe lo que puede suceder (por ejemplo, un corte de energía).

Monquestionnaire de actividad androidpit Aquí está el comienzo del código xml para esta actividad. © ANDROIDPIT

Diseño 2: el resultado

Ahora echemos un vistazo a nuestra segunda actividad: lo que aparecerá en la pantalla cuando haga clic en un botón. Cuando haces clic en el botón que crees que es tu respuesta, debería aparecer una nueva pantalla. Obviamente, dependiendo de la respuesta, leeremos "respuesta correcta" o "respuesta incorrecta". Dejemos este problema a un lado y digamos a la máquina que muestre "Respuesta 1".

Comencemos creando la actividad haciendo clic derecho en el árbol en 'diseño', luego haciendo clic en 'Nuevo'> 'Actividad'> Actividad vacía. Ingrese el archivo xml recién creado (lo llamé activity_resultats) y copie el siguiente código:


<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"

android: orientación = "vertical" android: layout_width = "match_parent"

android: layout_height = "match_parent">

<TextView

android: id = "@ + id / textResultatQuestion"

android: layout_width = "wrap_content"

android: layout_height = "wrap_content"

android: layout_gravity = "center_horizontal"

android: text = "Respuesta 1"

android: textSize = "50sp">


Nada nuevo, ya está familiarizado con TextView, por lo que es muy sencillo. Ahora tiene un diseño que mostrará el texto 'Respuesta 1'.

androidpit android studio activity2 Aquí está el código para esta segunda actividad. © ANDROIDPIT

vs. Editar clases de Java

¿Encuentras las cosas demasiado simples? Entonces, lo que sigue te complacerá porque todo se volverá más complejo. Vaya a su árbol y busque el directorio 'java', que normalmente se encuentra debajo de 'manifiestos'. Allí debería encontrar un archivo java asociado con su proyecto. En mi caso, este es el directorio com.mon_test.test donde cambié el nombre del archivo con el nombre 'mainQuestionnaireActivity' para distinguirlo del que agregaremos más adelante aquí. Si no ve la opción 'Cambiar nombre' que le permite cambiar el nombre cuando hace clic con el botón derecho en el archivo, vaya a 'Refactorizar' y luego a 'Cambiar nombre'.

¿Recuerda cuando creó su segundo archivo xml (en el que dice "Respuesta 1")? Normalmente ha creado (sin su intervención) una clase java en este momento, vea si encuentra una con el nombre que ingresó (activity_resultats) y llévela a la misma carpeta en la que está mainQuestionnaireActivity si no está allí (normalmente debería usarlo por defecto durante la creación). Una vez hecho esto, cambie el nombre de su clase java activity_resultats a 'reponse1Activity'. Si por alguna razón no puede encontrarlo, simplemente puede crearlo haciendo clic derecho en com.mon_test.test y luego Nuevo> Clase Java. Entonces recuerde darle el nombre reponse1Activity.

Clase Java – Cuestionario

Ingrese el archivo java de su cuestionario (mainQuestionnaireActivity), verá que el sistema ya generó texto en él durante la creación.

La primera parte del código debería ser así.


paquete com.mon_test.test;

importar android.content.Intent;

importar android.support.v7.app.AppCompatActivity;

importar android.os.Bundle;

importar android.view.View;

importar android.widget.Button;

mainQuestionnaireActivity de clase pública extiende AppCompatActivity {


  • Creación del elemento CITY

Ahora le diremos al sistema que queremos usar una clave. Contendrá el valor de la respuesta (es decir, ciudad). Para simplificar, llamaremos a esta clave CITY y primero le daremos el valor de ciudad.


Cadena final CITY = "ciudad";


  • Asociar ID de botón con nuevos elementos

La primera parte del siguiente código no se detallará aquí (¡pero aún es necesario!), La segunda es mucho más interesante. La idea ahora es asociar cada botón (es decir, cada una de las tres posibles respuestas) con un valor, que luego se utilizará para realizar una acción. Entonces usemos esto:


@Anular

protected void onCreate (Bundle SavedInstanceState) {

super.onCreate (SavedInstanceState);

setContentView (R.layout.activity_monquestionnaire);

Botón final response1 = (Botón) findViewById (R.id.buttonRoll);

Botón final response2 = (Botón) findViewById (R.id.buttonRoll2);

Botón final response3 = (Botón) findViewById (R.id.buttonRoll3);


Con la línea setContentView, le indicamos al código que nos va a interesar el archivo xml activity_monquestionnaire (aquí es donde se encuentran nuestros botones y sus ID).

Con las tres líneas que comienzan con "final", asociamos los botones ubicados en este archivo XML con 3 elementos (uno para cada botón): answer1 (para el primer botón), answer2 (para el segundo botón) y answer3 (para el tercero botón). Para hacer esto, usamos para cada uno de ellos el ID que usamos en nuestra página XML (sí, ¡por eso estos ID eran importantes!).

Está muy bien tener botones, pero si no puedes hacer nada con ellos, no nos ayudan mucho. Por lo tanto, es necesario asociar cada botón con una acción (o más precisamente con un nombre de acción), luego definir qué sucede cuando se lanza esta acción. Empecemos por la segunda parte porque es más complicada.

Por lo tanto, vamos a crear una acción que llamaremos 'clickSurBouton1' y definiremos qué sucede cuando se lanza esta acción. Para hacer esto, usaremos View.OnClickListener.


View.OnClickListener clickOnButon1 = nueva View.OnClickListener () {

@Anular

public void onClick (Ver v) {

Intención Intención = nueva Intención (mainQuestionnaireActivity.this, reponse1Activity.class);

intent.putExtra (CIUDAD, answer1.getText (). toString ());

startActivity (intención);

}

};


Este código nos permite varias cosas. En la primera línea, creamos una acción llamada clickOnButton1. Esta acción contiene 3 pasos:

  • la creación de un elemento que, una vez lanzado, le permite cambiar al código presente en la clase java reponse1activity (que aún no hemos editado)
  • recuperando el valor del texto de respuesta1 (concretamente es el texto del botón 1, es decir 'Marsella') y transmitiendo el valor a nuestra clave CITY.
  • el lanzamiento de este nuevo elemento que le permite cambiar la clase java

Podemos hacer lo mismo con los otros dos botones y asociarlos a los nombres de las acciones (adaptando los valores, claro: clickSurButton2 / answer2, clickSurButton3 / answer3).

  • Asociar una acción con el toque en los botones

Ahora que hemos creado estos nombres de acciones y les hemos dicho qué hacer, solo queda asociarlos con el toque en los botones, es decir, respectivamente a answer1, answer2 y answer3:


answer1.setOnClickListener (clickOnButton1);

answer2.setOnClickListener (clickOnButton2);

answer3.setOnClickListener (clickOnButton3);


Así, sea cual sea la elección del usuario, se tendrá en cuenta el botón en el que haga clic y el texto al que esté asociado será registrado por el sistema, y ​​comenzaremos en el código de nuestra segunda clase java que analizará lo que nuestra Se recibió la clave CITY.

Clase Java – Resultado

Como se explicó anteriormente, este código se iniciará automáticamente cuando el usuario haga clic en uno de los tres botones. Ahora vamos a editar el código para obtener el resultado que queremos.

Ingrese en response1Activity. Inicie su código con las siguientes líneas:


paquete com.mon_test.test;

importar android.app.Activity;

importar android.content.Intent;

importar android.os.Bundle;

importar android.support.v7.app.AppCompatActivity;

importar android.widget.TextView;

public class response1Activity extiende AppCompatActivity {


  • Creación del elemento CITY (aquí también)

Obviamente, aquí también usaremos use key, por lo que es importante usar el mismo nombre.


Cadena final CITY = "ciudad";


Luego usa el siguiente código:


@Anular

protected void onCreate (Bundle SavedInstanceState) {

super.onCreate (SavedInstanceState);


  • Cargando la pantalla de resultados (activity_resultats)

Lo primero que debe hacer es decirle a la máquina que cambie de pantalla. Presionó el botón, por lo que es hora de descartar la pregunta y mostrar una nueva, indicando si la respuesta es correcta o no. Por lo tanto, abandonaremos la pantalla activity_monquestionnaire para cambiar al diseño activity_resultat:


setContentView (R.layout.activity_resultats);


  • Creación del elemento de ciudad seleccionado

Ahora debemos procesar la respuesta. Recuerde que el valor transportado por CITY es solo un valor de tránsito, dependiendo de la elección del usuario (recuperado al presionar el botón de respuesta). Por lo tanto, vamos a decirle a la máquina que busque el valor de CITY y lo asocie con una variable que llamaremos Chosen City:


Intención Intención = getIntent ();

Cadena ciudad elegida = intent.getStringExtra (CITY);


Solo queda determinar si la respuesta es correcta o incorrecta. Hay varias formas de proceder, sugiero una de las posibles soluciones. Sabemos que la capital de Francia es París (sí, sí, te lo aseguro), lo que obviamente significa que villeChoisie debe contener la respuesta París (lo que significa que el usuario debe presionar el botón París, que envía el texto París a la ciudad elegida usando la tecla CITY).

  • Asociación con una buena o mala respuesta gracias al elemento 'resultado'

Vamos a crear un elemento que llamaremos 'resultado'. Este último puede tener dos valores de texto: '¡Respuesta correcta!' o 'Respuesta incorrecta', es simplemente necesario asociar el texto '¡Respuesta correcta!' a la respuesta de París.


String result = "¡Respuesta incorrecta!";

if (ciudad seleccionada.toLowerCase (). es igual a ("parís")) {

result = "¡Buena respuesta!";

}


Como nos gusta complicar las cosas, usaremos una función que ignorará todas las mayúsculas. Concretamente, el usuario ha enviado el texto París presionando el botón, y le decimos a la máquina que cancele el caso de este texto (es decir, elimine las mayúsculas). Esta función le permite reaccionar (enviar '¡Buena respuesta!' Si el texto enviado por el usuario es 'paris' (o Paris, o pAris, ya que cancelamos el caso). Esto es útil si ya no recuerda cómo lo había escrito su texto (en nuestro caso, con una P mayúscula), y así solucionar el problema.Esta historia en mayúsculas / minúsculas no es de mucha utilidad aquí, pero puede ser útil si está intentando crear otras aplicaciones.

  • '¡Respuesta correcta!' o '¡Respuesta incorrecta!'

¿Qué nos queda por hacer? Muestra este texto en el segundo diseño, es decir, el que aparecerá cuando el usuario haya presionado el botón. Recuerde el ID de nuestro texto en este diseño (el archivo xml que creó con el nombre activity_resultats, al principio), era textResultatQuestion. Gracias a su ID, vamos a asociar el texto de este elemento (es decir, el texto que aparece en la maquetación) a la variable vueResultat que creamos para la ocasión:


TextView vueResultat = (TextView) findViewById (R.id.textResultatQuestion);


Entonces, solo queda decirle a la máquina que muestre 'resultado' (es decir, el texto '¡Buena respuesta!' O '¡Mala respuesta!', Ya que sabemos si la respuesta es buena o no porque '¡Respuesta correcta!' Es solo se muestra si la respuesta es Paris, como se explicó anteriormente) en resultView, es decir en nuestro texto en el diseño activity_results. Para hacer esto, usaremos el siguiente comando:


if (resultView! = null) {

viewResult.setText (resultado);

}


Por lo tanto, resultView obtendrá el texto que aparece en 'resultado'. Solo tienes que agregar los dos que faltan} para cerrar el código:


}

}


Se acabó para tu primera pregunta / respuesta. Si lo desea, puede crear un botón y / o texto (por ejemplo, 'Siguiente pregunta') en su diseño de activity_resultats y configurarlo para que le permita ir a un nuevo diseño. Aquí mostrará una nueva pregunta y luego podrá comenzar todo el proceso nuevamente.

D. Actualización del manifiesto

Este archivo es muy importante. Debe declarar todas las actividades allí, así como otros elementos (por ejemplo, los permisos de la aplicación). Solo tienes que ir a la izquierda y buscar el directorio de manifiesto, normalmente es el primero. Solo contiene un archivo. Ábrelo y edítalo. A continuación encontrarás una copia del manifiesto que utilizo, puedes copiarlo y pegarlo.

androidpit android studio manifiesto Tu manifiesto debería verse así. © ANDROIDPIT

Luego, conecte su teléfono inteligente. Haga clic en Ejecutar> Ejecutar 'aplicación', verá aparecer una nueva ventana donde encontrará su teléfono inteligente (marque ADB si no lo ve). Valide y la aplicación debería iniciarse en su teléfono.

aplicación android studio run Así es como se ve la ventana en mi Honor 5X. © ANDROIDPIT

Conclusión y enlaces

Si todo salió bien, su aplicación debería funcionar. Espero que hayas disfrutado de este (largo) tutorial. Al igual que aprender un idioma, se necesita práctica y acostumbrarse tanto a los controles como a los mecanismos. Este es solo un segundo tutorial, después de todo. Encontrará todos los códigos a continuación, los comentarios están integrados en las clases java (después de // si es una sola línea de comentario, o entre / ** y * / si hay al menos dos líneas).

¿Logró crear esta aplicación? ¿Fue dificil? No dudes en comentarlo en el foro si tienes algún problema.

. (tagsToTranslate) tutorial (t) aplicación (t) programación (t) programa (t) programa (t) código (t) código (t) cuestionario (t) cuestionario (t) principiantes (t) android