1.- Podemos obtener datos de un servidor web comunicándonos con él directamente o bien que ese servidor tenga una API para que a través un programa cliente (como puede ser un navegador web) el usuario se pueda comunicar con ese servidor.
Imagen obtenida de:
http://www.appinventor.org/assets/pdf/ch24API.pdf
(traducido al español)
APIs de Google.
API en App Inventor.
El concepto de API es más extenso, pero en esta ocasión trata de un código de Google que permite públicamente que podamos utilizarlo desde un navegador web.
Google chart, es una API de Google que nos permite escribir una línea de dirección web, con cierto formato, y nos devuelve un gráfico de tipo estadístico, barras, tarta, trazos,... y también lo podemos utilizar para que nos dibuje una función,
- Esta es la web de Google chart: https://developers.google.com/chart/?csw=1
- Ejemplos de Google chart: https://developers.google.com/chart/interactive/docs/gallery
- Ejemplos de gráficos estadísticos y funciones encontrados en internet:
- http://chart.apis.google.com/chart?cht=lc&chd=t:-1&chds=-1,1&chs=500x500&chco=0000FF&chfd=0,x,0,7,0.001,sin(x)&chxt=x,y&chx0,0,7|1,-1,1 (de aquí)
- http://chart.apis.google.com/chart?cht=tx&chco=FF0000&chl=x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} (escribir fórmulas)
- http://chart.apis.google.com/chart?cht=bvg&chxt=y&chbh=a&chs=300x225&chco=A2C180&chtt=Vertical+bar+chart&chd=t:10,50,60,80,40,60,30
(de aquí)
- Aquí puedes ver más ejemplos: http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=googleChart
- Otro ejemplo:
http://chart.apis.google.com/chart?cht=lc&chd=t:-1&chds=0,20&chs=250x150&chco=FF0000&chxr=0,0,11|1,0,20&chxt=x,y&chfd=0,x,0,11,0.1,sin(x)*4%2B5 (de aquí)
_______________________________________________________
- Funciones con la API Chart de Google.
- http://chart.apis.google.com/chart?cht=lc&chd=t:-1&chs=400x400&chco=0000FF&chxr=0,0,14|1,-1,1&chds=-1,1&chxt=x,y&chfd=0,x,0,14,0.001,sin(x)
Observamos que unos caracteres son fijos y otros los vamos a suministrar para dar las dimensiones de la gráfica, las coordenadas máximas de X e Y, la fórmula, la escala y el color.
Cada uno alimenta a una variable de tipo ch
Estas variables pueden ir en otro orden distinto al indicado arriba.
La barra vertical | (que está en la tecla 1), la pondremos mediante su código ASCII, este es: %7C
http://chart.apis.google.com/chart
?cht=lc
&chd=t:-1
&chs=Horizontal×Vertical
&chco=Color
&chds=Ymin,Ymax
&chxr=0,Xmin,Xmax|1,Ymin,Ymax
&chxt=x,y
&chfd=0,x,Xmin,Xmax,Escala,Formula
http://chart.apis.google.com/chart
?cht=lc
&chd=t:-1
&chs=400x400
&chco=0000FF
&chds=-1,1
&chxr=0,0,14%7C1,-1,1
&chxt=x,y
&chfd=0,x,0,14,0.001,sin(x)
|
 |
Vamos a realizar una aplicación en donde el usuario suministrará los distintos parmámetros que componen la gráfica, que se irán añadiendo a una variable de texto, ésta formará la dirección del chart.apis, cuando la tengamos, mediante un navegador iremos a esa dirección y nos dibujará la gráfica en la pantalla.
Ponemos los View que indico, menos el WebView, cuando lo tengamos todos ponemos encima de todos menos en los botones un WebView1 y lo mandamos atrás mediante Tools /SendToBack en el Designer.
O sea, el WebView1 lo ponemos encima de todos los View, desde arriba de la pantalla hasta arriba de los botones, cubrirá a todos menos a los botones. Cuando tengamos situado el WebView1, lo enviamos atrás para que no se vea.
Código B4A |
#Region Project Attributes
#ApplicationLabel: API Chart
#VersionCode: 1
#VersionName:
'SupportedOrientations possible values: unspecified, landscape or portrait.
#SupportedOrientations: unspecified
#CanInstallToExternalStorage: False
#End Region
#Region Activity Attributes
#FullScreen: False
#IncludeTitle: True
#End Region
Sub Process_Globals
' Juan Antonio Villalpando
' juana1991@yahoo.com
' diciembre 2014
End Sub
Sub Globals
Dim EditText1, EditText2, EditText3, EditText4, EditText5 As EditText
Dim EditText6, EditText7, EditText8, EditText9 As EditText
Dim WebView1 As WebView
Dim enlace As String
End Sub
Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Layout")
Activity.Color=Colors.White
WebView1.visible=False
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
End Sub
Sub Button1_Click
enlace = "http://chart.apis.google.com/chart?cht=lc&chd=t:-1&chs="
enlace = enlace & EditText1.text & "x" & EditText2.text
enlace = enlace & "&chco=" & EditText3.text
enlace = enlace & "&chds=" & EditText4.text & "," & EditText5.text
enlace = enlace & "&chxr=0," & EditText6.text & "," & EditText7.text
enlace = enlace & "%7C1," & EditText4.text & "," & EditText5.text
enlace = enlace & "&chxt=x,y&chfd=0,x," & EditText6.text & "," & EditText7.text
enlace = enlace & "," & EditText8.text & "," & EditText9.text
WebView1.visible=True
WebView1.BringToFront
WebView1.LoadUrl(enlace)
End Sub
Sub Button2_Click
WebView1.visible=False
WebView1.SendToBack
End Sub
|
________________
- Comentarios.
Supongamos que queremos ver la gráfica de esta función:
5 + 5 * cos(x)
Debemos poner en el CampoDeTexto de la Fórmula:
5%2B5*cos(x)
Fíjate que el signo más (+), lo escribimos mediante su código ASCII, este es: %2B
- Podemos construir la fórmula mediante estas funciones:
http://muparser.beltoforion.de/mup_features.html
- Más ejemplos: (de aquí)
http://chart.apis.google.com/chart?cht=lc&chd=t:-1|15,45&chs=250x150&chco=FF0000,000000&chfd=0,x,0,11,0.1,sin(x)*50%2B50&chxt=x,y&chm=c,00A5C6,0,110,10%7C,00A5C6,0,60,10
http://chart.apis.google.com/chart?cht=lxy&chs=250x250&chd=t:0|0|0&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt&chfd=0,x,0,360,1.9,sin(4*x)*40%2b50|1,y,0,360,1.9,cos(6*y)*40%2b50&chf=c,lg,90,FFFF00,0,FF9933,1&chco=006699
http://chart.apis.google.com/chart?cht=gv&chs=250x250&chl=digraph{A-%3EB-%3EC;A-%3EC}
__________________________
Bueno pues esta es la idea, de manera similar al dibujo de la función, podemos dibujar un gráfico estadístico como hemos mencionado al principio de la página.
________________________________
