App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
____________________________
145.- Crear extensión con Rush. Create extension with Rush.
- Vamos a crear extensiones mediante Rush, realizado por
Shreyash Saitwal
https://github.com/shreyashsaitwal
- Podemos obtener información en inglés de Rush en estas Comunidades:
https://community.appinventor.mit.edu/t/rush-a-new-and-improved-way-of-building-extensions/28699
https://community.kodular.io/t/rush-a-new-and-improved-way-of-building-extensions/111470
________________________
1.- Bajar y descomprimir.
- El autor Shreyash Saitwal recomienda realizar la instalación mediante esta guía: https://github.com/shreyashsaitwal/rush-cli/wiki/Installation
- Pero en este tutorial lo haremos bajando un .zip y descomprimiéndolo, ya que lo utilizaremos con el símbolo de sistema (CMD).
- Vamos a: https://github.com/shreyashsaitwal/rush-cli/releases
- Bajamos la última versión, en este caso la v1.2.3. Archivo rush-win.exe de 136 MB
- Creamos la carpeta C:\rush y descomprimimos ahí.
- Observa la estructura después de descomprimir. Si has descomprimido en otra carpeta por ejemplo rush-win, cámbialo para que quede como en la siguiente imagen.
- Vamos a C:\rush\exe\win y observamos el ejecutable rush.exe
- Este ejecutable funciona en modo terminal, podemos probarlo con el Power Shell, Git bash,... pero nosotros vamos a verlo con el Windows CMD Shell.
cd C:\rush\exe\win
rush
- Los códigos de tipo ←[36m se utiliza para que el texto se muestre en colores, en este caso no funciona. Se utiliza con el intérprete de comando Git bash.
___________________________________________
2.- Creación de la extensión ejemplo gradients.
- Vamos a crear una extensión llamada gradients.
rush create gradients
Organisation (package name) com.juan
Author juan_antonio
Version 1.0
Language (Use arrow keys to navigate & press enter to select)
- Nos dice que seleccionemos entre Java y Kotlin, no podemos mover las flechas, así que simplemente pulsamos ENTER para compilar con Java.
- Obtenemos el Success!
- Observamos que se ha creado la carpeta gradients en C:\rush\exe\win
- Podemos explorar esa carpeta, vamos a entrar en:
C:\rush\exe\win\gradients\src\com\juan\gradients
- Observamos el archivo Gradients.java
- Abrimos ese archivo con Notepad++ (si no lo tienes bájalo de internet)
Gradients.java |
package com.juan.gradients;
import com.google.appinventor.components.annotations.SimpleFunction;
import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;
import com.google.appinventor.components.runtime.ComponentContainer;
import com.google.appinventor.components.runtime.errors.YailRuntimeError;
import com.google.appinventor.components.runtime.util.YailList;
public class Gradients extends AndroidNonvisibleComponent {
public Gradients(ComponentContainer container) {
super(container.$form());
}
@SimpleFunction(description = "Returns the sum of the given list of integers.")
public int SumAll(YailList integers) {
int sum = 0;
for (final Object o : integers.toArray()) {
try {
sum += Integer.parseInt(o.toString());
} catch (NumberFormatException e) {
throw new YailRuntimeError(e.toString(), "NumberFormatException");
}
}
return sum;
}
}
|
- Ese es el archivo fuente, ahí está el código de la extensión. Este archivo se ha generado automáticamente. Nosotros podemos cambiar su contenido para adaptarlo a nuestra extensión.
______________________________
- Establecimiento de Librerías.
C:\rush\exe\win\gradients\rush.yml (en este archivo es muy importante la indentación, el espaciado.)
C:\rush\exe\win\gradients\deps (aquí se ponen los archivos de tipo milibreria.jar, es decir las librerías)
- Además para reconocer la librería vamos al archivo rush.yml y escribimos su nombre debajo de deps (deps debe estar pegado a la izquierda del margen)
# Dependencies should be first added to the "deps" folder
deps:
- milibreria.jar
___________________________________________
3.- Compilación de la extensión ejemplo gradients.
- Para compilar vamos al directorio:
cd gradients
y compilamos mediante
..\rush build
- Se ha creado la extensión en la carpeta C:\rush\exe\win\gradients\out
___________________________________________
4.- Establecimiento de PATH.
- Para facilitar la dirección de los comandos podemos establecer como variable de entorno PATH
;C:\rush\exe\win
- Al establecer el PATH ya no será necesario poner los dos puntos y la barra delante de rush, es decir, podremos escribir
rush build
- Si no te funciona el establecimiento del PATH en modo gráfico para el CMD, busca información sobre autoexec.bat y autoexec.nt, según el Windows que tengas.
- O bien escribe set path = path;c:\rush\exe\win en el terminal.
- Version de Rush.
rush -v
en mi caso la 1.2.3
___________________________________________
5.- Creación de nuestra extensión.
- Vamos a crear una extensión llamada plantilla.
- Se ha creado la carpeta plantilla.
- Modificamos el archivo C:\rush\exe\win\plantilla\src\com\juan\plantilla\Plantilla.java con este contenido:
Plantilla.java |
package com.juan.plantilla;
// http://kio4.com/appinventor/145_extension_rush.htm
// Juan Antonio Villalpando.
import com.google.appinventor.components.annotations.SimpleFunction;
import com.google.appinventor.components.annotations.DesignerProperty;
import com.google.appinventor.components.annotations.SimpleProperty;
import com.google.appinventor.components.annotations.PropertyCategory;
import com.google.appinventor.components.common.PropertyTypeConstants;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.annotations.SimpleEvent;
import com.google.appinventor.components.runtime.*;
///////////// IMPORTACIONES PARA EL TONO //////////////////////
import android.media.AudioTrack;
import android.media.AudioFormat;
import android.media.AudioManager;
import android.media.ToneGenerator;
/////////////////////////////////////////////////////////////////////////////////////////////
public class Plantilla extends AndroidNonvisibleComponent {
private static final String DEFAULT_TEXTO = "Hola";
private static final int DEFAULT_NUMERO = 123;
private String texto = "";
private int numero= 0;
public Plantilla(ComponentContainer container) {
super(container.$form());
Texto(DEFAULT_TEXTO);
Numero(DEFAULT_NUMERO);
}
// Obtener el valor.
@SimpleProperty(description = "Obtiene un texto. ")
public String Texto() {
return texto;
}
@SimpleProperty(description = "Obtiene el numero. ")
public double Numero() {
return numero;
}
// Establecer el valor.
@DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_STRING, defaultValue = Plantilla.DEFAULT_TEXTO + "")
@SimpleProperty(description = "Establece un texto. ")
public void Texto(String nuevoTexto) {
this.texto = nuevoTexto;
}
@DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_INTEGER, defaultValue = Plantilla.DEFAULT_NUMERO + "")
@SimpleProperty(description = "Establece un numero. ")
public void Numero(int nuevoNumero) {
this.numero = nuevoNumero;
}
////////////////////// FUNCIONES //////////////////////////////////////////////////////////////////////
// Funcion Entran dos valores (entero y entero) y retorna un valor (float)
@SimpleFunction(description = "Area del triangulo.")
public float Triangulo(int base, int altura) {
float area = 0;
area = (base * altura) / 2;
return area;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Funcion NO ENTRAN VALORES y retorna un entero.
@SimpleFunction(description = "Numero aleatorio.")
public int Dado() {
int dado = 0;
dado = (int) (6.0 * Math.random()) + 1;
return dado;
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// A esta funcion le suministramos VALORES DE FRECUENCIA Y TIEMPO.
// Pero NO RETORNA resultado.
// Es una funcion con VOID
// Mediante el bloque de EVENTO puede devolver informacion.
@SimpleFunction(description = "Daria un sonido elegido.")
public void PonerTono(double frecuenciaHz, int duracionMs) {
AudioTrack tone = generateTone(frecuenciaHz, duracionMs); // Va a la Funcion Generador del Tono.
tone.play();
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Función NO RETORNA VALORES NI DA RESULTADO.
// Es una funcion con VOID
@SimpleFunction(description = "Daria un sonido establecido.")
public void Tono() {
AudioTrack tone = generateTone(1000, 2000); // Va a la Funcion Generador del Tono.
tone.play();
}
/////////////////////////// FUNCION GENERADORA DEL TONO /////////////////////////////////////
// Función Generadora del Tono.
// Para reducir el código se podría haber introducido el contenido de esta función en la @SimpleFunction
public AudioTrack generateTone(double freqHz, int durationMs)
{
int count = (int)(44100.0 * 2.0 * (durationMs / 1000.0)) & ~1;
short[] samples = new short[count];
for(int i = 0; i < count; i += 2){
short sample = (short)(Math.sin(2 * Math.PI * i / (44100.0 / freqHz)) * 0x7FFF);
samples[i + 0] = sample;
samples[i + 1] = sample;
}
AudioTrack track = new AudioTrack(AudioManager.STREAM_MUSIC, 44100,
AudioFormat.CHANNEL_OUT_STEREO, AudioFormat.ENCODING_PCM_16BIT,
count * (Short.SIZE / 8), AudioTrack.MODE_STATIC);
track.write(samples, 0, count);
return track;
}
///////////////////////////////////////////////////////////////////////////////////////////////////////
// Función NO RETORNA VALORES NI DA RESULTADO.
// Es una funcion con VOID
// Funcion Entra un valor (entero) y NO RETORNA resultado.
// El resultado lo obtenemos mediante un EVENTO.
@SimpleFunction(description = "Area del circulo.")
public void Circulo(float radio) {
float area = 0;
area = 3.1416f * radio * radio;
AreaCirculo(area);
}
///////////////////////////////////// EVENTOS //////////////////////////////////
// Bloques de EVENTOS.
@SimpleEvent(description = "Area del circulo.")
public void AreaCirculo(float area_circulo){
EventDispatcher.dispatchEvent(this, "AreaCirculo", area_circulo);
}
} // ==> FIN
|
- Cada vez que modifiquemos el código de Plantilla.java y queramos obtener la extensión pulsamos la flecha hacia arriba, en el teclado, para obtener el
..\rush build
- En C:\rush\exe\win\plantilla\out obtendremos la extensión com.juan.plantilla.aix con estos bloques:
___________________________________________
6.- Compilación optimizada.
- Cuando ya tengamos nuestra extensión construida y preparada para publicarla, es conveniente hacer una compilación optimizada.
- Con este tipo de compilación el archivo .aix tendrá menor tamaño y además la codificará para hacer más complicado que alguien pueda descompilarla y ver su contenido.
- Para hacer esta compilación escribimos:
..\rush build -r
- Esta forma de compilar toma información del archivo C:\rush\exe\win\plantilla\src\proguard-rules.pro que establece normas de comprensión y codificación.
___________________________________________
7.- AndroidManifest.xml.
- Otra estupenda característica que tiene esta forma de crear extensiones es la posibilidad de modificar algunas claves del archivo AndroidManifest.xml
https://github.com/ShreyashSaitwal/rush-cli/wiki/Android-Manifest-File#supported-tags
AndroidManifest.xml |
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.juan.plantilla">
<application>
<!-- <activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity> -->
</application>
</manifest>
|
___________________________________________
8.- En vez de utilizar el CMD de Windows, utilizamos el Git bash.
- Debemos escribir el rush con su extensión.exe
./rush.exe
- Observamos que el texto se presenta en color.
../rush.exe build
- También podemos establecer el PATH escribiendo:
PATH=$PATH:"/c/rush/exe/win/"
- El establecimiento del PATH se puede hacer en el archivo .bashrc
___________________________________________
9.- Utilizamos el terminal ANSICON
- Si has utilizado Windows 7 con su terminal, observarás que obtienes códigos de escape, son para mostrar colores.
- Si no quieres ver esos códigos de escape, utiliza otro terminal.
- ANSICON
https://github.com/adoxa/ansicon/releases
- Vas a la carpeta ansi189\x64 y ejecutas ansicon.exe
- Posicionas el prompt en C:\rush
- cd c:\rush
___________________________
|