163

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

11447Puntos

hace 4 años

El sueño de muchas personas es crear una app desde cero. Tal vez porque vieron la película The Social Network y quieren ser Mark Zuckerberg. O porque realmente tienen una idea clara y quieren crear una app para su 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.

Entonces, ¿qué se necesita para crear una aplicación desde cero?

  1. Diseñar la aplicación móvil
  2. Elegir las herramientas para programar la app
  3. Desarrollar la app móvil (elegir el código)

Veamos estos 3 pasos para crear una aplicación más a detalle.

Conoce: ¿Qué son las aplicaciones web? Características y ejemplos.

1. Empieza por el diseño de apps móviles

1.1. Diagrama los Mockups

https://static.platzi.com/media/user_upload/SLIDE18PROTOTIPOS-2a37fe67-fd76-4bb4-abcc-778fbedbd51f.jpg

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.


1.2. Ten a la mano tu 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. ¿Quieres conocer más cómo diseñar una app móvil? Empecemos por lo siguiente:

https://static.platzi.com/media/user_upload/UIKIT-c9338530-3e0e-49dd-9fed-97cc20d965e2.jpg

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.


1.3. Piensa siempre en User Experience y Usabilidad

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

2. Elige las herramientas de programación para crear apps 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 apps profesionales puedes tomar el Curso Gratis de Programación Básica en Platzi.

programacion.png

3. Pasa al desarrollo profesional de aplicaciones móviles

3.1. Código Nativo

Para empezar a programar nuestra app 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

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

Flutter es una tecnología para diseñar y desarrollar interfaces nativas en IOS y Android usando Dart. También nos permite trabajar con aplicaciones web o de escritorio. Es una herramienta que vale totalmente la pena aprender.


3.3. Bases de Datos, Backend y APIs

Seguramente te preguntas, ¿qué son las bases de datos? Pues son el lugar donde almacenamos y consultamos los datos de nuestra aplicación. Existen muchas bases de datos como MySQLPostgreSQL 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 DjangoRuby on RailsNode.jsPHP con LaravelJava.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.


3.4. Firebase

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

Ahora que ya tienes un mejor conocimiento sobre como hacer una app móvil es momento de que empieces a crear la tuya. Tienes diferentes plataformas para hacerlo posible, solo debes creer en ti. En el siguiente video Freddy Vega te explica como crear tu primera app en Android y iOs.

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

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

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

Platzi
Platzi
platziteam

11447Puntos

hace 4 años

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

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.

6
5898Puntos

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 ?

5
824Puntos

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.

5
32543Puntos

Increíble 😁😁

4
7885Puntos

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?

4
824Puntos

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.

3
12043Puntos

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
10882Puntos

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

3
5698Puntos

Genial el articulo 😄

3
19895Puntos

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
36611Puntos

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

G R A C I A S FREDDY!!

3
21631Puntos

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

3
22381Puntos

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
20299Puntos

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

3
6522Puntos

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
8256Puntos

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

2
2346Puntos
<code>

print ("hola");
2
5881Puntos

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

2
3622Puntos

Interesante :3

2
3622Puntos

Interesante! :3

2
3923Puntos

¿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
212921Puntos
4 años

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
9564Puntos

JODER!!!
Creo que ahora y más que nunca estamos entrando a una era EXTREMAMENTE tecnológica, el hecho de leer a lo último ‘mobile first’ nos puede dar una idea de que la tecnología será cada vez más potente y más ‘pequeña’… Quién sabe si en unos años desaparecerán los computadores (quién sabe), tal vez ahorita esto parezca LOCO porque ahora mismo son una herramienta magnífica, pero cada vez los celulares están tomando más control en la tecnología. Cada vez podemos hacer más cosas con los teléfonos que se hacían normalmente con los laptos, así que me niego a cerrarme a la idea de que pueda pasar y en un futuro (de nuevo, quién sabe), los computadores cómo los usamos hoy día, sólo serán un recuerdo de cuán ‘obsoleto’ estábamos y cómo <<no haberlo hecho antes>>

2
9564Puntos

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…

4
3851Puntos
4 años

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

2

Super compacto y enfoque en lo que hoy se una más!

2
23019Puntos

Valiosa enseñanza y guía para escoger un camino contundente en desarrollo.Gracias

2
33559Puntos

Muy buen artículo. Con los links actúa como un excelente de mapa.

2
28090Puntos

Un artículo muy interesante. Nos abre un camino inmenso de posibilidades para nuestra decisión. Aprender para utilizar los más convenientes…

2
32018Puntos

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
10417Puntos

Muy buena lectura resumida! para alquien que se quedo dormido y necesita un update de las ultimas novedades.! 😉 Muchas gracias!!

2
19213Puntos

Es increible el proceso que uno debe seguir para poder crear su propia app, pero la verdad es que este blog habla de tantas tecnologias y a su vez me motiva a aprender todas esas tecnologias.

1
7889Puntos

Gracias por los recursos que nos brindan, como guía y programación para empezar con nuestra APP; así mismo rutas sugeridas para seguir aprendiendo con Platzi!

1
16604Puntos

Mi cerebro hace 🤯 ahora que ya logro entender este universo.

1
32482Puntos

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