Taller #4 - Publicando la aplicación

En esta sección se resolverán dudas relacionadas con la creación de aplicaciones híbridas, haciendo énfasis en temas relacionados con Javascript y frameworks de Javascript como Angular y Jquery.

Moderator: julianmartinez16

User avatar
xacarana
Site Admin
Posts: 1028
Joined: Fri Jan 15, 2016 6:13 pm

Taller #4 - Publicando la aplicación

Post by xacarana » Sun Sep 03, 2017 8:02 pm

En la clase de hoy pasare, por cada uno de los proyectos revisando que este al día. Se revisara:
  1. (0.8) Aplicación terminada, funcional 100%
  2. (0.2) Navegación y usabilidad
  3. (0.1) Optimización de imágenes
  4. (1.0) Separación de html, estilos, javascript e imágenes
  5. (1.0) Programación sin frameworks, o si usa framework debe sustentar porque se uso
  6. (0.5) Generación de build para publicar con codigo minificado y optimizado
  7. (0.4) Publicación en el servidor y publicar url de la aplicación, debe haber una url para el antes y el después (terminada)
  8. (0.5) Creación del APK
  9. (0.2) Firma del APK
  10. (0.2) Datos para llenar el formulario de publicación en google play
  11. (0.1) Insumos gráficos de la aplicación
Si ya termino todo, mientras el profesor pasa por su puesto, le tengo dos retos.
  1. Realizar el teclado de la sucursal virtual de bancolombia, debe hacer que funcione igual, solamente con javascript. Mientras escucha música de los noventa en esta sitio web
    Image
  2. Ingresar a este sitios web y realizar retos de javascript.
Sitio web recomendado
Image

Eso haremos el primer bloque de la clase, el otro bloque vamos a asistir a la conferencia que organiza la facultad.

El próximo lunes 4 de septiembre tendremos la visita de la profesora Silvia Baldaris, que nos acompañará en una charla:
"Tecnologías Emergentes para la Diversidad"
Fecha: Septiembre 4 de 2017 a las 10:00 am
Aula:10 - 227
Andrés Bedoya Tobón
Profesor
"I only smile in the dark, I only smile when it's complicated" Raybiez

User avatar
Alejandro Villa
Posts: 35
Joined: Mon Jul 17, 2017 8:30 am

Re: Taller #4 - Publicando la aplicación

Post by Alejandro Villa » Mon Sep 04, 2017 8:59 am

Link para generar insumos gráfios de la aplicación: http://phonegap.appiq.software
Last edited by Alejandro Villa on Tue Sep 05, 2017 2:57 pm, edited 2 times in total.
Alejandro Villa Cárdenas
Gestión de la calidad del Software
"Forward Always"

User avatar
Andres Morales
Posts: 41
Joined: Mon Jul 17, 2017 8:38 am

Re: Taller #4 - Publicando la aplicación

Post by Andres Morales » Mon Sep 04, 2017 4:25 pm

Archivo Gruntfile.js para la generación de la carpeta build

Les comparto como configure las tareas de grunt para generar la carpeta build, lista para ser subida al servidor, con todos los archivos minificados. Use 4 tareas:
uglify: Lo use para minificar los archivos js
cssmin: Lo use para minificar los archivos css
copy: Lo use para copiar los archivos no minificados como: imágenes, fonts y archivos ya minificados.
replace: Lo use para reemplazar en el index.html las referencias a los .js y .css por las referencias a los .min.js y .min.css. Como reemplazaba todo, los archivos que ya estaban minificados, quedaban con las extensiones .min.min.js, por lo tanto lo vuelvo a reemplazar.

Documentación de las tareas

uglify
https://github.com/gruntjs/grunt-contrib-uglify

cssmin
https://github.com/gruntjs/grunt-contrib-cssmin

copy
https://github.com/gruntjs/grunt-contrib-copy

replace
https://github.com/yoniholmes/grunt-text-replace

Code: Select all

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        files : [
          {
            src: 'src/js/main.js',
            dest: 'build/js/main.min.js'
          },
          {
            src: 'src/js/utils/utils.js',
            dest: 'build/js/utils/utils.min.js'
          },
          {
            src: 'src/js/forms/formCalculate.js',
            dest: 'build/js/forms/formCalculate.min.js'
          },
          {
            src: 'src/js/forms/formSignup.js',
            dest: 'build/js/forms/formSignup.min.js'
          },
          {
            src: 'src/js/config/lang.js',
            dest: 'build/js/config/lang.min.js'
          }
        ]
      }
    },
    cssmin: {
      options: {
        mergeIntoShorthands: false,
        roundingPrecision: -1
      },
      target: {
        files: [
          {
            src: 'src/css/vendor/animate.css',
            dest: 'build/css/vendor/animate.min.css'
          },
          {
            src: 'src/css/vendor/fonts.css',
            dest: 'build/css/vendor/fonts.min.css'
          },
          {
            src: 'src/css/vendor/bootstrap.css',
            dest: 'build/css/vendor/bootstrap.min.css'
          },
          {
            src: 'src/css/vendor/bootstrap-theme.css',
            dest: 'build/css/vendor/bootstrap-theme.min.css'
          },
          {
            src: 'src/css/main.css',
            dest: 'build/css/main.min.css'
          }
        ]
      }
    },
    copy: {
      main: {
        files: [
          {
            expand: true,
            cwd: 'src/',
            src: ['index.html', 'img/*', 'fonts/*', 'favicon.ico', 'css/vendor/bootstrap-toggle.min.css'],
            dest: 'build/'
          }
        ]
      }
    },
    replace: {
  		example: {
    		src: ['build/index.html'],             // source files array (supports minimatch)
    		dest: 'build/index.html',             // destination directory or file
	    	replacements: [
		    	{
		      		from: '.js',                   // string replacement
		      		to: '.min.js'
		    	}, 
		    	{
		      		from: '.css',      
		      		to: '.min.css'
		    	},
		    	{
		      		from: '.min.min.css',      
		      		to: '.min.css'
		    	},
		    	{
		      		from: '.min.min.js',      
		      		to: '.min.js'
		    	}
	    	]
  		}
	}
});

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.loadNpmTasks('grunt-contrib-copy');

  grunt.loadNpmTasks('grunt-text-replace');

  // Default task(s).
  grunt.registerTask('default', ['uglify', 'cssmin', 'copy', 'replace']);

};

User avatar
Esteban Cardona
Posts: 21
Joined: Mon Jul 17, 2017 8:33 am

Re: Taller #4 - Publicando la aplicación

Post by Esteban Cardona » Mon Sep 11, 2017 1:22 pm

Frameworks Utilizados:
- Bootstrap, para facilitar el diseño responsive de la aplicación.

Web: http://astrolog.comli.com
Aplicación: https://play.google.com/store/apps/deta ... i.astrolog

Optimización Imágenes:
La mayoría de imágenes no están cargadas dentro de la aplicación, se cargan desde el API de Imgur. Todas las imágenes fueron optimizadas.
Image

Build, llaves utilizadas para la firma y apk generado:
Image

Insumos Gráficos:
Image
Image
Image

Evidencias:
Separación de archivos
Image

Creación del Ícono
Image

Generación de Splash

Image

Code: Select all

Título: Astronomy Logger
Descripción Breve: Astronomy/Astrophysics app
Descripción Completa: An Awesome Gallery of Space Pictures. Enjoy, share and scroll through the content.

Categorización:
  Tipo de Aplicación: Aplicaciones
  Categoría: Entretenimiento

Detalles de contacto:
  Sitio Web: http://astrolog.comli.com
  Dirección de correo: 1222eca@gmail.com

Precios y Distribución
  La aplicación es: Gratis
  Disponibilidad de App: Publicar
  Países: Todos
  Dirigida Principalmente a Niños: Niños
  Contiene Anuncios: No 
  Consentimiento: 
    Excluir Marketing: Sí
    Directrices de Contenido: Sí
    Leyes de Exportación USA: Sí

Política de Privacidad:
  https://bitbucket.org/Ouraborus/astrolog/src/7c393d25d27184171cbfb33291463ce748c272b0/privacy_policy.html?at=master&fileviewer=file-view-default
Esteban Cardona Álvarez
Gestión de la Calidad

User avatar
Alejandro Villa
Posts: 35
Joined: Mon Jul 17, 2017 8:30 am

Re: Taller #4 - Publicando la aplicación

Post by Alejandro Villa » Mon Sep 11, 2017 1:57 pm

URL Server: https://appmovilesavcupb.000webhostapp.com
URL Google Play https://play.google.com/store/apps/deta ... ksandgeeks

Optimización imágenes: Se usó tiny png y resize para la optimización, los links son:
Tiny png: https://tinypng.com
Resize Image: http://resizeimage.net
Imágenes optimizadas: Image

Separación HTML,CSS,JS: Image

NO usé frameworks para JS, solo usé bootstrap, porque este facilita a la hora de hacer responsive los HTML.
Llave y apk creado: Image

Datos para formulario google play:

Code: Select all

Ficha de Play Store:

	Título: Freaks and Geeks
	Descripción breve: Aplicación casual de venta de productos

	Descripción completa: Esta aplicación está pensanda para las personas que apenas estén empezando a vender productos y desean que las personas puedan revisarlos de manera fácil y dinámica

	Tipo de aplicación: Aplicaciones

	Categoría: Comics

	Sitio Web:https://appmovilesavcupb.000webhostapp.com

	dirección de correo: vcalejandro97@gmail.com

Precios y Distribución:

	La aplicación es:  gratis
	
	Disponibilidad de app: publicar

	países: todos

	dirigida principalmente a niños: no

	Contiene anuncios: no

	Consentimiento:

		Excluír marketing: sí

		Directrices de contenido: Sí

		Leyes de exportación USA: sí
insumos gráficos:
Directorio antes de grunt: Image

Gruntfile:

Code: Select all

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        files : [
          {
            src: 'src/js/main.js',
            dest: 'build/js/main.min.js'
          },
          {
            src: 'src/js/index.js',
            dest: 'app/www/js/main.min.js'
          }
        ]
      }
    },
    cssmin: {
      options: {
        mergeIntoShorthands: false,
        roundingPrecision: -1
      },
      target: {
        files: [
          {
            src: 'src/css/stylish-portfolio.css',
            dest: 'build/css/stylish-portfolio.min.css'
          },
          {
            src: 'src/css/main.css',
            dest: 'build/css/main.min.css'
          }
        ]
      }
    },
    copy: {
      main: {
        files: [
          // includes files within path
          {expand: true, cwd: 'src/', src: ['index.html','favicon.ico','img/*'], dest: 'build/'},

          // includes files within path and its sub-directories
          {expand: true, cwd:'src/js/vendor/', src: ['sweetalert.min.js'], dest: 'build/js/vendor/'},

          {expand: true, cwd: 'src/', src: ['font-awesome/css/font-awesome.min.css'], dest: 'build/'},

          {expand: true, cwd: 'src/', src: ['font-awesome/fonts/*'], dest: 'build/'},

          // makes all src relative to cwd
          {expand: true, cwd: 'src/css/vendor/', src: ['animate.min.css','sweetalert.min.css'], dest: 'build/css/vendor/'},

          // flattens results to a single level
          {expand: true, cwd: 'src/css/', src: ['bootstrap.min.css'], dest: 'build/css/'},

          //Para la carpeta de app
          {expand: true, cwd: 'build/', src: ['css/**','font-awesome/**','img/*','favicon.ico', 'index.html'], dest: 'app/www/'}, //Problema en app/www/index.html porque me lo está copiando sin remplazar los .ext por .min.ext
          {expand: true, cwd: 'build/js/vendor/', src: ['sweetalert.min.js'], dest: 'app/www/js/vendor/'},
        ],
      },
    },
    replace: {
        example: {
          src: ['build/index.html'],             // source files array (supports minimatch)
          dest: 'build/index.html',             // destination directory or file
          replacements: [
             {
                  from: '.js',                   // string replacement
                  to: '.min.js'
             },
             {
                  from: '.css',
                  to: '.min.css'
             },
             {
                  from: '.min.min.css',
                  to: '.min.css'
             },
             {
                  from: '.min.min.js',
                  to: '.min.js'
             }
          ]
        },
         another_example: {
            src: ['build/index.html'],             // source files array (supports minimatch)
            dest: 'app/www/index.html',             // destination directory or file
            replacements: [
               {
                    from: '.js',                   // string replacement
                    to: '.min.js'
               },
               {
                    from: '.css',
                    to: '.min.css'
               },
               {
                    from: '.min.min.css',
                    to: '.min.css'
               },
               {
                    from: '.min.min.js',
                    to: '.min.js'
               },
             {
                  from: '</body>',
                  to: '    <script type="text/javascript" src="cordova.js"></script><script type="text/javascript">app.initialize();</script></body>'
             }

            ]
          }
   }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-text-replace');
  // Default task(s).
  grunt.registerTask('default', ['uglify','cssmin','copy','replace']);
};
Al ejecutar el grunt: Image

Imágenes usadas en google play:
Gráfico de función:
Image
Vista celular 1:
Image
Vista celular 2:
Image´
Ícono:
Image
Build cordova:
Image
Generando llave:
Image
Jarsign:
Image
Zipalign:
Image
Last edited by Alejandro Villa on Mon Sep 18, 2017 8:53 am, edited 2 times in total.
Alejandro Villa Cárdenas
Gestión de la calidad del Software
"Forward Always"

User avatar
JuanG
Posts: 24
Joined: Mon Jan 23, 2017 12:14 pm

Re: Taller #4 - Publicando la aplicación

Post by JuanG » Mon Sep 11, 2017 6:07 pm

Sitio web: http://mercafeliz.azurewebsites.net/

Google Play: https://play.google.com/store/apps/deta ... mercafeliz

Aplicacion firmada y su respectiva llave:

Image

Insumos gráficos:

index:

Image

Usuario registrado y con sesión iniciada:

Image

Lista de mercado:

Image

Historial:

Image

Contenido carpeta build:

Image

Contenido carpeta src:

Image

Contenido carpeta generada por phonegap:

Image

Icono en alta resolución de la aplicación:

Image

Datos formulario de Google Play:

Code: Select all

Titulo:
MercaFeliz

Descripcion breve:
Ingresa la lista de productos de tu mercado.

Descripcion completa:
Aplicativo que permite ingresar los productos de tu mercado en una lista para cuando vayas a mercar puedas ver que te hace falta.

Tipo de aplicacion:
Aplicacion.

Categoria:
Compras.

Clasificacion de contenido:
Apto para todo publico.



User avatar
alvarezrozo
Posts: 14
Joined: Mon Jul 17, 2017 8:31 am

Re: Taller #4 - Publicando la aplicación

Post by alvarezrozo » Mon Sep 11, 2017 9:47 pm

1. Aplicacion completamente funcional :D
2. Navegación y usabilidad :D
3. Todas las imagenes fueron optimizadas con tinypng.com y su tamaño fue reducido a las cantidad de pixeles que realmente requerian, Image
4. separacion de js, img, css, fonts y html Image
5. no se usan frameworks
6. carpetas src y build, donde se tendrá el escritorio de trabajo, y los archivos minificados resultantes Image
7. link del servidor: http://promcafe.epizy.com y link de playstore: https://play.google.com/store/apps/deta ... o.promcafe
8. 9. creacion y firma de apk Image
10. datos para llenar formulario de publicación

Code: Select all

titulo: Prom café

Descripcion breve: aplicativo para la promocion de cafés (lugares)

Descripción completa: en este aplicativo se bus dar oportunidad a aquellos café no muy conocidos por todo el mundo, que son de tipo artesanal, está aplicación brinda un espacio para aquellos que no han llegado a las ventas de nivel industrial, y muchas personas quieren probarlos.

Tipo: Aplicacion

Categoría: comer y beber
11. insumos gráficos:

Image
Image
Image
Image
Image
Image
Image

User avatar
santiagolg
Posts: 38
Joined: Mon Jul 17, 2017 8:31 am

Re: Taller #4 - Publicando la aplicación

Post by santiagolg » Mon Sep 11, 2017 11:13 pm

Repositorio:
https://bitbucket.org/santiagolg/apptemplobelen

1. Aplicación terminada y funcional al 100%
2. Navegación y usabilidad
Image

3. Optimización de imágenes
Todas las imagenes fueron optimizadas con tinypng.com
Image

4. Separación de html, estilos, javascript e imágenes
Image

5. Programación sin frameworks, o si usa framework debe sustentar por qué se usó
Se utilizó Bootstrap para facilitar el diseño responsive de la aplicación.

6. Generación de build para publicar con código minificado y optimizado
Image
Se automatizó con Grunt

Code: Select all

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/js/main.js',
        dest: 'src/js/main.min.js'
      }
    },
    cssmin: {
      my_target: {
        src: 'src/css/main.css',
        dest: 'src/css/main.min.css'
      }
    },
    copy: {
      main: {
        files: [
          {
            expand: true,
            cwd: 'src/',
            src: ['index.html', 'img/*', 'css/vendor/bootstrap-theme.min.css', 'css/vendor/bootstrap.min.css', 'css/vendor/animate.min.css', 'css/main.min.css',
            'js/main.min.js'],
            dest: 'build/'
          }
        ]
      }
    },
    replace: {
        example: {
          src: ['build/index.html'],             // source files array (supports minimatch)
          dest: 'build/index.html',             // destination directory or file
          replacements: [
             {
                  from: '.js',                   // string replacement
                  to: '.min.js'
             }, 
             {
                  from: '.css',      
                  to: '.min.css'
             },
             {
                  from: '.min.min.css',      
                  to: '.min.css'
             },
             {
                  from: '.min.min.js',      
                  to: '.min.js'
             },
             {
                  from: '</body>',
                  to: '<script type="text/javascript" src="cordova.js"></script><script type="text/javascript">app.initialize();</script></body>'
             }
          ]
        }
      },

  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-text-replace');
  grunt.loadNpmTasks('grunt-include-source');
  
  // Default task(s).
  grunt.registerTask('default', ['uglify', 'cssmin', 'copy', 'replace']);

};
7. Publicación en el servidor y publicar url de la aplicación, debe haber una url para el antes y el después (terminada)
https://templobelen.000webhostapp.com/

8. Creación del APK
https://play.google.com/store/apps/deta ... emplobelen

9. Firma del APK
Image

10. Datos para llenar el formulario de publicación en google play

Code: Select all

Titulo: App Templo Bélen
Descripción breve: App para la comunidad de Templo Bélen
Descripción completa: App Templo Belén es una aplicación que permitirá el registro e ingreso de las personas pertenecientes a la comunidad de Templo Belén, permitirá la visualización de los cursos realizados con su respectiva fecha y facilitara todos los eventos que están programados en el año a través de un calendario.
Tipo de aplicación: Aplicaciones
Categoría: Herramientas
Dirección de correo: tiago2996@gmail.com
Política de privacidad: Por el momento, no se ingresará la URL de ninguna política de privacidad
11. Insumos gráficos de la aplicación
ImageImageImageImageImageImage
Last edited by santiagolg on Wed Sep 13, 2017 7:27 pm, edited 4 times in total.

User avatar
juandm
Posts: 32
Joined: Mon Jul 17, 2017 8:33 am

Re: Taller #4 - Publicando la aplicación

Post by juandm » Mon Sep 11, 2017 11:31 pm

Last edited by juandm on Fri Sep 15, 2017 12:50 pm, edited 1 time in total.

User avatar
Andres Morales
Posts: 41
Joined: Mon Jul 17, 2017 8:38 am

Re: Taller #4 - Publicando la aplicación

Post by Andres Morales » Mon Sep 11, 2017 11:51 pm

FrutasEnCasa

Antes:https://andresmoralesg.000webhostapp.com/antes/
Despues:https://andresmoralesg.000webhostapp.com/despues/
https://play.google.com/store/apps/deta ... utasencasa
Proyecto
Image
Estructura de Carpetas
Image
firma con android studio
Image
insumos graficos echos enhttp://phonegap.appiq.software/
Image
Funcionamiento final
Image
Last edited by Andres Morales on Mon Sep 25, 2017 8:17 am, edited 2 times in total.

Post Reply