Como configurar e utilizar Easy Tables no Azure Mobile App Service

Olá,

está é a segunda parte da série, Azure Mobile Apps, como backend para seus aplicativos móveis, se você ainda não leu a primeira parte, clique aqui, se já, vamos dar continuidade a série.

Agora que já sabemos o que é o Azure Apps Service e também o Mobile Apps, para a construção do nosso aplicativo iremos utilizar uma funcionalidade do Mobile Apps chamada Easy Tables.

O que é o Easy Tables?

Normalmente em uma API de backend, precisamos criar a estrutra do banco de dados, tabelas, colunas, ou usando algum ORM definir configurações, entidades, etc, e depois codificar a interação entre o serviço e base de dados, isso por si só é um bocado de trabalho.

O Easy Tables no Azure Mobile Apps, é um recurso baseado em OData CRUD APIs, ou seja, basicamente uma forma de implementar operações CRUD sem necessariamente escrever código no seu backend para armazenando dados diretamente no SQL Azure.

O bacana disso tudo, é que se você parar para pensar 70% ou mais, do trabalho em um backend mobile está na criação de operações de CRUD.

O Easy Tables nós fornece total controle sobre as tabelas/colunas criadas, é possível visualizar dados, projetar o schema, e se necessário, adicionar lógica em Node.js editando o código fonte direto no navegador através do Visual Studio Online Monaco.

E se você quer ainda mais controle e poder de personalização, pode configurar implantação através de controle de versão, editar e testar localmente, já que estamos falando de uma aplicação NodeJS que utiliza Express.js em sua base =D

Como criar um serviço de backend no Mobile Apps utilizando Easy Tables?

Antes de tudo, se você ainda não possui uma conta o Microsoft Azure, pode criar uma conta e aproveitar mais de R$ 700,00 de créditos gratuitos durante um mês.

  • Autentique no portal do Microsoft Azure portal.azure.com

  • Clique em New, depois escolha a opção Web + Mobile e em seguida Mobile App

  • Na blade Create Mobile App informe um nome para o seu Mobile App backend

  • Em seguida, você precisa selecionar um Resource Group para o seu app. Se você já possuir um Resource Group, pode utilizar o mesmo, ou para criar um novo, clique no botão New, que está disponível na seção Resource Group, escolha um novo nome, em seguinda Subscription e a localização do seu novo Resource Group.

  • Depois, você precisa escolher o localização e o plano de serviço do seu backend (App Service Plan/Location), ou seja qual o Data Center que seu serviço será alocado e qual o plano de custo que você irá utilizar (ou melhor o quanto isso vai custar), novamente você pode criar um novo ou escolher o padrão.

Dica: Para utilizar o free tier, você deve criar um novo plano, clique no plano atual, na blade App Service plan, clique em New, em seguida escolha um nome para o seu plano (eu gosto de usar FREE+NomeDoRecurso, ou seja FREE_AppService), escolha a localização, depois clique em Pricing tier, clique no link View All, no final da listagem clique e escolha F1 Free, depois em Select, após em Ok,

  • Clique em Create e aguarde, o processo de criação deve levar certa de 2 minutos (mas pode levar um pouco mais);

Criando uma conexão de dados

Com o seu backend criado, antes de usarmos os recursos de Easy Tables, precisamos habilitar uma conexão de dados para o serviço (Data Connection):

  • Clique em Settings, na blade, procure a opção Data, para abrir a blade Data Connections.

  • Clique em Add, na blade Add data connection, selecione tipo SQL Database.

  • Clique em SQL Database (configure required settings), na blade Database, clique em Create new e informe um nome para a sua base de dados.

  • Em seguida, você precisa escolher o plano de serviço da sua base de dados (Pricing tier), ou seja qual o plano de custo que você irá utilizar (ou melhor o quanto isso vai custar), novamente você pode criar um novo ou escolher o padrão.

Dica: Você também pode utilizar o free tier para base de dados escolhendo o plano F.

  • Clique em Server, informe um nome para o seu servidor de banco de dados, depois informe um nome de usuário e senha, em Location, escolha a mesma localização do seu serviço de backend, clique em OK, em OK novamente e por fim em OK.

  • Ao final da criação (algo em torno de 2 minutos), a sua conexão de dados sera listada na blade Data Connections. Com a conexão criada vamos agora (finalmente), configurar o recurso Easy Tables.

Configurando Easy Tables

Para configurar o recurso de Easy Tables, localize na blade Settings do seu Mobile App, o item Easy Tables, e execute os seguintes passos:

  • Clique na mensagem "Need to configure Easy Tables/Easy APIs – Click here to continue —>”, marque a seleção "I acknowledge that this will overwrite all site contents.” e clique em Initialize App.

Aguarde a ativação do recurso (pode demorar 2 minutos ou mais), com o recurso ativado podemos agora criar tabelas para o nosso backend.

Adicionando uma Tabela ao seu backend móvel

Se você chegou até aqui (Herói!?), é hora da diversão, a primeira vez que você configurar o serviço tudo parece demorado e chato, mas na segunda vez vai ver que é tudo muito simples uma vez que você já sabe o que precisa ser feito =)

Para adicionar uma tabela execute os seguintes passos:

  • Novamente na blade Settings, selecione Easy Tables (você não tem nenhuma tabela criada), clique em Add.

  • Informe o nome da sua Tabela, note que você pode configurar permissões especificas para Insert, Update, Delete, Read e Undelete, e também definir se você quer ativar ou não o recurso soft delete.

Para testarmos configure Insert e Read como “Allow anonymous access” e “Disable” para Update, Delete e Undelete e clique em OK.

  • Uma vez que a Tabela foi criada, clique sobre o nome dela na blade Easy Tables, para abrir a blade de gerenciamento da tabela onde você pode alterar permissões, gerenciar o schema, excluir linhas, adicionar colunas, excluir a tabela e visualizar os logs.

  • Para adicionar uma nova coluna clique em Manage schema.

Por padrão quando você adiciona uma nova Tabela, apenas as colunas padrão são adicionadas (Audit columns),

  • Clique em Add column, informe o nome e o tipo para a coluna, e em seguida em OK para criar a coluna.

Dica: Você pode adicionar quants colunas forem necessárias de acordo com o seu projeto.

Testando o resultado do seu trabalho e backend de forma simples com Postman

Ufa! Conseguimos! Agora seu backend está pronto!

Para brincar um pouco, você pode utilizar o Postman, ou qualquer outro aplicativo para testar chamadas a API’s, o processo é bem simples.

  • Crie uma chamada do tipo POST para o endereço url-do-seu-mobile-app/tables/nome-da-sua-tabela.

  • Ex: http://mobdemo.azurewebsites.net/tables/food

  • Adicione os seguintes parâmetros ao cabeçalho HTTP:

  • Header ZUMO-API-VERSION, Value 2.0.0
  • Header Content-Type, Value application/json
  • No corpo envie { "name" : "pizza" } onde “name” é o nome da sua coluna criada anteriormente e “pizza" é o valor que você deseja incluir no bando de dados.

O retorno deve ser algo como:
{ "id": "d144c152-3b86-4048-9c8c-b548b6006165", "createdAt": "2016-01-07T00:18:08.891Z", "updatedAt": "2016-01-07T00:18:08.922Z", "version": "AAAAAAAAB9I=", "deleted": false, "name": "pizza" }

  • Repita o processo para adicionar novos itens:

  • Para ler os dados cadastrados, crie uma chamada do tipo GET apontando para url-do-seu-mobile-app/tables/nome-da-sua-tabela

  • Ex: http://mobdemo.azurewebsites.net/tables/food

  • Adicione os seguintes parâmetros ao cabeçalho HTTP,
  • Header ZUMO-API-VERSION, Value 2.0.0

O retorno deve ser algo como:
[{ "id": "d144c152-3b86-4048-9c8c-b548b6006165", "createdAt": "2016-01-07T00:18:08.891Z", "updatedAt": "2016-01-07T00:18:08.922Z", "version": "AAAAAAAAB9I=", "deleted": false, "name": "hamburguer" }, { "id": "9865a1e1-61ac-47ab-9eae-716afaf6f0bb", "createdAt": "2016-01-07T00:20:17.173Z", "updatedAt": "2016-01-07T00:20:17.173Z", "version": "AAAAAAAAB9Q=", "deleted": false, "name": "hamburguer" }]

Próximos passos

Agora que você já sabe como criar um Mobile App no Microsoft Azure para utilizar como backend de seus aplicativos móveis, podemos seguir para a próxima parte da série, que é conectar o nosso backend ao um aplicativo mobile desenvolvido com Xamarin e MvvmCross, porem é legal lembrar que o Azure Mobile Apps possui SDK’s nativos para Android, iOS, ou seja, você não tem desculpas para experimentar o backend na nuvem publica da Microsoft =)

Abraço e até a próxima!

Te convido para acompanhar a série e a contribuir, utilize os comentários ou me chame para um papo no twitter @williamsrodz.

Forte abraço!

William S. Rodriguez

Microsoft & Xamarin MVP, C# mobile developer, community enthusiast & #Xamarin crusader.

Curitiba, PR, Brasil http://williamsrz.com.br

Subscribe to C#, Xamarin, Mobile & Cloud addicted

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!