Skip to content

Hangman game for mobile, was developed using web tools like html, css and javascript. This project wants to show how to develope, improve and publish the aplication like an andorid app using cordova.

Notifications You must be signed in to change notification settings

xaca/ahorcado_hibrido

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pasos para la construcción de una aplicación híbrida

Hangman game for mobile, was developed using web tools like html, css and javascript. This project wants to show how to develope, improve and publish the aplication like an andorid app using cordova.

Pasos para la creación de una aplicación híbrida

  1. Creación de la estructura básica de un proyecto web. (commit 2)

/--|
    |--/imgs     (a)
    |--/js          (b)
    |--/css        (c)
    index.html (d)

  • (a) Carpeta donde se guardaran los insumos gráficos (jpg, gif, png, svg)
  • (b) Carpeta donde se guardaran los archivos de javascript, el archivo base se recomienda llamarlo main.js
  • (c) Carpeta donde se guardan los archivos para manipular las reglas gráficas, nombre sugerido main.css
  • (d) Archivo raíz de la aplicación
  1. Instalación ambiente de desarrollo, necesitamos las siguientes herramientas

    • Node js + npm (Node js, lo necesitamos para editar el archivo package.json y npm para descargar paquetes)
    • Visual Studio Code para editar los archivos
    • Cordova Este es un paquete que se instala usando npm
    • Android Studio No usarmeos directamente android studio, pero si muchas herramientas que se instalan cuando se configura esta aplicación.
    • SDK platform tools Herramientas adicionales para publicar y probar la aplicación. Asigne la carpeta a las variables de entorno Pendiente de realizar manual
    • Git bash Para usar git y poder escribir comandos básicos de unix en linux
    • Genymotion emulador para probar las aplicaciones en el escritorio, esta optimizado y funciona mejor que el que trae android studio
    • Driver del telefono celular andorid que va a usar (Ej. kies de samsung)
  2. Instalación de cordova

    npm install -g cordova
  3. Crear el archivo .gitignore e inserta la siguiente línea (No tiene mucha utilidad por el momento pero es una buena practica)

    /node_modules

  4. Mover el proyecto a una carpeta temporal para instalar el sistemas de directorios base de cordova

    mkdir temp
    mv css temp
    mv js temp
    mv imgs temp
    mv index.html temp
  5. Crear proyecto de cordova

    cordova create aplicacion co.edu.proyecto Aplicacion
  6. Mueva el proyecto de cordova a la raíz del proyecto y borre la carpeta aplicacion

    mv aplicacion/* ./
    rm -rf aplicacion
  7. Borre el contenido de la carpeta www

    rm -rf ./www/*
  8. Mueva los archivos de temp para la carpeta www de la nueva estructura de archivos creada y borre la carpeta temp

    mv ./temp/* ./www/
    rm -rf temp
  9. Agregar la plataforma de prueba de android, esto sirve para crear el archivo ejecutable apk.

    cordova platform add android
  10. Crear el build o sea el ejecutable de android apk

    cordova build android
  11. Conectar el celular en modo desarrollador y con la opción de USB activada o lanzar el emulador desde genymotion.

  12. Validar con la herramienta adb, si el dispositivo esta en la lista de elementos reconocidos

    adb devices

    Cuando el dispositivo esta conectado aparece algo similar a esto:

    List od devices attached

    192.168.50.101:5555 device
  13. Si no aparece el dispositivo en la lista, probar conectando y desconectando el celular o reiniciando el adb

    adb kill-server
    adb start-server

Firma de la aplicación para subirla a google pla developer console

Recuerde que la llave con la cual se firma la aplicación debe ser la misma con la cual se firma siempre durante la vida útil de la aplicación, por tanto debe cuidar muy bien la llave, para poder actualizar la aplicación.

  1. Crear la llave para firmar la aplicación, tener en cuenta los siguientes datos:

nombre_almacenamiento_llave.keystore Nombre del archivo que guardará las llaves
alias_de_la_aplicacion Nombre corto o apodo de la aplicación
clave_almacenamiento_llave Clave del almacen
clave_llave Clave de la llave

keytool -genkey -v -keystore nombre_almacenamiento_llave.keystore -alias aplicacion_hibrida -keyalg RSA -keysize 2048 -validity 10000

Recomiendo crear el archivo script.sh y luego ejecutarlo en gitbash asi ./script.sh

   keytool -genkey -v -noprompt \
   -alias alias_de_la_aplicacion \
   -dname "CN=Nombre, OU=Ocupacion, O=Empresa, L=Ciudad, S=Departamento, C=Codigo Zip" \
   -keystore nombre_almacenamiento_llave.keystore \
   -storepass clave_almacenamiento_llave \
   -keypass clave_llave \
   -keyalg RSA \
   -keysize 2048 \
   -validity 10000
  1. Crear en la ruta

[ruta projecto]/platforms/android

El archivo release-signing.properties

Incluir la siguiente configuración:

storeFile=ruta_almacen_llaves.keystore  
storeType=jks  
keyAlias=alias_de_la_aplicacion  
keyPassword=clave_llave  
storePassword=lave_almacenamiento_llave  
  1. Crear el apk usando el modo release, así:
cordova build android --release

About

Hangman game for mobile, was developed using web tools like html, css and javascript. This project wants to show how to develope, improve and publish the aplication like an andorid app using cordova.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published