Daftar Isi

1. Pengantar SPFX
2. Persiapan Lingkungan Pengembangan
3. Struktur Proyek SPFX
4. Membuat Web Part Dasar
5. Menggunakan React di SPFX
6. Koneksi ke SharePoint Online & On-Premise
7. Deploy dan Packaging
8. Tips dan Trik Pengembangan SPFX
9. Referensi dan Sumber Belajar

Pengantar SPFX

SharePoint Framework (SPFX) adalah model pengembangan modern yang memungkinkan developer membuat komponen web yang dapat berjalan di SharePoint Online maupun On-Premise. Dengan SPFX, Anda dapat membangun web part, ekstensi, dan aplikasi yang responsif, mudah diintegrasikan, dan menggunakan teknologi web terbaru seperti React, TypeScript, dan Node.js.

Dalam ebook ini, Anda akan mempelajari langkah demi langkah cara mempersiapkan lingkungan pengembangan, membuat web part dasar, menggunakan React, menghubungkan ke SharePoint, hingga proses deploy dan tips pengembangan.

Persiapan Lingkungan Pengembangan

Sebelum mulai coding, Anda perlu menyiapkan beberapa tools dan software berikut:

• Node.js versi LTS (minimal 14.x)
• Yeoman dan generator SharePoint
• Visual Studio Code sebagai editor kode
• Gulp untuk task runner
• SharePoint Online tenant atau server On-Premise untuk testing

Instalasi dapat dilakukan melalui terminal dengan perintah:

npm install -g yo @microsoft/generator-sharepoint gulp
      

Setelah itu, Anda siap membuat proyek SPFX baru menggunakan Yeoman generator.

Struktur Proyek SPFX

Proyek SPFX memiliki struktur folder standar yang memudahkan pengelolaan kode dan aset:

• config/ - konfigurasi build dan bundling
• src/ - kode sumber web part dan komponen
• sharepoint/ - file manifest dan package SharePoint
• gulpfile.js - task runner Gulp
• package.json - daftar dependensi dan script NPM

Memahami struktur ini penting agar Anda dapat menavigasi dan mengembangkan proyek dengan efisien.

Membuat Web Part Dasar

Untuk membuat web part dasar, jalankan perintah berikut di terminal:

yo @microsoft/sharepoint
      

Pilih opsi sesuai kebutuhan, misalnya:

• Nama web part: HelloWorld
• Framework: No JavaScript Framework (atau React jika ingin)
• Target platform: SharePoint Online atau On-Premise

Contoh kode web part dasar di src/webparts/helloWorld/HelloWorldWebPart.ts :

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

export interface IHelloWorldWebPartProps {
  description: string;
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `
      <div style="padding:10px; font-family:Segoe UI">
        <h2>Hello, SharePoint Framework!</h2>
        <p>${this.properties.description}</p>
      </div>
    `;
  }
}
      

Jalankan gulp serve untuk melihat web part di workbench lokal.

Menggunakan React di SPFX

React adalah framework populer untuk membangun UI di SPFX. Saat membuat proyek, pilih React sebagai framework.

Contoh komponen React sederhana di src/webparts/reactHello/components/ReactHello.tsx :

import * as React from 'react';

export interface IReactHelloProps {
  description: string;
}

const ReactHello: React.FC<IReactHelloProps> = (props) => {
  return (
    <div style={{ padding: '10px', fontFamily: 'Segoe UI' }}>
      <h2>Hello from React!</h2>
      <p>{props.description}</p>
    </div>
  );
};

export default ReactHello;
      

React memudahkan pembuatan UI yang dinamis dan mudah dikembangkan.

Koneksi ke SharePoint Online & On-Premise

SPFX dapat berinteraksi dengan data SharePoint menggunakan REST API atau PnPjs. Contoh mengambil daftar SharePoint menggunakan PnPjs:

import { sp } from "@pnp/sp";

sp.web.lists.getByTitle("DaftarTugas").items.get().then(items => {
  console.log(items);
});
      

Pastikan konfigurasi izin dan tenant sudah benar agar koneksi berjalan lancar.

Deploy dan Packaging

Setelah pengembangan selesai, lakukan packaging dan deploy ke SharePoint App Catalog:

• Jalankan gulp bundle --ship untuk bundling produksi
• Jalankan gulp package-solution --ship untuk membuat package
• Upload file .sppkg ke App Catalog SharePoint
• Tambahkan web part ke halaman SharePoint

Proses ini memastikan web part Anda dapat digunakan oleh pengguna di tenant SharePoint.

Tips dan Trik Pengembangan SPFX

• Gunakan TypeScript untuk kode yang lebih aman dan mudah dipelihara.
• Manfaatkan React Hooks untuk state management yang efisien.
• Selalu testing di workbench lokal dan SharePoint sebelum deploy.
• Gunakan PnPjs untuk mempermudah interaksi dengan SharePoint REST API.
• Optimalkan performa dengan lazy loading dan code splitting.
• Dokumentasikan kode dan gunakan komentar yang jelas.

Dengan mengikuti tips ini, pengembangan SPFX Anda akan lebih lancar dan hasilnya optimal.

Referensi dan Sumber Belajar

• Microsoft Docs - SharePoint Framework
• PnPjs Library
• React Official Website
• Node.js Official Website
• Yeoman Generator