96

Cómo hacer una app | Guía completa para diseñar y programar una aplicación móvil

905Puntos

hace un mes

Curso de Diseño de Interfaces Móviles
Curso de Diseño de Interfaces Móviles

Curso de Diseño de Interfaces Móviles

Hoy en día contamos con pantallas de todos los tamaños, entender y acercarse a las necesidades cambiantes de los usuarios es indispensable a la hora de desarrollar aplicaciones, mantenerse actualizado en temas de UX y UI es requisito ya seas diseñador o desarrollador. En este curso implementaremos vistas y prototipos que darán a tus usuarios la mejor experiencia en sus dispositivos móviles.

El sueño de muchas personas es crear su primera aplicación móvil. Tal vez porque vieron la película The Social Network y quieren ser Mark Zuckerberg. O porque realmente tienen una idea clara de negocio. Cualquiera que sea tu motivación, te quiero mostrar por dónde comenzar y qué conocimientos necesitas para crear una aplicación móvil.

En esta guía vamos a estudiar los pasos de los mejores equipos de desarrollo móvil y cómo tú puedes seguirlos para crear tu propia aplicación móvil profesional.

Diseño de aplicaciones móviles

  • Mockups
Mockups

El primer paso para crear una aplicación móvil no es programar. Sino diagramar el Mockup. Una versión de muy baja resolución para probar tu idea. Puedes usar lápiz y papel. Aunque también existen excelentes herramientas digitales como Balsamiq Mockups o InVision Freehand.


  • UI Kit

Un Kit de UI son todas las pantallas de nuestra aplicación y cómo están conectadas entre sí. También lo conocemos como Storyboard.

UIKIT

Sketch es la aplicación por excelencia para diseñar interfaces digitales. Toda la industria de diseño profesional usa Sketch. También está AdobeXD. Ambos son muy cool. Nos permiten crear librerías con componentes reutilizables para que nuestros cambios en pequeños componentes se reflejen en todas las pantallas al instante.

También es posible diseñar interfaces con Photoshop o Illustrator.  Y, aunque puedes conseguir los mismos resultados, va a ser un poco más difícil. Estas herramientas están orientadas a ilustración o edición de bitmaps. Lo mejor es tener la mente abierta a todas las herramientas y nuevas formas de trabajar en esta industria.

Es completamente normal y profesional combinar herramientas. Por ejemplo, diseñar tu logo en Illustrator, trabajar con fotografías en Photoshop y componer todo al final en Sketch.

Zeplin nos muestra el tamaño, colores y demás propiedades de cada elemento de nuestro diseño. Incluso nos permite exportar los estilos a código Swift, Java o CSS. En Platzi vivimos de Zeplin. También hay otras herramientas similares como InVision Studio. Pero la industria usa Zeplin.


La interfaces de nuestras aplicaciones están constantemente iterando. El equipo de User Experience y Usabilidad está encargado de investigar y hacer muchas pruebas y entrevistas para evaluar si la aplicación realmente está solucionando las problemáticas de los usuarios.


Tal vez pienses que no tienes talento para diseñar. Pero recuerda que las mejores aplicaciones del mundo tienen diseño. Y si quieres romper esa barrera puedes aprender los Fundamentos de Diseño. Luego puedes aprender a Diseñar Interfaces Profesionales.

disenio.png

Programación para crear aplicaciones móviles

Swift Playgrounds es una aplicación para aprender a programar de forma “divertida” desde Mac o iPad. Empiezas con arrastrar y soltar. Y poco a poco te enseña cómo correr pequeños experimentos de código y cómo funcionan versiones muy pequeñas de una aplicación.

También está App inventor. Una plataforma del MIT que te permite crear tus aplicaciones móviles arrastrando y soltando elementos. Eliges lo que quieras ejecutar y luego lo puedes exportar.

Sin embargo, nosotros somos el tipo de personas que quieren crear aplicaciones profesionales, no solo aplicaciones de juguete. Para eso debes programar de verdad. Y, por supuesto, si quieres aprender a programar para crear aplicaciones profesionales puedes tomar el Curso Gratis de Programación Básica en Platzi.

programacion.png

Desarrollo Profesional de aplicaciones móviles

  • Código Nativo

Para empezar a programar nuestra aplicación debemos elegir el sistema operativo sobre el cual vamos a trabajar: Android o IOS. Y también debemos decidir con qué lenguaje vamos a programar.

Java es el lenguaje para escribir código nativo de aplicaciones en Android. Es muy estricto y su curva de aprendizaje es muy empinada. Aunque, por esto mismo, nos ayuda mucho a mantener las aplicaciones cuando se vuelven más grandes de lo normal.

Kotlin es una iteración sobre Java creada por el equipo de Google. Es un lenguaje menos estricto que Java, pero no tan relajado como JavaScript. Recuerda que seguimos necesitando saber Java para trabajar con Kotlin.

Para compilar el código de aplicaciones en Android usamos Android Studio. Un IDE que funciona en Windows, Mac y Linux.

Swift y Objective-C son los lenguajes para escribir código nativo de aplicaciones en IOS. Objective-C es un poco más veloz. Pero la diferencia casi no se siente. La mayoría de apps están usando Swift.

Para compilar el código de aplicaciones en IOS usamos XCode. Un IDE que solo funciona en Mac. Así es. Solo podemos desarrollar aplicaciones para IOS si tenemos Mac.

swift5.png

  • Código Multiplataforma

React Native es un puente entre el código nativo y el frontend de la aplicación. Nos permite utilizar JavaScript para crear componentes reactivos que podemos utilizar tanto en Android como en IOS.

Usar React Native no significa que no debamos volver a escribir código en Java/Kotlin o Swift/Objective-C. Lo que realmente pasa es que podemos avanzar muy rápido en el código base para ambas plataformas. Y luego desarrollaremos pequeñas partes de código nativo para desarrollar funcionalidades especiales (notificaciones, descargas…).

También debemos recordar que seguimos necesitando Android Studio o XCode para compilar nuestro código.

Xamarin es una herramienta muy similar. Pero usa .Net en lugar de JavaScript. Tiene opciones y plugins mucho más avanzados para que no necesitemos escribir código nativo. Pero si por alguna razón debemos usar código nativo, hay que dar una vuelta larguísima.

Cuando las empresas se vuelven muy grandes y tienen muchísimo dinero pueden tener un equipo especializado en cada plataforma. Pero la mayoría de empresas no tienen la capacidad en invertir en ese tipo de equipos y mantener el desarrollo de ambos productos a la par. En ese caso, herramientas como React Native son muy buena opción.

👉 Cómo desarrolla aplicaciones nativas Airbnb ahora que Airbnb-React es Vintage


Las Bases de Datos son el lugar donde almacenamos y consultamos los datos de nuestra aplicación. Existen muchas bases de datos como MySQL, PostgreSQL o MongoBD.

Pero ¿cómo eliges la mejor base de datos para tu aplicación?

Depende. Existen bases de datos relacionales, documentales, basadas en gráfos, entre otras. Para cada problema hay una base de datos que puede darnos una mejor solución.

👉 ¿Que es SQL y NoSQL?

Los Lenguajes de Backend son los encargados de comunicarse con la base de datos, obtener la información y entregársela a la aplicación móvil. Puedes usar Python con Django, Ruby on Rails, Node.js, PHP con Laravel, Java, .NET o cualquier otro lenguaje.

Lo importante es que el código frontend de la aplicación no se comunique directamente con la base de datos. Eso sería un error de seguridad gravísimo. Siempre trata a Java y Kotlin o Swift y Objective-c como si fueran HTML y JavaScript.

Las APIs son estructuras de datos predecibles encargadas de comunicar el backend con el frontend, los datos con lo que los usuarios ven.

En el siglo pasado usábamos SOAP y XML. Pero las APIs modernas usan REST. Los servicios funcionan con JSON. Parece código JavaScript. Pero, en realidad, son datos encapsulados que luego la aplicación podrá capturar como variables normales.

Pero también tenemos GraphQL. La capa de transporte de datos más moderna y una de las más populares. Es casi un lenguaje de scripting. Se encarga de todo. Hace que desde frontend sea más sencillo acceder a los diferentes datos que necesitamos sin que el backend deba hacer más trabajo.


Firebase es uno de los pocos sistemas “todo en uno”. Se encarga de la base de datos, backend y transporte de datos con APIs. La desventaja es que no tenemos control total sobre la base de datos ni sobre la escalabilidad de nuestros servicios. Y, además, hay que pagar.

Muchas aplicaciones famosas (Tinder) han usado Firebase para para empezar su prototipo. Y, eventualmente, cuando crecen, integran equipos de bases de datos, backend y transporte de datos. Tú puedes seguir este mismo camino.

Conclusiones

Diseño de Interfaces, Programación Básica, Desarrollo Móvil y Desarrollo Backend.

Este es el universo de desarrollo de aplicaciones móviles en 2020. Ahora que lo sabes, ¿qué aplicación vas a construir? ¿Qué herramientas vas a utilizar?

El desarrollo de aplicaciones móviles es una de las áreas más difíciles en la creación de productos de tecnología. Pero también es una de las más emocionantes. Recuerda que el mundo entero al día de hoy es mobile first. Y Platzi te acompaña en todo este proceso desde cero.

#NuncaParesDeAprender

Curso de Diseño de Interfaces Móviles
Curso de Diseño de Interfaces Móviles

Curso de Diseño de Interfaces Móviles

Hoy en día contamos con pantallas de todos los tamaños, entender y acercarse a las necesidades cambiantes de los usuarios es indispensable a la hora de desarrollar aplicaciones, mantenerse actualizado en temas de UX y UI es requisito ya seas diseñador o desarrollador. En este curso implementaremos vistas y prototipos que darán a tus usuarios la mejor experiencia en sus dispositivos móviles.
Platzi
Platzi
@platziteam

905Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
7

Es bastante interesante todo este procedimiento que menciona, estoy de acuerdo en que este el momento de iniciar a realizar aplicaciones, mas en el ámbito escolar, ya que son bastante escasas las que valen la pena, es decir, muy pocas nos ayudan a estudiar o tienen información bastante completa.

4
9421Puntos

Increíble 😁😁

4
1347Puntos

Magistral lectura Freddy… Me encanta por que es la rama que quiero seguir en la programación: Desarrollo Móvil, e integrarlo con todo lo que pueda.

Tengo una pregunta, me encantaría que me la pudieras responde desde tu punto de vista como desarrollador, incluso si hay estudiantes con experiencia en cada campo mucho mejor… que es mejor enterminos generales Xamarin o React Native ? y por que ?

3
3013Puntos

Muy bueno, pero por ahora, me voy al mundo de las PWA porque es muy dificil ser uno sólo en el equipo de mi empresa y mantener todo eso yo sólo. Que opinan?

3
1803Puntos

Esta información es muy util definitivamente, permite conocer de forma relativamente general el proceso que requiere la creación de una app móvil, no cabe duda que es un reto complejo y emocionante.

3
7945Puntos

Excelente guia, muy bien explicada, ya tengo anotado los cursos sugeridos

3
2152Puntos

Genial el articulo 😄

3
2833Puntos

fue de mucho provecho esta lectura, ahora entiendo al 100% la ruta recomendada por el Team Platzi Gracias 💚.

3

Hola, les recomiendo JustinMind para hacer mockups, no solo para apps sino también para websites. Me ha gustado mucho

3
5026Puntos

CONTEXTO!! JUSTO LO QUE YO NECESITO PARA MOTIVARME A APRENDER

G R A C I A S FREDDY!!

3
8991Puntos

Claro y directo, Qué más se puede pedir? Gracias Platzi

3
9847Puntos

Tremenda ruta. Yo estoy enfocado en toda la primera parte, la de diseño y realmente Platzi tiene unos cursasos. A cualquiera que llegue aquí le digo: parcero o parcera, no lo piense dos veces, vale mucho la pena.

3

Muy interesante. Espero que el team Platzi haga una excelente guía como esta de videojuegos y ver como se relaciona con esta en la parte de desarrollo de videojuegos pata móviles.

3
3357Puntos

Justo lo que necesitaba 7u7 deja de leerme la mente Freddy

3
4793Puntos

de verdad es increíble como todo el equipo de platzi se encarga en buscar la manera de que uno “nunca pare de aprender”.

3
3564Puntos

Me encanta como mencionan desde la parte de diseño, desarrollo móvil, bases de datos y haciendo que se necesita para crear app móviles, pero lo que más me encanta es que nos indica.

Las herramientas tecnológicas y de cursos que necesito para poder llegar a ese objetivo.

Muchas Gracias

3
752Puntos

Interesante lectura!, Yo por mi parte estoy aprendiendo a crearlas en ionic framework, con Angular. Me parece que también hay que tenerlo en cuenta como una de las variadas opciones que tenemos hoy en día para desarrollar Apps multiplataforma.

2
752Puntos

Interesante lectura!, Yo por mi parte estoy aprendiendo a crearlas en ionic framework, con Angular. Me parece que también hay que tenerlo en cuenta como una de las variadas opciones que tenemos hoy en día para desarrollar Apps multiplataforma.

2
957Puntos

Alguíen conoce empresas de desarrollo de apps móviles? con la idea de mandar el CV e ir ganando experiencia. Saludos.

2
3693Puntos

¿Cuál es la mejor ruta de aprendizaje para desarrollar aplicaciones moviles para alguien que no tiene conocimiento de nada sobre ello? Solo python. Vi la ruta de Desarrollo de Aplicaciones Moviles y desde la primera clase, mencionan cosas de java (en el tema de kotlin)

2
81205Puntos
un mes

Claramente, necesitamos saber de lenguajes para desarrollo móvil se queremos crear aplicaciones nativas. Y Python no es el caso.

No existe “mejor ruta”. Si quieres crear apps para Android no puedes evitar Java. Incluso lo necesitamos para que las aplicaciones construidas con herramientas como React Native sean realmente profesionales.

La único forma de evitarlo completamente es aprendiendo swift y limitándote (o especializándote) en Swift y Objective-c para trabajar en IOS. Pero, incluso si eliges esta opción, no lo hagas por huir de Java.

¡No le tengas miedo a Java!

2
14109Puntos

Muy buen post, se resume bastante bien cada parte del proceso de desarrollo.

Creo que una parte que me genera dificultad es la de plantear una idea de App, o de identificar problemas a resolver mediante una. ¿Hay recomendaciones al respecto del proceso creativo para plantear soluciones/proyectos? (Si hay un curso que cubra esto, por favor cuéntenme)

2
2782Puntos

Ahora más que nunca creo que todos deberíamos tener alguna noción de las apps. Teniendo en cuenta que falta todavía un mundo por recorrer en cuanto a desarrollo y porque llega el IoT con Blockchain para darnos más herramientas para crear y mejorar el mundo…

3
un mes

Sin duda alguna. Lo preocupante es que las universidades (correción, más bien los que "hacen los temarios) no lo entienden.

1
11636Puntos

Hola, amigos.

Me subí al tren de Flutter, llevo algunas semanas trabajando en crear un mapa de apoyo para que estudiantes, maestros y familia puedan asegurar la transición entre niveles y reducir la repetición de grados.

Si tienes curiosidad y un tiempito, agradeceré un poco de retroalimentación. También me encantará responder cualquier duda.

5to grado
Ciencias Nturales y Tecnología
Áreas