Início Rápido: criar a sua primeira aplicação com o VS Code

Aplica-se a: Programador

Utilize a extensão de Visual Studio Code do SharePoint Embedded para criar um tipo de contentor padrão para a sua primeira aplicação. A extensão também configura a aplicação proprietária, anexa Azure faturação e regista o tipo de contentor. Em seguida, crie um contentor e execute uma aplicação de exemplo local.

Este artigo inicia o percurso de criação. Para obter mais orientações de faturação, veja Criar e configurar um tipo de contentor.

Pré-requisitos

Antes de começar, certifique-se de que tem:

  • Visual Studio Code instalado.
  • Acesso administrativo a um inquilino do Microsoft 365.
  • Um inquilino com o SharePoint disponível.
  • Um Azure subscrição e grupo de recursos ao qual a sua conta pode aceder.
  • Permissões de Proprietário ou Contribuidor na subscrição do Azure.
  • Node.js e npm instalados para a aplicação de exemplo.
  • Permissão para conceder consentimento do administrador no Microsoft Entra ID.

Importante

Precisa de acesso administrativo a um inquilino do Microsoft 365. Se não tiver um inquilino, utilize o Programa para Programadores do Microsoft 365, a Experiência Digital do Cliente da Microsoft ou uma versão de avaliação Microsoft 365 E3.

Instale a extensão

  1. Abra o Visual Studio Code.
  2. Abra Extensões a partir da barra de atividade.
  3. Procure SharePoint Embedded.
  4. Selecione Instalar.
  5. Se a extensão já estiver instalada, atualize-a.
  6. Selecione o ícone do SharePoint Embedded na barra de atividade.

Entrar

  1. Na vista SharePoint Embedded, selecione a ação de início de sessão.
  2. Utilize uma conta de administrador do Microsoft 365.
  3. Autenticação completa no browser.
  4. Reveja as permissões pedidas.
  5. Selecione Aceitar para conceder consentimento do administrador.
  6. Volte a Visual Studio Code quando redirecionado.

Importante

Reveja cuidadosamente o pedido de consentimento. A extensão precisa de permissões de inquilino para configurar recursos de desenvolvimento.

Captura de ecrã a mostrar a vista de início de sessão do SharePoint Embedded no Visual Studio Code.

Depois de iniciar sessão, a extensão mostra a vista inicial do SharePoint Embedded.

Captura de ecrã a mostrar a vista principal do SharePoint Embedded no Visual Studio Code após o início de sessão. A vista lista as ações para criar um tipo de contentor e carregar uma aplicação de exemplo.

Criar um tipo de contentor padrão

Um tipo de contentor define a relação, os privilégios de acesso, a responsabilidade de faturação e os comportamentos selecionados para um conjunto de contentores do SharePoint Embedded.

  1. Selecione Criar Tipo de Contentor.
  2. Para o método de faturação, selecione padrão.
  3. Introduza um nome de tipo de contentor.
  4. Siga as instruções até que a criação seja concluída.

Captura de ecrã da caixa de entrada Visual Studio Code a pedir um nome de tipo de contentor durante o fluxo Criar Tipo de Contentor.

Utilize um tipo de contentor padrão quando a organização proprietária da aplicação pagar a utilização do SharePoint Embedded. Para avaliação, selecione avaliação. Para a faturação cliente-inquilino, escolha a opção pass-through, que utiliza a directToCustomer classificação de faturação.

Criar ou selecionar a aplicação proprietária

Cada tipo de contentor tem um proprietário Microsoft Entra ID aplicação.

  1. Crie uma nova aplicação Microsoft Entra ID ou selecione um ID de aplicação existente.
  2. Se criar uma nova aplicação, introduza o respetivo nome.
  3. Permita que a extensão configure as definições de desenvolvimento.

Captura de ecrã da caixa de entrada Visual Studio Code a pedir um Microsoft Entra ID nome da aplicação ao criar a aplicação proprietária para o tipo de contentor.

Cuidado

Se selecionar uma aplicação existente, a extensão atualiza a configuração dessa aplicação. Não utilize uma aplicação de produção para este início rápido. Para o modelo, veja Arquitetura da aplicação SharePoint Embedded.

Configurar a faturação padrão

Standard tipos de contentor requerem Azure faturação. A extensão anexa a faturação através de uma subscrição Azure e um grupo de recursos ao qual a sua conta pode aceder.

  1. Selecione uma subscrição Azure.
  2. Selecione um grupo de recursos.
  3. Aguarde que a extensão registe o fornecedor de recursos Microsoft.Syntex e anexe a faturação.

Se ignorar a configuração da faturação ou não tiver as permissões de Azure necessárias, a árvore mostra Que a faturação não está configurada. Para concluir a configuração mais tarde, clique com o botão direito do rato no tipo de contentor. Em seguida, selecione Anexar faturação.

Registar o tipo de contentor localmente

Tem de registar o tipo de contentor no inquilino que está a consumir para que a sua aplicação possa criar contentores ou aceder ao conteúdo.

  1. Após a criação, siga o pedido para registar o tipo de contentor no inquilino local.
  2. Se o pedido não estiver visível, clique com o botão direito do rato no tipo de contentor e selecione Registar.
  3. Reveja as permissões.
  4. Conceda o consentimento do administrador no browser.
  5. Regresse a Visual Studio Code. O registo configura as permissões que a aplicação proprietária pode utilizar em contentores do tipo de contentor.

Captura de ecrã a mostrar a extensão do SharePoint Embedded a pedir para registar o tipo de contentor no inquilino local, com a ação de registo realçada.

Criar o seu primeiro contentor

  1. Na árvore Do SharePoint Embedded, expanda o tipo de contentor.
  2. Clique com o botão direito do rato em Contentores.
  3. Selecione Criar contentor.
  4. Introduza um nome de contentor.
  5. Confirme que o contentor aparece na árvore.

Um contentor é a unidade de armazenamento básica e o limite de segurança no SharePoint Embedded.

Captura de ecrã da árvore Do SharePoint Embedded no Visual Studio Code. Um tipo de contentor é expandido, o nó Contentores é clicado com o botão direito do rato e o comando Criar contentor está selecionado.

Captura de ecrã da caixa de entrada Visual Studio Code a pedir um nome de contentor.

Carregar uma aplicação de exemplo

  1. Na vista SharePoint Embedded, selecione Carregar Aplicação de Exemplo.
  2. Escolha um exemplo do SharePoint Embedded.

Captura de ecrã da vista principal da extensão Do SharePoint Embedded com a ação Carregar Aplicação de Exemplo selecionada para estruturar uma aplicação de exemplo.

  1. Reveja o aviso sobre os segredos de texto simples local.

  2. Se lhe for pedido para criar um segredo do cliente, selecione OK para desenvolvimento local.

  3. Permita que a extensão preencha o ficheiro de configuração do runtime.

Importante

A configuração de exemplo destina-se apenas ao desenvolvimento. Armazena segredos de autenticação em texto simples no seu computador local.

Executar a aplicação de exemplo

Abra um terminal e execute a aplicação de exemplo a partir do diretório de exemplo gerado.

cd [your-path]\SharePoint-Embedded-Samples\Custom Apps\boilerplate-typescript-react
npm run start

O exemplo é iniciado:

  • Uma aplicação cliente React.
  • Um servidor de aplicações Azure Functions.

Aguarde que ambas as saídas da consola sejam apresentadas.

Depois:

  1. Abra http://localhost:8080.
  2. Inicie sessão com a mesma conta de administrador do Microsoft 365.
  3. Selecione Contentores na home page.
  4. Crie contentores e carregue ficheiros a partir da IU de exemplo.

Observação

O arranque inicial pode demorar vários minutos enquanto as dependências são instaladas e ambas as aplicações são criadas.

Resolver problemas de arranque

Sintoma Verificar
Conflito de portas A aplicação tenta a próxima porta disponível quando a porta 8080 está a ser utilizada.
As dependências falham Execute npm installe, em seguida, execute npm run start novamente.
Erro de autenticação Confirme que a aplicação Microsoft Entra ID tem os URIs de redirecionamento esperados.
Acesso negado Confirme o registo e o consentimento do administrador com êxito.
Faturação não configurada Confirme que tem permissões de Proprietário ou Contribuidor na subscrição Azure selecionada e, em seguida, utilize Anexar faturação.

Limpar

Quando terminar o teste:

  1. Remova os contentores de teste de que já não precisa.
  2. Reveja Azure recursos de faturação que criou para este início rápido.
  3. Remova os segredos de exemplo locais que já não são necessários.

Próximas etapas

Saiba mais sobre as opções de tipo de contentor em Criar e configurar um tipo de contentor.