Partilhar via

Início rápido: Adicionando um serviço móvel (JavaScript)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Este Início rápido guia você pela adição de um serviço de backend com base na nuvem para um aplicativo existente usando o Azure Mobile Services. Os Serviços móveis facilitam o armazenamento e a consulta de dados, o logon de usuários com provedores de identidade populares e o envio e recebimento de notificações por push no seu aplicativo. Para saber mas, veja Centro de desenvolvimento dos Serviços Móveis. Ao terminar, você terá criado um novo serviço móvel na sua assinatura Azure, adicionado código de Serviços móveis ao projeto de aplicativo inicial e executado o aplicativo para inserir dados no novo serviço celular.

Pré-requisitos

Baixar e executar o projeto GetStartedWithMobile Services

Primeiro, você irá baixar e testar um projeto do Visual Studio 2013 para um aplicativo da Windows Store ao qual o suporte aos Serviços móveis será adicionado. Este aplicativo inicial armazena itens na memória.

  1. Baixe o projeto de aplicativo de amostra GetStartedWithMobileServices.
  2. No Visual Studio, abra o projeto baixado, expanda a pasta js e examine o arquivo de script default.js. Observe que objetos TodoItem foram adicionados em uma memória interna List, então pressione a tecla F5 para recompilar o projeto e iniciar o aplicativo.
  3. No aplicativo, insira algum texto em Inserir um TodoItem, em seguida, clique em Salvar. Observe que o texto salvo é exibido na segunda coluna, sob Dados de atualização e consulta.

Criar um novo serviço móvel

As seguintes etapas criam um novo serviço móvel no Azure e adiciona código ao seu projeto que permite acesso a este novo serviço. Antes de criar o serviço móvel, você deve importar o arquivo publishsettings de sua assinatura do Azure para o Visual Studio. Isso permite que o Visual Studio se conecte ao Azure no seu nome. Quando você cria um novo serviço móvel, deve especificar o Banco de dados do SQL Azure usado pelo serviço móvel para armazenar dados.

  1. No Visual Studio 2013, abra o Gerenciador de Soluções, clique com o botão direito do mouse no projeto e clique em Adicionar, Serviço Conectado....

  2. Na caixa de diálogo Gerenciador de serviços, clique em Criar serviço..., selecione <Importar...> em Assinatura na caixa de diálogo Criar serviço móvel.

  3. Em Importar assinaturas do Microsoft Azure, clique em Baixar arquivo de assinatura, efetue logon na sua conta do Microsoft Azure (se necessário), clique em Salvar quando o navegador solicitar para salvar o arquivo.Observação  A janela de logon é exibida no navegador, que pode estar atrás da janela do Visual Studio. Lembre-se de anotar onde salvou o arquivo baixado .publishsettings. Você pode pular essa etapa se o seu projeto já estiver conectado à uma assinatura do Azure.

     

  4. Clique em Procurar, navegue até o local onde salvou o arquivo .publishsettings, selecione o arquivo e então clique em Abrir e Importar. O Visual Studio importa os dados necessários para se conectar à assinatura do Azure. Quando a sua assinatura já tiver um ou mais serviços móveis existentes, os nomes dos serviços serão exibidos. Observação  Depois de importar as configurações de publicação, considere a exclusão do arquivo .publishsettings baixado, pois ele contém informações que podem ser usadas por outras pessoas para acessar a sua conta. Proteja o arquivo se planejar mantê-lo para uso em outros projetos de aplicativo conectados.

     

  5. Clique em Criar serviço.... Na caixa de diálogo Criar serviço móvel, selecione a sua Assinatura e a Região desejada para seu serviço móvel. Digite um Nome para seu serviço móvel e certifique-se de que ele está disponível. Um X vermelho é exibido quando o nome não estiver disponível. No Banco de dados, selecione <Criar novo>, forneça o Nome de usuário do servidor e Senha do servidor e clique em Criar.Observação  Como parte deste Início rápido, você cria uma nova instância e servidor do Banco de dados do SQL. Você pode reutilizar este novo banco de dados e administrá-lo como faria com qualquer outra instância do banco de dados SQL. Se você já tem um banco de dados na mesma região que o novo serviço móvel, poderá optar pelo banco de dados existente. Quando você escolher um banco de dados existente, certifique-se de fornecer as credenciais de logon corretas. Se você fornecer as credenciais erradas, o serviço móvel é criado em um estado não íntegro.

     

    Depois que o serviço móvel é criado, uma referência à biblioteca de cliente de Serviços móveos é adicionada ao projeto e o código fonte do projeto é atualizado.

  6. No Gerenciador de soluções, expanda Serviços, Serviçs móveis, seu nome de serviço, então abra o arquivo service.js e observe a variável recém adicionada, que se parece com o seguinte exemplo:

    var todolistClient = new WindowsAzure.MobileServiceClient(
                "https://todolist.azure-mobile.net/",
                "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

    Este código fornece acesso ao seu novo serviço móvel no aplicativo usando uma instância do objeto MobileServiceClient. O cliente já foi criado ao fornecer o URI e a chave do aplicativo de um novo serviço móvel.

  7. Abra o arquivo default.html file e obseve que duas novas referências script foram adicionadas, uma na biblioteca de clientes de Serviços móveis no Azure e outra no script que define o objeto MobileServiceClient no seu projeto.

Adicione uma nova tabela ao serviço móvel e atualize o aplicativo

Antes de armazenar dados no seu serviço móvel, você deve criar uma nova tabela de armazenamento no serviço. Estas etapas mostram como usar o Visual Studio 2013 para criar uma nova tabela no serviço móvel. Então, você atualiza o aplicativo para usar os Serviços móveis para armazenar itens no Azure em vez de na coleção local.

  1. No Gerenciador de Servidores, expanda Azure, expanda Serviços Móveis, clique com o botão direito do mouse em seu serviço móvel, em seguida, clique em Criar Tabela. Na caixa de diálogo Criar tabela, digite TodoItem em Nome da tabela.

  2. Expanda Avançado, verifique se as permissões padrão de operação da tabela são Qualquer pessoa com a chave do aplicativo e clique em Criar. Isso cria a tabela TodoItem no servidor, onde qualquer pessoa que possua a chave do aplicativo pode acessar e alterar dados na tabela sem ter primeiro que ser autenticado. Observação  A chave do aplicativo é distribuída com o aplicativo. Como esta chave não é distribuída de forma segura, ela não pode ser considerada um token de segurança. Para segurar o acesso aos dados de serviços móveis, você deve autenticar os usuários antes de acessarem. Para mais informações, consulte Permissões.

     

  3. No arquivo de script default.js, comente a linha que define a coleção items existente, e remova o comentário ou adiicone a seguinte linha de código e substitua yourClient com a variável adicionada ao arquivo service.js ao conectar seu projeto aos serviços móveis:

    var todoTable = yourClient.getTable('TodoItem');

    Este código cria um objeto proxy (todoTable) para a nova tabela do banco de dados.

  4. Substitua a função InsertTodoItem com o seguinte código:

    var insertTodoItem = function (todoItem) {
    // 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.
    todoTable.insert(todoItem).done(function (item) {
        todoItems.push(item);
    });
};

    Este cófigo insere um novo item na tabela. Observação  Novas tabelas são criadas apenas com uma coluna Id. Quando o esquema dinâmico está ativado, os Serviços móveis automaticamente geram novas colunas com base no objeto JSON na solicitação de inserção ou atualização. Para mais informações, consulte Esquema dinâmico.

     

  5. Substitua a função RefreshTodoItems com o seguinte código:

    var refreshTodoItems = function () {
    // This code refreshes the entries in the list by querying the table. 
    todoTable.read().done(function (results) {
        todoItems = new WinJS.Binding.List(results);
        listItems.winControl.itemDataSource = todoItems.dataSource;
    });
};

    Isso define o vínculo à coleção de itens na todoTable, que contém todos os objetos TodoItem retornados do serviço móvel.

  6. Substitua a função UpdateCheckedTodoItem com o seguinte código:

    var updateCheckedTodoItem = function (todoItem) {
    // This code takes a freshly completed TodoItem and updates the database. 
    todoTable.update(todoItem);
};

    Isso envia uma atualização de item ao serviço m´vel.

Teste o aplicativo com o seu novo serviço móvel

Agora que o aplicativo foi atualizado para usar os Serviços móveis para armazenamento de back-end, é hora de testar o aplicativo com Serviços móveis.

  1. No Visual Studio, pressione a tecla F5 para executar o aplicativo.
  2. Como feito antes, digite o texto em Inserir um TodoItem em seguida, clique em Salvar. Isso envia um novo item como uma inserção ao serviço móvel e o item é adicionado à coleção.
  3. Feche e reinicie o aplicativo. Observe que os dados adicionado são exibidos, depois de terem sido persistentes e depois recarregados a partir do serviço móvel.

Modificar a consulta para filtrar itens concluídos

Agora que o aplicativo está armazenando dados no Azure, modifique a consulta para filtrar itens concluídos nos resultados.

  1. No arquivo de script default.js, substitua o método RefreshTodoItems existente com o seguinte código que filtra itens concluídos:

    var refreshTodoItems = function () {
    // More advanced query that filters out completed items. 
    todoTable.where({ complete: false })
        .read()
        .done(function (results) {
            todoItems = new WinJS.Binding.List(results);
            listItems.winControl.itemDataSource = todoItems.dataSource;
        });
};

  2. Reinicie o aplicativo, verifique outro item na lista e escolha o botão Atualizar. Observe que o item selecionado agora desaparece da lista. Cada atualização resulta em tempo de resposta para o serviço móvel, que agora retorna os dados filtrados.

Resumo e próximas etapas

Agora, você sabe como usar os Serviços móveis para adicionar capacidades de dados remotas a um aplicativo existente Windows Store.

A seguir, vamos aprender como usar os Serviços móveis para adicionar a funcionalidade de notificação por push ao aplicativo da Windows Store: Início rápido: Adicionando notificações por push a serviços móveis.

Tópicos relacionados

Validar e modificar dados nos Serviçois móveis usando scripts do servidor

Refinar as consultas dos Serviços Móveis com paginação