[GUÍA] Crear revisión de versión [Sketchware]

Sean todos Bienvenidos!

Hoy aprenderemos a como hacer que nuestra aplicación verifique mediante una conexión a Internet si hay o no una nueva versión!

Antes de comenzar la Guía se requiere que tengan lo siguiente:

1 — Dispositivo con Sketchware (Obviamente) y conexión a Internet.

2 — Computador con Editor de texto y conexión a Internet.
NOTA: El Editor de texto puede ser cualquiera que permita guardar archivo “.php” (Notepad de Windows, Notepad++, Sublime Text, etc…).

3 — Servidor host para subir archivos a un dominio (ya sea gratuito o pago)
NOTA: Si desean pueden usar “000webhost” para Dominios y Hosting gratuitos.
NOTA: La conexión al servidor es mediante el Computador.
NOTA: En esta guía no se hablará de como crear un hosting y dominio ni como subir archivos a este.

4 — [OPCIONAL] Conocimiento básico del lenguaje de programación PHP.

Muy bien! Ya teniendo todo esto, COMENZAMOS!

##############
## PARTE 01 ##
##############

Lo primero que debemos hacer es tener a la mano nuestro Dominio y Hosting. En este guía yo usaré un Dominio gratuito.

Ahora vamos a nuestro computador y vamos abrir nuestro editor de texto y escribir/copiar lo siguiente:

<?php
$version = ‘123’; // AQUÍ DEBEN ESCRIBIR LA VERSIÓN, YA SEA INVENTADA POR USTEDES ‘A-12.3’ O SENCILLA ‘1.1’
$linkDescarga = ‘http://riskn.000webhostapp.com/sketch/'; // AQUÍ VA EL LINK DE DESCARGA DE LA VERSIÓN INDICADA ANTERIORMENTE
// DE PREFERENCIA ACORTADO Y EN UN SERVIDOR OPTIMO PARA DISPOSITIVOS
if ( isset ( $_GET[‘revisar’] ) ) { // CON ESTO SE COMUNICARÁ EL USUARIO A LA PAGINA
 $version_usuario = $_GET[‘revisar’]; // EN LA VARIABLE ‘$version_usuario’ SERÁ ALMACENADA LA VERSIÓN DE LA APLICACIÓN
 // ES DECIR LA QUE TIENE EL USUARIO EN ESE MOMENTO
 if ( $version_usuario == $version ) {
 // CUANDO LA VERSIÓN DE LA APLICACIÓN DEL USUARIO ES CORRECTA
 // COINCIDE CON LA INDICADA EN ESTE ARCHIVO
 // POR LO TANTO SE LE REDIRECCIONA A UN LINK PARA NOTIFICAR
 echo ‘
 <script type=”text/javascript”>
 window.location=”?revisado=TRUE&extra=’.$version.’”;
 </script>
 ‘;
 // DONDE ‘?revisado=TRUE’ SIRVE PARA INDICAR QUE LA VERSION ES CORRECTA
 // DONDE ‘&extra=’.$version.’’ SIRVE PARA INDICAR AL USUARIO QUE VERSIÓN ES LA NUEVA
 } else {
 // CUANDO LA VERSIÓN DE LA APLICACIÓN DEL USUARIO ES INCORRECTA
 // NO COINCIDE CON LA INDICADA EN ESTE ARCHIVO
 // POR LO TANTO SE LE REDIRECCIONA A UN LINK PARA NOTIFICAR
 echo ‘
 <script type=”text/javascript”>
 window.location=”?revisado=FALSE&extra=’.$linkDescarga.’”;
 </script>
 ‘;
 // DONDE ‘?revisado=FALSE’ SIRVE PARA INDICAR QUE LA VERSIÓN ES INCORRECTA
 // DONDE ‘&extra=’.$linkDescarga.’’ SIRVE PARA DARLE AL USUARIO EL LINK PARA DESCARGAR LA NUEVA VERSIÓN
 }
}
echo ‘Descarga la última versión, <a href=”’.$linkDescarga.’”>clic aquí</a>’;
?>

Luego de eso, debemos guardar el archivo con el nombre “index” y el formato “.php”

Cuando tengamos el archivo guardado lo subimos a nuestro Hosting

##############
## PARTE 02 ##
##############

Ahora que hemos hecho esto, terminamos la parte de nuestro computador…

Vamos ahora con nuestro Dispositivo, abrimos nuestro Sketchware y vamos a la edición de nuestra aplicación…

Lo primero que vamos hacer, es ir al “Activity” “Main” y crear un “File (Shared Preference)” para almacenar la información de la web para verificar la versión

(nombre a criterio propio)

Ahora en el “onCreate” vamos a crear una variable de tipo “String” para darle el link de nuestro dominio, donde esta nuestro host

(nombre a criterio propio)

Vamos a darle como valor a esa variable nuestro Dominio donde esta el Hosting.

NOTA: Debes incluir el “http://” antes del Dominio y el “/” al final

Muy bien, continuamos con crear otra variable de tipo “String” donde asignaremos la versión actual de la aplicación

(nombre a criterio propio)

Ahora, crear otra variable de tipo “String” para guardar el link final de la revisión de la versión

(nombre a criterio propio)

Y mediante el comando de “Operator” > “Join [ ] and [ ]” vamos a combinar:

Join [variable_host] and [Join [?revisar=] and [variable_version]]

Ahora, en el “File” creado al principio de esta parte, vamos a guardar con el comando “Component” > “File: setData key [ ] value [ ]” mediante una “Key” la ultima variable creada

(nombre a criterio propio)

##############
## PARTE 03 ##
##############

Ahora que vamos concluyendo, nos dirigiremos a nuestro “Activity” de preferencia para indicarle al usuario si tiene o no una versión obsoleta…

Vamos a la vista (“VIEW”) de esta “Activity” e insertemos un “WebView” en cualquier sitió ya que será editado de la siguiente forma:

De esta manera el WebView parece totalmente invisible y no afecta en nada la vista del “Activity”

##############
## PARTE 04 ##
##############

Al estar en el otro “Activity” se debe crear un nuevo bloque, para ello, vamos al “onCreate” y seleccionamos “More Block” > “Create”

En la creación en la creación del nuevo bloque, solo indicaremos nombre ya que será la función para revisar la versión y le damos “CREATE”

(nombre a criterio propio)

Colocamos este bloqueo en el inicio del “onCreate” (o donde deseamos que haga la verificación)

Ahora vamos de nuevo a la “Logic” del “Activity” actual y creamos el mismo “File (Shared Preferenced)” creado en la parte 2

Entramos al evento del bloqueo creado anteriormente y creamos una variable de tipo “String” para recibir el link guardado en el archivo

(nombre a criterio propio)

Como valor a la variable se le dará mediante el comando “Component” > “File: getData key [ ]” donde el archivo será el creado anteriormente y la “Key” la utilizada para guardar información en la parte 2

Y para terminar esta parte, a través del comando “View” > “WebView: loadUrl [ ]”, vamos a hacer que el “WebView” creado en la parte 3 entre al link almacenado en la variable que acabamos de crear

Y obteniendo como resultado final algo así:

##############
## PARTE 05 ##
##############

Ahora en el “Activity” actual vamos a crear un “Timer” para revisar la versión

(nombre a criterio propio)

Vamos al bloque creado en la parte 4, y creamos un ciclo del timer con el comando “Component” > “Timer: after ( ) ms for every ( ) ms”, donde el “Timer” será el creado en el paso anterior y los tiempos en “ms” serán “100”

Siguiendo con esto, vamos a crear una nueva variable de tipo “String” la cual almacenará el nuevo link del “WebView”

(nombre a criterio propio)

Luego vamos a darle valor a esta variable al principio del ciclo del “Timer”, el valor asignado será el link actual, para ello usaremos el comando “View” > “WebView: getUrl” del “WebView” que utilizamos

Vamos a crear un condicional sencillo con el comando “Control” > “if < > then”

Ahora en la parte 1, indicamos que cuando el link contenga la palabra “revisado” es porque ya obtuvo una respuesta, así que mediante el comando “Operator” > “[ ] Contains [ ]” donde lo rellenamos de la siguiente forma: “[variable_link_nuevo] Contains [?revisado=]” y colocaremos esto como la condición del “if < > then” colocado antes

Ahora vamos asegurarnos que detenga el ciclo del “Timer” con el comando “Component” > “Timer: cancel” ya que obtuvimos respuesta del link

Continuamos y vamos ahora vamos a crear otra variable de tipo “String” para obtener la respuesta de la versión

(nombre a criterio propio)

A la primera variable (la de la respuesta de la versión) vamos a darle como valor lo siguiente:

“Operator” > “[A] substring (B) to ©”
A = variable_link_nuevo
B = “Operator” > “Index [B.A] of [B.B]”
B.A = ?
B.B = variable_link_nuevo
C = “Operator” > “Index [C.A] of [C.B]”
C.A = &
C.B = variable_link_nuevo

Quedando algo así:

[variable_link_nuevo] substring (Index [?] of [variable_link_nuevo]) to (Index [&] of [variable_link_nuevo])

Ahora vamos añadir otro condicional pero ahora será uno doble “Control” > “if < > then else”

Y colocamos en la condición el comando “Operador” > “[ ] equals [ ]”

De un lado del “[ ] equals [ ]” colocamos la variable y del otro colocamos “?revisado=true”

##############
## PARTE 06 ##
##############

Vamos a crear ahora un “Dialog” para indicar al usuario si su version es obsoleta o no

(nombre a criterio propio)

Ahora vamos a configurar el “Dialog” creado dentro del ultimo condicional creado en la parte 5, con los comandos:

1) “Component” > “Dialog: set title [ ]”
2) “Component” > “Dialog: set message [ ]”
3) “Component” > “Dialog: OK Button [ ] Clicked”

Donde rellenaremos de la siguiente manera:

1) “Dialog: dialogo_revision set title [Version correcta]”
2) “Dialog: dialogo_revision set message [Tu version es la útlima, no requieres actualizar]”
3) “Dialog: dialogo_revision OK Button [Aceptar] Clicked”

Y dejaremos este lado así

Ahora vamos a incluir los siguiente comandos pero en la segunda parte del condicional

1) “Component” > “Dialog: set title [ ]”
2) “Component” > “Dialog: set message [ ]”
3) “Component” > “Dialog: OK Button [ ] Clicked”
4) “Component” > “Dialog: Cancel Button [ ] Clicked”

Donde rellenaremos de la siguiente manera:

1) “Dialog: dialogo_revision set title [Version incorrecta]”
2) “Dialog: dialogo_revision set message [Tu versión es obsoleta, te invitamos actualizar]”
3) “Dialog: dialogo_revision OK Button [Descargar] Clicked”
4) “Dialog: dialogo_revision Cancel Button [Cancelar] Clicked”

Ahora vamos hacer que el dialogo se muestro con el comando “Component” > “Dialog: show” y lo colocamos luego del condicional

##############
### EDITAR ###
##############

Para terminar esto, solo deben editar que función hacer para que el usuario actualice, para ello debemos tener la información extra dada por la web, así que editaremos la otra variable creada al final, dentro del botón “OK” del último dialogo

##############
# COMPLETADO #
##############

Listo, con esto ya nuestra aplicación revisa la versión mediante la web!

Espero les haya servido y les guste! Si tienen alguna duda escriban a risknetworks.ca@gmail.com Un saludo!