Criar seu primeiro aplicativo com SPFx
A Estrutura do SharePoint (SPFx) é um modelo de desenvolvimento para criar soluções do lado do cliente para o Microsoft Teams e o SharePoint. Seu aplicativo SPFx Teams está hospedado no Microsoft 365. Ele fornece suporte completo para desenvolver e hospedar sua solução SPFx do lado do cliente. Você pode integrar sua Estrutura do SharePoint com:
- Dados do SharePoint e estender o Microsoft Teams.
- Suas APIs de negócios protegidas com o Azure Active Directory.
Para este tutorial, inicie o desenvolvimento de aplicativos do Microsoft Teams com o SPFx criando seu primeiro aplicativo com uma funcionalidade de guia.
Observação
Atualmente, o Kit de Ferramentas do Teams oferece apenas a funcionalidade Tab em um aplicativo do Teams com Visual Studio Code e Estrutura do SharePoint. Os recursos bot e extensão de mensagem não estão disponíveis.
Pré-requisitos
Aqui está uma lista de ferramentas que você precisará para criar e implantar seus aplicativos.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| Microsoft Edge (recomendado) ou Google Chrome | Um navegador com ferramentas de desenvolvedor. | |
| Visual Studio Code | Ambientes de compilação JavaScript, TypeScript ou Estrutura do SharePoint (SPFx). Use a versão 1.55 ou posterior. | |
| Kit de ferramentas do Teams | Uma Visual Studio Code que cria um scaffolding de projeto para seu aplicativo. Use a versão 4.0.0. | |
| Node.js | Ambiente de runtime do JavaScript de back-end. Use a Node.js versão 12 ou 14 LTS. | |
| Opcional | ||
| Microsoft Graph Explorer | Microsoft Graph Explorer, uma ferramenta baseada em navegador que permite executar uma consulta de dados do Microsoft Graph. | |
| Portal do Desenvolvedor do Teams | Portal baseado na Web para configurar, gerenciar e distribuir seu aplicativo do Teams, inclusive para sua organização ou para a loja do Teams. |
Dica
Se você trabalha com dados do Microsoft Graph, deve aprender e marcar o Explorador do Microsoft Graph. Essa ferramenta baseada em navegador permite que você consulte o Microsoft Graph fora de um aplicativo.
Preparar o ambiente de desenvolvimento
Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.
Instalar o Kit de Ferramentas do Teams
O Kit de Ferramentas do Teams ajuda a simplificar o processo de desenvolvimento com ferramentas para provisionar e implantar recursos de nuvem para seu aplicativo, publicar na loja do Teams e muito mais. Você pode usar o kit de ferramentas com Visual Studio Code, Visual Studio ou como uma CLI (chamadateamsfx).
Abra Visual Studio Code e selecione o modo de exibição Extensões (Ctrl+Shift+X / ⌘⇧-X ou Exibir > Extensões).
Na caixa de pesquisa, insira o Kit de Ferramentas do Teams.
Selecione Instalar ao lado do Kit de Ferramentas do Teams.
O ícone do Kit de Ferramentas do Teams aparece Visual Studio Code barra lateral após sua instalação.
Você também pode encontrar o Kit de Ferramentas do Teams no Visual Studio Code Marketplace.
Configurar seu locatário de desenvolvimento do Teams
Um locatário é como um espaço ou um contêiner para sua organização no Teams, onde você conversa, compartilha arquivos e executa reuniões. Esse espaço também é onde você faz sideload e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.
Habilitar a opção de sideload
Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Esse processo é conhecido como sideload. Entre em sua conta do Microsoft 365 para exibir essa opção.
Observação
O sideload é necessário para visualizar e testar aplicativos no ambiente local do Teams. Se ele não estiver habilitado, você não poderá visualizar e testar seu aplicativo no Teams localmente.
Você já tem um locatário e tem acesso de administrador? Vamos verificar se você realmente faz!
Verifique se você pode fazer sideload de aplicativos no Teams:
No cliente do Teams, selecione o ícone da Loja.
Selecione Gerenciar seus aplicativos.
Procure a opção para carregar um aplicativo personalizado. Se você vir a opção, o sideload de aplicativos estará habilitado.
Observação
Se o Teams não mostrar a opção de carregar um aplicativo personalizado, fale com o administrador do Teams.
Criar um locatário de desenvolvedor gratuito do Teams (opcional)
Se você não tiver uma conta de desenvolvedor do Teams, poderá obtê-la gratuitamente. Participe do programa de desenvolvedor do Microsoft 365!
Selecione Ingressar Agora e siga as instruções na tela.
Na tela de boas-vindas, selecione Configurar assinatura do E5.
Configurar a conta de administrador. Depois de concluir, a tela a seguir será exibida:
Entre no Teams usando a conta de administrador que você acabou de configurar. Verifique se você tem a opção Carregar um aplicativo personalizado no Teams.
Conta do Administrador do Site do Conjunto do SharePoint
Verifique se você tem uma conta de Administrador para um Conjunto de Sites do SharePoint. Você precisará dessa conta na implantação para hospedagem. Se você estiver usando um locatário do programa de desenvolvedor do Microsoft 365, poderá usar a conta de administrador criada no momento.
Agora você tem todas as ferramentas e configurou sua conta. Em seguida, vamos configurar seu ambiente de desenvolvimento e começar a criar!
Criar workspace do projeto para seu aplicativo guia
Este tutorial orienta você pelas etapas para criar, compilar e implantar um aplicativo teams usando Estrutura do SharePoint SPFx. Esse aplicativo terá uma funcionalidade de guia.
Neste tutorial, você aprenderá:
- Como configurar um novo projeto com o Kit de Ferramentas do Teams
- Sobre a estrutura de diretório do seu aplicativo
Importante
Antes de começar a criar o workspace do projeto, verifique se você não está conectado a nenhuma conta do Microsoft 365 ou do Azure.
Criar seu projeto
Se os pré-requisitos estão em vigor, vamos começar!
Abra o Visual Studio Code.
Selecione o ícone do Kit de Ferramentas do Teams
na barra Visual Studio Code lateral.Selecione Criar um novo aplicativo do Teams.
Selecione Criar um novo aplicativo do Teams.
Selecione a guia (SPFx).
Selecione React na seção Estrutura.
Selecione Enter para aceitar o Nome da Web Part padrão.
Insira um nome adequado para seu aplicativo, como
HelloWorld. Verifique se o nome do aplicativo é alfanumérico. Selecione Enter.
Selecione a pasta workspace escolhendo a pasta necessária.
Insira um nome de aplicativo adequado para seu aplicativo, como
HelloWorld. Pressione Enter.
Depois que seu aplicativo é criado, o Kit de Ferramentas do Teams exibe a seguinte mensagem:
Selecione Depuração local para visualizar seu projeto.
O Kit de Ferramentas do Teams invoca a CLI do Yeoman para estruturar seu aplicativo do Teams e instalar as dependências necessárias no processo.
O scaffolding leva alguns minutos.
Uma recapitulação rápida da criação de um aplicativo do Teams.
Faça um tour pelo código-fonte
Após a criação do projeto, você tem os componentes para criar um aplicativo pessoal básico. Você pode exibir os diretórios e arquivos do projeto na área explorer do Visual Studio Code.
O Kit de Ferramentas cria scaffolding para você no diretório do projeto para a funcionalidade de guia.
Entre outros itens neste diretório, o Kit de Ferramentas do Teams contém:
fx: o estado do aplicativo no.fxdiretório.- modelos/recursos: contém os ícones do aplicativo e
color.pngoutline.png. manifest.local.template.json: contém o manifesto do aplicativo para depuração local.manifest.remote.template.json: contém o manifesto do aplicativo para publicação no Portal do Desenvolvedor para Teams..fx/configs/projectSettings.json: as configurações que você escolheu ao criar o projeto.
Conforme você selecionou um projeto de Web Part SPFx, os seguintes arquivos são relevantes para sua interface do usuário:
SPFx/src/webparts/{webpart}: contém sua Web Part SPFx..vscode/launch.json: descreve as configurações de depuração disponíveis na paleta de depuração.
Criar seu aplicativo guia
Depois de configurar o workspace do projeto com o Kit de Ferramentas do Teams, crie seu projeto de guia. Você precisará entrar em sua conta do Microsoft 365.
Nesta página, você aprenderá a criar e executar seu primeiro aplicativo.
Entre em sua conta do Microsoft 365
Use sua conta do Microsoft 365 para entrar no Teams. Se você estiver usando um locatário do programa de desenvolvedor do Microsoft 365, a conta de administrador configurada durante o registro será sua conta do Microsoft 365.
Abra o Visual Studio Code.
Selecione o ícone do Kit de Ferramentas do
Teams na barra lateral.Selecione Entrar no M365.
O navegador da Web padrão é aberto para permitir que você entre na conta.
Entre em sua conta do Microsoft 365 usando suas credenciais.
Feche o navegador quando solicitado e retorne ao Visual Studio Code.
Retorne ao Kit de Ferramentas do Teams dentro Visual Studio Code.
A seção ACCOUNTS da barra lateral mostra o nome da sua conta do Microsoft 365.
Agora você está pronto para compilar o aplicativo e execute-o localmente!
Compilar e executar seu aplicativo localmente em Visual Studio Code
Para compilar e executar seu aplicativo localmente:
Selecione o ícone Executar e Depurar
na Visual Studio Code lateral.Selecione uma das opções a seguir para executar e depurar o aplicativo.
Teams workbench (Edge)
Teams workbench (Chrome)
Selecione o botão reproduzir ou selecione a tecla F5 para iniciar a depuração.
Observação
Quando você executa o aplicativo pela primeira vez, todas as dependências são baixadas e o aplicativo é criado. Uma janela do navegador é aberta automaticamente e carrega o SharePoint Workbench quando o build é concluído. Esse processo pode levar alguns minutos para ser concluído.
O Kit de Ferramentas pode solicitar que você instale um certificado local, se necessário. Esse certificado permite que o Teams carregue seu aplicativo a partir de
https://localhost.Selecione Sim quando a seguinte caixa de diálogo for exibida:
O cliente Web do Teams é aberto em uma janela do navegador.
Selecione Adicionar quando solicitado a realizar sideload do aplicativo no Teams em seu computador local.
Selecione a versão do aplicativo Web, se for solicitado a mudar para a área de trabalho do Teams. Você pode ver o código HTML, CSS e JavaScript em um ambiente de desenvolvimento web padrão.
Selecione Carregar scripts de depuração, se for solicitado que você carregue scripts de depuração antes do sideload do aplicativo no Teams.
Parabéns, seu primeiro aplicativo está em execução no Teams!
Seu aplicativo agora deve estar em execução. Você pode depurar o aplicativo como qualquer outra Web Part SPFx (como definir pontos de interrupção).
Dica
Tente colocar pontos de interrupção no método de renderização e SPFx/src/webparts/{webpart}/{webpart}.ts recarregar a janela do navegador. Visual Studio Code parar em pontos de interrupção em seu código.
Saiba o que acontece quando você usa o Workbench Local para depurar seu aplicativo.
O workbench local é a opção padrão para executar e depurar um aplicativo Visual Studio Code. Para este tutorial, é recomendável que você opte por depurar seu aplicativo com o Workbench do Teams, no entanto, você pode escolher o Workbench local para explorar layouts de Web Part.
Observação
Essa interface destina-se apenas a explorar como uma Web Part pode aparecer em um celular ou tablet. Você precisaria escrever o código para incluí-los em seu aplicativo e implantá-lo para exibi-los.
Para explorar layouts de Web Part usando o workbench local:
Selecione Workbench local e, em seguida, selecione F5 para executar e depurar o aplicativo.
O SharePoint Web Part Workbench é aberto no navegador para permitir que você adicione, edite e remova Web Parts.
Selecione Adicionar Web Part na coluna um + ícone para adicionar sua Web Part.
Selecione sua Web Part no menu.
Selecione Adicionar uma nova seção + ícone para escolher o layout da coluna para suas Web Parts.
Use esta interface para experimentar layouts diferentes para Web Parts:
- Exibir dados de Web Part para seu layout.
- Tente alterar entre diferentes layouts, texto, cor e muito mais.
- Use o botão Visualizar para exibir as Web Parts.
- Exiba o layout da Web Part em diferentes dispositivos Móveis ou Tablets .
- Salve ou descarte as alterações no layout para continuar tentando layouts possíveis.
Feche a janela do navegador para interromper a depuração do workbench local quando estiver pronto.
Implantar seu primeiro aplicativo teams
Você aprendeu a criar, compilar e executar o aplicativo Teams com a funcionalidade Tab. A etapa final é implantar seu aplicativo.
Vamos implantar o primeiro aplicativo com a funcionalidade Tab no SharePoint usando o Kit de Ferramentas do Teams.
Nesta página, você aprenderá a:
Implantar sua extensão no SharePoint
Verifique se existe um Catálogo de Aplicativos do SharePoint em sua implantação. Se ele não existir, crie um. Pode levar até 15 minutos para que o catálogo de aplicativos seja criado.
Abra o Visual Studio Code.
Selecione o Kit de Ferramentas do Teams na barra lateral selecionando o ícone do Teams.
Selecione Provisionar na Nuvem.
O Kit de Ferramentas atualiza o progresso no canto inferior direito. Após alguns segundos, você verá o seguinte aviso:
Após a conclusão do provisionamento, selecione Implantar na nuvem.
O pacote do aplicativo é compilado e carregado no site do SharePoint. O Kit de Ferramentas do Teams exibe uma mensagem com o caminho local em que o pacote do aplicativo é salvo.
Depois que o pacote é criado, o Kit de Ferramentas do Teams exibe uma mensagem com a URL do site do SharePoint em que o pacote do aplicativo foi carregado.
Você pode publicar no Teams ou selecionar o site do SharePoint.
- Publicar no Teams (#publish para equipes)
- Selecione o link do site do SharePoint (#select-the-link-of-the-sharepoint-site)
Publicar no Teams
Selecione Publicar no Teams.
Selecione Administração portal.
Selecione Gerenciar Aplicativos e pesquise seu aplicativo na seção de pesquisa para selecionar seu aplicativo.
Selecione Publicar para publicar seu aplicativo no Teams.
Abra o aplicativo Teams (ou entre em
https://teams.microsoft.com).Selecione o ponto triplo na barra lateral e selecione Todos os aplicativos.
O aplicativo é exibido nos Aplicativos criados para sua categoria de organização. Você pode adicionar o aplicativo a partir daí.
Selecione seu aplicativo e, em seguida, selecione Adicionar.
Parabéns! Seu aplicativo agora é adicionado ao Teams.
"
Selecione o link do site do SharePoint
Selecione o link do site do SharePoint.
O site do SharePoint é aberto na home page aplicativos. Siga o procedimento para distribuir o aplicativo no SharePoint.
Distribuir o pacote do aplicativo no SharePoint
Você encontrará o pacote do aplicativo carregado no site do SharePoint. Para distribuir o aplicativo e sincronize-o com o Teams:
Selecione Distribuir aplicativos para SharePoint.
A home page dos Aplicativos para SharePoint é aberta. Seu aplicativo está listado nesta página.
Selecione a guia ARQUIVOS .
Selecione o pacote implantado e, em seguida, selecione Sincronizar com o Teams.
Observação
O processo sincronizar com o Teams pode levar alguns minutos. Você verá uma mensagem no navegador indicando que o aplicativo foi sincronizado com êxito com o Teams.
Abra o aplicativo Teams (ou entre em
https://teams.microsoft.com).Selecione o ponto triplo na barra lateral e selecione Todos os aplicativos.
O aplicativo será colocado nos Aplicativos criados para sua categoria de organização. Você pode adicionar o aplicativo a partir daí.
Selecione seu aplicativo e, em seguida, selecione Adicionar.
Parabéns! Seu aplicativo agora é adicionado ao Teams.
"
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.