Meu Primeiro App para o Excel

O novo Office já está aí e com ele o novo conceito de customizações baseado em apps, seguindo o mesmo modelo de outros produtos como Windows, Windows Phone e SharePoint vem seguindo.

Neste post vou mostrar como criar um app para o Excel.

Os scripts e telas foram alterados para ter uma melhor legibilidade aqui no post e tem objetivos de ilustração, um código real deve ser mais enxuto e com melhor qualidade. Algumas funções foram simplesmente copiadas da internet (ver referências) e coladas no projeto.

Este app tem como objetivo buscar por uma hastag no twitter e mostrar os últimos 100 tweets. A forma de exibição do resultado será na forma de um painel no Excel e dentro das células do Excel, na forma de uma tabela. Este app não tem como objetivo mostrar a integração com o twitter ou ser um modelo de app, estou apenas demonstrando como criar de forma simples uma app que consome dados de algum lugar e exibe esses dados ao usuário do Excel.

O primeiro passo é criar o projeto de app para o Office 2013 conforme a imagem 01 – se este tipo de projeto não estiver aparecendo no seu Visual Studio 2012, baixe o Microsoft Office Developer Tools for Visual Studio 2012 RTM através do Microsoft Web Installer Plataform.

TweetExcelApp-05

Imagem 01: Criando o projeto da app para o Office 2013

 

Na tela exibida na imagem 02, selecione a opção Task pane app in e selecione o Excel. Veja que existem várias opções: também pode ser uma app de Word ou Project, pode ser do tipo Task Pane, Content ou ainda Mail App(Outlook). Mas vamos focar apenas no Excel.

TweetExcelApp-06

Imagem 02: Criando um app para o Excel 2013

 

Após a estrutura da app ser criada, a janela do Solution Explorer ficará conforme a imagem 03, onde existem 2 projetos, o do app com o manifesto e o appweb com todos os arquivos e fontes do projeto. Repare que o tipo de projeto aqui é um projeto web, ou seja, vamos trabalhar com html, javascript e css.

A estrutura do projeto web é a seguinte:

  • Content: armazena os arquivos de estilo do app;
  • Images: armazena as imagens do app;
  • Pages: páginas da app, é no arquivo App1.html que vamos configurar o html que será exibido;
  • Scripts: armazena os scripts do app, é no arquivo App1.js que vamos colocar os nossos scripts javascripts.

TweetExcelApp-02

Imagem 03: Visualizando a estrutura da solução

 

Abra o arquivo de manifesto chamado App1.xml, nele teremos a descrição do app. Neste exemplo alterei as propriedades DisplayName e Description, para o app ficar melhor apresentado no Excel.

TweetExcelApp-03

Imagem 04: Alterando o manifesto do app

 

O próximo passo é alterar o html no arquivo App1.html, copie o código da listagem 01 e sobrescreva pelo código gerado pelo Visual Studio. Neste código temos a referência aos arquivos de scripts, alguns estilos (que não deveria estar aqui e sim nos arquivos de estilos), chamada de funções javascript e o código html para fazer isso tudo funcionar.

<!DOCTYPE html>
<html>
<head>
    <title>HashTag Retrieval</title>
    <script src=”../Scripts/jquery-1.6.2.js”></script>
    <script src=”../Scripts/Office/MicrosoftAjax.js”></script>
    <script src=”../Scripts/Office/Office.js”></script>
    <script src=”../Scripts/App1.js”></script>
    <style>
        #result {
            margin: 0 auto;
            width: 1000px;
            background: #CCC;
            border-radius: 5px;
        }

        #tweetText {
            vertical-align: top;
        }
    </style>
    <script>
        BuscarHastTagTweets();
    </script>
</head>
<body>
    <input type=”text” value=”sharepoint” id=”hash_tag_input” size=”40″>
    <input type=”button” id=”trigger_but” value=”Buscar Tweets” />
    <div id=”result”></div>
</body>
</html>

Listagem 01: Arquivo App1.html

 

Agora edite o arquivo App1.js, copie o código da listagem 02 e sobrescreva pelo código existente no arquivo. Neste código temos 3 funções javascript:

  • Office.initialize: está inicializando o objeto do Office, é obrigatório e pode ter código de inicialização dentro dele;
  • BuscarHashTagTweets: função busca os dados do twitter e monta o resultado em um array para enviar para a função de impressão no Excel. A variável htmlResult serve para exibir o conteúdo na task panel e a variável dadosMatriz para exibir o conteúdo diretamente nas células do Excel;
  • writeMatrix: imprime a tabela no Excel utilizando funções javascipt do próprio Excel.

//// Add any initialization logic to this function.
Office.initialize = function (reason) {

}

function BuscarHastTagTweets() {
    $(document).ready(function () {
        $(‘#trigger_but’).click(function () {
            $.getJSON(“http://search.twitter.com/search.json?rpp=100&callback=?&q=%23
                 + $(‘#hash_tag_input’).val(), function (data) {

                     var dadosMatriz = new Array();
                     dadosMatriz.push(
                         new Array(
                            “Usuário”,
                            “Nome”,
                            “Horário”,
                            “Mensagem”));

                     var htmlResult;

                     for (var i = 0; i < data.results.length; i++) {

                         htmlResult = ‘<div class=”twseet”><img src=”‘;
                         htmlResult = htmlResult + data.results[i].profile_image_url;
                         htmlResult = htmlResult + ‘” width=”50″ height=”60″/>”‘;
                         htmlResult = htmlResult + ‘<span id=”tweetText”>’;
                         htmlResult = htmlResult + data.results[i].text;
                         htmlResult = htmlResult + ‘</span></div>’;

                         $(‘#result’).append(htmlResult);

                         dadosMatriz.push(
                             new Array(
                                data.results[i].from_user,
                                data.results[i].from_user_name,
                                data.results[i].created_at,
                                data.results[i].text
                             ));
                     }

                     writeMatrix(dadosMatriz);
                 });
        });
    });
}

function writeMatrix(myMatrix) {
    Office.context.document.setSelectedDataAsync(
        myMatrix,
        { coercionType: “matrix” },
        function (asyncResult) {
            var error = asyncResult.error;
            if (asyncResult.status === “failed”) {
                write(error.name + “: ” + error.message);
            }
        });
}

Listagem 02: Arquivo App1.js

 

A imagem 05 mostra as propriedades dos tweets que foram obtidos do Twitter, elas podem ser utilizadas para mostrar mais campos dos que eu selecionei para mostrar no app.

TweetExcelApp-01

Imagem 05: Propriedades dos tweets

 

Como estamos no Visual Studio, pressione F5 (ou a tecla configurada para debugar o app) e aguarde o Excel abrir. Informe a hastag e clique em Buscar Tweets, repare que o painel será preenchido com a foto e a mensagem do usuário e as células do Excel com o usuário, nome, horário e mensagem, conforme mostra a imagem 06.

TweetExcelApp-04

Imagem 06: Executando o app

 

Como o app é feito todo baseado em tecnologia web, este mesmo app pode ser executado no Excel 2013 ou no Office Web Apps (Excel Online) e ter o mesmo comportamento.

O Office 2013 realmente trouxe muitas novidades, principalmente para os desenvolvedores que agora podem trabalhar com outro tipo de customização. Achei a criação de apps para o Office muito simples, basta conhecer a API javascript e ser familizarizado com desenvolvimento web, o que é comum no mercado de desenvolvimento, independente da tecnologia.

Este app não serve para muita coisa, além de demonstrar alguns recursos que podem ser utilizadas em apps de verdade.

Este app poderia ter sido desenvolvido no navegador ao invés do Visual Studio, veja o post Desenvolvendo Apps Online para o SharePoint 2013.

Gostaria de agradecer o meu amigo Milton Filho que me ajudou com algumas rotinas javascript, ele manja muito do assunto.

 

Referências

Anúncios

2 Respostas to “Meu Primeiro App para o Excel”

  1. Pedro Marques Says:

    Fabian, muito bom o artigo, mas fiquei com uma dúvida: Uma vez feito o app como faço para utilizar em minhas planilhas? como fazer o deploy?


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: