Hola a tod@s!
Hoy quiero mostrales como crear un programa que utilice un servicio de traduccion, que es gratis hasta cierto numero de caracteres traducidos en el mes y lo mas importante que esta en la nube.
Para este tutorial vamos a utilizar el servicio de Bing Translator que es una aplicacion en Windows Azure marketplace.
Lo primero que debemos hacer es crear una cuenta de desarrollador en el Windows Azure MarketPlace, a contnuacion los pasois necesarios para acceder al servicio y crea nuestra cuenta de acceso al servicio.
Registro en el Windows Azure MarketPlace
Debemos ingresar a la siguiente url: Tienda de Windows Azure
Damos clic en el menu superior, en la opcion de la parte derecha que dice “Iniciar Sesion”.
Para el ingreso al marketplace se necesita una cuenta Live ID, si no cuenta con una debe crear una para poder ingresar al portal.
Al escoger la opcion aparece la pantalla para el ingreso utilizando Live ID:
Al ingresar los parametros correctos en esta pantalla, nos regresa a la pantalla anterior, pero ya indicando que estamos autenticados en el portal del marketplace de windows azure.
En la imagen se puede observar en la barra de menu, en la primera opcion de la izquierda el nombre del usuario autenticado en el sitio web.
Ahora buscamos el servicio “Microsoft Translator API” en Windows Azure Marketplace, para ello vamos a digitar en la caja de búsqueda “translator”
Al digitar y dar clic sobre la imagen de la lupa, para lanzar la busqueda, esto nos arroja un resultado que podemos apreciar en la siguiente imagen:
El la lista aparece en primer lugar la aplicacion que nos interesa, el servicio de Microsoft Translator, hacemos clic sobre esta opcion en la lista para subscribirnos al servicio.
Lo anterior nos muestra una nueva pantalla en la cual observamos lo siguiente:
Como podemos observar, el servicio de traduccion ofrece diferentes valores para diferentes cantidades de caracteres traducidos.
Seleccionamos la primera opcion para nuestro ejemplo.
Seleccionamos el check de aceptar las condiciones y se activa el botón de registrarse
Luego de registrarnos en el sitio, como se puede apreciar en la imagen anterior, ya podemos regresar a la pagina o pantalla principal del sitio, para ello damos clic sobre el logo rectangular en la parte superior izquierda de “Windows Azure Marketplace”. Nos desplazamos hacia la parte inferior de la pagina, en ella vamos a encontrar varias secciones, ubicamos la seccion de “Desarrollar”, es la columna
En este menú ubicamos la opcion de Registrar su Aplicación
Esto nos lleva a la pantalla de registro:
El Id de cliente lo rellenamos con un código que identifique nuestra aplicación, el nombre, el nombre de la aplicación o el nuestro, el secreto del cliente es la clave secreta que debemos utilizar en nuestra aplicación, no se debe cambiar, la URI de re direccionamiento debe ser una dirección https que se exige pero no es utilizada por el servicio o por nuestra aplicación, en este caso utilizamos la de Microsoft.
Damos clic al botón Crear para crear nuestra aplicación, si en el futuro desea crear nuevas aplicaciones puede ingresar directamente al url https://datamarket.azure.com/developer/applications/register
Aparece nuestra aplicación registrada, si tuviéramos varias parecería en esta lista.
Consumir el servicio desde Windows Phone 8
Vamos a crear un proyecto de Windows Phone, para ello abrimos Visual Studio 2013, seleccionamos “New Project”, o nuevo proyecto en la pantalla de inicio, o en el menu File (Archivo).
Seleccionamos el lenguaje de programacion o desarrollo, ubicamos el tipo de proyecto, en nuestro caso es un proyecto Windows Phone, y seleccionamos la plantilla inicial, la primera de lista.
Ahora que ya tenemos nuestra App, iniciemos a cambiar la apariencia de la pantalla, entonces cambiamos el titulo de nuestra aplicacion por “TRADUCTOR ELECTRONICO” en vez de “MY APPLICATION” y “traductor” por “page name”.
En la parte del cuerpo de la página vamos a crear nuestra interface de usuario para la traducción
1: <StackPanel x:Name="TitlePanel1" Grid.Row="0" Margin="12,17,0,28"/>
2: 3: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
4: <TextBox x:Name="txtToTrans" HorizontalAlignment="Left" Height="72"
5: TextWrapping="Wrap" VerticalAlignment="Top" Width="446"
6: AcceptsReturn="True"/>
7: <Button Content="Tranducir" HorizontalAlignment="Left" Margin="10,131,0,0"
8: VerticalAlignment="Top" Width="436" Click="Button_Click_1"/>
9: <RadioButton x:Name="optFrench" Content="Frances" HorizontalAlignment="Left"
10: Margin="10,59,0,0" VerticalAlignment="Top" IsChecked="True"
11: Checked="optFrench_Checked"/>
12: <RadioButton x:Name="optSpanish" Content="Espanol" HorizontalAlignment="Left"
13: Margin="150,59,0,0" VerticalAlignment="Top"
14: Checked="optSpanish_Checked"/>
15: <RadioButton x:Name="optGerman" Content="Aleman" HorizontalAlignment="Left"
16: Margin="296,59,0,0" VerticalAlignment="Top"
17: Checked="optGerman_Checked"/>
18: <TextBlock HorizontalAlignment="Left" Height="31" Margin="28,208,0,0"
19: TextWrapping="Wrap" Text="Translation:" VerticalAlignment="Top"
20: Width="117"/>
21: <TextBlock x:Name="lblTranslatedText" HorizontalAlignment="Left" Height="208"
22: Margin="28,257,0,0" TextWrapping="Wrap" VerticalAlignment="Top"
23: Width="402"/>
24: <Button x:Name="btnSpeak" Content="Hablar" HorizontalAlignment="Left"
25: Margin="28,487,0,0" VerticalAlignment="Top" Width="402"
26: Click="btnSpeak_Click"/>
27: </Grid>
Con este código creamos la interface para poder crear nuestra app y se empieza ver de la siguiente forma:
Ahora creamos las variables de clase que vamos a necesitar siguiente:
1: string strLngTo = "fr";
2: private static string strTextToTranslate = "";
Y creamos los metodos de respuesta a los radiobuttons y a los botones
1: private void optFrench_Checked(object sender, RoutedEventArgs e)
2: {3: strLngTo = "fr";
4: } 5: 6: private void optSpanish_Checked(object sender, RoutedEventArgs e)
7: {8: strLngTo = "es";
9: } 10: 11: private void optGerman_Checked(object sender, RoutedEventArgs e)
12: {13: strLngTo = "de";
14: } 15: 16: private void Button_Click_1(object sender, RoutedEventArgs e)
17: {18: // Inicializo la variable strTextToTranslate con el contenido de la caja de texto
19: strTextToTranslate = txtToTrans.Text;20: // PASO 1: Crear el request para el servicio OAuth
21: // get us our access tokens.
22: String strTranslatorAccessURI =23: "https://datamarket.accesscontrol.windows.net/v2/OAuth2-13";
24: System.Net.WebRequest req = System.Net.WebRequest.Create(strTranslatorAccessURI);25: req.Method = "POST";
26: req.ContentType = "application/x-www-form-urlencoded";
27: // Important to note -- the call back here isn't that the request was processed by the server
28: // but just that the request is ready for you to do stuff to it (like writing the details)
29: // and then post it to the server.
30: IAsyncResult writeRequestStreamCallback =31: (IAsyncResult)req.BeginGetRequestStream(new AsyncCallback(RequestStreamReady), req);
32: 33: 34: } 35: 36: private void RequestStreamReady(IAsyncResult ar)
37: {38: // PASO 2: The request stream is ready. Write the request into the POST stream
39: string clientID = "RAlvaradoT"; //"<<Your Client ID>>";
40: string clientSecret = "p4U2PpSU8Ix32uwLWog8J9YQety0tseBujQww nNY8g1"; // "<<Your Client Secret>>";
41: String strRequestDetails = string.Format("grant_type=client_credentials&client_id={0}&client_secret={1}&scope=http://api.microsofttranslator.com", HttpUtility.UrlEncode(clientID), HttpUtility.UrlEncode(clientSecret));
42: 43: // note, this isn't a new request -- the original was passed to beginrequeststream, so we're pulling a reference to it back out. It's the same request
44: 45: System.Net.HttpWebRequest request = (System.Net.HttpWebRequest)ar.AsyncState;46: // now that we have the working request, write the request details into it
47: byte[] bytes = System.Text.Encoding.UTF8.GetBytes(strRequestDetails);
48: System.IO.Stream postStream = request.EndGetRequestStream(ar); 49: postStream.Write(bytes, 0, bytes.Length); 50: postStream.Close();51: // now that the request is good to go, let's post it to the server
52: // and get the response. When done, the async callback will call the
53: // GetResponseCallback function
54: request.BeginGetResponse(new AsyncCallback(GetResponseCallback), request);
55: }Ahora debemos crear el codigo del metodo quye se llama en el callBack
1: private void GetResponseCallback(IAsyncResult ar)
2: {3: // PASO 3: Process the response callback to get the token
4: // we'll then use that token to call the translator service
5: // Pull the request out of the IAsynch result
6: HttpWebRequest request = (HttpWebRequest)ar.AsyncState; 7: 8: // The request now has the response details in it (because we've called back having gotten the response
9: HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(ar); 10: 11: // Using JSON we'll pull the response details out, and load it into an AdmAccess token class (defined earlier in this module)
12: // IMPORTANT (and vague) -- despite the name, in Windows Phone, this is in the System.ServiceModel.Web library,
13: // and not the System.Runtime.Serialization one -- so you will need to have a reference to System.ServiceModel.Web
14: try
15: {16: System.Runtime.Serialization.Json.DataContractJsonSerializer serializer = new
17: System.Runtime.Serialization.Json.DataContractJsonSerializer(typeof(AdmAccessToken));
18: AdmAccessToken token = 19: (AdmAccessToken)serializer.ReadObject(response.GetResponseStream()); 20: 21: string uri = "http://api.microsofttranslator.com/v2/Http.svc/Translate?text=" + System.Net.HttpUtility.UrlEncode(strTextToTranslate) + "&from=en&to=" + strLngTo;
22: System.Net.WebRequest translationWebRequest = System.Net.HttpWebRequest.Create(uri);23: // The authorization header needs to be "Bearer" + " " + the access token
24: string headerValue = "Bearer " + token.access_token;
25: translationWebRequest.Headers["Authorization"] = headerValue;
26: // And now we call the service. When the translation is complete, we'll get the callback
27: IAsyncResult writeRequestStreamCallback = (IAsyncResult)translationWebRequest.BeginGetResponse(new AsyncCallback(translationReady), translationWebRequest);
28: }29: catch (Exception ex)
30: {31: // Do nothing
32: } 33: }Debemos crear una clase que encapsule los datos del Token retornado por Azure, esta clase la vamos a llamar AdmAccesToken
1: public class AdmAccessToken
2: {3: public string access_token { get; set; }
4: public string token_type { get; set; }
5: public string expires_in { get; set; }
6: public string scope { get; set; }
7: }Estos mismos nombres de las propiedades es como las vamos a utilizer en el JSon devuelto por el servicio
Cuando el API termina la traducción, llamamos el método translationReady, este método es el asociado al evento terminar del API y hace el PARSE o convierte y traduce lso resultados en la salida correcta de nuestra aplicación.
Debemos crear el siguiente código para esto:
1: private void translationReady(IAsyncResult ar)
2: {3: // PASO 4: Process the translation
4: // Get the request details
5: HttpWebRequest request = (HttpWebRequest)ar.AsyncState; 6: 7: // Get the response details
8: HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(ar); 9: 10: // Read the contents of the response into a string
11: System.IO.Stream streamResponse = response.GetResponseStream();12: System.IO.StreamReader streamRead = new System.IO.StreamReader(streamResponse);
13: string responseString = streamRead.ReadToEnd();
14: 15: // Translator returns XML, so load it into an XDocument
16: // Note -- you need to add a reference to the System.Linq.XML namespace
17: System.Xml.Linq.XDocument xTranslation = 18: System.Xml.Linq.XDocument.Parse(responseString);19: string strTest = xTranslation.Root.FirstNode.ToString();
20: 21: // We're not on the UI thread, so use the dispatcher to update the UI
22: Deployment.Current.Dispatcher.BeginInvoke(() => lblTranslatedText.Text = strTest); 23: 24: }De esta manera tendremos un traductor personal en nuestro Smart Phone.
Disfrutenlo e inicien a desarrollar su app para Windows Phone 8 que el valor de la subcripcion de la tienda esta muy muy barato.
Feliz desarrollo y que Dios guie sus pensamientos para el exito de sus proyectos!
Hasta la proxima!
