Geral SharePoint

Configurando Yeoman e Gulp e criando a primeira webpart com o SharePoint Framework (Parte 2)

Olá Pessoal!

Vamos continuar nossa série com a segunda parte sobre como podemos criar a nossa primeira webpart com SharePoint Framework utilizando o Yeoman e o Gulp (caso você não tenha visto a primeira ainda clique aqui e se você quer saber mais sobre o que é o SharePoint Framework, clique aqui).

No último post, paramos no momento em que nossa solução fora criada e a partir de agora então vamos ver como abrir essa solução no Visual Studio Code, conhecer um pouco da estrutura criada pelo Yeoman SharePoint generator e como rodar ela a partir do Gulp para testarmos nossa webpart.

Vamos abrir o Visual Studio Code:

1

Vá em File > Open Folder e procure a pasta que criamos para nossa solução no post anterior e clique em Selecionar Pasta:

2

O código de nossa webpart, como comentei anteriormente, foi gerado em Typescript, facilitando para os desenvolvedores que vem de linguagens server side a curva de aprendizado de forma mais simples e fluida.

Os arquivos da nossa webpart estão na pasta src > webparts > nomedaminhawebpart (no meu caso o nome é primeiraWebPart):

3

Em posts mais pra frente entenderemos para que serve cada um dos arquivos da nossa solução, mas a princípio vamos apenas rodar a aplicação para visualizarmos como funciona o build pelo Gulp e como podemos simular o visual mobile first e desenvolvimento offline no SharePoint Framework.

O arquivo que vamos precisar ver para rodarmos nossa aplicação, é o arquivo .ts (extensão do typescript) que tem o nome de nossa webpart (no meu exemplo, o arquivo é o PrimeiraWebPart.ts).

4

Como vocês podem ver, no método render() o código constrói um HTML que será uma espécie de HelloWorld da nossa webpart, e o coloca no elemento da página, assim, quando nossa webpart for adicionada, ele irá adicionar esse html ao conteúdo.

Fique à vontade para alterar esse html para você testar! 🙂

Agora, para testarmos nossa webpart, vamos voltar ao NodeJS command prompt e executar o seguinte comando:

gulp serve

Esse comando fará com que o gulp faça uma espécie de build da nossa aplicação para rodá-la no nosso servidor local NodeJS. O interessante desse recurso é que se tivermos algum erro de sintaxe na nossa aplicação, enquanto está rodando o build ele irá acusar. Show né!?

11

Após o final da execução (e na primeira vez costuma demorar mais) seu navegador irá abrir com uma página localhost e a primeiro momento ele vai dar tela de segurança por se tratar de uma página https, mas basta entrar no link de Avançado e prosseguir com o acesso.

6

Você verá que ele irá criar uma tela bem parecida com a do SharePoint, inclusive com o mesmo menu de contexto do Office 365 superior, porém apenas como um exemplo! Isso se dá justamente para que você possa usar o mesmo conceito visual (utilizando o Office UI para manter a identidade visual) do SharePoint e construir sua webpart testando a questão mobile antes mesmo de fazer a publicação no ambiente final.

7

Agora basta ir no botão de “+” e procurar pela sua webpart:

8

Pronto! sua webpart já está na página com o HTML que comentei com vocês mais acima. Você pode trocar as exibições para ver como sua webpart vai se comportar tanto para mobile quanto para Tablet clicando nos botões na parte superior direita da página.

9 10

Vale lembrar que dessa forma você está utilizando o seu computador local para testar sua webpart, totalmente apartado do SharePoint, awesome, não!?

Com isso podemos fazer todo o desenvolvimento nesse modelo, utilizando classes mocks no nosso código para emular conteúdo e posteriormente publicar isso em nosso ambiente SharePoint.

Bom, é isso pessoal, agora vocês já criaram um HelloWorld utilizando o SharePoint Framework e na parte 3 dessa série veremos como testar essa webpart nossa rodando localmente mas visualizando ela já dentro do SharePoint.

Até a próxima!

Anúncios

2 comentários

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.