Construcción de la aplicación - Manu al de usuario

Anexo 3.- Manu al de usuario

4.2 Construcción de la aplicación

4.5 Aplicación “Museo de los Ferrocarrileros” 4.5.1 Vistas de la aplicación en ejecución

La aplicación está conformada por una vista principal, en donde se dará una cordial bienvenida (véase la figura 4.2) y un botón donde al presionarlo los mandará de inmediato a una segunda vista.

Figura 4.2. Vista principal de la aplicación

La segunda vista estará conformada por dos cuadros de texto en donde se imprimirá para este caso en particular el nombre completo del museo y en el segundo cuadro el nombre de la exposición. A continuación, se encuentran 3 botones los cuales serán para controlar el reproductor (play, pause y stop), por último una imagen que dice bienvenidos (véase figura 4.3.) la cual cambiará conforme el ID de las etiquetas NFC.

Figura 4.3. Vista secundaria de la aplicación

Conforme el ID de cada una de las etiquetas NFC, se cambiará la imagen, los letreros y el audio a reproducir respectivamente. A continuación, se muestra en las siguientes figuras las vistas para cada uno de los ID correspondientes a cada etiqueta.

Figura 4.5. Vista para la etiqueta con ID 2

Figura 4.7. Vista para la etiqueta con ID 4

4.6 Costos de elaboración del sistema de comunicación

En la realización del proyecto, se hace una inversión inicial de equipos y materiales, mismos que se enumeran a continuación:

1. Programas

Tabla 4.3 Costo de Programas

Programa Costo (Pesos Mexicanos MXN)

IDE eclipse Software libre

Acapela box Software libre

NFC App Curso Software libre

Camtasia Studio 4,729.11

Total 4,729.11

2. Equipos y Materiales

Tabla 4.4 Costo de equipo y materiales

Equipos y Materiales Costo (Peso Mexicano MXN)

Computadora (Laptop) 8,000

Dispositivo Móvil (Celular) 3,200

Etiquetas NFC paquete de 10 60

Papelería 700

Otros insumos 1,000

Total 12,960

3. Honorarios

Se toma en cuenta que un Ingeniero en computación cobra un estimado de $350 pesos la hora, si se considera que el proyecto se elaboró en un promedio de 1 año, se generaron gastos por concepto de proceso de análisis del trabajo, traslados, alimentación y un equipo de 3 integrantes, se obtiene:

Para el estudio de caso se realizaron trabajos de implementación para 5 obras de la exposición mismas que el tiempo de implementación fueron de 4 meses de programación, 8 meses de análisis (considere que el proyecto se inició desde cero) y que por los cuatro meses se tienen un total de $140 000 pesos + 40% de gastos de elaboración (análisis, desarrollo e implementación) suman en total $196 000 pesos.

Tabla 4.5. Costo Total

Gastos totales de elaboración del proyecto

Costo (Peso Mexicano MXN)

Programas 4,729.11

Materiales y Equipos 12,960

Honorarios 196,000

Total 213,689.11

Costo total del proyecto = $213,690 pesos.

4.6.1. Beneficios de la implementación del sistema de comunicación

El implementar el sistema de comunicación en un museo atrae bastantes beneficios a la hora de que se da a conocer la aplicación al público-usuario por las siguientes razones:

 Ya que el usuario no le genera un costo por adquirirla.

 Le da un plus al museo en vanguardia tecnológica.

 Pretende atraer mayor cantidad de usuarios.

 Si el museo desea usarlo como único medio de transmisión de información, ahorrará materiales de impresión de texto.

 Cubrirá la problemática de transferencia de información para personas analfabetas y/o ciegas.

 Evitar lo tedioso que es estar leyendo la información y a la vez ver la obra, le da más tiempo al visitante para poder disfrutar de la obra mientras al mismo tiempo escucha la descripción.

Conclusiones

Conclusiones

Se obtienen las siguientes conclusiones a partir de los resultados obtenidos tras el diseño y la implementación de la aplicación móvil.

Los museos necesitan de la integración de nuevas tecnologías en sus ambientes para lograr la interacción con los visitantes. Los nuevos contenidos atraerán mayor cantidad de visitas y modernizarán la forma en que las personas acceden a la información en los ambientes del museo.

La aplicación móvil permite acceder a la información de las piezas de arte en un museo. Su uso es sencillo e intuitivo en base a que solo tiene las vistas necesarias y logra brindar la información de la pieza de arte en corto tiempo.

Como se mencionó en este proyecto, esta nueva tecnología ya integrada en los dispositivos móviles ha llegado a invadir al ser humano, como usuario de la misma. Además, está tecnología que suma a los dispositivos que tienen mayores ventajas en diferentes contextos, ya que puede convivir perfectamente con tecnologías ya existentes, haciendo que los servicios que ya se ofrecen se puedan extender, facilitando así el día a día de los usuarios en sus actividades.

Se plantean algunas mejoras en el Sistema de Comunicación, las cuales se enumeran a continuación:

1.- Una base de datos externa que facilite la implementación de la aplicación en museos de gran tamaño.

2.- Ventana externa para visualizar la imagen de la obra en toda la pantalla del dispositivo móvil.

3.-Compatibilidad de la aplicación con otros Sistemas Operativos Móviles.

4.-Opcion para acceder al texto completo de la exposición si el museo así lo permite. 5.- Posibilidad de ver la aplicación en los idiomas más utilizados en el mundo.

Anexos

Anexo 1.- Código de la Aplicación

En este capítulo se detallará como está compuesta la aplicación y el código necesario para crearla especificando sus funciones y las partes que la conforman.

package com.software.museosnfc;

Código para vistas de la aplicación

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentStart="true" android:layout_alignParentLeft="true" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:orientation="vertical" android:background="@drawable/museo" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <TextView android:id="@+id/Bienvenidos" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="22dp" android:gravity="center" android:text="@string/hello_world"

Indica el nombre del proyecto.

En esta parte se implementa lo que es el nombre de la vista, las dimensiones, el margen y el fondo que en este caso es una imagen.

Se mandan llamar el String, el cual contienen alguna oración, en este caso es el de

la “Bienvenida” y se da

69 android:textColor="@color/negro" /> <TextView android:id="@+id/seguiente" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="185dp" android:layout_marginStart="50dp" android:layout_marginLeft="50dp" android:text="@string/siguiente" android:textColor="@color/verde" /> <Button android:id="@+id/enter" android:layout_width="174dp" android:layout_height="wrap_content" android:layout_marginBottom="74dp" android:gravity="center_horizontal" android:onClick="enter" android:padding="12dp" android:layout_marginTop="60dp" android:text="@string/enter" android:textColor="@color/blanco" /> </LinearLayout> </RelativeLayout>

Se mandan llamar el String

correspondiente a “Presione Enter para continuar” y se da

forma a la letra.

Se da formato al botón y se enlaza con la vista siguiente mediante el id enter, para entrar a la siguiente pantalla.

Esta es la vista principal

Segunda vista (Reproductor)

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@drawable/segundav" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" > <ProgressBar android:id="@+id/progressBar1" style="?android:attr/progressBarStyleHorizontal" RelativeLayout TextView android:id="@+id/Bienvenidos" TextView android:id="@+id/seguiente" Button

En esta parte se declara la segunda vista en donde contendrá el reproductor sus botones, visualizará las imágenes correspondientes a cada ID.

Se declara una línea de progreso la cual ira indicando el progreso que tenga cada audio al reproducirse.

71 android:layout_below="@+id/tv2contador" android:layout_marginTop="21dp" /> <ImageButton android:id="@+id/btnpause" android:layout_alignBottom="@+id/btnstop" android:onClick="pausa" android:src="@drawable/pausa" /> <TextView android:id="@+id/pieza" android:text="Medium Text" android:textAppearance= "?android:attr/textAppearanceMedium" /> <TextView android:id="@+id/tv2contador" android:layout_marginTop="20dp" android:text="@string/id_tvinicioCancion" /> <ImageView android:id="@+id/IV_a_mostrar" android:scaleType="matrix" android:layout_below="@+id/btnpause" android:src="@drawable/diegorivera" /> </RelativeLayout>

Se declara un botón con ID pausa y la función android:onClick="pausa" para al presionar el botón mande llamar una determinada función llamada pausa. Se enlaza con las funciones de los otros dos botones para que efectué las acciones de reproductor. Este proceso se hace igual la declaración para los botones de stop y play.

Se declara el cuadro donde se imprimirá el nombre de la exposición. Es parecida la declaración para el nombre del autor o museo en este caso solo se varea el ID.

Se declara un cuadro que mostrara un contador indicando el minuto y segundo en el que va el audio al reproducirse. Se declara el espacio donde se imprimirán las imágenes al mandarlas llamar por el ID de la etiqueta NFC. Por el momento imprimirá una imagen de bienvenida hasta el momento que se pase por una etiqueta NFC.

72 Código para cambio de vista.

Intent vistanueva = new Intent(MainActivity.this,vistareproductor.class); startActivity(vistanueva);

Código para almacenar datos

datosAguardar.setId(0);

datosAguardar.setNombre("Museo de los Ferrocarrileros");

datosAguardar.setPieza("Bienvenido datosAguardar.setAudio("audio1.mp3"); datosAguardar.setImagen("termino");

datosAguardar.setTexto("Pintura de hace muchos años"); miBaseDeDatos.insertExposicion(datosAguardar);

Impresión de datos <EditText android:id="@+id/pieza" Contador del reproductor <TextView android:id="@+id/tv2contador" Progreso del audio <ProgressBar> Botones del reproductor <ImageButton>

Espacio para visualizar de las imágenes

Se registran los datos que se mandaran llamar. Se repite el proceso para almacenar para cada ID. Almacena en la base de datos. Se manda llamar la segunda vista

public class DatosBD { private String nombre; private String pieza; private String imagen; private String audio; private String texto; private long id;

private static final String CREATE_STATEMENT = "CREATE TABLE "+ TABLENAME + " ("+ COLUMN_ID + " INTEGER PRIMARY KEY,"+ COLUMN_NOMBRE+ " TEXT, "+

COLUMN_PIEZA+ " TEXT, "+ COLUMN_IMAGEN+ " TEXT, "+ COLUMN_AUDIO+ " TEXT, "+ COLUMN_TEXTO+ " TEXT)";

public void onCreate(SQLiteDatabase db) { db.execSQL(CREATE_STATEMENT); } ContentValues values = new ContentValues(); values.put(COLUMN_ID, exposicion.getId()); values.put(COLUMN_NOMBRE, exposicion.getNombre()); values.put(COLUMN_PIEZA, exposicion.getPieza()); values.put(COLUMN_IMAGEN, exposicion.getImagen()); values.put(COLUMN_AUDIO, exposicion.getAudio()); values.put(COLUMN_TEXTO, exposicion.getTexto()); SQLiteDatabase db = getReadableDatabase();Cursor c;

c = db.rawQuery("SELECT * FROM "+TABLENAME, null);

Se crea una clase la cual almacenará cada uno de los datos para mandarlos llamar.

Se crea la tabla contact en donde almacenará ID INTEGER PRIMARY KEY, age INTEGER, name TEXT.

Se crean los datos y se almacenan en las tablas para mandarlos llamar

Mediante Contentvalues se interactúa con los datos.

Se asignan valores a las columnas de las tablas.

Creamos un cursor y realizamos la llave primaria.

public DatosBD getById(long id) {

SQLiteDatabase db = getReadableDatabase(); Cursor c;

c = db.rawQuery("SELECT * FROM "+TABLENAME+" WHERE

"+COLUMN_ID+"="+id, null);

Código para NFC

mNfcAdapter = NfcAdapter.getDefaultAdapter(this);

if (mNfcAdapter == null) {

Toast.makeText(this, "Este dispositivo no

soporta NFC", Toast.LENGTH_LONG).show();finish(); return;}

if (!mNfcAdapter.isEnabled()){mTextView.setText(""); mTextView.setText("NFC desactivado");

AlertDialog.Builder dialogo = new AlertDialog.Builder(this);

dialogo.setTitle("NFC está desactivado!!"); dialogo.setMessage("Es necesario activar el módulo NFC para que la aplicación funcione, si ya lo activaste presiona" +" actualizar.\n\n" + public void onClick(DialogInterface dialog,

int which){startNfcSettingsActivity(); recreate();}}) else {mTextView.setText("NFC activado");}

Obtenemos la base de datos y creamos un cursor para que interactúe con la llave primaria

Realizamos la siguiente asignación para obtener el adaptador predeterminado de NFC para el dispositivo donde se encuentra instalada la aplicación.

Se verifica si el dispositivo donde se instaló la aplicación cuenta con NFC, si si continua, de lo contrario manda un mensaje avisando que no lo soporta y se sale de la aplicación

Verifica si el NFC se encuentra activado, si no manda un cuadro de dialogo para activarlo. Manda ajustes si la SDK es mayor de 16 si no rebobina la función activity. Si se encuentra activado manda un mensaje avisando que lo está.

protected void startNfcSettingsActivity() {

if (android.os.Build.VERSION.SDK_INT >= 16) { startActivity(new Intent(android.provider. Settings.ACTION_NFC_SETTINGS)); } else { startActivity(new Intent(android.provider. Settings.ACTION_WIRELESS_SETTINGS));}} if(NfcAdapter.ACTION_TAG_DISCOVERED.equals ( intent.getAction() )) {mytag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG); Toast.makeText(this, "Detectado!!", Toast.LENGTH_SHORT).show();

Parcelable[] rawMsgs = intent.getParcelableArrayExtra( NfcAdapter.EXTRA_NDEF_MESSAGES);

NdefMessage msg = (NdefMessage) rawMsgs[0]; NdefRecord record = msg.getRecords()[0];

String payload = new String(record.getPayload()); String cortado=payload.substring(3);

cajaTag.setText(cortado);

protected void onPostExecute(String result) {if (result != null)

{cajaTag.setText("Contenido Leido: " + result);}}

int id = Integer.parseInt(cortado); TablaDatos cm = new TablaDatos(this); exposicion = cm.getById(id);

switch(id)

{case 1:

Se comprueba la versión de Android para activar el NFC.

La función NfcAdapter se encuentra en modo lectura y obtiene el contenido de la etiqueta NFC.

El contenido de la etiqueta NFC lo convierte a texto y recorta la parte de codificación. Con la parte recortada se hace la búsqueda en la base de datos. Mediante esta función se lee las etiquetas NFC.

imagenAinsertar.setImageResource(R.drawable.ferrocarriluno); mp = MediaPlayer.create(this, R.raw.audio1);

Toast.makeText(this, "Audio Cargado", Toast.LENGTH_LONG).show(); handler = new Handler();

miPB = (ProgressBar)findViewById(R.id.progressBar1); miPB.setMax(mp.getDuration());

break;

Codigo para reproductor

if(mp==null){ switch(MonitorDeId){ case 1: mp = MediaPlayer.create(this, R.raw.audio1); break; mp.start(); miPB.setMax(mp.getDuration()); while(progressStatus < mp.getDuration()) {progressStatus = mp.getCurrentPosition(); if(mp==null){ mp = MediaPlayer.create(this, R.raw.musicaapp);} mp.start(); miPB.setProgress(progressStatus); segundos = progressStatus/1000; if(segundos==60) { minutos=+1;}

else if(segundos>=60){ segundos=segundos-60;}

Las rutas de los datos se meten a un switch para mandar llamar solo la información requerida por la etiquetas NFC. Manda llamar solo el audio especificado.

Va ir indicando el progreso del audio en la barra de la pantalla Saca la duración del audio que se va a reproducir.

Si no hay audio reproduciéndose y presionan el botón play comienza a reproducir.

Indica cuánto tiempo lleva iniciado el audio.

String cuenta = "0"+minutos+":"+segundos; TextView cp = (TextView)findViewById (R.id.tv2contador);

cp.setText(cuenta);

public void stop(View view){ if(mp!=null){

Toast.makeText(this, "stop", Toast.LENGTH_SHORT).show(); progressStatus=0;//borrar

miPB.setProgress(0);//borrar mp.stop();

mp = MediaPlayer.create(this, R.raw.musicaapp);} if(mp!=null && mp.isPlaying())

{mp.pause();

Toast.makeText(this, "pausa", Toast.LENGTH_SHORT).show();} else{

mp.start();

Toast.makeText(this, "play", Toast.LENGTH_SHORT).show();}

Al presionar el botón de stop verifica que el audio no esté en 0, si no lo está regresa el progreso a 0 y el estado del audio igual a 0.

Detiene el progreso del audio y la reproducción

Para grabar las etiquetas NFC utilizaremos otra aplicación similar a la anterior con la diferencia que solo tendrá el código de NFC de la anterior.

<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:background="@drawable/museo" > <Button android:id="@+id/btnGrabar" android:layout_marginBottom="120dp" android:onClick="grabarTag" android:text="@string/id_btnGrabar" /> <TextView android:id="@+id/tvNFC" android:layout_above="@+id/etContenidoTag" android:text="@string/id_ActivarNfc" android:textColor="@color/verde" /> <EditText android:id="@+id/etContenidoTag" android:hint="@string/id_ContenidoTag" > </RelativeLayout> Parámetros de margen de la vista para grabar las etiquetas NFC, contiene el fondo.

Contiene el formato y la función onClick para que cuando sea tocado realice la función que se le asigne

Se visualiza un texto que indica si el NFC se encuentra activado o desactivado

Es un cuadro para ingresar el texto deseado en las etiquetas NFC

cajaTag = (EditText)findViewById(R.id.etContenidoTag);

botonGrabar = (Button)findViewById(R.id.btnGrabar);

mTextView = (TextView) findViewById(R.id.tvNFC);

Utilizamos todo el código anterior de NFC de la aplicación anterior pero además agregamos una nueva funcion para grabar Etiqueta NFC

public void grabarTag(View view) { try{ if(mytag == null) {Toast.makeText(context, context. getString(R.string.error_notag), Toast.LENGTH_SHORT).show();

Texto que indica el estado del NFC Cuadro para ingresar texto

Botón para grabar etiqueta NFC

Declaro los componentes de mi vista principal

Si no existe etiqueta NFC para escribir muestra un mensaje indicándolo.

NdefFormatable ndeff = NdefFormatable.get(tag); try{progreso2();

ndeff.connect();

ndeff.format(message);

Toast.makeText(this, "Dando formato a tag...", Toast.LENGTH_LONG).show();

ndeff.close(); pDialog.dismiss();

Toast.makeText(this, "Finalizo proceso con exito!!", Toast.LENGTH_LONG).show();}

String lang = "us";//en

byte[] textBytes = text.getBytes();

byte[] langBytes = lang.getBytes("US-ASCII"); int langLength = langBytes.length;

byte[] payload = new byte[1 + langLength + textLength];

payload[0] = (byte) langLength; System.arraycopy(langBytes, 0, payload, 1, langLength);

System.arraycopy(textBytes, 0, payload, 1 + langLength, textLength);

NdefRecord recordNFC = new NdefRecord(NdefRecord.

TNF_WELL_KNOWN, NdefRecord.RTD_TEXT, new byte[0], payload);

return recordNFC;

Tag tag = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);

new NdefReaderTask().execute(tag);

TextView tv2 = (TextView) findViewById(R.id.tvNFC);

Se le da formato a la etiqueta NFC y cuando acaba manda un aviso.

Guarda el mensaje que se grabará en la etiqueta NFC. Graba la etiqueta NFC con el contenido que deseamos. Muestra el estado del NFC

Anexo 2.- Requerimientos de la aplicación “Museo de los Ferrocarrileros”

En esta fase lo que se hará es explicar con un poco de detalle los pasos a seguir para hacer un adecuado uso de la aplicación facilitando al usuario su recorrido del museo, sin que tenga que leer toda la información recabada en este proyecto enfocándose solo al uso.

Como primer paso para hacer uso de esta aplicación es contar con un dispositivo móvil que contenga NFC.

 Requerimientos del entorno de capacitación para los encargados de implementar el sistema.

 Proyector.

 Computadora con acceso a red.

 Etiquetas NFC.

 Celular con Sistema Operativo Android.

 Aplicación NFC en el celular.

 Personal que interactuara con la implementación y/o mantenimiento del sistema.

 Papel y lápiz para los participantes.

 Espacio acondicionado para la exposición.

 Copia del manual para cada uno de los participantes.

 Requisitos mínimos del dispositivo móvil para implementar la aplicación:

 Android 4.4.2.

 Espacio suficiente para instalar la aplicación.

Anexo 3.- Manual de Usuario

Procedimiento para la ejecución del Sistema de Comunicación con Equipos Móviles para Museos

1. El equipo móvil debe contar con el sistema de comunicación móvil NFC.

2. Las etiquetas NFC deben estar cargadas previamente con la información correspondiente a cada una de las piezas que cuente con el sistema.

3. Se sugiere poner las etiquetas NFC cerca de la pieza para hacer entendible que información es la que contiene.

4. Para que pueda transferirse la información de la etiquetas NFC hacia el teléfono, debe estar activado el NFC en el teléfono.

5. Acerque el equipo móvil a la etiquetas NFC, que exista un pequeño contacto entre ambos hasta que cambie la pantalla de inicio de la aplicación.

6. Para reproducir el audio de click en el símbolo de Play

7. Para pausar el audio de click en el símbolo Pause

8. Para detener el audio de click en el símbolo Stop

Bibliografía

[1] Visitemos México “Museos”, http://www.visitmexico.com/es/museos-en-mexico, Fecha de consulta: 20/09/14.

[2] INAH, “Red de Museos del INAH”, http://www.inah.gob.mx/museos, Fecha de consulta:20/09/14

[3] CONACULTA, “Encuesta Nacional”, http://www.conaculta.gob.mx/encuesta_nacional/, Fecha de consulta:20/09/14.

[4] Martin Patricia, “La importancia de visitar museos”,

http://www.elfinanciero.com.mx/opinion/la-importancia-de-visitar-museos.html, Fecha de consulta: 09/01/15

[5] idcnoticias, “En 2015 el 70% de celulares serán inteligentes”,

http://www.idconline.com.mx/juridico/2013/06/18/en-2015-el-70-de-celulares-seran- inteligentes, Fecha de consulta: 10/01/15

[6] El universal, “Smartphone, promotores de la tecnología NFC”,

http://www.eluniversal.com.mx/computacion-tecno/2013/nfc-smartphones-aumentan- 79449.html, Fecha de consulta: 10/01/15

[7] Campodocs, “ Near Field Communication“, http://campodocs.com/articulos- enciclopedicos/article_92483.html, Fecha de consulta:10/01/15

[8] HTK-RFID, “NFC un nuevo estilo de vida”, Tecnologia RFID, (http://www.htk- rfid.com/blog/2013/03/nfc-un-nuevo-estilo-de-vida/), Fecha de consulta:05/09/14

[9] Chavarría Chavarría Daniel, ”Tecnología de Comunicación de Campo Cercano (NFC) y sus Aplicaciones ”, Escuela de Ingeniería Eléctrica de la Facultad de Ingeniería de la

In document Sistema de comunicación con equipos móviles para museos utilizando tecnología NFC (página 59-87)