Cansado de almacenar estructuras de datos relacionadas en listas de SharePoint? Cansado de hacer consultas tediosas a estructura de tablas relacionadas en SQL?  Os presento una forma distinta de almacenar los datos y poder consumir los datos desde SharePoint utilizando Azure Table Storage.

Azure Table Storage es un servicio que almacena datos NoSQL estructurados en la nube sin esquema propio, por tanto, fácil de escalar, evolucionar y su acceso es rápido y rentable para muchos tipos de aplicaciones .

Para este ejemplo, debemos tener instalado Azure Storage Explorer y poseer una subscripción de Azure ya que vamos a acceder a los datos almacenados dentro de nuestra cuenta de almacenamiento de Azure utilizando SharePoint Framework  y tenemos que realizar una serie de pasos previos.  Qué excitante!

Puede crear una subcripción gratuita de Azure a través del siguiente enlace:  https://azure.microsoft.com/es-es/free/

Para descargar Azure Storage Explorer puede utilizar este enlace: https://azure.microsoft.com/es-es/features/storage-explorer/

Utilizando  Azure Storage Explorer con nuestra subscripción de Azure,  creamos una cuenta de almacenamiento en caso de no tenerla. Dentro de la cuenta de almacenamiento, existe diferentes tipos de datos que podemos almacenar como son blobs, archivos,  colas y tablas. En esta entrada, nos centramos en las tablas. Vamos a crear una tabla de ejemplo llamada LabTable. Dicha tabla  contiene el nombre y edad de algunos compañeros.

Para más información sobre las tablas de Azure:  https://docs.microsoft.com/es-es/azure/cosmos-db/table-storage-overview

Debido a que la conexión que se realiza entre el tenant y la cuenta de Azure es entre dominios y se utiliza Javascript, el navegador lo desactivará de manera predeterminada. Por ello, lo que hay que hacer es habilitar CORS en el servicio de tabla de su cuenta de almacenamiento para permitir dichas solicitudes.

Para más información sobre CORS: https://docs.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing–cors–support-for-the-azure-storage-services

En este caso,  añadimos un regla donde aceptamos todos los orígenes, y todas las cabeceras posibles ya que utilizamos la ´*´ como wildcard.

Una vez que el CORS está habilitado, lo siguiente que debemos hacer es utilizar la Firma de Acceso Compartido (SAS). Un SAS se asegurará de que no esté compartiendo la clave de su cuenta de almacenamiento en JavaScript (visible para todos los usuarios) y otorgará permisos por tiempo limitado (lectura / escritura / eliminación según sus requisitos) a los usuarios que usen su aplicación. Al finalizar la creación de la firma, copiamos la url.

Para más información de SAS: https://docs.microsoft.com/es-es/azure/storage/common/storage-dotnet-shared-access-signature-part-1

Ahora, vamos al VSCode y creamos un nuevo webpart de SPFx con el generador Yeoman.

yo @microsoft/sharepoint

Una vez descargados todos los paquetes que requiere Yeoman, nos tenemos que descargar un nuevo paquete que realice las peticiones AJAX a Azure para obtener los datos de nuestro storage. En este ejemplo vamos a utilizar el cliente http llamado Axios. Añadimos Axios al proyecto con el comando:

npm i axios@latest

A continuación, en el componente de React, hacemos la consulta con Axios. En la consulta indicamos la url que hemos obtenido de la Firma de Acceso Compartido, y además le indicamos que el Content-Type sea application/json.

public componentDidMount(){
    const tablestorageUrl =  'https://azfunctions4spb006.table.core.windows.net/LabTable?sv=2017-07-29&si=LabTable-1639D592BAB&tn=labtable&sig=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
    axios.get(tablestorageUrl, {
      headers: {
        Accepts: 'application/json'
      }}).then((response) => {
        console.log(response.data);
    });
}

Este es el resultado.

Happy coding amigos.