Proyecto Aplicacion Ferrevic

Ing.
Diseño
Programación
Desarrollo de software (app inventor)
Universidad de la Costa
Víctor Leonardo Vargas Baños
INDICE
Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

Introducción
Llevar a cabo la creación de una aplicación (software) en App inventor, este

software debe contener todas las herramientas posibles y sencilla de usar para
nuestro cliente y sobre todo que sea funcional dejando a un lado por el momento
como se verá estéticamente, de igual manera debe de ser entendible para quienes
ejecuten nuestra aplicación, como principiante y alumno en la clase de programación
podremos apoyarnos de cualquier video u otras herramientas que nos faciliten el
proceso de elaboración de nuestro software y así poder corregir errores y problemas
que se nos interpongan en el proceso, la idea principal es aprender la utilización de
una nueva herramienta que nos da la opción de programar por medio de bloques y
no de códigos facilitando así nuestra manera de programar y hasta crear software.

Objetivo
Desarrollar la aplicación en base a una ferretería con un sistema sencillo y adaptable

para nuestros usuarios o nuestros clientes a tratar, utilización de herramientas
específicas e instrucciones de uso para nuevos usuarios, un sistema de búsqueda o
catalogo sobre nuestros productos y una ventana desplazable que te muestre
diferentes opciones por ejemplo: Inicio, Favoritos, Mi cuenta, etc.; La cuestión es que
nuestros usuarios se sientan cómodos y tengan una experiencia agradable al
comprar en línea desde donde sea que se ubique sin necesidad de ir a la tienda
personalmente, como último objetivo tenemos en aprender como alumno a utilizar
esta herramienta de App inventor como una opción de creación de aplicaciones,
sacarle el máximo provecho y así en un futuro no tener problemas en la creación de
software.
Metodología a utilizar: XP (Programación extrema)
Orígenes: Los orígenes de XP se remontan a fines de la década de 1990, cuando

Kent Beck la creó para gestionar el desarrollo de un sistema de software de nómina
para Chrysler llamado Proyecto C3. El objetivo al implementar la programación
extrema era (y sigue siendo) eliminar la resistencia a cambiar el código en un
proyecto de desarrollo.
¿Qué es?: La programación extrema es una metodología ágil de gestión de

proyectos que se centra en la velocidad y la simplicidad con ciclos de desarrollo
cortos y con menos documentación. La programación extrema es un método de
desarrollo de software dividido en Sprints de trabajo. Los marcos ágiles siguen un
proceso iterativo, en el que se completa y revisa el marco al final de cada sprint,
refinándolo para adaptarlo a los requisitos cambiantes y alcanzar la eficiencia
máxima. Al igual que otros métodos ágiles, el diseño de la programación extrema
permite a los desarrolladores responder a las solicitudes de los clientes, adaptarse y
realizar cambios en tiempo real. Sin embargo, la programación extrema es mucho
más disciplinada; realiza revisiones de código frecuentes y pruebas unitarias para
realizar cambios rápidamente.

Ciclo de vida xp se compone de 4 fases:
Fase de exploración: En esta fase es muy importante entender que es lo que el

cliente realmente necesita, base a sus necesidades y deseos, hacer que todo sea de
una forma simple y detallada.
Fase de planificación: Consiste en estimar el esfuerzo y gestionar todo lo que se

llevara a cabo en el proyecto.
Fase de iteración: Se da inicio al proceso de creación y solución de nuestro

software.
Fase de puesta en producción: En esta fase ya se entregará el producto final a

nuestro cliente o usuarios a tratar.
PRUEBAS ANALISIS
DESARROLLO DISEÑO
Imagen propia 1.0

App Inventor
Antes de adentranos a fondo en nuestro proceso de solución, desarrollo y pruebas

en nuestro proyecto tenemos que saber cómo funciona esta herramienta de App
inventor ya que solo la hemos mencionado anteriormente.
App inventor fue creada por el MIT (Instituto Tecnológico de Massachusetts no de

los centros que más innovan en el mundo, ha sido creada con ellos como una
solución para todos aquellos usuarios que quieran crear una aplicación, pero no
tengan conocimientos de programación.
App inventor es una herramienta de código abierto, cualquiera puede utilizarla de

forma gratuita. Uno de sus principales destinatarios son los educadores, que pueden
introducir App Inventor como una herramienta para que los estudiantes de
informática o de ciencias den sus primeros pasos en el mundo de la programación.
Las apps resultantes son compatibles con los dispositivos Android, y lo mejor de
todo es la aplicación trabaja por medio de bloques, no es necesario crear códigos de
programación muy extensos, pero, hay que tener un mínimo de conocimiento en
programación para poder usarla
Imagen tomada de Google de la pagina Mi App Inventor

Community delxp,
Metodología autor Jamen_Waldron.
desarrollo Imagen
de software, 302-A,1.1
Víctor Leonardo
Fase de exploración
Se trata de comprender a nuestro cliente en específico, pero en este caso en

particular nuestro cliente será nuestra profesora de programación, de entrada, nos
da indicaciones bastantes claras que consisten en: crear una aplicación en base a
una ferretería para sus usuarios, esta ferretería tiene que tener la función de ventas
de herramientas y materiales ya sea de construcción, jardinería, etc.
La aplicación tiene que cumplir con interfaz clara y entendible, para que al usuario
no le sea bastante difícil de manejar.
Diseño 100% libre a nuestro gusto: elección de colores, formas, tipo de letra,
imágenes, y hasta el logo de la ferretería.
Al final no importara tanto la estética de nuestro software si no en que sea funcional

y lo más simple posible para nuestros usuarios, sin errores de ejecución y carga de
la interfaz, cada avance que llevemos a cabo lo tenemos que entregar con nuestra
profesora para detectar posibles errores y hacer cambios o mejoras que necesite
nuestro software.
Fase de planificación
I.- Interfaz de inicio de sesión
Uno de los problemas más comunes al llevar a cabo la creación de desarrollo de un

software es como vamos a empezar y que es lo que realmente se llevara a cabo por
eso se toma la decisión en empezar que al abrir la aplicación una vez instalada se
ejecute una interfaz que te solicite una contraseña de inicio de sesión, claro por lo
mientras la contraseña será una que nosotros mismos pondremos en el código de
App inventor ya en un futuro cada usuario podrá poner una contraseña propia, pero,
por cuestión de tiempo será una contraseña elegida por nosotros mismos, una vez
introducida la contraseña e iniciada la sesión nos mandara a una pantalla de inicio.

II.-
Boceto propio 2.0
Interfaz de inicio y ventana deslizante
Una vez abierta la ventana de inicio se plantea que herramientas y botones tendrá
esta interfaz de inicio, se implementará una barra de desplazamiento que tendrá las
siguientes opciones: un botón de favoritos, un botón de ofertas, un botón de
categorías, un botón de cuenta se usuario, un botón acerca de la información de la
ferretería y un botón para salir de la aplicación.
La interfaz de inicio contendrá una imagen de un catalogo de herramientas de la

empresa que funcionara como un botón y t mandara a un pdf, la aplicación tendrá un
buscador en la parte superior pero este buscador por el momento solo será de
muestra y no funcionara por cuestión de tiempo, también se implementara un botón
con las instrucciones de uso de la aplicación para nuevos usuarios y dos imágenes
que al hacer clic en ellas cada una t llevara a un video diferente de la ferretería.

Boceto propio 2.1
III.- Interfaz de favoritos
una vez establecidas las herramientas y botones a

implementar en la interfaz de inicio tenemos que
plantear como queremos que se vea y funcione cada
interfaz de cada botón de la pantalla deslizante
planteada anteriormente.
En esta interfaz de favoritos estarán todos aquellos

productos que algún día compraras, pero que por falta
de dinero no puedes comprar en el momento y para
que no se t pierda la publicación o la venta de tal
producto lo podrás guardar en esta interfaz para solo
poder comprarlo cuando ya se tenga el dinero
Boceto propio 2.2 necesario y asi adquirir tu producto que tanto
necesitabas, cada casilla tendrá una imagen del producto, el nombre del producto y
su precio de venta.
IV.- Interfaz de compra de cualquier producto
Para poder hacer la compra o agregar a favoritos se

plantea que nuestros usuarios den clic sobre la imagen
del producto a comprar y la interfaz de cada producto
se vera de la siguiente manera.
Esta interfaz será la misma para todos los productos en

venta en nuestra aplicación de la ferretería, se harán
cambios solamente en la imagen del producto, el precio
que aparece en el botón de compras y el nombre del
producto.
Boceto propio 2.3

V.- Interfaz de ofertas
La interfaz de ofertas va a ser aquella en donde

podrás ver todos aquellos productos que contienen
rebajas en sus precios y son mas baratos que su
precio normal, por ejemplo, si una bomba de agua
esta en $3090.00 MX y se encuentra en esta
interfaz de ofertas aquí puede estar en $2690.00
MX, esta interfaz tendrá un diseño algo diferente,
pero tiene que funcionar de la misma manera que la
interfaz de favoritos.
Boceto propio 2.4
VI.- interfaz de categorías
En esta interfaz el planteamiento a la solución más sencilla es en implementar

botones que tengan cada uno una categoría de herramientas específicas de uso, la
venta de los productos de la ferretería se dividirá en 4 categorías:
1. Herramientas eléctricas.
2. Herramientas manuales.
3. Herramientas de medición.
4. Herramientas para el jardín.
Serán en total 4 botones en la interfaz de categorías y

al hacer clic en cualquiera de estos 4 te mandara
automáticamente a una página web donde podrás
comprar lo que necesitas en base a la categoría
seleccionada.
Boceto propio 2.5

VII.- Interfaz de cuenta de usuario
La interfaz de cuenta de usuario es donde estará toda

la información respecto a la edad, sexo, donde vives,
compras, comentarios, configuración, etc. En esta
interfaz solo colocaremos botones de muestra sobre
cómo se verá y que botones llevara ya que por el
momento no cumplirá ninguna función y se dejara
pendiente para un proyecto futuro.
Boceto propio 2.6
VIII.- Interfaz de acerca de la ferretería
En esta última interfaz se colocará la información de la ferretería como, año de

creación, ubicación, quien la administra, código postal y número telefónico.
De igual manera como toda tienda en línea tenemos que especificar los términos y
condiciones sobre el proceso de ventas en la aplicación y cómo funcionan las
compras de todos los usuarios, debemos de ser claros y concisos en la información
presentada a nuestros clientes, se implementara un botón que te llevara a estos
términos y condiciones antes mencionados y es esta interfaz de términos y
condiciones todo lo demás ya solo el texto.
Boceto propio 2.7

Fase de iteración
Una vez finalizada la fase de planificación sobre como estará construida y que
contendrá nuestra aplicación que se llevara a cabo en app inventor ahora si tenemos
que iniciar a darle solución a nuestro software e implementar todo lo planeado
anteriormente, en esta fase tenemos que tener en cuenta que cada avance que se
lleve a cabo en el software se deberá poner aprueba constantemente, esto se hace
con el motivo de encontrar errores e ir mejorando nuestros conocimiento mediante el
proceso de desarrollo ya que nuestro producto lo tenemos que hacer funcional y
entendible.
Nota: para poder crear un software en App Inventor es necesario tener una cuenta
de correo electrónico ya que ahí es donde se guarda toda la información.
I.- interfaz de inicio de sesión
En cada interfaz comenzaremos primero a insertar componentes para poder crear

nuestro código en forma de bloques y la mayoría de los componentes tienen su
propia configuración, por lo que nuestro inicio de sesión llevara lo siguiente:
Se insertan componentes de interfaz de usuario:
Esta componente lo usaremos para poder

cambiar de una pantalla a otra y para salir de
la aplicación en total serán dos botones.
Esta componente sirve para insertar texto en la

pantalla del teléfono.
La componente campo de contraseña nos servirá

para poder escribir la contraseña deseada en
nuestra aplicación y poder ingresar a nuestra interfaz de inicio.
Se insertan las componentes de disposicion:

Estas componentes de disposición sirven para
organizar como se verá cada interfaz de nuestra
pantalla en nuestro teléfono, le darán un orden de
ubicación a las demás componentes dependiendo de
cual se utilice y también saber que las disposiciones
que tienen la palabra ScrollArrangement se utilizan
cuando insertaras demasiada información que se
necesitara de una barra deslizante para poder leer u observar lo que falta.
Se insertarán componentes de medios:
La componente de sonido nos servirá para poder

darle un sonido a los botones al hacer clic para
hacer que la aplicación no sea tan simplista y aburrida.
Todas estas componentes ya explicadas anteriormente se arrastran a la pantalla del

teléfono mostrada en la parte central de nuestra computadora.
Screenshot de App inventor 3.0

La parte que esta encerrada de naranja es donde se ubican todas las componente
que podremos utilizar para llevar a cabo el desarrollo de la aplicación, lo rojo
muestra como insertar esas componentes a la pantalla de nuestro teléfono solo
arrastrándolas y ubicándolas en el lugar exacto, lo verde muestra como se vera

nuestra interfaz creada, la parte encerrada de morado muestra todas las
componentes ya insertadas en la pantalla del teléfono y sus respectivos nombres, y
por ultimo las parte encerrada de amarrillo muestra las características de la
componente seleccionada y los cambios que se le pueden hacer, por ejemplo,
inserta el texto, insertar imagen, color de fondo, color de letra, insertar sonido, tipo
de letra, etc.

Una vez que ya insertamos todos nuestros componentes y los configuramos a
nuestro gusto empezamos a desarrollar nuestro algoritmo con la ayuda de los
Screenshot de App inventor 3.2 bloques.
En la interfaz de bloques encontraremos la parte donde están nuestros comandos

insertados en nuestra pantalla es la que esta encerrada de color verde y en esta
podremos sacar los bloques para empezar hacer nuestro código y asi funcione
nuestra aplicación, la parte encerrada de amarrillo nos advierte sobre si tenemos un
error en el desarrollo de nuestro código al igual como si lo hicieras en c++ o java, y
la parte encerrada con naranja y rojo son los algoritmos para que funcionen nuestras
componente a la hora de ejecutarlas, la zona encerrada con rojo es el algoritmo que
te pedirá la contraseña para poder ingresar a la interfaz de inicio al momento de
hacer clic en iniciar sesión, solo podrás entrar si te sabes cual es la contraseña
correcta, en esa misma zona encerrada podemos ver unos bloques color morado
esos tienen la función de darle sonido a nuestros botones al hacer clic.
La zona cerrada color naranja esta implementada para poder salir de la aplicación si
es que no se quiere continuar con el proceso y este funciona para el botón salir.
II.- Interfaz de inicio y ventana deslizante
Ya que explicamos anteriormente como la App inventor seremos un poco mas

breves con la explicación de las siguientes pantallas para nuestra aplicación.

Se introducen los siguientes componentes
Se insertan componentes de interfaz de usuario:
Esta componente lo usaremos para poder

cambiar de una pantalla a otra, se usará para
abrir una ventana desplazable y para llevarnos a paginas web sobre la empresa, en
total serán 12 botones en esta interfaz de inicio.
Esta componente sirve para insertar texto en la

pantalla del teléfono.
Esta componente sirve para insertar imágenes en

nuestra interfaz la escala se puede configurar.
la componente campo de texto sirve para poder

escribir un texto en nuestro teléfono sin necesidad
de hacerlo en la aplicación o hacer búsqueda sobre algún producto dependiendo de
la necesidad del cliente.
Se insertan las componentes de disposicion:
Estas componentes de disposición sirven para

organizar como se verá cada interfaz de nuestra
pantalla en nuestro teléfono, le darán un orden de
ubicación a las demás componentes dependiendo de
cual se utilice y también saber que las disposiciones
que tienen la palabra ScrollArrangement se utilizan
cuando insertaras demasiada información que se
necesitara de una barra deslizante para poder leer u observar lo que falta.
Se insertarán componentes de medios:
La componente de sonido nos servirá para poder

darle un sonido a los botones al hacer clic para
hacer que la aplicación no sea tan simplista y aburrida.

Se insertarán componentes de sensores:
La componente sirve para manipular los instantes

de ejecución de alguna otra componente como los
botones.
Se insertarán componentes de conectividad.
Esta componente nos servirá para llevarnos a una

página web fuera de nuestra aplicación, pero con
ayuda de los botones, haciendo clic en un botón que este vinculado con esta
componente.
Una vez ya mencionadas todas las componentes que se utilizaran en esta interfaz
de inicio de ventana deslizante, nuestra pantalla quedara de la siguiente manera:
Screenshot 3.3 Screenshot 3.4

Sin abrir la ventana desplazable Abriendo la ventana desplazable
En la interfaz con la ventana desplazable ya abierta podemas ver varias opciones

dentro de esta como ofertas, mi cuenta, etc, estas opciones son botones que t
llevaran a otras pantallas/interfaces menos una que es la de boton de salir y este
boton cierra totalmente la aplicación.
Pero para que todo esto funciones debemos de desarrolar nuestro algoritmo en los
bloques y creo que sera es mas extenso de todas las interfaces planteadas ya que
solo la ventana desplazable requiere de un gran codigo para que funcione:

Este algoritmo se hace con el componente reloj y un botón que es el de abrir
ventana desplazable y funciona en que al presionar el botón de abrir la ventana
desplazable este se abrirá sin irse a otra interfaz y en un tiempo demasiado rápido,
de igual manera se abrirá a la mitad del ancho del teléfono t a lo largo si será toda la
pantalla, hace la utilización del comando si entonces para saber si la ventana
desplazable se abrirá solamente al hacer clic y no el cualquier momento.
La zona cerrada de color verde es el algoritmo para llevarnos a la pagina web donde
se encuentra un catálogo en pdf con todas las herramientas que vende la empresa,
la zona cerrada de morado es el algoritmo para abrir la ventana deslizante al hacer
clic en el botón y por último la zona cerrada de rojo son los algoritmos que tienes la

función de mandarnos a los videos de YouTube sobre la empresa y de igual forma
funcionan al hacer clic sobre las imágenes que al finas siguen siendo botones.
III.- Interfaz de favoritos
A estas alturas nos damos cuenta ya como funciona el App Inventor asi que ya no se
especificara para que funcionan las componentes mencionadas anteriormente y solo
se explicaran las nuevas que se introduzcan.
En esta interfaz se introducen las siguientes componentes y queda la interfaz de la

siguiente manera:
Asi es como queda nuestra interfaz

de favoritos con las componentes
de botones que parecen ser una
imagen solamente pero como ya lo
hemos mencionado anteriormente
no es asi, también están las
componentes de etiquetas, sonido
para el botón de regresar a la
pantalla de inicio y sus respectivas
disposiciones.
Screenshot de App inventor 3.7 Screenshot 3.8
Una vez insertadas, configuradas y organizadas las componentes que llevara la

interfaz se desarrolla el algoritmo.

En esta interfaz el algoritmo es bastante sencillo ya que son solo 6 herramientas de
venta y todo lo que se podrá hacer es dar clic sobre la imagen para asi poder irnos a
la interfaz de venta de cada uno donde se podrá hacer la compra del producto y un
botón para poder regresar a la interfaz de inicio.
IV.- Interfaz de ofertas
La interfaz de ofertas es casi igual que la interfaz de favoritos, pero con un diferente
acomodo de las disposiciones, al igual que la interfaz de favoritos estas contienen
algoritmos bastantes simples.

siguiente manera:

En esta interfaz lo único que
cambia respecto a la de favoritos
es que las herramientas de venta
de la empresa son diferentes y
aquí las herramientas bajan de
precio haciendo que sean mas
baratas al precio normal de la
venta del producto.
Screenshot de App inventor 3.10 Screenshot 3.11

Estos algoritmos son como los anteriores se basan en que en el momento que se dé
clic sobre la imagen de un producto este te mandará a la interfaz donde se podrá

hacer las compra o agregar a favoritos el producto y de igual forma un botón para
poder regresar a la interfaz de inicio si asi se desea.
V.- Interfaz de categorías

siguiente manera:
Esta interfaz de igual manera es

muy sencilla ya que lo único que
contendrá son botones,
disposiciones, etiquetas y una
componente que al hacer clic en
cualquiera de los cuatro botones
de categorías que son: eléctricas,
manuales, de medición y para el
jardín, estos te mandaran a una
página web en donde se
encontraras más de nuestros
productos, pero la página web ya
no será de la empresa si no una
exterior a esta.
Screenshot 3.13 Screenshot 3.14

La zona encerrada de rojo son los algoritmos de botones y estos hacen que al hacer
clic en cualquiera de estos te mandaran a la pagina web dependiendo de la
categoría que elegiste y de igual forma esta interfaz de ofertas contiene otro botón
para poder regresar a la interfaz de inicio.
VI.- Interfaz de mi cuenta

siguiente manera:
Esta interfaz es bastante sencilla ya que solo se introducen botones de ejemplo de

cómo será la interfaz de cuenta de usuario y no serán funcionales y solo el que será
funcional es el botón de regresar a la interfaz de inicio.

El algoritmo de esta interfaz es bastante fácil y rápido de
hacer:
solo es un botón para regresar a la ventana de inicio.
Screenshot 3.16
VII.- Interfaz de acerca de la empresa

siguiente manera:
La interfaz y algoritmo de acerca de la empresa

queda de la siguiente manera:
En esta interfaz el algoritmo es simple un botón t

mandara a la interfaz de inicio y y el botón rojo con letras
blancas te mandara a otra interfaz sobre los términos y
condiciones de la empresa.

La interfaz de términos y
condiciones es la siguientes
Screenshot 3.18 y esta solo contiene etiquetas y un botón para
regresar a la interfaz acerca de la empresa:
Como se puede observar solo tenemos un algoritmo para

salir de la interfaz de los términos y regresar a la
información acerca de la empresa.
Screenshot 3.20
Fase de prueba prueba o puesta en producción

Una vez que ya concluimos la fase de iteración/desarrollo de nuestro proyecto
tenemos que poner en marcha nuestra aplicación en nuestro teléfono y hacer
pruebas de si en verdad todo saldrá como esperábamos.
Descargamos el apk escaneando un código que se genera en App Inventor, pero

primero damos clic en la opción superior de generar.

Después de dar clic en generar te saldrán dos opciones, pero seleccionaremos la
primera que es Android app.
Una vez que ya dimos clic se generara un código que podremos escanear con el
teléfono y empezara la descarga.

Ya instalado en el teléfono comenzamos a
probar nuestra aplicación, el inicio de sesión salió como esperábamos, pero al llegar
a la interfaz de inicio checamos los botones que nos mandaban a las páginas web y
funcionaban, lo único que se nos pasó y el error que cometimos fue que al abrir la
ventana desplazable y al hacer clic sobre los botones de favoritos, ofertas, etc., no
ejecutaban nada y era porque no hicimos el algoritmo para abrir las demás pantallas.

Asi que una vez detectado esto tenemos que regresar
a la fase de iteración y hacer una retroalimentación
sobre lo aprendido y desarrollado.
Screenshot 3.25
Segunda fase de iteración
I.- Colocación de algoritmos faltantes en la interfaz de inicio
Una vez analizada la interfaz de inicio aparte de que faltaban los algoritmos de la
ventana desplazable también nos dimos cuenta que no creamos una interfaz para el
botón de instrucciones hacia nuestros nuevos usuarios por lo que después de darle
solución a los algoritmos se ejecutara la creación de la interfaz de instrucciones.
Solución al problema de los botones en la ventana desplazable:
Ya solucionado el problema ahora toca crear la interfaz de instrucciones a nuevos

usuarios.
II.- Instrucciones a nuevos usuarios

siguiente manera:
La interfaz de instrucciones es la siguientes y esta solo contiene etiquetas y un botón

para regresar a la interfaz de inicio:

Como se puede observar
solo tenemos un algoritmo para salir de la interfaz de
instrucciones y regresar a la interfaz de inicio.
Screenshot 3.27
Ahora que ya terminamos esta interfaz de instrucciones que un ultimo paso, insertar
un algoritmo para abrir la interfaz de instrucciones, pero ese algoritmo lo tenemos
que poner en la interfaz de inicio y para el botón rojo con letras blancas.

Un algoritmo sencillo para ingresa a la pantalla de instrucciones.
Segunda fase de prueba o puesta en

producción
Una vez que ya terminamos la fase anterior nuevamente se vuelve a hacer el mismo
proceso de descarga en nuestro teléfono y se pone a prueba para ver si cumple con
lo planeado.
Después de unos minutos de uso vemos que nuestra aplicación si cumple con
requisitos pedidos por nuestra profesora y la aplicación solo queda a espera de ser
calificada en el día de nuestro examen.
Conclusión
Tenemos que reconocer que una vez que t metes de llevo a la programación y la
creación de aplicaciones te da mucha curiosidad por seguir aprendiendo mas y mas
cada día que pasa ya que a mi en general se me hizo demasiado interesante y me
sorprendió el hecho de que existieran programas o páginas web bastante fácil de

manejar para crear una aplicación y ahora ya sé que función le puedo dar a lo que
he aprendido incluso puedo decir que con los conocimientos obtenidos en este
proyecto puedo ser capaz de crear una aplicación de ventas sencilla pero funcional
ya con un cliente de manera real y no solo como una tarea o un proyecto de escuela,
ya que allá afuera se tiene que ganar esa experiencia trabajando para alguien y no
cometer ningún error, hacerte reconocer por lo que estudiaste y lo que sabes.
Una vez que esto t llega a interesar tanto no es tan fácil dejarlo y olvidarse de ello,
por eso agradezco todo lo que me enseñan mis profesores conforme voy avanzando
en mi carrera universitaria.
Bibliografías
 https://asana.com/es/resources/extreme-programming-xp
 https://www.sydle.com/es/blog/extreme-programming-
602ee205da4d096809438c9c/

 https://www.educaciontrespuntocero.com/recursos/app-inventor-para-crear-
apps-sin-saber-programar/
 https://www.youtube.com/watch?v=tCl33R9jHBk&t=105s
 https://www.youtube.com/watch?v=v5bUUx67OAI
 https://www.youtube.com/watch?v=EAak6JdZSu4
 https://www.youtube.com/watch?v=so12GiDX0yQ
 https://www.youtube.com/watch?v=wXsD-
VgxMos&list=TLPQMTUwMTIwMjNNQ3RcLhXLHg&index=2
 https://www.youtube.com/watch?
v=onTsjOWNJw8&list=TLPQMTUwMTIwMjNNQ3RcLhXLHg&index=3
 https://www.youtube.com/watch?
v=onTsjOWNJw8&list=TLPQMTUwMTIwMjNNQ3RcLhXLHg&index=4
 https://www.youtube.com/watch?v=pO2-
SxPjNAE&list=TLPQMTUwMTIwMjNNQ3RcLhXLHg&index=5
 https://listado.mercadolibre.com.mx/herramientas/herramientas-
electricas_PriceRange_1204-0_NoIndex_True#deal_print_id=6bbf0410-9492-
11ed-baac-7788481e9b1c&c_id=special-
normal&c_element_order=1&c_campaign=ELECTRICAS&c_uid=6bbf0410-
9492-11ed-baac-7788481e9b1c
 https://listado.mercadolibre.com.mx/herramientas/herramientas-manuales/
herramientas-manuales_PriceRange_625-
0_NoIndex_True#deal_print_id=7a8de8d0-9492-11ed-baac-
7788481e9b1c&c_id=special-
normal&c_element_order=2&c_campaign=MANUALES&c_uid=7a8de8d0-
9492-11ed-baac-7788481e9b1c
 https://listado.mercadolibre.com.mx/herramientas/herramientas-
jardin_PriceRange_1393-0_NoIndex_True#deal_print_id=83bdbf20-9492-
11ed-9ab9-692cd964eeb3&c_id=banner-
small&c_element_order=1&c_campaign=HERRAMIENTAS-DE-
JARDIN&c_uid=83bdbf20-9492-11ed-9ab9-692cd964eeb3
 https://listado.mercadolibre.com.mx/herramientas/herramientas-medicion/
_PriceRange_618-0_NoIndex_True#deal_print_id=8ffa6040-9492-11ed-817f-

9d642922d24f&c_id=banner-
small&c_element_order=2&c_campaign=MEDICION&c_uid=8ffa6040-9492-
11ed-817f-9d642922d24f
 https://www.ferrepat.com/
 https://www.truper.com/ferreteria

Proyecto Aplicacion Ferrevic

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Proyecto Aplicacion Ferrevic

Cargado por

Copyright:

Formatos disponibles

Ing.

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

Llevar a cabo la creación de una aplicación (software) en App inventor, este

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

Desarrollar la aplicación en base a una ferretería con un sistema sencillo y adaptable

Metodología a utilizar: XP (Programación extrema)

Orígenes: Los orígenes de XP se remontan a fines de la década de 1990, cuando

¿Qué es?: La programación extrema es una metodología ágil de gestión de

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

Fase de exploración: En esta fase es muy importante entender que es lo que el

Fase de planificación: Consiste en estimar el esfuerzo y gestionar todo lo que se

Fase de iteración: Se da inicio al proceso de creación y solución de nuestro

Fase de puesta en producción: En esta fase ya se entregará el producto final a

Imagen propia 1.0

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

Antes de adentranos a fondo en nuestro proceso de solución, desarrollo y pruebas

App inventor fue creada por el MIT (Instituto Tecnológico de Massachusetts no de

App inventor es una herramienta de código abierto, cualquiera puede utilizarla de

Imagen tomada de Google de la pagina Mi App Inventor

Se trata de comprender a nuestro cliente en específico, pero en este caso en

Al final no importara tanto la estética de nuestro software si no en que sea funcional

I.- Interfaz de inicio de sesión

Uno de los problemas más comunes al llevar a cabo la creación de desarrollo de un

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

Boceto propio 2.0

Interfaz de inicio y ventana deslizante

La interfaz de inicio contendrá una imagen de un catalogo de herramientas de la

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

III.- Interfaz de favoritos

una vez establecidas las herramientas y botones a

En esta interfaz de favoritos estarán todos aquellos

IV.- Interfaz de compra de cualquier producto

Para poder hacer la compra o agregar a favoritos se

Esta interfaz será la misma para todos los productos en

Boceto propio 2.3

La interfaz de ofertas va a ser aquella en donde

Boceto propio 2.4

VI.- interfaz de categorías

En esta interfaz el planteamiento a la solución más sencilla es en implementar

Serán en total 4 botones en la interfaz de categorías y

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

La interfaz de cuenta de usuario es donde estará toda

Boceto propio 2.6

VIII.- Interfaz de acerca de la ferretería

En esta última interfaz se colocará la información de la ferretería como, año de

Boceto propio 2.7

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

I.- interfaz de inicio de sesión

En cada interfaz comenzaremos primero a insertar componentes para poder crear

Se insertan componentes de interfaz de usuario:

Esta componente lo usaremos para poder

Esta componente sirve para insertar texto en la

La componente campo de contraseña nos servirá

Se insertan las componentes de disposicion:

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

Se insertarán componentes de medios:

La componente de sonido nos servirá para poder

Todas estas componentes ya explicadas anteriormente se arrastran a la pantalla del

Screenshot de App inventor 3.0

Metodología xp, desarrollo de software, 302-A, Víctor Leonardo

arrastrándolas y ubicándolas en el lugar exacto, lo verde muestra como se vera

Screenshot de App inventor 3.1