Cómo programar con Basic 4 Android Videotutoriales – EPISODIO 4

Bienvenidos a este nuevo videotutorial de Basic 4 Android. Durante el mismo veremos otra opción que podemos utilizar para poder probar nuestras aplicaciones y es un componente que se llama Bridge, se instala dentro de nuestro móvil y a través de wireless probar todas las aplicaciones que vayamos haciendo dentro de nuestro diseñador, poder mandarlos al móvil a través de nuestro componente, para poder probarlas, esto nos permite hacer una prueba en un entorno real que es bastante más distinto que hacerlo con el emulador como vimos en el capítulo anterior.

Bien, lo primero que tenemos que hacer es acceder a Google Play y buscar B4A-Bridge e instalarlo. Lo que hace este producto es que arranca una especie de listener (escuchador) y nos va a indicar la dirección IP y pulsamos el botón start las conexiones de tipo wifi. Para conectarnos desde el desarrollador nos vamos al menú Tools, seleccionamos BA4BRIDGE, connect y ponemos la dirección IP que nos ha dado el móvil, le damos al ok y veremos que en el móvil se ha establecido la conexión. En el móvil nos pedirá desplegar la aplicación de esta manera cada vez que ejecutemos la aplicación, saldrá inmediatamente en el móvil con lo cual podremos probarla en modo real de una manera mucho más efectiva que con el emulador.

699

CÓMO PROGRAMAR CON IONIC – VIDEOTUTORIALES – EPISODIO 4

Bienvenidos a este nuevo tutorial de IONIC. En los capítulos anteriores hemos visto cómo podemos diseñar la parte visual de nuestra aplicación, pero claro eso al final lo tendremos que ejecutar en una app (es decir tendremos que escribir el código) y para eso vamos a aprender en este capítulo todo lo necesario para instalar los componentes que necesitamos que ya los adelantamos en el primer capítulo cuando vimos la introducción IONIC.

Para poder tener un entorno ionic funcionando necesitamos varias cosas:

  • En primer lugar vamos a tener que instalar nodejs para que nos permita trabajar con el entorno de ionic,
  • luego vamos a instalar también el componente Apache Cordova
  • y por último vamos a configurar ionic.

Empecemos por instalar nodejs, es un runtime de javascript, con este motor es con el que vamos a ejecutar nuestros proyectos. nos bajamos la última versión en entorno windows o apple. Haremos la típica instalación y veremos que es bastante sencillo a la hora de trabajar. Buscamos un fichero donde instalarlo. No tarda mucho, es importante que nos descargue el package manager. Le damos a install y tardará más o menos en hacerlo dependiendo de la potencia de vuestro ordenador. Abrimos una ventana de MS2. En aquel directorio ponemos node – v
y node>npm – v.

Pues bien, con este videotutorial ya hemos hecho la primera fase de la instalación de los productos. Seguiremos avanzando en las próximas semanas.

466

Cómo programar con APP INVENTOR – VIDEOTUTORIALES – EPISODIO 4

Bienvenidos a este nuevo videotutorial de APP INVENTOR.

En el mismo, primero, vamos a ver cómo podemos crear nuestra primera aplicación. Para poder probarla en nuestro móvil, tal y como vimos en el capítulo anterior, y además vamos a ver cómo podemos utilizar determinados objetos para hacer acciones como por ejemplo pulsar un botón. Para ello vamos a crear un nuevo proyecto. En este caso “proyecto gato”, donde vamos a poner una foto de un gato y un sonido de manera que al pulsar sobre el gato, el gato maúlle. Nos va a servir para ver las funcionalidades de insertar objetos nuevos como la de realizar acciones.

En este caso lo que queremos es hacerlo como botón, lo situamos en el viewer, nos vamos a las propiedades del botón. Asociamos una imagen, de forma que en vez de salir un texto, salga una imagen, la buscamos, en upload file, seleccionamos, le damos a abrir, le damos a ok y si todo es correcto podemos comprobar que ha aparecido la imagen del gato que podremos especificar cómo lo queremos, os animamos a que probéis distintas opciones.

Para incluir un sonido, dentro de la paleta nos vamos a la zona de media y en esa zona ponemos uno de esos sonidos, si nos fijamos abajo, veremos que es un componente no visible pero sí que está el sound. Una vez que tenemos hecho esto dentro de source, pinchamos y podemos hacer también un upload file, subimos el archivo del sonido.

Hasta aquí ya hemos subido por un lado la imagen y por otro el sonido, ¿y cómo hacemos para que cuando pinchemos en la imagen se oiga ese sonido? Dentro de las opciones que tenemos, recordemos que en la parte derecha tenemos blocks que si lo pulsamos nos lleva a una ventana, pulsamos en Button, nos aparecen varias opciones, en este caso nos interesa qué va a pasar sobre el botón 1. Dentro del Sound podemos comprobar que si ahora pincho en el icono de sound pues nos dice la acción, asociaremos este botón con este sonido. Cogemos el click y lo arrastramos a la parte derecha. Será el primer elemento de nuestro block. Después cogemos el sonido con play y lo arrastramos al button1.

Digamos que con esto, lo único que debemos hacer es grabarlo y como hemos visto en proyectos anteriores, subimos el proyecto a nuestro móvil y lo probamos.

564

Cómo programar con Ionic y Cordova – videotutoriales – episodio 3

En este videotutorial nos adentramos un poco más en la programación a través de Ionic, aquí en concreto aprenderemos a añadir nuevas páginas a nuestro proyecto y también a exportar nuestro proyecto para que, en próximos tutoriales lo podamos utilizar dentro de Ionic.

Crear una página es bastante sencillo. Dentro de la parte izquierda donde tenemos el navegador, si pulsamos en Add Page, lo que va a hacer es añadirnos una nueva página y además nos va a pedir de qué tipo (blanco, un log in de entrada o un sign up). En esta ocasión vamos a seleccionar página en blanco y vemos que se añade en el navegador con el nombre genérico de Page. En la parte derecha le ponemos un título y automáticamente una vez que hemos creado el nombre de la página (en este caso Mi nueva página) nos va a dar la referencia. El resto de propiedades son iguales que el resto de las páginas.

 

A continuación arrastramos un Heading como hemos hecho en alguna otra ocasión y cambiamos el título a Mi primera página nueva para que quede registrado. El inconveniente que tenemos es que si nos vamos al Tabs controller, veremos que no tenemos un Tab que nos permita asociar esta página que acabamos de crear al Tab. Por tanto, una vez que hemos pinchado en Tabs controller y clicamos en tabs creamos una nueva pestaña pinchando en la derecha add new tab al tener un nuevo tab creado lo podremos utilizar para añadir nuestra nueva página. Por defecto, cuando añadimos un tab vemos que nos crea una página nueva, en este caso no nos interesa esta página nueva así que lo vamos a borrar. En tabs comprobamos que se ha creado tab5 y lo vamos a personalizar cambiándole el nombre por Mi página nueva y además le cambiaremos el icono como hemos hecho en anteriores ocasiones.

Si nos vamos abajo podemos observar que ya aparece Mi página nueva. Ya podemos poner un nombre más lógico por ejemplo Mi carrito.

579

Cómo programar con App Inventor – VIDEOTUTORIALES – EPISODIO 3

En el capítulo anterior te contábamos cómo podíamos enlazar un dispositivo móvil con nuestro app inventor en el ordenador pero si no es nuestro caso o no podemos hacerlo por esta vía, podemos usar una segunda opción y aquí te decimos cómo:

Podemos probar con un emulador, depende de Windows o Mac, lo que hace es visualizarnos un móvil simulado que nos permite probar las aplicaciones. Nos viene muy bien para hacer pruebas y ejemplos pero lo ideal es que podamos hacerlo con nuestro móvil de verdad.

En primer lugar tenemos que descargarnos el emulador e instalarlo, es un programa independiente. Basta con entrar en la pantalla en la que estuvimos con el vídeo anterior, cliclamos en Instructions y nos va a llevar a una pantalla desde la que podremos indicarle si queremos instalarlo para Mac, para Windows o para Linux. Nos descargamos el instalador, la instalación es bastante simple, nos pedirá un directorio donde guardarla.

Una vez instalado, volvemos a la aplicación que ya teníamos hecha en el capítulo anterior, nos vamos a connect y le damos a Emulator. Esto puede tardar un ratito y cuando el proceso ha arrancado veremos que aparece una ventana similar a la de un móvil. En la que irán apareciendo todos los componentes de la aplicación que vayamos haciendo, de esta manera según vayamos cambiando o modificando nuestro proyecto, también se irán cambiando los elementos del emulador.

395

Cómo programar con App inventor – videotutoriales – episodio 2

Te ayudamos en tus primeros pasos por el mundo de la programación de aplicaciones para móviles. A continuación tienes el segundo videotutorial de App Inventor.

En el anterior vimos cómo podíamos crear una pequeña pantalla con algún objeto dentro. Ahora cuando lo tenemos que probar, ¿qué podemos hacer? Podemos probarla con dos entornos un dispositivo real o a través de un emulador. Cada opción tiene sus ventajas y sus inconvenientes. Pero siempre es más recomendable usar el dispositivo físico.

Vemos las tres posibles opciones:

  1. A través de wifi y del dispositivo.
  2. A través del emulador.
  3. A través del usb.

En este caso vamos a ver la primera opción. Para ello tenemos que instalar en nuestro dispositivo APP INVENTOR. La descargamos y la instalamos. Nos pedirá una serie de accesos y una vez que haya terminado, la abrimos para poder poner en marcha nuestras pruebas con el dispositivo.

Lo primero que hace es generar un código, y este código es el que tenemos que incorporar dentro de nuestro móvil para que reconozca a nuestro dispositivo. Volvemos al móvil, ponemos dentro del móvil los caracteres que nos ha indicado la aplicación de app inventor y una vez que le demos a intro podremos ver que se conectan el dispositivo y la aplicación.

Vamos a hacer una pequeña prueba cogiendo una etiqueta y llevándola a la parte derecha, y una vez vayamos a nuestro dispositivo móvil veremos cómo está allí también.

Hasta aquí este tutorial de APP INVENTOR que esperamos haya sido de vuestra ayuda. Nos vemos en el tercero.

572

Cómo programar con basic4android – videotutoriales – ep2

Continuamos explicándote cómo programar con basic4android. Esperamos que este videotutorial sea de tu ayuda en tus primeros pasos aprendiendo a programar aplicaciones para móviles.

Recordamos que en el capítulo anterior vimos cómo podemos crear una nueva aplicación, un nuevo proyecto de Basic4android, también vimos cómo podemos entrar en la herramienta visual designer para ir añadiendo vistas, en este caso tenemos un ejemplo en el que hemos añadido tanto una label como un botón. ¿Pero cómo podemos ver cómo quedaría en un móvil?

Tenemos dos posibilidades: Por un lado tenemos la posibilidad de verlo con un móvil de verdad pero si no, podemos utilizar un emulador.

¿Y cómo lo conseguimos? Muy sencillo.  Dentro de lo que sería en este caso la pantalla que acabamos de crear (que llamamos PANTALLA UNO). Y dentro de la app podemos acceder al creador de emuladores de Android. Esta herramienta nos permite simular un móvil de verdad. Esto permite varias cosas, primero que no tengamos que tener un móvil físico conectado y segundo poder probar con distintos tipos de móvil con varias funcionalidades.

Dentro de tools disponemos de una opción de menú que es el room avd manager. Esta herramienta es de android: ANDROID VIRTUAL DEVICE MANAGER (avd manager). Y aquí tendríamos todos los simuladores que hemos ido creando. En la segunda pestaña están preparados para poder crear dispositivos sobre ellos, como es lógico están muy orientados para Google y para dispositivos genéricos.

Creamos nuestro primer simulador pulsando el botón CREATE que nos llevará a una pantalla le ponemos un nombre y especificamos el device y seleccionamos un nexus o un dispositivo de 5 pulgadas o que se le acerque (también es importante la resolución de pantalla). Luego le podemos especificar el nivel de Android que queremos, y puedo por lo tanto también, indicarle si voy a utilizar una CPU de tipo ARM o de tipo Intelaton, también si queremos un teclado tipo hardware, el skin, en este caso lo podemos poner sin look o utilizando alguna de estas que tenemos predefinidas. Podemos especificar luego qué tipo de dispositivo. Muy importante es cuánta RAM va a usar nuestro emulador y si vamos a tener almacenamiento interno, cuidado con esto porque va a intentar crear ficheros para tener este espacio disponible. Vamos a poner que queremos tarjeta y decir que es de 1GB.

Una vez que lo tenemos le damos al ok y una vez que nos grabe, podemos probar el emulador. Comprobamos que ya lo ha creado, si le damos a start y todo es correcto, el emulador va a arrancar y en el siguiente capítulo vemos cómo podemos conectarnos con nuestra aplicación de Basic4android.

613

Cómo programar con Ionic y Cordova – videotutoriales – episodio 2

En este segundo videotutorial de creación de aplicaciones Ionic continuaremos con la explicación del capítulo anterior en la que empezábamos a usar la herramienta creator.ionic.io con un proyecto de tipo tab. Teníamos una pantalla creada con tres pestañas. A lo largo de este videotutorial vamos a profundizar en los conocimientos de esta herramienta tan útil que nos permite montar la parte visual de la aplicación ionic a la espera de que luego nosotros introduzcamos el código correspondiente.

En este caso al haber elegido una aplicación de tipo TAB con TAB Controller podemos observar en la parte izquierda un pequeño árbol de navegación desde la cual podemos acceder al TAB Controller y a cada una de las tres pestañas que tenemos ahora mismo pre-creadas; también podremos acceder a cada una de las páginas en las que están basadas cada una de las pestañas.

Lo primero que podemos hacer es modificar esas pestañas que ya teníamos. Podemos acceder tanto desde las propias pestañas o también desde el árbol de navegación y vemos que en el árbol de navegación podemos tanto borrar como duplicar una pestaña.

Cambiar las propiedades de una pestaña:

  • la seleccionamos (podemos observar que tiene un conjunto de propiedades)
  • cambiamos el nombre
  • cambiamos el icono
  • importante* la siguiente pestaña nos indica a qué página real está conectada.
  • por último podemos mover la pestaña

A continuación nos vamos a la página a la que pertenece una de las pestañas y comprobamos que podemos cambiar otros componentes, como el color, el fondo de pantalla, el scrolling, la cabecera, el margen… Y por supuesto si fuera necesario también podríamos borrarlo. Después en el menú de la parte izquierda podemos ir arrastrando los componentes que nos interesen.

En este episodio esperamos que haya quedado claro cómo podemos movernos a través de las distintas páginas de cada pestaña. En el siguiente videotutorial, profundizaremos en algunos de estos componentes que son muy importantes para desarrollar una aplicación Ionic correctamente.

441

Programar con APP inventor – videotutoriales – episodio 1

Bienvenidos a este videotutorial donde vamos a aprender los primeros pasos para desarrollar aplicaciones con app Inventor. App Inventor es una aplicación en modo web desde la que podemos desarrollar de una manera fácil y sencilla aplicaciones web que puedan ser ejecutadas tanto en dispositivos Android como en dispositivos de tipo iOS, de una manera sencilla sin necesidad de llegar a programar si no es necesario.




Cómo desarrollar una aplicación con App Inventor

Para empezar a desarrollar con app Inventor tenemos que entrar su página, para poder empezar a desarrollar tenemos que pulsar donde pone Create app y antes de este paso tenemos que tener una cuenta de gmail para poder trabajar.

Cuando entremos nos va a pedir con qué cuenta de google queremos entrar, en este caso ya la habíamos seleccionado y nos va a pedir que ingresemos los términos de servicio de esta aplicación.

Lo que va a hacer es llevarnos a un entorno que es el diseñador de proyectos. Nos da un pequeño aviso de posibles cambios, modificaciones o mejores, si no queréis que vuelva a aparecer le dais a “do not show again” y continuar.

Una vez que tenemos la pantalla de trabajo de app inventor lo primero que tenemos que hacer es crear un nuevo proyecto, aquí nos aparecerían todos los proyectos que hayamos empezado, pero como no tenemos ninguno le damos al botón de la parte izquierda donde pone “start new project” y creamos proyecto1 le damos al ok y con esto nos aparece una ventana que es la ventana donde vamos a poder diseñar las aplicaciones.

Una de las cosas más interesantes de app inventor es que no es necesario saber programar para hacer gran parte de la aplicación sino que sencillamente dentro de esta pantalla que es una pantalla de tipo diseño vamos a poder ir arrastrando los elementos y vamos a poder ir personalizándolos sin necesidad de desarrollar ningún tipo de código.

En este primer tutorial vamos a ver un poco la pantalla y cómo la podemos utilizar podemos comprobar que tenemos en la parte izquierda una paleta, con los distintos objetos que podemos ir arrastrando al viewer (un simulador de teléfono) en el que vamos a poder ir arrastrando componentes para poder empezar a desarrollar.

En la paleta vemos que tenemos el user interface, objetos de tipo layout de tipo multimedia, de tipo almacenamiento, etc. Tenemos a nuestra disposición un conjunto de objetos bastante interesantes, en esta caja nos van a aparecer los componentes que vamos a ir arrastrando de la parte de la paleta al visor. Y en la parte de la derecha final tendremos la ventana de propiedades del objeto que tengamos en ese momento seleccionado en el visor.

Como veis, con estas propiedades podemos cambiar de manera rápida y sencilla el objeto con el que estemos trabajando. Por ahora podemos comprobar que en la pestaña de componentes tenemos un objeto denominado Screen que ahora mismo está indicando lo que sería la pantalla completa del teléfono.

Si queremos arrastrar algo aquí, es bastante sencillo, nos vamos a la paleta izquierda, seleccionamos uno de los objetos. Por poner un primer ejemplo vamos a coger user interface y arrastramos una label (un objeto que nos muestra un texto, un contenido) para trabajar con él es bastante fácil. Lo arrastramos a la parte de la pantalla que queremos y lo soltamos.

Evidentemente, como todavía no tenemos nada y tampoco hemos puesto el layout (que ya veremos que son contenedores de objetos) pues la etiqueta se nos queda en la parte superior. Podemos comprobar que también se ve reflejada en la caja de componentes. Si arrastro otra etiqueta vemos que la puedo colocar debajo.

Ahora mismo y tal y como tenemos la pantalla, sólo nos va a dejar poner componentes en forma horizontal. Vemos que según vamos pinchando en la ventana de componentes se va cambiando y  aquí (izquierda) podré poner algunas de las propiedades de este objeto. Tipo de letra, negrita, italics, etc. Puedo ir bajando y viendo que dependiendo del objeto tengo distintas propiedades. Uno de los más importantes de la etiqueta es la propiedad text, le voy a poner mi primera etiqueta.

Podemos ir arrastrando otro tipo de objetos como un botón, una vez que tengamos hecho esto, veremos a lo largo de otros tutoriales que podemos terminar de configurar nuestra aplicación y ejecutarla para poder empezar a trabajar y para poder en el caso final desplegarla en un móvil.

Os espero en el próximo videotutorial.

618

Programar con basic4Android – videotutoriales – episodio 1

Bienvenidos a este vídeo tutorial que nos permite desarrollar aplicaciones móviles con dispositivos Android de una manera mucho más sencilla, efectiva y productiva que si utilizáramos el entorno habitual de desarrollo de Android que es java, y que puede ser difícil o puede ser complicado de desarrollar o de diseñar por personas que no conozcan bien ese lenguaje.




Con basic4Android podemos hacer prácticamente lo mismo que podríamos hacer con un entorno de desarrollo tradicional pero de una manera mucho más sencilla.

Una vez que hemos instalado basic4Android lo primero que tenemos que hacer es crear un proyecto donde vamos a ir poniendo tanto los componentes como el código de nuestra aplicación, podréis observar a lo largo de los distintos video tutoriales que es un lenguaje bastante más sencillo que el que utilizaríamos en el caso de desarrollar en un entorno java.

Una vez hemos creado el proyecto, tenemos una herramienta en la parte central, el editor de código donde vamos a ir trabajando. En la parte de la derecha una caja donde nos aparecen las distintas librerías y componentes que vamos a ir utilizando dentro de nuestro proyecto.

Ahora mismo sólo tendríamos las librerías básicas, las denominadas Code y arriba tenemos un conjunto de elementos que nos permitirán tanto ejecutar la aplicación como probarla.

Al crear el nuevo proyecto se nos regenera la pantalla. Tenemos una pestaña que se denomina Main que es con la que vamos a poner el código principal de la aplicación y una denominada Starter en la que podemos poner un servicio, por ejemplo para nuestras primeras pruebas estos servicios no van a ser necesarios puesto que es un componente más complicado que utilizaremos en video tutoriales más profundos o más detallados. Así que podemos quitar el servicio y quedarnos solo con Main.

Además de poder programar en basic4android, tenemos un diseñador, vemos que en la parte superior tenemos una serie de menús, pichamos en designer y podemos poner open designer lo primero que nos va a decir es que antes de utilizar el diseñador debemos guardar el proyecto. Lo grabamos, buscamos en alguna carpeta donde lo vayamos a desarrollar, la denominamos prácticas y dentro de la carpeta prácticas vamos a crear un proyecto que se va a llamar proyecto1.

Una vez que lo tengamos ya sí que podemos dar a la opción de designer y open designer. Esto nos va a llevar a una pantalla, que podemos utilizar para diseñar nuestras aplicaciones. La colocamos de manera que se vea correctamente dentro de la pantalla que tenemos y podemos observar que el diseñador está compuesto en la parte izquierda de una serie de opciones para poder hacer scripting.

Para poder ver el árbol de objetos que vamos a ir colocando dentro de este diseñador, que es el sitio donde vamos a ir colocando componentes y que va a hacer una representación visual aproximada de la aplicación que queremos.

Siempre es conveniente por supuesto probar la aplicación contra un dispositivo de verdad. Pero para empezar a picar un poquito dentro de este tipo de proyectos lo que tenemos que hacer básicamente aparte de poder hacer otros objetos es añadir una view (un componente que yo puedo añadir a mi aplicativo).

Por ejemplo, si añado una label  (un objeto que nos permite poner un texto), una vez que lo he pinchado, aparecerá y lo podré cambiar de tamaño y ver que tengo una serie de propiedades que podré modificar, el texto, etc. Puedo añadir más vistas por ejemplo un botón, con un diseño concreto que sí que podremos ir cambiando a lo largo del curso. Si ponemos ok, acabamos de cambiar la etiqueta de nuestro botón.

Veremos en sucesivos tutoriales otros objetos, otros componentes y cómo podemos empezar a desarrollar con esta herramienta tan útil si queremos dedicarnos al mundo de las aplicaciones.

Sigue todos los pasos en nuestro canal de Youtube.

2496