Aplicativos de API do Azure e Aplicativo Web Mvc do Azure no Serviço de Aplicativo do Azure

Neste artigo, você aprenderá a criar Aplicativos de API do Azure e um cliente MVC implantado no Azure We App. Esse será um aplicativo muito simples que conecta vários componentes dos serviços de aplicativos do Azure e, para criá-lo, usaremos o aplicativo de API do Azure, o aplicativo Web do Azure e o SQL Server no Azure.

Uma arquitetura de alto nível do aplicativo pode ser desenhada conforme mostrado na imagem abaixo:

Essencialmente, neste post aprenderemos a realizar as seguintes tarefas:

• Make a SQL Connection in SQL database in Azure
• Usar a abordagem de banco de dados do Entity Framework para estruturar uma operação CRUD
• Expor as operações em um aplicativo de API do Azure
• Configure the swagger API and UI for metadata and API testing
• Publish the Azure API App in Azure App Service
• Criar código do lado do cliente usando a API de metadados do swagger em um aplicativo ASP.NET MVC
• Usar o código do cliente gerado no aplicativo MVC para executar operações CRUD em uma tabela em um banco de dados SQL no Azure
• Publish the ASP.NET MVC application in Azure Web App

Após a conclusão desta postagem, você deverá ter um Aplicativo de API do Azure e um Aplicativo Web do Azure baseado em MVC em execução ao vivo no Serviço do Azure. Como saída do artigo, temos o Aplicativo de API do Azure em execução no http://schoolapiapp.azurewebsites.net/swagger/ui/index. Também temos um aplicativo Web do Azure baseado em MVC em execução nesta URL: http://mvcclientazureapiapp.azurewebsites.net/

Neste exemplo, estou usando o Visual Studio 2015, no entanto, você também pode usar o Visual Studio 2013. Você também precisará de uma assinatura do Azure, mas poderá obter uma avaliação gratuita. Vamos começar!

Azure API App

Vamos começar criando um aplicativo de API do Azure. Para configurar o ambiente de desenvolvimento, instale o SDK do Azure. Você pode baixar o SDK do Azure para Visual Studio 2015 aqui e o SDK do Azure para Visual Studio 2013 aqui.  Após a instalação bem-sucedida, você deve obter a caixa de diálogo instalada com sucesso, conforme mostrado na imagem abaixo:

Agora, seu ambiente de desenvolvimento está pronto para criar seus primeiros Aplicativos de API do Azure. Vamos criar um novo projeto, selecionando New->Project->ASP.NET Web Application. Dê um nome adequado ao seu aplicativo Web ASP.NET e, na caixa de diálogo do modelo, escolha o aplicativo de API do Azure, conforme mostrado na imagem abaixo:

Depois de criar o projeto com êxito, faça o seguinte:

1. Exclua ValuesController da pasta Controller. Não precisamos desse controlador.
2. Clique com o botão direito do mouse na pasta Modelos e adicione um novo item.

Para adicionar um novo item, selecione ADO.NET Modelo de Entidade na guia Dados e dê um nome ao modelo. Aqui, estou deixando como SchoolModel.

Nesta etapa, no Assistente de Modelo de Dados de Entidade, selecione EF Designer na opção de banco de dados e clique em Avançar, conforme mostrado na imagem abaixo:

Vamos parar um momento aqui e entender o que vamos fazer na próxima etapa. Aqui, estaremos nos conectando a um banco de dados escolar que está dentro dos bancos de dados SQL no Azure.

Para se conectar a um banco de dados SQL no Azure, você precisa executar as seguintes tarefas:

• Adicionar um IP do cliente à regra de firewall do servidor de banco de dados no portal do Azure
• Fornecer um nome de servidor de banco de dados no Azure
• Fornecer um nome de usuário e senha usando a autenticação do SQL Server
• Selecione o banco de dados necessário e clique em OK

Talvez você queira consultar as imagens abaixo para fornecer informações para se conectar a um banco de dados no Azure:

Como fornecemos informações vitais, como nome de usuário e senha, para nos conectarmos ao servidor de banco de dados do Azure, o Entity DataModel Wiazrd nos pergunta se queremos incluir dados confidenciais na cadeia de conexão ou não. Aqui, selecionaremos o botão de opção Sim e clicaremos em Avançar. Além disso, se desejar, você pode querer alterar o nome da cadeia de conexão, mas neste exemplo estou deixando-o como padrão.

Agora precisamos selecionar as entidades com as quais trabalhar. Para simplificar, estou selecionando a tabela mais simples no banco de dados da Escola (e por "simples", quero dizer a tabela sem relação com nenhuma outra tabela). Então, vou selecionar a tabela Department para prosseguir neste exemplo. Conforme mostrado na imagem abaixo, para selecionar a tabela Departamento, marque a caixa de seleção de Departamento e deixe os outros campos como padrão.

Em seguida, para criar o modelo de dados, clique em Concluir e adicionamos o modelo. Usando esse modelo, criaremos a API do Azure. Você pode verificar o SchoolModel criado no Gerenciador de Soluções, conforme mostrado na imagem abaixo:

A partir de agora, adicionamos o modelo. Certifique-se de ter construído o projeto com sucesso nesta fase e, em seguida, vamos criar um controlador. Clique com o botão direito do mouse na pasta Controllers e, no contextmeny, selecione Add->Controller.  Na opção scaffolding, selecione Controlador da API Web 2 com ações, usando o Entity Framework, conforme mostrado na imagem abaixo:

Para adicionar o controlador usando o andaime, você precisa selecionar as seguintes opções:

1. Classe de modelo: escolha Departamento no menu suspenso
2. Classe de contexto de dados: escolha SchoolEntities na lista suspensa
3. Forneça o nome do controlador desejado ou deixe o nome sugerido com base na classe do modelo.

Ao clicar em Adicionar, o DepartmentsController seria adicionado ao projeto. Essencialmente, criamos a API Web para executar operações CRUD na tabela Department. Na próxima etapa, temos que habilitar os metadados e a interface do usuário do Swagger.

Habilitando metadados e interface do usuário do Swagger

O Serviço de Aplicativo do Azure dá suporte a metadados do Swagger 2.0. Usando isso, cada API pode definir uma URL EndPoint que retorna metadados para a API no formato JSON do Swagger. Os metadados retornados podem ser usados para gerar o código do cliente.

Você pode navegar pelos metadados da API criada anexando apiUrl/swagger/docs/v1. Então, vamos em frente e executar o projeto, e você deve receber uma mensagem "proibido", conforme mostrado na imagem abaixo:

 

Para navegar até os metadados da API, anexe / swagger/docs/v1 ao baseurl, conforme mostrado aqui

Aqui você vê os metadados da API do Azure no formato JSON. Esses são os metadados JSON do Swagger 2.0 para a API. Isso pode ser usado para criar o código do cliente.

Para ativar a interface do usuário do Swagger, volte para o projeto e, na pasta App_Start, abra SwaggerConfig.cs arquivo.  No arquivo, localize as seguintes linhas de código e remova o comentário:

Mais uma vez, vá em frente e execute o aplicativo de API do Azure pressionando F5. Acrescente a URL com /swagger e você verá que a interface do usuário do Swagger foi ativada na API.

Usando a interface do usuário do Swagger, podemos testar a API criada. Por exemplo, vamos em frente e tentar criar um novo Departamento. Clique na opção POST, crie os dados do departamento a serem inseridos no JSON fromat e clique em Experimentar.

Você verá o Corpo da Resposta e o Código de Resposta retornados da API. Na criação bem-sucedida do recurso, ele deve retornar o código de status 201.

Você deve ter notado a partir de agora que é muito simples criar aplicativos de API do Azure, habilitar os metadados e a interface do usuário do Swagger e testá-los localmente. Agora vamos publicá-los no Azure.

Deploy API  to Azure

Até agora, tudo o que fizemos é local. Agora queremos mover nosso aplicativo de API do Azure local para o Azure usando as ferramentas do Azure integradas com o Visual Studio 2015. Para começar, clique com o botão direito do mouse no projeto e selecione Publicar.

Na caixa de diálogo Publicar Web, selecione Serviço de Aplicativo do Microsoft Azure e clique em Avançar.

Na próxima viúva, selecione assinatura e clique em Novo.

Na janela "Criar Serviço de Aplicativo", primeiro altere o tipo para o Aplicativo de API, conforme mostrado na imagem abaixo:

Em seguida, forneça as seguintes informações:

1. Unique API name
2. Escolha a assinatura
3. Se você já tiver criado o Plano do Serviço de Aplicativo, poderá escolhê-lo. Para criar um novo, clique em Novo.

Neste exemplo, estou criando um novo plano do Serviço de Aplicativo, conforme mostrado na imagem abaixo. Usaremos esse plano recém-criado para publicar o aplicativo.

Depois de fornecer todas as informações, suas opções de hospedagem devem ficar como abaixo:

A partir de agora, fornecemos todas as informações necessárias para publicar o aplicativo. Clique em Criar para prosseguir na implantação. Na próxima tela, confirme todos os detalhes e clique em Avançar para prosseguir.

Nessa tela, você pode verificar as cadeias de conexão e atualizar o banco de dados. Para manter as coisas simples, deixe todas as configurações padrão e clique em Avançar.

Nessa tela, visualize as implantações e clique em publicar para implantar o Aplicativo de API do Azure no Serviço do Azure.

Você pode ver o status de publicação na janela de saída do Visual Studio. Em uma publicação bem-sucedida, você será direcionado para o Aplicativo de API do Azure hospedado no Serviço do Azure. Você deve obter o aplicativo de API do Azure em execução no serviço do Azure, conforme mostrado na imagem abaixo.

Você implantou com êxito o aplicativo de API do Azure no Serviço do Azure!

Configuring metadata URL in portal 

Para configurar a URL de metadados, faça logon no portal e, na seção Serviços de Aplicativos, você encontrará seu aplicativo de API recém-criado.

Clique no aplicativo API e selecione Definição de API.

Na definição de API, você pode alterar a URL de metadados. Conforme discutido acima, por padrão, o URL de metadados é definido como.. /arrogância/docs/v1.

Podemos alterar o URL de metadados para outra coisa, conforme mostrado na imagem abaixo. Depois de alterar o URL, não se esqueça de salvar o novo URL clicando no botão salvar na parte superior. Para simplificar, deixei o URL de metadados como o padrão aqui. Então, quando você navega para .. /swagger/docs/v1, você obterá os metadados do swagger necessários para criar o código do lado do cliente. Os metadados podem ser vistos no navegador, conforme mostrado na imagem abaixo:

Você pode executar uma operação GET e visualizar todos os departamentos no navegador navegando até a URL. /api/departamentos. Os departamentos serão retornados como JSON no navegador, conforme mostrado na imagem abaixo:

Você também pode testar as outras operações usando a interface do usuário do swagger, conforme discutimos na seção anterior deste artigo.

Ótimo, até agora criamos a API do Azure que está funcionando com o banco de dados SQL no Azure. Também implantamos isso com sucesso no Serviço de Aplicativo do Azure.

Creating MVC Client

Nesta seção do artigo, criaremos um cliente .NET. Vamos em frente e criar um projeto ASP.NET MVC.

No modelo, selecione MVC e escolha Sem Autenticação na opção Alterar Autenticação.

Após a criação bem-sucedida do projeto, clique com o botão direito do mouse no projeto e, no menu de contexto, selecione Add->REST API Client.

Ao selecionar a opção Cliente da API REST, você terá opções para Baixar a API do Microsoft Azure ou selecionar o arquivo de metadados do Swagger existente. Opcionalmente, você também pode alterar o nome do namespace do cliente aqui.

Vamos selecionar a opção Baixar do aplicativo de API do Microsoft Azure e clicar no botão Procurar.  Para selecionar o Serviço de Aplicativo, escolha assinatura e selecione Aplicativo de API do Azure, conforme mostrado na imagem abaixo, e clique no botão ok.

Depois de clicar no botão Ok, os metadados serão baixados para o aplicativo cliente. No download bem-sucedido dos metadados, você descobrirá que o código do lado do cliente foi gerado. Você pode vê-los no gerenciador de soluções, conforme mostrado na imagem abaixo:

Agora criamos o código do lado do cliente do aplicativo de API do Azure. Vamos em frente e adicionar um controle: clique com o botão direito do mouse na pasta Controllers e, no menu de contexto, selecione Add->Controller.  No modelo, escolha MVC 5 Controller with read/write actions.

Usando o código gerado, é muito fácil executar a operação na API do Azure.  Na ação Index do controlador gerado, você pode buscar todos os departamentos usando instance of SchoolApiApp. Para buscar todos os departamentos, consulte a lista abaixo:

private SchoolApiApp app = new SchoolApiApp();
public ActionResult Index() {
  return View(app.Departments.GetDepartments());
}

Como você pode ter inferido do código listado acima, são necessárias apenas algumas linhas de código para trabalhar com a API REST. Lembre-se de que o código do lado do cliente .NET foi gerado usando os metadados do Swagger do aplicativo de API do Azure.

Para adicionar Exibição, clique com o botão direito do mouse na ação Índice e selecione adicionar exibição. No modelo Adicionar Exibição, selecione Lista e escolha Departamento como classe de modelo.

Criar um registro também é muito simples. Para fazer isso, tudo o que você precisa fazer é chamar um método Post passando o objeto enity, conforme mostrado na listagem abaixo.

public ActionResult Create([Bind(Include = "Administrator,Budget,Name,StartDate")] Department department) {
  try {
    // TODO: Add insert logic here
    if (ModelState.IsValid) {
      department.DepartmentID = 4569;
      app.Departments.PostDepartmentByDepartment(department);
    }
    return RedirectToAction("Index");
  } catch (Exception ex) {
    return View();
  }
}

O código gerado terá todas as operações como List, Post, Put e Delete. Você pode usá-los tão facilmente quanto acabamos de usar as operações List e Post nos exemplos acima.

Na última etapa, vamos prosseguir e publicar o cliente MVC no aplicativo Web do Azure. A publicação seria a mesma que publicamos o aplicativo de API. Para resumir, estou evitando as capturas de tela e mencionando apenas as etapas.

Publish MVC Client to Azure Web App

1. Clique com o botão direito do mouse no projeto e clique em publicar
2. Selecione Publicar destino como Serviço de Aplicativo do Microsoft Azure
3. Escolha a assinatura e clique em Novo
4. Dê um nome ao aplicativo da web, selecione a região e clique em Criar
5. Na última etapa, clique em Publicar

Em uma publicação bem-sucedida, você receberá uma mensagem "publicação bem-sucedida" junto com a URL na janela de saída do Visual Studio.

Legal! Acabamos de publicar um aplicativo ASP.NET MVC para o aplicativo Web do Azure, que está consumindo um aplicativo de API do Azure.

Conclusão

Neste artigo, aprendemos como executar as seguintes tarefas:

• Fazer uma conexão SQL no banco de dados SQL no Azure
• Usar a primeira abordagem do banco de dados do Entity Framework para a operação CRUD de scaffold
• Expor as operações no aplicativo de API do Azure
• Configure the swagger API and UI for metadata and API testing
• Publish Azure API App in Azure App Service
• Criar código do lado do cliente usando a API de metadados do swagger em um aplicativo ASP.NET MVC
• Usar o código do cliente gerado no aplicativo MVC para executar operações CRUD na tabela no banco de dados SQL no Azure
• Publish ASP.NET MVC application in Azure Web App