Cria a tua primeira webpart com SPFx em menos de 10 minutos

  Olá a todos!

Neste artigo, vou explicar passo a passo como podem criar a vossa primeira webpart utilizando o SharePoint Framework e como a podem publicar num site SharePoint.

---

1. Criação de webpart

1. Existem 5 requisitos principais para se poder se poder criar uma webpart 
1. Node.js instalado
1. Se viram o video sobre  como instalar o NVM então já o devem ter instalado
2. A versão recomendada para um novo projeto com a Versão corrente de SPFX (1.21) é a latest version 22.16.0
2. Conta com acesso ao SharePoint para poder testar e fazer deploy
1. Se seguiram o video de como criar um developer tenant até ao fim já têm o ambiente criado, só precisam de um site de SharePoint
3. Yeoman e gerador SPFx
1. Pacotes para poder gerar a solução 
2. comandos
1. npm install yo --global
2. npm install @microsoft/generator-sharepoint --global
4. Gulp
1. Serve para compilar a solução
2. comandos
1. npm install gulp-cli --global
5. VS code
1. É editor que recomendo para editar o vosso projeto, tem muitas extensões úteis
2. https://code.visualstudio.com/
2. Após o setup terminado, abrimos o powershell e colocamos-nos onde queremos criar o projeto
3. Criamos uma pasta, que é onde irá ficar toda a informação do projeto
1.  md aminha1webpart
4. mudamos para essa pasta
1. cd .\aminha1webpart\
5. Corremos o comando e preenchemos os campos como vemos abaixo
1. yo @microsoft/sharepoint
2. solution name: aminhasolucao
3. tipo de componente: webpart
4. template: React

6. Após selecionar o template o projeto irá ser criado, quando o processo terminar, para abrir o projeto no VS code, corremos 
1. code .
7. Estrutura do projeto
1. pasta src
1. .vscode/
1. Configurações específicas do Visual Studio Code.
2. Pode conter configurações de debug, linting, etc.
2. config/
1. Contém arquivos de configuração para build, como:
2. config.json, serve.json, write-manifests.json
1. Define como o SPFx constrói, corre e empacota o projeto.
3. node_modules/
1. Diretório padrão do Node.js com todas as dependências do projeto.
2. Gerado automaticamente pelo npm install.
4. src/
1. Contém o código-fonte principal do projeto SPFx.
2. contem as webparts e os componentes
8. Antes de arrancar a solução recomendo irmos ao ficheiro, ./config/serve.json e substituir o valor da propriedade initialPage (trocar {tenantdomain} pelo nosso site), de modo a que quando corremos a solução a página aberta seja do nosso site SharePoint
1. valor original:   "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
   
   
9. Após a alteração corremos
1. Gulp serve
10. Após carregar iremos ver uma pagina em branco, carregamos no "+" e selecionamos a nossa webpart



11. Agora fazemos CTRL + C para parar a webpart

2. Deploy

1. Para fazermos deploy da webpart temos criar o bundle da solução e para isso corremos o seguinte comando
1. gulp bundle --ship
1. irá fazer o bundle da solução para depois poder criar o package
2. Para a criação do package utilizamos o comando
1. gulp package-solution --ship
3.  Após corrermos estes comandos irá aparecer uma pasta nova chamada sharepoint,é nela que se encontra o package que iremos usar para fazer o deploy

4. No tenant que criamos anteriormente foi criado um site de sharepoint chamado /sites/appcatalog
1. Neste site carregamos em "Distribute apps for SharePoint"



5. Fazemos upload do ficheiro {appName}.sppkg e carregamso em ok
6. No popup se quisermos que a nossa app fique disponivel em todos os sites de SharePoint do ambiente em selecionamos a check box senão mantemos a mesma sem preenchimento, que é o caso demonstado abaixo e pressionamos em Deploy.



7. Por fim regressamos ao site onde queremos adicionar a aplicação que criámos e vamos a site contents e na opção "New" selecionamos App







8. No ecrã seguinte carregamos em "Add" para adicionar a nossa aplicação, quando o botão passar a "Added" a aplicação já se encontra disponivel no site e pronta a usar

Espero que este guia vos tenha sido útil na criação da vossa primeira webpart utilizando a SharePoint framework. Se preferirem, podem também assistir ao vídeo onde explico detalhadamente todo o processo de criação e adicionamento de uma webpart. Fiquem atentos para mais conteúdos e bons estudos!

Vídeo Tutorial: Cria a tua primeira webpart com SPFx em menos de 10 minutos