Criar seu primeiro aplicativo com o 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 total para desenvolver e hospedar sua solução SPFx do lado do cliente. Você pode integrar sua solução 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 Teams Toolkit oferece apenas o recurso Tab em um aplicativo do Teams com Visual Studio Code e Estrutura do SharePoint. Os recursos de Extensão de Bot e Mensagem não estão disponíveis.
Pré-requisitos
Aqui está uma lista de ferramentas necessárias para criar e implantar seus aplicativos.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| Visual Studio Code | JavaScript ou TypeScript, ambientes de build. Use a versão mais recente. | |
| Kit de ferramentas do Teams | Uma extensão do Microsoft Visual Studio Code que cria um scaffolding de projeto para seu aplicativo. Use o Teams Toolkit v5. | |
| Node.js | Ambiente de runtime do JavaScript de back-end. Para obter mais informações, consulte Node.js tabela de compatibilidade de versão para o tipo de projeto. | |
| Microsoft Edge (recomendado) ou Google Chrome | Um navegador com ferramentas de desenvolvedor. | |
| Opcional | ||
| Microsoft Graph Explorer | O 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 Microsoft Teams Store. |
Dica
Se você trabalhar com dados do Microsoft Graph, saiba mais sobre e marque a Explorer do Microsoft Graph. Essa ferramenta baseada no navegador permite consultar 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 (chamada teamsfx).
Abra Visual Studio Code e selecione a exibição Extensões (Ctrl+Shift+X / ⌘⇧-X ou Exibir > Extensões).
Na caixa de pesquisa, insira kit de ferramentas do Teams.
Selecione Instalar ao lado do Kit de Ferramentas do Teams.
O ícone Kit de Ferramentas do Teams é exibido na Barra de Atividades Visual Studio Code depois de instalado.
Você também pode encontrar o Kit de Ferramentas do Teams no Visual Studio Code Marketplace.
Observação
A versão mais recente do Teams Toolkit é 4.2.0.
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ê carrega lateralmente e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.
Habilitar a opção 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 ao administrador? Vamos marcar se você realmente fizer isso!
Verifique se você pode carregar aplicativos de sideload no Teams:
No cliente do Teams, selecione Ícone de Armazenamento .
Selecione Gerenciar seus aplicativos.
Procure a opção para Carregar um aplicativo personalizado. Se você vir a opção, os aplicativos de sideload estarão habilitados.
Observação
Se o Teams não mostrar a opção de carregar um aplicativo personalizado, converse 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. Ingresse no 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 seguinte tela 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 de Coleção do SharePoint
Verifique se você tem uma conta de administrador para uma Coleção de Sites do SharePoint. Você precisa 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 que você criou 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 de projeto para seu aplicativo de guia
Este tutorial orienta você nas etapas para criar, compilar e implantar um aplicativo do Teams usando Estrutura do SharePoint SPFx. Este aplicativo terá uma funcionalidade de guia.
Neste tutorial, você aprenderá:
- Como configurar um novo projeto com o Teams Toolkit
- 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 estiverem em vigor, vamos começar!
Abra o Visual Studio Code.
Selecione o ícone Kit de
Ferramentas do Teams na Barra de Atividades Visual Studio Code.Selecione Criar um novo aplicativo.
Selecione Guia.
Selecione SPFx.
Selecione uma opção para scaffolding
Selecione React na seção Estrutura.
Selecione Inserir para aceitar o Nome da Web Part padrão.
Selecione sua pasta Workspace escolhendo sua pasta necessária.
Insira um nome de aplicativo adequado para seu aplicativo. 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 Teams Toolkit invoca a CLI do Yeoman para scaffold seu aplicativo 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 de Visual Studio Code.
O Kit de Ferramentas cria scaffolding para você no diretório do projeto para o recurso de guia.
Entre outros itens neste diretório, o Kit de Ferramentas do Teams contém:
- appPackage: contém os ícones
color.pngdo aplicativo eoutline.png. manifest.local.json: contém o manifesto do aplicativo para depuração local.manifest.json: contém o manifesto do aplicativo para publicação no Portal do Desenvolvedor para Teams..vscode/Settings.json: as configurações escolhidas ao criar o projeto.
Ao selecionar um projeto de Web Part do SPFx, os seguintes arquivos são relevantes para sua interface do usuário:
SPFx/src/webparts/{webpart}: contém sua Web Part do SPFx..vscode/launch.json: descreve as configurações de depuração disponíveis na paleta de depuração.
Criar seu aplicativo de guias
Depois de configurar o workspace do projeto com o Teams Toolkit, crie seu projeto de guia. Você precisa entrar na 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 que você configurou durante o registro é sua conta do Microsoft 365.
Abra o Visual Studio Code.
Selecione o ícone kit de
ferramentas do Teams na barra lateral.Selecione Entrar no M365.
Seu 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 Teams Toolkit no Visual Studio Code.
A seção ACCOUNTS da barra lateral mostra o nome da conta do Microsoft 365.
Agora você está pronto para criar o aplicativo e executá-lo 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 barra lateral Visual Studio Code.Selecione uma das seguintes opções para executar e depurar o aplicativo.
Workbench do Teams (Edge)
Workbench do Teams (Chrome)
Selecione o botão reproduzir ou selecione a chave 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 abre e carrega automaticamente 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 caixa de diálogo a seguir for exibida:
O cliente Web do Teams é aberto em uma janela do navegador.
Selecione Adicionar quando solicitado a sideload do aplicativo no Teams em seu computador local.
Selecione a versão do aplicativo Web, se você 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 da Web padrão.
Selecione Carregar scripts de depuração, se você for solicitado a carregar scripts de depuração antes que seu aplicativo seja sideload 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 do 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 no 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 no Visual Studio Code. Para este tutorial, é recomendável que você escolha depurar seu aplicativo com o workbench do Teams, no entanto, você pode escolher o workbench local para explorar layouts da 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, em seguida, implantá-lo para exibi-los.
Para explorar layouts da Web Part usando o workbench local:
Selecione Workbench local e 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 essa interface para experimentar layouts diferentes para web parts:
- Exibir Dados da Web Part para seu layout.
- Tente alterar entre layouts diferentes, texto, cor e muito mais.
- Use o botão Visualizar para exibir as Web Parts.
- Exibir o layout da Web Part em diferentes dispositivos Móveis ou Tablet .
- Salve ou descarte quaisquer alterações no layout para continuar tentando possíveis layouts.
Feche a janela do navegador para interromper a depuração de workbench local quando você estiver pronto.
Implantar seu primeiro aplicativo do 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 o recurso Tab no SharePoint usando o Teams Toolkit.
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 em CICLO DE VIDA.
O Kit de Ferramentas atualiza o progresso no canto inferior direito. Após alguns segundos, você pode ver o seguinte aviso:
Depois que o provisionamento for concluído, selecione Implantar em CICLO DE VIDA.
O pacote do aplicativo é criado 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 Teams Toolkit 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 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 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 para a home page Aplicativos. Siga o procedimento para distribuir o aplicativo no SharePoint.
Distribuir o pacote de aplicativos no SharePoint
Você pode encontrar o pacote de aplicativo carregado no site do SharePoint. Para distribuir o aplicativo e sincronizá-lo com o Teams:
Selecione Distribuir aplicativos para o SharePoint.
A home page Aplicativos para SharePoint é aberta. Seu aplicativo está listado nesta página.
Selecione a guia ARQUIVOS .
Selecione o pacote implantado e 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 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.
Comentários
Enviar e exibir comentários de