{"id":1106,"date":"2024-09-10T12:03:00","date_gmt":"2024-09-10T10:03:00","guid":{"rendered":"https:\/\/www.pinguytaz.net\/?p=1106"},"modified":"2024-09-10T02:06:12","modified_gmt":"2024-09-10T00:06:12","slug":"crear-extensiones-para-appinventor-1","status":"publish","type":"post","link":"https:\/\/www.pinguytaz.net\/index.php\/2024\/09\/10\/crear-extensiones-para-appinventor-1\/","title":{"rendered":"Crear extensiones para AppInventor 1"},"content":{"rendered":"\n<p>MIT App Inventor (<a href=\"https:\/\/appinventor.mit.edu\/\">https:\/\/appinventor.mit.edu\/<\/a>) es un entorno de programaci\u00f3n basada en bloques para crear aplicaciones para tel\u00e9fonos Android, ahora tambi\u00e9n para iPhones de forma sencilla.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"404\" src=\"https:\/\/www.pinguytaz.net\/wp-content\/uploads\/2024\/08\/image-1024x404.png\" alt=\"\" class=\"wp-image-1107\" style=\"width:521px;height:auto\" srcset=\"https:\/\/www.pinguytaz.net\/wp-content\/uploads\/2024\/08\/image-1024x404.png 1024w, https:\/\/www.pinguytaz.net\/wp-content\/uploads\/2024\/08\/image-300x118.png 300w, https:\/\/www.pinguytaz.net\/wp-content\/uploads\/2024\/08\/image-768x303.png 768w, https:\/\/www.pinguytaz.net\/wp-content\/uploads\/2024\/08\/image.png 1277w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Pero a veces nos faltan componentes, como por ejemplo la lectura de NFCs, por lo tanto es el momento de crearnos nuestras extensiones. Una extensi\u00f3n o fichero .aix se compone normalmente de una clase (No visuales)  pero tambi\u00e9n pueden contener tener varias que instalaremos en nuestro proyecto, de la misma forma que instalamos componentes visuales, y llamaremos a sus m\u00e9todos p\u00fablicos o haremos uso de sus propiedades desde el interfaz de bloques.<\/p>\n\n\n\n<p>Si nuestro programa precisa de una l\u00f3gicas m\u00e1s complejas que complica programarla con los bloques est\u00e1ndar, especialmente a los que estamos acostumbrados a la programaci\u00f3n con editores de texto, podemos generar clases con nuestra funcionalidad en java a\u00f1adirlas a la extensi\u00f3n y llamar luego a los m\u00e9todos correspondientes desde el entorno de bloques. As\u00ed generamos la parte b\u00e1sica y visual con en <a href=\"https:\/\/appinventor.mit.edu\/\" data-type=\"link\" data-id=\"https:\/\/appinventor.mit.edu\/\" target=\"_blank\" rel=\"noreferrer noopener\">AppInventor<\/a> y le a\u00f1adimos la l\u00f3gica en una extensi\u00f3n que programaremos en java.<\/p>\n\n\n\n<p>La verdad es que existen muchos libros y documentaci\u00f3n para la programaci\u00f3n por bloques de <a href=\"https:\/\/appinventor.mit.edu\/\" data-type=\"link\" data-id=\"https:\/\/appinventor.mit.edu\/\" target=\"_blank\" rel=\"noreferrer noopener\">AppInventor<\/a> pero no tanta para la generaci\u00f3n de extensiones por lo que he decidido generar una serie de POST para explicarlo y as\u00ed de forma f\u00e1cil (si sabes programar java) generar nuestras ampliaciones de funcionalidad.<\/p>\n\n\n\n<p>Antes de comenzar deberemos de instalarnos algunas cosas en nuestro ordenador, en mi caso utilizo <a href=\"https:\/\/archlinux.org\/\" data-type=\"link\" data-id=\"https:\/\/archlinux.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">archlinux<\/a>, como es:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Java <strong>JDK8<\/strong> si tenemos versiones superiores tendremos problemas, en mi caso con <strong>archlinux<\/strong> es mu sencillo pues con el comando \u00ab<em><strong>archlinux-java<\/strong><\/em>\u00bb puedo conmutar a la versi\u00f3n deseada.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2514\u2500&gt; archlinux-java status          Vemos las disponibles y cual esta por defecto.\nAvailable Java environments:\n  java-11-openjdk\n  java-21-openjdk\n  java-22-openjdk (default)\n  java-8-openjdk\n\u2514\u2500&gt; sudo archlinux-java set java-8-openjdk     Activamos la versi\u00f3n 8 por defecto\n\u2514\u2500&gt; archlinux-java status \nAvailable Java environments:\n  java-11-openjdk\n  java-21-openjdk\n  java-22-openjdk\n  java-8-openjdk (default)\n\nTambi\u00e9n podemos validar la versi\u00f3n que usamos directamente preguntando al comando.\n\u2514\u2500&gt; java -version\nopenjdk version \"1.8.0_422\"\nOpenJDK Runtime Environment (build 1.8.0_422-b05)\nOpenJDK 64-Bit Server VM (build 25.422-b05, mixed mode)\n\u2514\u2500&gt; javac -version            Para confirmar que el compilador tambi\u00e9n utiliza la 1.8\njavac 1.8.0_422\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instalaremos <strong><a href=\"https:\/\/ant.apache.org\/\" data-type=\"link\" data-id=\"https:\/\/ant.apache.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ant<\/a><\/strong> que es<strong> <\/strong>una herramienta de l\u00ednea de comando que se utiliza para construir proyectos Java.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2514\u2500&gt; ant -version               As\u00ed verificamos que lo tenemos instalado y dentro del PATH\nApache Ant(TM) version 1.10.14 compiled on July 11 2024<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La herramienta <strong>GIT<\/strong> para poder descargar el repositorio de fuentes necesarias para generar extensiones <em>AppInventor<\/em><\/li>\n\n\n\n<li>Descargar el repositorio <a href=\"https:\/\/github.com\/mit-cml\/extension-template\">https:\/\/github.com\/mit-cml\/extension-template<\/a>, aunque existe una opci\u00f3n mejor que realizar un clon y es el siguiente comando que no solo nos descarga el repositorio sino que nos prepara la estructura para empezar a trabajar con nuestra extensi\u00f3n.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\u2514\u2500&gt;  git clone --recurse-submodules https:\/\/github.com\/mit-cml\/extension-template.git Ejemplo1<\/code><\/pre>\n\n\n\n<p>No genera un directorio llamado Ejemplo1 que sera el nombre de nuestra extensi\u00f3n, podremos sustituirlo por el que deseemos, con la siguiente estructura:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fichero <strong>build.xml<\/strong> que utiliza la herramienta Ant para compilar y generar el paquete de la extensi\u00f3n (.aix)<\/li>\n\n\n\n<li>Directorio <strong>src<\/strong> que es donde pondremos nuestros fuentes, que hablaremos en pr\u00f3ximos cap\u00edtulos.<\/li>\n\n\n\n<li>directorio <strong>lib<\/strong> con ficheros jar de librer\u00edas necesarias para AppInventor.<\/li>\n\n\n\n<li>Fichero <strong>README.md<\/strong> que explicaremos nuestra extensi\u00f3n sobre todo si queremos subirla por ejemplo a nuestro repositorio de GitHub<\/li>\n\n\n\n<li><strong>update-deps.sh upgrade-appinventor.sh<\/strong>   Scripts que nos permiten tener actualizadas las librerias necesarias.<\/li>\n<\/ul>\n\n\n\n<p>Para generar nuestra extensi\u00f3n solo tendremos que ejecutar <strong>ant extensions<\/strong>, primero pongramos c\u00f3digo claro esta y eso lo veremos en el pr\u00f3ximo POST, y mi recomendaci\u00f3n es antes realizar <strong>ant clean<\/strong> para limpiar directorios.<\/p>\n\n\n\n<p>Despu\u00e9s de generar nuestra extensi\u00f3n se generaran dos directorios, uno llamado <strong>build<\/strong> que se utiliza para la generaci\u00f3n de ficheros intermedios antes de realizar el paquete <strong>.aix<\/strong> y que se borra con <strong>ant clean<\/strong> y otro llamado <strong>out<\/strong> que tendr\u00e1 nuestro fichero <strong>.aix<\/strong> que es el que instalaremos en la aplicaci\u00f3n WEB de desarrollo de <em>AppInventor<\/em>.<\/p>\n\n\n\n<p>En el pr\u00f3ximo POST generaremos nuestra primera extensi\u00f3n y poco a poco iremos ampliando la informaci\u00f3n para sacarle todo el partido a las extensiones.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>MIT App Inventor (https:\/\/appinventor.mit.edu\/) es un entorno de programaci\u00f3n basada en bloques para crear aplicaciones para tel\u00e9fonos Android, ahora tambi\u00e9n para iPhones de forma sencilla. Pero a veces nos faltan componentes, como por ejemplo la lectura de NFCs, por lo tanto es el momento de crearnos nuestras extensiones. Una extensi\u00f3n o fichero .aix se compone [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1110,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-container-style":"default","site-container-layout":"default","site-sidebar-layout":"default","disable-article-header":"default","disable-site-header":"default","disable-site-footer":"default","disable-content-area-spacing":"default","footnotes":""},"categories":[2,6],"tags":[21,200,199,33],"class_list":["post-1106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-java","tag-android","tag-ant","tag-appinventor","tag-java"],"_links":{"self":[{"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/posts\/1106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/comments?post=1106"}],"version-history":[{"count":3,"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/posts\/1106\/revisions"}],"predecessor-version":[{"id":1144,"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/posts\/1106\/revisions\/1144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/media\/1110"}],"wp:attachment":[{"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/media?parent=1106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/categories?post=1106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pinguytaz.net\/index.php\/wp-json\/wp\/v2\/tags?post=1106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}