Tags

En éste post voy a explicar paso a paso, como crear un “Azure mobile service” y como consumir datos desde una aplicación Windows Store en JavaScript y HTML5.

Lo primero que debemos saber es que Windows Azure nos facilita una versión de evaluación gratuita durante 90 días🙂 .Para empezar está genial, podemos ir practicando y si nos gusta y le cogemos el truquillo pues pensarnos en pagar alguna tarifa que más nos convenga. No tiene gastos iníciales y sólo se paga por lo que se usa. Hechale un ojo, a mí me está gustando y por lo que voy viendo es muy interesante.

En caso de no tener cuenta, debemos creárnosla…todo eso es burocracia, os dejo que investiguéis y sigáis las instrucciones que os indican…

Una vez que ya tenemos nuestra cuenta de Azure, tendremos un panel de control similar al siguiente :

image

Nos interesa crear un servicio móvil,así que pinchamos en la opción con dicho nombre y pulsamos sobre el icono de más, que aparece en la parte inferior de la pantalla:

image

Una vez que pulsamos sobre la opción de crear,rellenamos los siguientes campos:

imagePulsamos el botón de siguiente:

image

Una vez finalizado,en la pantalla de servicios móviles, aparecerá nuestro servicio nuevo, creado en el listado. Pinchamos sobre  la opción de datos ,para crear una tabla:

image 

image

Trás esto, tendremos nuestra tabla creada,no hace falta especificar los campos que tendrá la tabla,es capaz de inferirlos automáticamente🙂.

Volvemos a la opción de Panel y apuntamos la URL del servicio móvil y la clave de aplicación

 

image

Con ésto, ya tenemos lista toda la parte referente a Azure. Ahora vamos a crear una aplicación vacía en JavaScript, la he llamado “ExampleDataAzure”.

En el archivo default.html, debemos añadir éste script que hace referencia al servicio móvil para esta vista:

<script type="text/javascript" src="/MobileServicesJavaScriptClient/MobileServices.js"></script>

Ahora añadimos la interfaz ,donde añadiremos varias etiquetas para el nombre,email  y unos cuadros de texto para su inserción.

<body>

<h2>Example Data Azure</h2>
<div class="Data">
<div>
<label>User Name</label>
<input id="Name" type="text" class="InputName" />
</div>
<div >
<label>Email</label>
<input id="Email" type="text" class="InputEmail"/>
</div>
<div>
<button id="Save">Save</button>
</div>
</div>
</body>

Al archivo default.css , añadimos:

.Data {
margin-top:50px;
margin-left:10px;
color: #b9b9b9;
font-size: 20pt;
position:absolute;

min-width: 65px;
text-align: left;

}
.InputName {
right: -10px;
position:relative;
}

.InputEmail {
right: -77px;
position:relative;
}

Tendremos que añadir una referencia del Azure Mobile Service a nuestra solución:

image

Ahora modificamos el archivo default.js , para acceder a los datos .Creamos la variables visible a todo el achivo para acceder al servicio en cualquier parte del archivo.js y definimos con los credenciales que Azure nos proporcionó la conexión al servicio móvil.Añadimos este código justo debajo de “use strict”

WinJS.Binding.optimizeBindingReferences = true;

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var userItems;
var userTable

app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
userItems = new WinJS.Binding.List();
var mobileService = new Microsoft.WindowsAzure.MobileServices.MobileServiceClient(
"direccionurlquenosproporcionaAzure",
"ClavedeusuarioqueproporcionaAzure"
);
userTable = mobileService.getTable('Usuario');
}
};

Añadimos el método de insertar,por ahora es el que me interesa y el evento del botón:

var insertUser = function (userItem) {
// Inserts a new row into the database. When the operation completes
// and Mobile Services has assigned an id, the item is added to the binding list.
userTable.insert(userItem).done(function (item) {
userItems.push(item);
listItems.winControl.itemDataSource = userItems.dataSource;
});
};


buttonSave.addEventListener("click", function () {
insertUser({
nameUser: Name.value,
email : Email.value,
});

});

Si compilamos e introducimos algún valor,podremos comprobar,si vamos a la sección de datos de Azure y seleccionamos la tabla Usuario ,que estan los datos insertados.

image

image

Este es un ejemplo muy básico de como empezar a consumir datos de un servicio móvil.

Saludos!