Geral SharePoint Tecnologia

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

Olá Pessoal!

Vamos continuar falando sobre o SharePoint Framework (se quiser saber mais sobre o SharePoint Framework, acesse o link do post que fiz explicando o que é), agora explicando como configurar o ambiente para poder trabalhar com esse poderoso framework utilizando as ferramentas OpenSource do Yeoman e Gulp para rodar o nosso Typescript em um servidor NodeJS e desenvolvendo na IDE do Visual Studio Code, ou seja, vamos trabalhar completamente com ferramentas OpenSource fazendo uma webpart simples no SharePoint.

   

Vamos lá?

Preparando o ambiente

Primeiro você precisa instalar o NodeJS na sua máquina na versão NodeJS Long Term Support (LTS) v4.x.x, que você pode baixar clicando aqui.

Após a instalação do NodeJS e continuando com o nosso processo processo de configuração, vamos agora abrir o NodeJS command prompt para começar a instalar os pacotes necessários para trabalharmos com o Gulp e o Yeoman.

1

Instalando o Yeoman e o Gulp

Com o Yeoman, teremos um recurso que nos ajudará a criar um projeto de webpart de forma simples e rápida, com toda a estrutura que precisamos para o desenvolvimento no SharePoint Framework e com o gulp temos um automatizador de tarefas para nos auxiliar nas builds e testes de nossa aplicação.

Para instalar o Yeoman e o Gulp, na janela do NodeJS command prompt, digite o seguinte comando:

npm i -g yo gulp
2
Instalando o Yeoman SharePoint generator

Agora, vamos instalar o recurso do Yeoman que vai nos possibilitar criar a estrutura do projeto SharePoint.

Para instalar o Yeoman SharePoint Generator, na janela do NodeJS command prompt, digite o seguinte comando:

npm i -g @microsoft/generator-sharepoint 

3

Pronto! Agora vamos instalar a nossa IDE de desenvolvimento, e vamos utilizar o Visual Studio Code, que é uma ferramenta opensource da Microsoft para desenvolvimento.

Você pode baixá-lo utilizando esse link: http://code.visualstudio.com/

*Lembrando que você pode utilizar outras IDE´s para o desenvolvimento

CRIANDO A ESTRUTURA DA NOSSA WEBPART

Agora, vamos começar a criar a estrutura da nossa primeira webpart utilizando o Yeoman, para isso, ainda na tela do NodeJS command prompt, navegue até a pasta que deseja criar o seu projeto e digite o seguinte comando:

yo @microsoft/sharepoint

O Yeoman irá fazer perguntas para nós, auxiliando assim a criação da nossa solution para desenvolvimento no SharePoint Framework.

A primeira das perguntas é qual o nome da nossa solução. Digite o nome que deseja para sua solução (em meu exemplo, vou colocar como minha-primeira-webpart com default)

4

Depois ele irá perguntar se você deseja utilizar a pasta atual para a criação dos arquivos da solução ou se deseja criar em uma subpasta.

5

Após isso, ele irá perguntar qual o nome da sua webpart. (no meu exemplo, vou chamá-la de PrimeiraWebPart)

6

Depois ele irá perguntar qual a descrição da webpart. (esse campo não é obrigatório)

Após isso, ele irá perguntar se você gostaria de utilizar algum framework javascript para iniciar (Knockout ou React) ou se você não deseja utilizar nenhum framework. (no meu exemplo não vou utilizar nenhum framework)

7

Após isso ele irá criar toda a estrutura da sua webpart:

8

Ao final da criação, ele mostrará uma mensagem de parabéns, e daí então já estamos prontos para começar a desenvolver nossa WebPart!

9

Na segunda parte desse post começaremos o desenvolvimento da webpart no Visual Studio code e veremos como o gulp e o VS Code nos ajudarrão tanto a fazer o build da nossa aplicação como a testar nossa webpart no SharePoint Online, aguarde!

Referências:

https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment

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.