Ejemplo Tiendita con Base de Datos, Usuarios y opción de agregar mas productos

Este ejemplo es la continuación del ejemplo anterior en el cual le agregamos almacenamiento con base de datos mas otras acciones con ella, puedes utilizar la aplicación de Tiendita sin Base de datos y agregar lo nuevo pero te recomiendo que empieces desde cero..

@Autor: Prof. Luis Mitre

Paso 1.

Iniciamos creando un nuevo proyecto en android Studio el cual llamare MiTiendita:

Al crear un nuevo proyecto aparecerá la imagen anterior.

  1. nombre de la Aplicación
  2. Paquete de instalación de la aplicación en Android, dejar por default el que pone android
  3. Ubicación del proyecto en la computadora preferentemente poner una ubicación fácil de localizar ya que necesitaremos acceder a ella.

Una vez llenado los datos oprimimos Next y aparacera la ventana siguente:

en la cual elegiremos el tipo de actividad que insertaremos por primera vez, es este caso es del tipo Empty Activity la seleccionamos y daremos siguiente:

en la ventana ponemos el nombre que recibirá nuestra actividad la cual Llamare VentanaFlashActivity, la cual sera la portada de inicio de nuestra aplicación.

Paso 2. 

Nos ubicaremos con el navegador de Windows en la ubicación de nuestro proyecto en el cual entraremos a la siguiente ruta:  C:\UbicacionDelProyecto\MiTienda\app\src\main\res en el cual encontraras las siguientes carpetas:

ahora procederemos a crear 5 carpetas con los nombres siguientes:

  1. drawable-mdpi
  2. drawable-hdpi
  3. drawable-xhdpi
  4. drawable-xxhdpi
  5. drawable-xxxhdpi

las cuales son donde almacenáramos las imágenes que utilizaremos en nuestra aplicación, quedando de la siguiente manera:

Cabe mencionar que el objetivo de estas carpetas es que debido a que tenemos diferentes tamaños y resoluciones de dispositivos es necesario poner las imágenes apropiadas para cada tipo para ello nos apoyaremos con la siguiente tabla:

una vez puesto las imágenes a utilizar para nuestra ventanaSplash procederemos a los siguiente.

Paso 3. 

Procedemos a poner una imagen en la ventana visual de nuestra actividad que en mi caso se llama: activity_ventana_flash.xml, quedando el código de la siguiente manera:

la cual se observaría de la siguiente manera:

Procederemos a asignarle código a la parte Java de esta actividad, el cual quedaría de la siguiente manera:

Nota: en caso de que no se quite el titulo de la actividad al ejecutar la aplicación tendremos que cambiar la herencia de la actividad VentanaSplashActivity que en mi caso es: AppCompatActivity por Activity esto es solo si no se quita el titulo.

Nota 2: Tendras unos errores ya que en la clase implementamos el uso de la base de datos que mas adelante crearemos No te Alarmes…..

Paso 4.

Creamos una nueva actividad pero ahora del tipo LoginActivity la cual la llamaremos Así, dando click derecho sobre la Carpeta APP:

Una vez creada la activity, como es una actividad pre diseñada por android Studio le aremos algunos cambios y borraremos código que para nuestro ejemplo no necesitaremos.

Empezaremos con la ventana Visual, ingresamos al archivo creado xml llamado activity_login.xml

Primero modificamos la caja de texto de usuario:

Código original:

Código Modificado:

Segundo modificamos la caja de texto de Contraseña:

Código Original:

Código modificado:

Por ultimo modificamos el Botón:

Código original:

Código modificado:

Paso 5.  

Ahora en la clase java de esta actividad llamada LoginActivity.java borraremos prácticamente todo el código que se encuentra en ella quedando de la siguiente manera:

Ahora procedemos a darle acciones al botón para validar el usuario, el usuario y contraseña estarán en una variable, el código quedara de la siguiente manera:

Nota: marcara error en algunas partes, este se quitara en el paso siguiente.

Paso 6. 

Crearemos la Actividad Principal la cual sera del tipo NavigationDrawerActivity la cual llamaremos PrincipalActivity:

Ahora procederemos a modificar la actividad para que quede a nuestro gusto empezaremos con modificar la barra lateral de navegacion de esta Actividad:

Paso a: cambiaremos la imagen y titulo de la barra de navegacion en el archivo llamado nav_header_principal.xml ubicado en la carpeta Layaout:

las flechas rojas indican la ubicación del archivo y las propiedades que cambiaremos quedando el código ya modificado de la siguiente manera:

Paso b: ahora cambiaremos las opciones que aparecerán en el menú deslizable, este archivo se encuentra en la carpeta menu y este se llama activity_principal_drawer.xml.

dentro de este estan los menus u opciones las cuales las modificaremos quedando de la siguiente manera:

Paso c: para evitar que nos marque error nuestra actividad Principal por haber modificado los menus iremos al Archivo PrincipalActivity.java en el cual ubicaremos un metodo llamado: onNavigationItemSelected(MenuItem item) el cual modificaremos quedando de la siguiente manera:

este método es el que nos ayudara a movernos entre ventanas.

Paso 7.  

Ahora crearemos los fragmentos que serán las subVentanas que pondremos en nuestra actividad principal que son las que harán las funciones de nuestra aplicación.

Creamos el primer fragmento el cual se llamara PortadaFragment dando click derecho sobre APP y luego en fragment y posteriormente en Fragment(Blank):

una vez creado el fragmenta al igual que las activities se generan 2 archivos un XML y otro JAVA por el momento modificaremos el archivo JAVA borrando la mayor parte del código solo quedara lo siguiente:

lo mismo haremos con los fragmentos restantes llamados:

  1. RegistrarFragment
  2. ConsultarFragment
  3. VentasFragment
  4. InventarioFragment
  5. NuevoUsuarioFragment
  6. AgregarFragment

aplicando el mismo procedimiento que el anterior.

Paso 8.

una vez creado todos los fragmentos procederemos a poner los componente visuales en cada fragmento para visualizar en cada ventana:

Fragmento Portada:

Nota: el codigo tendras que copiarlo entre las etiquetas de <FrameLayout> y </FrameLayout> ya que son las que marcan el inicio y el fin del fragmento

Fragmento Registrar:

Fragmento Consultar:

Fragmento Ventas:

Fragmento Inventario:

Fragmento Nuevo Usuario:

 

Fragmento Agregar:

 

Paso 9.

Ahora ya que tenemos los fragmentos listo procederemos a crear una clase que es la que nos permitirá insertar los fragmentos en la Actividad Principal para ello crearemos un paquete llamado Librerias :

ahora dentro del paquete librerías creamos la clase llamada   NonSwipeableViewPager la cual nos permitirá insertar los fragmentos a nuestra actividad

una vez creada la clase pondremos el siguiente código:

ahora en el archivo xml llamada contentPrincipal en la carpeta layout agregamos el siguiente componente que es la clase que creamos:

Paso 10.

Una vez que hayamos creado la clase anterior y la hayamos agregado al content principal procedemos a crear una clase que sera la encargada de indicarnos cual fragmento se tiene que observar al igual este nos permitirá estar cambiándolos, esta clase sera llamada PaginasAdapter y la crearemos dentro del paquete librerias. la cual quedaría de la siguiente manera:

Nota: Te marcara error en los nombres de los fragmentos, recuerda que solo cambia en los import el nombre del paquete «com.profeluismitre.mitienda.»  por el nombre de tu paquete

ahora en la clase Java PrincipalActivity.java modificamos el codigo para que podamos cambiar de fragmentos quedando la clase de la siguiente manera:

Nota: si observamos los cambios solo se hicieron en el metodo onCreate y en el metodo onNavigationItemSelected.

Paso 11.

Para poder continuar tendremos que descargar unas librerías que serán necesarias para que podamos usar la función de escaneo por código de barras la cual la obtenemos de la pagina: https://github.com/zxing/zxing

al descargar el archivo comprimido, extraemos su contenido quedando una carpeta llamada zxing-master la cual abriremos y entraremos a la siguiente ruta:

zxing-master\android-integration\src\main\java\com\google\zxing\integration\android

dentro de esta encontraremos dos archivos llamados: IntentIntegrator e IntentResult los cuales copiaremos seleccionándolos y oprimiendo las teclas de CTRL+C una vez hecho esto nos vamos a nuestro android studio y en la carpeta librerias daremos Click Derecho Pegar y aparecera una ventana como la siguiente en la cual le daremos OK:

con esto se habran copiado las dos clases que son las necesarias para activar el lector de codigo de barras.

Paso 12.

Para poder iniciar con las acciones de cada una de los fragmentos crearemos unas clases que seran de ayuda y de gran utilidad para nuestra aplicación y unos archivos XML para su funcionamiento.  todas las clases serán creadas en la carpeta librerias, y los Archivos XML en la carpeta layout.

Inciamos con los Archivos XML, damos Click derecho sobre la carpeta layout y en New-XML-Layout XML File

Le pondremos el nombre de elementos_lista:

y su código quedaría de la siguiente manera, el cual se utilizara para poder poner la información de los productos dentro de la ListView que se encuentra en Inventario y en Consultar:

con el mismo procedimiento ahora creamos el archivo XML llamado: elementos_ventas_lista.xml

con el mismo procedimiento ahora creamos el archivo XML llamado: dialogo_buscando.xml

con el mismo procedimiento ahora creamos el archivo XML llamado: dialogo_grabando.xml

con el mismo procedimiento ahora creamos el archivo XML llamado: dialogo_verificando.xml

con el mismo procedimiento ahora creamos el archivo XML llamado: textview_para_spinner.xml

 

ahora crearemos las clases Java iniciamos con Producto dentro de la carpeta Librerias:

Clase Producto:

Clase ListaAdapter:

Nota: En los import de la clase deberas cambiar el nombre del paquete del Import com.profeluismitre.mitienda.R  por el nombre del paquete de tu proyecto y lo terminas con la R mayuscula.

Clase MiBaseDatos: en esta se creara la base de datos que utilizaremos en nuestra aplicacion.

Clase NoSeleccionableSpinner:

Clase VentasBaseAdapter:

Nota: En los import de la clase deberas cambiar el nombre del paquete del Import com.profeluismitre.mitienda.R  por el nombre del paquete de tu proyecto y lo terminas con la R mayuscula.

Clase Escaneo:

Clase (Interface) accionBotonVentas:

a diferencia de las demas clases al poner el nombre de la clase le cambiaremos a interface:

y el código quedaría de la siguiente manera:

Paso 13.

Ahora ya creamos las clases necesarios, entonces iniciamos con las acciones de los fragmentos empezando por el mas Fácil al Mas Difícil:

Fragmento Inventario

Fragmento Consultar:

Fragmento Registrar:

Primeramente para poder hacer funcionar el lector de código de barras agregaremos los siguientes métodos dentro de la clase PrincipalActivity.java:

y remplazaremos el método onBackPressed por lo siguiente:

una vez agregado lo anterior nuestro fragmento quedaría de la manera siguiente:

Fragmento Ventas:

el Fragmento quedaria de la siguiente manera: