Tutorial: Crear aplicacion android para descargar videos de Youtube en Mp3 con Thunkable

• Align Horizontal en center.
• Align Vertical en top.
• Background Color en red, este luego lo cambiaremos al red que usa youtube.
• Scrollable desmarcada
• Show Status Bar desmarcada
• Screen Orientation en portrait
• Sizing en fixed
• Title Visible desmarcada.

• Creamos una variable local llamada array.
• Le hacemos split a la url actual que tiene el web view visible y le agregamos el resualtado a la variable local array.
• Contamos los elementos que tiene la variable array y verificamos si es igual a 2 ya que al hacerle split a la url este nos da dos elementos uno vacio y el id del video.
• Si es igual a 2 le agregamos el index 2 que es el id del video a la variable global id.
• Si no es igual a 2 quiere decir que el usuario esta en la home de youtube YouTube y le mostramos una alerta que diga "Mp3 no disponible".
• Luego al componente web le agregamos como referer esta url la cual unimos con el id del video usando la variable id para que quede de esta forma: https://youtube2mp3api.com/@api/button/mp3/id-del-video
• Al mismo componente web le agregamos otra url unida con el id del video: https://youtube2mp3api.com/@grab?fo...bbx8b71eb0y/YouTubeToMp3.aia]YouTubeToMp3.aia
  
  Nota: Puedes hacer un dise;o mucho mejor y usar publicidad de Admob pero nose si google play permita este tipo de Apps!
  
  Saludos, click a "Me agrada".

YeltsinReyes dijo:

Hola, en este tutorial se creara una sensilla aplicacion para descargar videos de
youtube en mp3 usando la pagina thunkable.com y la pagina youtube2mp3api.com
a la cual se le hace una peticion get para obtenet el mp3.

Hacer clic para expandir...

Carambel dijo:

Hola Yeltsin, podrías actualizar el post no se puede descargar el aia ni las imágenes, seria genial.

Hacer clic para expandir...

YeltsinReyes dijo:

Hola, en este tutorial se creara una sensilla aplicacion para descargar videos de
youtube en mp3 usando la pagina thunkable.com y la pagina youtube2mp3api.com
a la cual se le hace una peticion get para obtenet el mp3.

Nota: no soy muy bueno haciendo tutoriales ni explicando, asi que disculpa por eso y
por si tengo faltas ortograficas! :witless:

Paso 1: Configurar el Screen1

1- Hacemos click en Screen1 y le agregamos estas propiedades.

• Align Horizontal en center.
• Align Vertical en top.
• Background Color en red, este luego lo cambiaremos al red que usa youtube.
• Scrollable desmarcada
• Show Status Bar desmarcada
• Screen Orientation en portrait
• Sizing en fixed
• Title Visible desmarcada.

Paso 2: Hacer el diseño como en la imagen

1- Agregamos un Horizontal_Arrangement con un label dentro con el texto "Youtube a Mp3" para simular un header.
2- Agregamos otro Horizontal_Arrangement con 10px de alto para hacer un separador.
3- Agregamos un Vertical_Arrangement y le ponemos el alto y ancho en Fill parent luego le agregamos un webview dentro con el alto en Fill parent y el ancho en 95% y le agregamos esta url YouTube.
4- Agregamos otro Horizontal_Arrangement con 10px de alto para hacer un separador.
5- Agregamos un boton con el texto "DESCARGAR EN MP3" el ancho en Fill parent, background blanco, texo negro y el Shape en rectangular.

Paso 3: Agregar estos componentes

1- Vamos a User Interface y agregamos otro web view y la propiedad Visible la desmarcamo para que no se vea.
2- Vamos a User Interface y agregamos un componente Notifier para mostrar alertas.
3- Vamos a Connectivity y agregamos un componente web para hacer la peticion get.
4- Descargamos la extension ExtendedWebViewer: ExtendedWebViewer
5- Vamos a Extension y importamos la extension ExtendedWebViewer descargada.

Paso 4: Vamos al editor de codigo "Blocks"

1- Agregamos una variable global vacia llamada id y al inicial la aplicacion le cambiamos el background a Screen1.

2- Cuando el usuario busque su video y le de click al boton "DESCARGAR EN MP3" hacemos lo siguiente.

• Creamos una variable local llamada array.
• Le hacemos split a la url actual que tiene el web view visible y le agregamos el resualtado a la variable local array.
• Contamos los elementos que tiene la variable array y verificamos si es igual a 2 ya que al hacerle split a la url este nos da dos elementos uno vacio y el id del video.
• Si es igual a 2 le agregamos el index 2 que es el id del video a la variable global id.
• Si no es igual a 2 quiere decir que el usuario esta en la home de youtube YouTube y le mostramos una alerta que diga "Mp3 no disponible".
• Luego al componente web le agregamos como referer esta url la cual unimos con el id del video usando la variable id para que quede de esta forma: https://youtube2mp3api.com/@api/button/mp3/id-del-video
• Al mismo componente web le agregamos otra url unida con el id del video:
  https://youtube2mp3api.com/@grab?format=mp3&streams=mp3&api=button&vidID=
  id-del-video y hacemos la peticion get.

3- Obtenemos los datos que nos regresa la peticion get que hicimos para sacar la url del mp3.

Con la funcion Got Text del componente web vemos los datos que nos regresa la peticion, el cual en esta ocacion es un poco de codigo html osea un div con un enlace el cual tiene el link del mp3. A la extension ExtendedWebViewer que importamos le decimos que leea o este pendiente al web view invisible que agregamos. Al html que nos regreso la peticion le hacemos split para obtener el link directo del mp3 y al web view le decimos que visite dicho link. 4- Descargar el mp3

• Aqui la extension ExtendedWebViewer detecta que el link es de un archivo mp3 y procedera a descargarlo.
• Dejamos filename vacion para que se guarde con sun mismo nombre.
• Luego le mostramos una alerta corta al usuario que diga "Descargando mp3...".

5- Descarga del mp3 completada

Luego que el mp3 sea descargado le mostramo otra alerta corta al usuario que diga "Mp3 descargado" 6- Descargamo la apk y la probamos. y asi se ve la app en un emulador

Mp3 descargado

Aqui esta el proyecto .aia para que lo descarguen y prueben! Link: YouTubeToMp3.aia
Nota: Puedes hacer un dise;o mucho mejor y usar publicidad de Admob pero nose si google play permita este tipo de Apps!
Saludos, click a "Me agrada".[/B]
[/LIST]

Hacer clic para expandir...