como crear una aplicacion desde cero

Primeros pasos para crear una aplicación móvil

Cada vez más personas se plantean crear empresas online para hacer realidad sus sueños de emprendimiento. Pero hoy en día, las nuevas tecnologías suponen muchas posibilidades en este sentido, siendo posible por ejemplo crear apps para móviles con las que ganar dinero.




Pues bien, si estás pensando en crear una aplicación móvil pero no tienes muchos conocimientos al respecto, y no sabes por dónde comenzar, en este artículo vamos a hablarte de los pasos iniciales que debes dar para comenzar tu andadura profesional.

Cómo crear una aplicación móvil desde el principio

Antes de entrar en detalle, debemos recordarte que toda actividad empresarial conlleva una serie de trámites burocráticos, por lo que te recomendamos consultar con una asesoría fiscal online cuáles son las implicaciones del tipo de negocio que deseas poner en marcha.

crear aplicacion desde cero

Elegir una plataforma

En primer lugar, tendrás que escoger la plataforma para la cual vas a desarrollar tu aplicación. Las principales que existen en estos momentos son Android, iOS, BlackBerry y Windows Phone, siendo las dos primeras las más reconocidas y utilizadas en todo el mundo.

Crear maquetas de la aplicación

Es recomendable crear maquetas de la aplicación y su funcionalidad, antes de escribir la primera línea de código.

En muchas ocasiones, con esta maqueta se puede vender un proyecto o trabajar con los clientes potenciales, poniendo a prueba aspectos como el modelo de negocio sin invertir nada en ello.

Determinar su funcionalidad

Una vez que sabes con qué plataforma quedarte, y que has creado maquetas de tu aplicación, tienes que determinar con claridad su función. Para lo cual tienes que conocer la diferencia entre cliente y servidor.

Al hablar del lado del cliente en desarrollo, se hace referencia a lo que ocurre en el dispositivo del usuario. Es decir, lo que ocurre en Internet; o sea, en algún dispositivo que está en otra parte del mundo y en la que tu aplicación se está conectando para conseguir o guardar datos.

Existen funcionalidades que corresponden a ese lado del cliente, como mostrar una interfaz del usuario o sacar una foto; cosas que no necesitan estar conectado a Internet, y que corresponden a la funcionalidad por el lado del cliente.

Por otro lado, si se habla de registrar usuarios y guardar datos en el servidor, bajar información, almacenar datos en la nube, etc., todo ello corresponde a la funcionalidad en el lado del servidor. Todo lo que requiere de una conexión a Internet es por el lado del servidor.

Es necesario describir la funcionalidad de la aplicación en estos términos, de forma que sea más fácil comunicarse con los desarrolladores.

Conseguir desarrolladores

Muchos emprendedores que quieren dedicarse a las aplicaciones móviles se preguntan cómo obtenerlos, ya que no es suficiente tener una idea y ponerla a prueba con personas reales.

Afortunadamente hay muchas formas de conseguirlos, como obtener un technical founder, que consiste en un socio para el negocio que sea programar y se haga responsable de la parte técnica, mientras tú te encargas de lo comercial.

También tienes la posibilidad de contratar un profesional, que puede ser una persona local o procedente de un portal de outsourcing.

622
grasshopper android ios app

Descarga Grasshopper: la nueva app de Google para aprender a programar

La “incubadora” de Google, llamada Area 120, ha lanzado hoy su próxima creación: una aplicación móvil para principiantes en programación llamada Grasshopper. La app enseña a los futuros codificadores a escribir JavaScript a través de pequeñas lecciones en tu dispositivo iPhone o Android.




Al igual que otros proyectos del Área 120, Grasshopper ha sido creada por un pequeño equipo de Googlers, quienes tenían un interés personal en trabajar en el proyecto.

El objetivo de Grasshopper es que los programadores dominen los conceptos básicos, para que después puedan dar los siguientes pasos en programación, ya sea con clases online, asistiendo a un bootcampt, etc.

Qué vas a encontrarte en la aplicación de Grasshopper

La app, que lleva el nombre de la pionera en programación Grace Hopper, incluye actualmente tres conjuntos de lecciones que cubren los fundamentos de la codificación (funciones de llamada, uso de variables y objetos, etc.), así como animaciones.

La idea es que pases unos minutos al día con ella (puedas hacer que la aplicación que te lo recuerde) y enfrentarte a algunos retos sencillos y respondiendo a las preguntas del cuestionario, de manera que pronto aprenderás a utilizar JavaScript básico.

grasshopper app

Debes saber que el equipo detrás de la app no están pensando en expandirse más allá de JavaScript (un lenguaje utilizado por más del 70% de los desarrolladores profesionales), así que si quieres aprender otros lenguajes de programación, te recomiendo que pruebes alguna de estas aplicaciones.

Cuando termines con el contenido de Grasshopper, puedes pasar a las clases recomendadas de Coursera para aprender más sobre JavaScript, HTML, CSS, algoritmos y diseño web, o simplemente echar un vistazo en al patio de juegos online de Grashopper y crear tus propias animaciones JS.

Descargar Grasshopper

Google Play (Gratis)

 App Store (Gratis)

3190

Aprende a programar fácilmente con estas aplicaciones para iOS y Android

Algunos dicen que escribir código es la nueva alfabetización, por lo que es realmente importante que los niños comiencen a aprender de jóvenes y que los adultos aprendan los fundamentos de la programación si quieren formar parte de este mundo cada vez más automatizado.

[bar id=”17169″]

Por suerte, hay un montón de buenas aplicaciones para ayudarte a ti y a los más pequeños de la casa a aprender a programar, ya sea para hacer una aplicación o enseñarle a andar a un robot.

Mejores aplicaciones para aprender a programar¡

SoloLearn

Esta no es una app, es una serie de ellas, cada una diseñada para un lenguaje de programación específico. Las aplicaciones tienen buena puntuación en la Google Play y App Store debido a que son dinámicas, interactivas y ofrecen una excelente manera de aprender los conceptos básicos de la programación.

Quizás el único problema con las aplicaciones es que tienes que tener un objetivo en mente para lo que quieres aprender. Por ejemplo, si deseas aprender a crear páginas web, probablemente deberías comenzar con aplicaciones HTML y CSS. Si quieres hacer una aplicación para Android, a Java.

Encode

Encode puede parecer demasiado básico, pero en realidad ofrece una mirada en profundidad a la programación. Una de las grandes cosas de Encode es que comienza desde el principio y ofrece diferentes conceptos en pequeñas porciones, por lo que en sólo unos minutos, puedes repasar una sección dentro de la aplicación.

Después de repasar conceptos básicos introduce conceptos más avanzados, como el código de lenguajes como JavaScript. Las lecciones también son interactivas y la aplicación ofrece feedback después de cada lección, asegurando que tendrás la oportunidad de volver a repetir lecciones si no entendiste los conceptos.

Khan Academy

Khan Academy se ha convertido en una forma muy popular de aprender diferentes cosas desde tu móvil, sin embargo, a diferencia de servicios como Udacity, Khan Academy es gratis. También ofrece lecciones en mucho más que la programación, así que si estás buscando una aplicación para aprender todo tipo de cosas interesantes, no busques más.

Tal vez el único inconveniente es que los cursos son creados por el usuario, por lo que puede que no se ajusten al nivel de calidad que otras aplicaciones. Sin embargo, la aplicación tiene cursos para la mayoría de los principales lenguajes de programación, incluyendo un curso “Introducción a HTML / CSS: Hacer páginas web” y un curso “Introducción a JS: dibujo y animación”.

Tynker

Mientras que necesitas ser bastante serio para aprender en el resto de apps, en Tynker será todo lo contrario. El servicio elimina los cursos en favor de un juego destinado a ayudar a los niños a aprender a programar.

La interfaz se basa en un simple concepto de arrastrar y soltar, y si el jugador no completa un nivel, aparecerán instrucciones sobre cómo mejorar y se les dará la oportunidad de volver a jugar la partida. De esta manera, el concepto de programación resulta mucho más fácil de entender, y aunque no permitirá que los más pequeños hagan aplicaciones al uso, introduce los conceptos básicos de la programación y les da una base para comenzar su carrera.

1313

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.

440

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.

556

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.

375

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.

542

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.

575

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.

419

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.

572