Como crear una App estilo Spotify en Appcreator24


Líderes, como ustedes saben, ya he hecho un vídeo en YouTube explicando el paso a paso sobre como crear la App, así que en este post no haré todo nuevamente para que no quede aburrido, si lo quiere ver, acá le dejo el vídeo y así entiende mejor, sin embargo acá dejaré resumen y enlaces para que puedan descargar todo lo que usamos para la App, sitios web, archivos, etc.

Si quieren descargar el APK que hice en el vídeo, se los dejaré por aquí, con el tiempo le iré metiendo más actualizaciones y los que ustedes vayan dando igual, para los futuros vídeos.

Sitios web

En el vídeo mencioné bastantes páginas para usar en la App, sin embargo dejaré otras que pueden servir y de paso se me olvidaron mencionar en el vídeo, empiezo:

1) Dafont

Dafont es un sitio web donde podremos descargar muchas tipografías y/o fuentes para poder usar en nuestra aplicación o en cualquier otro programa de diseño, edición, etc. Gracias a ese sitio web, le podemos dar un toque más profesional a la App y hacer que la fuente sea mucho más agradable que la original.

Si alguno de ustedes les llegó a gustar la tipografía que usé en el vídeo para la App, pueden descargarla desde aquí:

2) elfsight

Este es nuestra principal e importante página para poder darle vida y más profesionalismo a nuestra aplicación de música, sin esta herramienta quedaríamos en nada y sin poder darle una vista más esencial, usando otras alternativas más horrorosas como Google Drive u otra opción peor para esta ocasión, si no saben como crear una cuenta (si no vino por el vídeo de YouTube) en el mismo explico como hacerlo.

3) y2mate

Con esta herramienta podremos descargar los vídeos de YouTube y convertirlo en mp3 para poder subirlo a elsight y así crear nuestra lista de reproducción, esta es una que recomiendo, para mí, es una de las mejores que hay.


4) AdGuard AdBlocker

Gracias a esta excelente extensión, podemos usar muchas páginas web sin tener que sufrir por los anuncios molestos e incluso con virus, ¿Es importante? Sí y no, si no le interesa que salgan anuncios, entonces no hace falta que lo instale, pero si también le molesta tanto como a mí, entonces puede quitarlos con esta herramienta, solo basta con instalarlo y listo, el hará lo demás, así podemos quitar los anuncios molestos con virus de las web, esta extensión está disponible para varios navegadores.

5) Appcreator24

Como todos saben esta es la más importante, diría que la número uno antes que el sitio ya mencionado antes, gracias a esta web podremos crear nuestra aplicación mucho más fácil sin necesidad de usar códigos o sin tener conocimiento de la programación, ya tengo un curso completo por si aún no sabe como usarlo.

Materiales

Ya tenemos todas las herramientas necesarias para poder crear nuestra aplicación de música, ahora necesitamos los materiales importantes, que son los tamaños de las imágenes, programas para editarlas, aplicaciones, etc. Aunque no lo haya mencionado en el vídeo, tiene su tiempo y varios requisitos para poder crear la App muy agradable para el usuario.

1) Tamaños de las imágenes

Si ustedes también quieren usar el mismo tamaños que he usado para el vídeo, solo basta con poner en:

Imagen pequeña:

Si le gustaría tener el tamaño que usan en Spotify, pueden usar este, es similar

Imagen grande:


2) Adobe Illustrator

Gracias a este programa vamos a editar nuestras imágenes como queremos, tamaños, filtros, todo lo que queramos sin ningún problema.


Pero si no saben como usarlo, no se preocupe, pueden usar también canva, es muy fácil y gratis de usar:

3) Filtros

Si no saben como usar filtros en Adobe Illustrator o en Canva no se preocupe, pueden usar esta alternativa que se encuentra para Android en la tienda de Play Store, totalmente gratis, pueden descargarlo y hacer su uso, su función es para dejar las imágenes igual o casi parecido a las de Spotify.

Códigos

Para finalizar este post, voy a poner el código pequeño que sirve para poder cambiarle el fondo a la sección de HTML de Appcreator24, solo sirve si quieren cambiar el fondo blanco que viene por defecto a otro color, negro, rojo, verde, etc, recuerden que se debe poner el color en inglés, si lo ponen en negro no les va a funcionar.

Solo deben quitar el <body> que viene en Appcreator24 y pegar en el mismo lugar este:

<body bgcolor="color">{codeBox}

donde está en color rojo, es donde deben poner su color de preferencia sin quitar las comillas ("")
para que le queden mucho más fácil, les haré el trabajo por ustedes, dejaré una lista de colores, para que solamente copien y peguen, recuerden, solo el código, no los números ni nada.

<body bgcolor="red"> - Rojo{codeBox}

<body bgcolor="black"> - Negro{codeBox}

<body bgcolor="orange"> - Naranja{codeBox}

<body bgcolor="yellow"> - Amarillo{codeBox}

<body bgcolor="Green"> - Verde{codeBox}

<body bgcolor="blue"> - Azul{codeBox}

<body bgcolor="fuchsia"> - Fucsia{codeBox}

<body bgcolor="white"> - Blanco{codeBox}

<body bgcolor="Brown"> - Marrón{codeBox}

Tutoriales extras

Si no saben hacer algún cambio en la Appcreator24 y en el vídeo no lo mencioné, pueden verlo aquí, dejaré los que se usó pero no se explicó, si quieren ver más, en el canal está una lista de reproducción, donde lo podrán todo completo.

1) Como añadir el botón de login de Google


2) Como monetizar con Admob


3) Crear una cuenta en Appcreator24


Espero les haya gustado este vídeo que me costó un par de días en hacerlo, grabación, edición, escribir esto, etc, todo por ustedes, cualquier pregunta que lleguen a tener, en los comentarios del vídeo me lo pueden hacer, si tienen más ideas, me la pueden hacer hacer saber para añadirlo y así les hago vídeo.

Publicar un comentario

Artículo Anterior Artículo Siguiente