|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
T Búsqueda en este sitio:


.

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

____________________________

125.- Extensiones. Extensions. Teorema de Pitágoras. Une texto.

- Vamos a crear una extensión para calcular el Teorema de Pitágoras.

0.- En nuestro ordenador con Windows, creamos una carpeta en el disco C:\ llamada AppInventorExtensiones. En ella bajamos estos tres paquetes.

1.- Java SE Development Kit en mi caso he bajado la versión 8u131. (jdk-8u131-windows-x64.exe de 198 MB).

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

 

2.- Apache Ant es una librería que utiliza JAVA para para poder construir aplicaciones, http://ant.apache.org/bindownload.cgi, en mi caso he bajado la Ant 1.10.1 (Binary Distributions) (apache-ant-1.10.1-bin.zip de 8,6 MB)

3.- Git bash de https://git-scm.com/download/win (Git-2.13.2-32-bit.exe de 32 MB). Esto es parecido a un terminal de LINUX en donde podemos ejecutar el ant.

[He bajado una versión de 32-bit, si bajas la de 64-bit también funcionará]

-----------------------------------------------------------------------------------------------------------------

- Ya tenemos los 3 paquetes en nuestra carpeta C:\AppInventorExtensiones.

-----------------------------------------------------------------------------------------------------------------

4.- Descomprimimos Apache Ant. Cuando lo descomprime lo hace en doble carpeta, por ejemplo:

C:\AppInventorExtensiones\apache-ant-1.10.1-bin\apache-ant-1.10.1-bin\

- Cámbialo para que esté en C:\AppInventorExtensiones\apache-ant-1.10.1-bin\

-----------------------------------------------------------------------------------------------------------------

5.- Instalamos Git Bash. Marcamos todo por defecto según va evolucionando la instalación.

- Fíjate que tiene un enlace en el Botón de inicio de Windows.

-----------------------------------------------------------------------------------------------------------------

6.- Instalamos el Java SE Development Kit. Tal vez te de errores, reinicia el ordenador e intenta instalarlo de nuevo.

-----------------------------------------------------------------------------------------------------------------

- Variables de entorno.

- Ahora viene una de las partes más tediosas, establecer las Variables de entorno. Para ello vamos a:

  Panel de Control / Sistema / Configuración avanzada del sistema / Opciones avanzadas / Variables de entorno.

- Según queramos poner una Nueva Variable o Editar una ya existen, pulsamos el botón de "Nueva..." o "Editar.."

- Para añadir direcciones a las ya establecidas, las separamos por punto y coma;

- En la parte de Variables de usuario para juan, establecemos estas Nuevas...

_JAVA_OPTIONS le ponemos de Valor -Xmx1024m

ANT_HOME le ponemos de Valor C:\AppInventorExtensiones\apache-ant-1.10.1-bin [es decir, la carpeta donde hemos descomprimido apache-ant]

ANT_OPTS le ponemos de Valor -Xmx256M

JAVA_HOME le ponemos de Valor C:\Program Files\Java\jdk1.8.0_131 [Si tuviera otro Valor anterior, modifícalo. Obseva que es jdk NO ES jdr]

CLASSPATH le ponemos de Valor %ANT_HOME%\lib;%JAVA_HOME%\lib

En PATH agregamos      ;%ANT_HOME%\bin;%JAVA_HOME%\bin [Observa que ;comienza por punto y coma; para agregar a las que ya estaban.]

[Las variables se separan unas de otras mediante punto y coma: unavariable;otravariable;masvarible]

-----------------------------------------------------------------------------------------------------------------

- Creación del clon de App Inventor en nuestro ordenador.

- Vamos a crear en nuestro ordenador una copia clónica de App Inventor, lo bajaremos directamente de Internet y se creará esa copia.

- Para ello vamos a Git Bash

y escribimos:

git clone  https://github.com/mit-cml/appinventor-sources.git

- Al cabo de unos 5 a 10 minutos, dependiendo de nuestra conexión a Internet, creará una carpeta llamada appinventor-sources con la fuente de App Inventor.

- ¿Dónde se ha creado la imagen de App Inventor source?

- Vamos al disco C, a la carpeta Usuarios (Users), tu nombre de usuario, en mi caso juan y observaremos la carpeta:

C:\Users\juan\appinventor-sources

- Puedes curiosear en sus subcarpetas, verás muchos archivos con extensión .java

..\appinventor\components\src\com\google\appinventor\components\runtime

-----------------------------------------------------------------------------------------------------------------
- Creación de la extensión.

- RESPETA LAS MAYÚSCULAS Y MINÚSCULAS, no es lo mismo Cateo que cateto.

- No pongas acentos.

- Ya estamos preparado para realizar nuestra primera extensión, será el Teorema de Pitágoras.

- Vamos a un Editor de Texto, te recomiendo el Notepad++, creamos un archivo llamado Pitagoras.java y pegamos el siguiente código:

Pitagoras.java

package com.Pitagoras;
//  © Juan Antonio Villalpando 
// kio4.com
// Creacion de extensiones. Junio 2017.
// Esta extension calcula la hipotenusa mediante el Teorema de Pitagoras.

import com.google.appinventor.components.annotations.DesignerComponent;
import com.google.appinventor.components.annotations.DesignerProperty;
import com.google.appinventor.components.annotations.PropertyCategory;
import com.google.appinventor.components.annotations.SimpleEvent;
import com.google.appinventor.components.annotations.SimpleFunction;
import com.google.appinventor.components.annotations.SimpleObject;
import com.google.appinventor.components.annotations.SimpleProperty;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.common.PropertyTypeConstants;
import com.google.appinventor.components.runtime.util.MediaUtil;
import com.google.appinventor.components.runtime.*;

@DesignerComponent(version = Pitagoras.VERSION,
    description = "Teorema de Pitagoras. " + "Juan Antonio Villalpando - KIO4.COM ",
    category = ComponentCategory.EXTENSION,
    nonVisible = true,
    iconName = "")
@SimpleObject(external = true)
public class Pitagoras extends AndroidNonvisibleComponent implements Component {

    public static final int VERSION = 1;
    public static final float DEFAULT_CATETO_A = 3f;
	public static final float DEFAULT_CATETO_B = 4f;
    private ComponentContainer container;
    private double cateto_a = 0;
	private double cateto_b = 0;
 
    public Pitagoras(ComponentContainer container) {
        super(container.$form());
        this.container = container;
        Cateto_A(DEFAULT_CATETO_A);
		Cateto_B(DEFAULT_CATETO_B);
    }

    // Creacion de las Propiedades.
    @SimpleProperty(
        category = PropertyCategory.BEHAVIOR)
    public double Cateto_A() {
        return cateto_a;
    }
	
	 @SimpleProperty(
        category = PropertyCategory.BEHAVIOR)
	public double Cateto_B() {
        return cateto_b;
    }

    // Establecimiento de las Propiedades.
    @DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_NON_NEGATIVE_FLOAT, defaultValue = Pitagoras.DEFAULT_CATETO_A + "")
    @SimpleProperty(description = "Asigna el valor del cateto A. " +  "El separador decimal es el punto.")
    public void Cateto_A(double nuevoCateto_A) {
        this.cateto_a = nuevoCateto_A;
    }
	
	@DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_NON_NEGATIVE_FLOAT, defaultValue = Pitagoras.DEFAULT_CATETO_B + "")
    @SimpleProperty(description = "Asigna el valor del cateto B. " +  "El separador decimal es el punto.")
    public void Cateto_B(double nuevoCateto_B) {
        this.cateto_b = nuevoCateto_B;
    }

    // Funcion para calcular la hipotenusa.
    @SimpleFunction(description = "Introduce los dos catetos y obtendras la hipotenusa.")
    public double Pitagoras(double catetoA, double catetoB) {
        double hipotenusa, cuadrado;
		
        hipotenusa = Math.sqrt((catetoA*catetoA)+(catetoB*catetoB));
		cuadrado = hipotenusa * hipotenusa;  // Calcula el cuadrado de la hipotenusa.
            
       YaCalculada(cuadrado); 

        return hipotenusa;
    }

    // Bloque disponible despues de calcular la hipotenusa.
    @SimpleEvent(description = "Muestra la hipotenusa al cuadrado.")
    public void YaCalculada(double sucuadrado){
        EventDispatcher.dispatchEvent(this, "YaCalculada", sucuadrado);
    }    

 } 

- Ese archivo lo copiamos en:

C:\Users\juan\appinventor-sources\appinventor\components\src\com\google\appinventor\components\runtime

-----------------------------------------------------------------------------------------------------------------

- Vamos a la carpeta donde hemos puesto la fuente de App Inventor (C:\Users\juan\appinventor-sources\appinventor)

y pulsamos con el botón derecho del ratón. Luego pulsamos en Git Bash Here.

- Git bash se posicionará en el directorio...

C:\Users\juan\appinventor-sources\appinventor (master)

[Estando en Git bash, otra manera de posicionarse sería escribir esta orden: cd c/Users/juan/appinventor-sources/appinventor ]

- En el Git Bash y escribimos:

ant extensions

- Si todo ha ido bien obtendremos: BUILD SUCESSFUL

- Se ha creado nuestra extensión en...

C:\Users\juan\appinventor-sources\appinventor\components\build\extensions

[NOTA: el contenido de la carpeta extensions, se borra y se vuelve a crear cada vez que hacemos un ant extensions]

- Vamos a esa carpeta y copiamos el archivo com.Pitagoras.aix a otra carpeta de nuestro ordenador (simplemente por seguridad). Esa es nuestra extensión.

- Entramos en App Inventor. Importamos nuestra extensión com.Pitagoras.aix y observaremos cómo funciona.

________________________
- Cosas importantes.

- Si el archivo tiene por nombre Pitagoras.java, debes respetar la mayúscula, no puedes poner en el código public class pitagoras, con minúscula.

- Debes poner un nombre propio de paquete, por ejemplo:

package com.Pitagoras;

package com.Juan;

- No utilices acentos en el código, ni siquiera en los comentarios, "Creación de una extensión". Daría errores por ir acentuados.

- También observa que muchas líneas del código terminan en punto y coma ;

- Esto significa que vamos a construir una EXTENSION, las extensiones no son visibles en pantalla.

category = ComponentCategory.EXTENSION,
nonVisible = true,

- Esto crea valores iniciales en las Propiedades de la extensión. La f siginfica que es un valor float (también podría haber sido int, doble, String,...)

public static final float DEFAULT_CATETO_A = 3f;
public static final float DEFAULT_CATETO_B = 4f;

- Es totalmente recomendable hacer una copia del archivo Pitagoras.java en otra carpeta por razones de seguridad, ya que si vuelves a reinstalar appinventor-sources con el git clone, borrará el que tenías en runtime.

- Un Pitagoras.aix no puedes convertirlo a Pitagoras.java

- Puedes poner una imagen como icono, debe ser un tamaño de 16x16 pixel, se pone en...

iconName = "imagenes/extension.png")

También se puede poner desde internet, debe ser una imagen de 16x16, por ejemplo:

iconName = "http://kio4.com/appinventor/imagenes/midibujo.png")

- Observa los comentarios:

-

____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________

- Otro ejemplo basado en el anterior. Une dos textos.

- Este código es una adaptación del anterior. Une dos textos.

- Por ejemplo, pongo en TextoPrimero la palabra "Hola" y en TextoSegundo la palabra "Adios", unirá las dos palabras y mostrará "HolaAdios".

- Esta es la línea donde se unen los dos textos:

unidos = TextoPrimero + TextoSegundo;

- Fíjate que en la aplicación de Pitágoras las variables eran numéricas double, ahora son de cadena de texto String.

- Cuidado con las mayúsculas, no es igual String que string.

UneTexto.java

package com.UneTexto;
//  © Juan Antonio Villalpando 
// kio4.com
// Creacion de extensiones. Junio 2017.
// Esta extension se utiliza para unir dos textos.

import com.google.appinventor.components.annotations.DesignerComponent;
import com.google.appinventor.components.annotations.DesignerProperty;
import com.google.appinventor.components.annotations.PropertyCategory;
import com.google.appinventor.components.annotations.SimpleEvent;
import com.google.appinventor.components.annotations.SimpleFunction;
import com.google.appinventor.components.annotations.SimpleObject;
import com.google.appinventor.components.annotations.SimpleProperty;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.common.PropertyTypeConstants;
import com.google.appinventor.components.runtime.util.MediaUtil;
import com.google.appinventor.components.runtime.*;

@DesignerComponent(version = UneTexto.VERSION,
    description = "Une dos textos. " + "Juan Antonio Villalpando - KIO4.COM ",
    category = ComponentCategory.EXTENSION,
    nonVisible = true,
    iconName = "")
@SimpleObject(external = true)
public class UneTexto extends AndroidNonvisibleComponent implements Component {

    public static final int VERSION = 1;
    public static final String DEFAULT_TEXTO_1 = "Hola";
	public static final String DEFAULT_TEXTO_2 = "Adios";
    private ComponentContainer container;
    private String texto_1 = "";
	private String texto_2 = "";
 
    public UneTexto(ComponentContainer container) {
        super(container.$form());
        this.container = container;
        Texto_1(DEFAULT_TEXTO_1);
		Texto_2(DEFAULT_TEXTO_2);
    }

    // Creacion de las Propiedades.
    @SimpleProperty(
        category = PropertyCategory.BEHAVIOR)
    public String Texto_1() {
        return texto_1;
    }
	
	 @SimpleProperty(
        category = PropertyCategory.BEHAVIOR)
	public String Texto_2() {
        return texto_2;
    }

    // Establecimiento de las Propiedades.
    @DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_STRING, defaultValue = UneTexto.DEFAULT_TEXTO_1 + "")
    @SimpleProperty(description = "Asigna el valor del texto 1. ")
    public void Texto_1(String nuevoTexto_1) {
        this.texto_1 = nuevoTexto_1;
    }
	
	@DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_STRING, defaultValue = UneTexto.DEFAULT_TEXTO_2 + "")
    @SimpleProperty(description = "Asigna el valor del texto 2. ")
    public void Texto_2(String nuevoTexto_2) {
        this.texto_2 = nuevoTexto_2;
    }

    // Funcion que une los dos textos.
    @SimpleFunction(description = "Une dos textos.")
    public String UneTexto(String TextoPrimero, String TextoSegundo) {
        String unidos;
        unidos = TextoPrimero + TextoSegundo;
            
       YaUnidos(unidos);  

        return unidos;
    }
	
    // Bloque disponible despues de la union de los textos.
    @SimpleEvent(description = "Esto sale despues de unir los textos.")
    public void YaUnidos(String unidos){
        EventDispatcher.dispatchEvent(this, "YaUnidos", unidos);
    }  
	
}

- Cada vez que realices un archivo .java, haz una copia de seguridad del mismo, cópialo en otra carpeta ya que en cualquier momento se puede bloquear el clon de app-inventor-source y perder lo que tienes.

______________________________________________________________________

- Construir un servidor.

- Esto no es necesario para crear las extensiones, pero si quieres crear un servidor, escribes:

ant RunLocalBuildServer

- Te saldrá:

- Luego escribimos:

http://192.168.1.2:9990/ buildserver/vars

___________________________

 

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información