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

- Las fuentes actuales se encuentran en:

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

- 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:

package com.Pitagoras;
// package es.kio4.Pitagoras; // En la nueva version.

//  © 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);
    }

    // Obtener el valor.
    @SimpleProperty(category = PropertyCategory.BEHAVIOR)
    public double Cateto_A() {
        return cateto_a;
    }
	
	 @SimpleProperty(category = PropertyCategory.BEHAVIOR)
	public double Cateto_B() {
        return cateto_b;
    }

    // Establecer el valor.
    @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 estamos utilizando la pantilla Template para hacer extensiones y queremos utilizar proguard: ant extensions -Dproguard=1

- 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.

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);
    }

    // Obtener el valor.
    @SimpleProperty(category = PropertyCategory.BEHAVIOR)
    public String Texto_1() {
        return texto_1;
    }
	
	 @SimpleProperty(category = PropertyCategory.BEHAVIOR)
	public String Texto_2() {
        return texto_2;
    }

    // Establecer el valor.
    @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

________________________________________________________
- Permisos.

- Observa askPermission

			
import com.google.appinventor.components.annotations.DesignerComponent;
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.UsesPermissions;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.common.YaVersion;
import com.google.appinventor.components.runtime.errors.PermissionException;
import com.google.appinventor.components.runtime.util.AsynchUtil;
import com.google.appinventor.components.runtime.util.ErrorMessages;
import com.google.appinventor.components.runtime.util.FileUtil;
import com.google.appinventor.components.runtime.util.MediaUtil;

import android.Manifest;
import android.app.Activity;
import android.os.Environment;
import android.util.Log;

@SimpleObject
@UsesPermissions(permissionNames = "android.permission.WRITE_EXTERNAL_STORAGE, android.permission.READ_EXTERNAL_STORAGE")

 public File(ComponentContainer container) {
    super(container.$form());
    if (form instanceof ReplForm) { // Note: form is defined in our superclass
      isRepl = true;
    }
    activity = (Activity) container.$context();
  }
  
public void Delete(final String fileName) {
    form.askPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE, new PermissionResultHandler() {
      @Override
      public void HandlePermissionResponse(String permission, boolean granted) {
        if (granted) {
          if (fileName.startsWith("//")) {
            form.dispatchErrorOccurredEvent(File.this, "DeleteFile",
                ErrorMessages.ERROR_CANNOT_DELETE_ASSET, fileName);
            return;
          }
          String filepath = AbsoluteFileName(fileName);
          if (MediaUtil.isExternalFile(fileName)) {
            if (form.isDeniedPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE)) {
              form.dispatchPermissionDeniedEvent(File.this, "Delete",
                  new PermissionException(Manifest.permission.WRITE_EXTERNAL_STORAGE));
            }
          }
          java.io.File file = new java.io.File(filepath);
          file.delete();
        } else {
          form.dispatchPermissionDeniedEvent(File.this, "Delete", permission);
        }
      }
    });
  }
 
 //////////////////////////////////////////////////////7
 ////// ANTES
 public void Delete(String fileName) {
    if (fileName.startsWith("//")) {
      form.dispatchErrorOccurredEvent(File.this, "DeleteFile",
          ErrorMessages.ERROR_CANNOT_DELETE_ASSET, fileName);
      return;
    }
    String filepath = AbsoluteFileName(fileName);
    java.io.File file = new java.io.File(filepath);
    file.delete();
  } 

_______________________________________________________________

- Extensiones con Template.

- Bajamos:

mit-cml/extension-template de

https://community.appinventor.mit.edu/t/extension-template-repository/4452

- Leemos:

The extension template repository has been updated to support the latest version of App Inventor (v185). With this change I've split the repository into two parts. All of the App Inventor dependencies are now published in a separate repository at https://github.com/mit-cml/extension-deps 9 . The template repository stores a reference to that repository through a git submodule dependency.

• If you merge from this repo to get an update, you should run git submodule update --init after merging to get the dependencies.
• If you're cloning a fresh template, GitHub seems to drop the submodule. In this case, run the upgrade-appinventor.sh script included in the repository to get the dependencies.

As we release new versions of the App Inventor companion, developers should run upgrade-appinventor.sh to ensure they compile their extensions against the latest version of App Inventor.

Para bajar todo:

git clone --recurse-submodules https://github.com/mit-cml/extension-template.git mi_directorio

__________________________________________

- Proguard

-verbose
-dontnote **
-optimizationpasses 3
-allowaccessmodification
-dontskipnonpubliclibraryclasses
-mergeinterfacesaggressively
-overloadaggressively
-useuniqueclassmembernames
-repackageclasses ''

-keep public class * {
public protected *;
}

___________________________