DEV Community: amry maftuh

Saba Framework: Mempermudah Pekerjaan Frontend dan Backend Developer

amry maftuh — Sat, 31 Aug 2024 09:28:59 +0000

Perkenalkan, saya seorang programmer otodidak yang ingin berbagi pengalaman dalam membangun web aplikasi. Dari berbagai bidang yang saya pelajari seperti desain grafis, video editing, music production, software development, dan lainnya, menurut saya, pengembangan software adalah yang paling menantang. Prosesnya panjang dan melibatkan banyak hal yang harus dipelajari. Berdasarkan pengalaman saya, berikut adalah rangkuman perjalanan belajar dan produksi yang saya lalui:

Proses Belajar:

Memilih dan mempelajari bahasa SQL (MSSQL/MYSQL/POSTGRE).
Memilih dan mempelajari bahasa pemrograman untuk backend (PYTHON/PHP/.NET/JAVA).
Memilih dan mempelajari satu framework untuk backend (LARAVEL/FLASK/DJANGO/SPRING, dll).
Mempelajari dasar-dasar yang diperlukan untuk frontend (HTML, CSS, JavaScript).
Memilih dan mempelajari satu framework untuk frontend (REACT/VUE/ANGULAR/FLUTTER, dll).

Proses Produksi:

Backend + Database:

Menggunakan Python dengan framework Flask.
Memilih SQLAlchemy sebagai ORM untuk query dan koneksi ke database.
Menggunakan fitur migrasi agar semua query dan model dapat dilakukan di backend, sehingga RDBMS yang digunakan bisa bervariasi.
Membuat struktur model otentikasi (users, roles, permission, dll).
Membuat middleware untuk otentikasi (termasuk JWT).
Menyiapkan routing dan endpoint Flask, serta merespons dengan format JSON agar dapat dikonsumsi oleh aplikasi frontend.
Membuat dokumentasi API menggunakan Swagger untuk memudahkan kolaborasi dengan tim frontend.
Dan masih banyak lagi…

Frontend:

Memilih template yang responsif sesuai dengan framework yang dipilih, misalnya React.js.
Menyesuaikan aset dan properti statis awal (logo, warna, nama aplikasi, hak cipta, warna dasar, dll).
Mengonfigurasi interceptor Axios untuk mekanisme HTTP request ke API backend.
Membuat state management menggunakan Redux untuk mengelola data dengan efisien dan memungkinkan data digunakan oleh komponen lain.
Mengembangkan berbagai halaman CRUD, mulai dari tabel data yang menampilkan data, filtering, dan pagination.
Menyesuaikan tabel sesuai kebutuhan, apakah perlu server-side rendering atau tidak.
Mengatur hak akses terhadap tombol edit/delete/tambah pada tabel.
Menyesuaikan kolom-kolom yang ditampilkan sesuai dengan jenis dan formatnya.
Mengembangkan halaman atau modal untuk edit/tambah dengan formulir yang memiliki jenis input dan aturan yang berbeda-beda.
Mengimplementasikan mekanisme untuk input yang saling berkaitan satu sama lain.
Dan masih banyak lagi…

Membangun aplikasi dari awal memang sangat melelahkan. Biasanya, saya mengandalkan copy-paste dari kode sumber lama untuk mempercepat proses. Namun, terkadang, saya harus mengganti template, menyesuaikan teknologi terbaru, atau bahasa pemrograman yang mengharuskan membangun aplikasi dari awal.

Di era yang serba otomatis dengan teknologi AI ini, sangat melelahkan bagi developer frontend maupun backend untuk terus membangun aplikasi dari nol seperti yang saya alami. Lebih baik waktu tersebut digunakan untuk mempelajari hal lain yang sedang tren, seperti LLMs, Machine Learning, SEO optimizer, dan sebagainya. Teknologi AI terus berkembang pesat di tahun 2024 ini.

Berdasarkan pengalaman tersebut, dan dengan dukungan instansi tempat saya bekerja, kami telah menciptakan sebuah CMS/Framework/Tools/Source bernama “Saba Framework” untuk membantu developer backend dan frontend agar lebih cepat dan mudah dalam produksi web app, tanpa harus belajar dari awal.

Perlu dicatat, Saba Framework bukan untuk menggantikan proses belajar dasar pemrograman yang seharusnya dikuasai. Namun, seperti yang saya sebutkan tadi, lebih baik waktunya digunakan untuk mempelajari hal lain yang lebih relevan dengan perkembangan zaman.

Saba Framework tersedia dalam dua versi: versi frontend yang dibangun menggunakan React.js, dan versi backend yang dibangun menggunakan Python (Flask). Kami merancang Saba Framework agar se-fleksibel mungkin, terutama untuk frontend, dengan berbagai kondisi form, tabel, dan lainnya.

Untuk informasi lebih lanjut tentang Saba Framework, silakan kunjungi tautan berikut:

Cara Memanggil REST API dari SQL Server Menggunakan Store Procedure

amry maftuh — Thu, 04 Jul 2024 11:56:06 +0000

Halo teman-teman developer!

Saya sangat senang berbagi dengan Anda sebuah skrip prosedur tersimpan yang memungkinkan Anda memanggil REST API langsung dari SQL Server. Ini bisa sangat berguna dalam berbagai skenario, seperti mengintegrasikan data eksternal ke dalam aplikasi Anda, memvalidasi data terhadap layanan pihak ketiga, atau mengotomatiskan tugas yang memerlukan komunikasi dengan API eksternal.

Apa yang akan Anda pelajari:

Cara mengatur dan menggunakan OLE Automation dalam SQL Server
Membuat prosedur tersimpan yang memanggil REST API dan mengembalikan hasilnya
Menangani respon JSON dari API dan mengolahnya di dalam SQL Server

Kelebihan Utama:
Salah satu kelebihan utama dari store procedure yang saya buat adalah kemampuannya untuk menggunakan nama kolom dan respon API yang dinamis. Dengan fitur ini, Anda hanya perlu memasukkan mapping antara nama respon API dan nama kolom tabel yang ingin dibentuk sebagai parameter. Ini membuat store procedure ini sangat fleksibel dan mudah digunakan dalam berbagai skenario.

Kegunaan:

Integrasi data eksternal ke dalam basis data SQL Server Anda
Validasi data secara real-time menggunakan layanan pihak ketiga
Otomatisasi tugas yang memerlukan akses ke API eksternal

Detail Skrip:
Saya telah menyertakan skrip lengkap beserta penjelasan langkah demi langkah sehingga Anda dapat dengan mudah memahami dan mengimplementasikannya dalam proyek Anda sendiri. Anda akan menemukan bagaimana cara membuat dan mengkonfigurasi prosedur tersimpan yang memanggil REST API, serta contoh penggunaannya dalam berbagai kasus praktis.

Eksekusi script ini di database Anda, setelah di eksekusi pastikan store procedure ini "SP_REQUEST_TO_API" (atau anda bisa menggatinya) sudah terbentuk di database pada bagian store procedure.

Berikut Script untuk Store Procedure nya :

/****** Object:  StoredProcedure [dbo].[SP_REQUEST_TO_API]    Script Date: 03/07/2024 00:29:10 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:      <Author,,Amry Maftuh>
-- Create date: <Create Date,,2024-07-03>
-- Description: <Description,,GET DATA FROM API>
-- =============================================
ALTER PROCEDURE [dbo].[SP_REQUEST_TO_API]
    @URL NVARCHAR(MAX), -- Alamat URL yang akan di-request
    @RESP_KEY NVARCHAR(MAX), -- Nama key berupa array dari response yang mau diambil
    @METHOD NVARCHAR(MAX), -- HTTP method: GET/POST/PUT/DELETE
    @Mapping NVARCHAR(MAX) -- Mapping key-value dalam format 'RESPONSE_KEY1:COLUMN_NAME1,RESPONSE_KEY2:COLUMN_NAME2,...'
AS

    -------- TEST INPUT
    --DECLARE @URL NVARCHAR(MAX), @RESP_KEY NVARCHAR(MAX), @METHOD NVARCHAR(MAX), @Mapping NVARCHAR(MAX)
    --SET @URL = 'https://api-sekolah-indonesia.vercel.app/sekolah?sort_dir=desc&page=1&perPage=100'
    --SET @URL = 'https://reqres.in/api/users?page=1'
    --SET @RESP_KEY = 'dataSekolah'
    --SET @METHOD = 'GET'
    --SET @Mapping = 'sekolah:NAMA_SEKOLAH,bentuk:JENJANG,alamat_jalan:ALAMAT,lintang:LAT,bujur:LNG'

     ----   EXEC SP_REQUEST_TO_API 
     ----   @URL = 'https://api-sekolah-indonesia.vercel.app/sekolah?sort_dir=desc&page=1&perPage=100',
     ----   @RESP_KEY = 'dataSekolah',
     ----   @METHOD = 'GET',
     ----   @Mapping = 'sekolah:NAMA_SEKOLAH,bentuk:JENJANG,alamat_jalan:ALAMAT,lintang:LAT,bujur:LNG';
    --------


    SET NOCOUNT ON;

    EXEC sp_configure 'show advanced options', 1;
    RECONFIGURE;
    EXEC sp_configure 'Ole Automation Procedures', 1;
    RECONFIGURE;

    DECLARE @TOKEN INT;
    DECLARE @RET INT;
    DECLARE @JSON AS TABLE(JSON_TABLE NVARCHAR(MAX));
    DECLARE @MappingResponse TABLE (RESPONSE_KEY NVARCHAR(250), COLUMN_NAME NVARCHAR(250));

    DECLARE @MappingSplit TABLE (ITEM NVARCHAR(MAX));
    INSERT INTO @MappingSplit (ITEM)
    SELECT value FROM STRING_SPLIT(@Mapping, ',');

    INSERT INTO @MappingResponse (RESPONSE_KEY, COLUMN_NAME)
    SELECT 
        PARSENAME(REPLACE(ITEM, ':', '.'), 2) AS RESPONSE_KEY,
        PARSENAME(REPLACE(ITEM, ':', '.'), 1) AS COLUMN_NAME
    FROM @MappingSplit;

    EXEC @RET = sp_OACreate 'MSXML2.XMLHTTP', @TOKEN OUT;
    IF @RET <> 0 RAISERROR('Unable to open HTTP connection.', 10, 1);
    EXEC @RET = sp_OAMethod @TOKEN, 'open', NULL, @METHOD, @URL, 'false';
    EXEC @RET = sp_OAMethod @TOKEN, 'send';
    INSERT INTO @JSON (JSON_TABLE)
    EXEC sp_OAGetProperty @TOKEN, 'responseText';

    DECLARE @Columns NVARCHAR(MAX), @Columns_Keys NVARCHAR(MAX), @COLUMN_NAMES NVARCHAR(MAX), @RESPONSE_KEYS NVARCHAR(MAX);
    SELECT @Columns = STRING_AGG(CONCAT('[', COLUMN_NAME, '] NVARCHAR(2000)'), ', ') FROM @MappingResponse;
    SELECT @Columns_Keys = STRING_AGG(CONCAT('', COLUMN_NAME, ' NVARCHAR(2000) ''$.' + RESPONSE_KEY + ''''), ', ') FROM @MappingResponse;
    SELECT @COLUMN_NAMES = STRING_AGG(COLUMN_NAME, ', ') FROM @MappingResponse;
    SELECT @RESPONSE_KEYS = STRING_AGG(RESPONSE_KEY, ', ') FROM @MappingResponse;

    IF OBJECT_ID('tempdb..##TEMP_TABLE') IS NOT NULL
        DROP TABLE ##TEMP_TABLE;

    DECLARE @CreateTableQuery NVARCHAR(MAX);
    SET @CreateTableQuery = 'CREATE TABLE ##TEMP_TABLE (ROW_ID INT IDENTITY(1,1),' + @Columns + ');';
    EXEC sp_executesql @CreateTableQuery;

    DECLARE @InsertQuery NVARCHAR(MAX);
    DECLARE @JSON2 NVARCHAR(MAX);
    SET @JSON2 = (SELECT JSON_TABLE FROM @JSON);

    SET @InsertQuery = '
        INSERT INTO ##TEMP_TABLE (' + @COLUMN_NAMES + ')
        SELECT ' + @COLUMN_NAMES + '
        FROM OPENJSON(@JSON2, ''$.' + @RESP_KEY + ''') 
        WITH (' + @Columns_Keys + ');
    ';

    EXEC sp_executesql @InsertQuery, N'@JSON2 NVARCHAR(MAX)', @JSON2 = @JSON2;
    SELECT * FROM ##TEMP_TABLE;

cara menggunakan nya seperti ini :

       EXEC SP_REQUEST_TO_API 
        @URL = 'https://api-sekolah-indonesia.vercel.app/sekolah?sort_dir=desc&page=1&perPage=100',
        @RESP_KEY = 'dataSekolah',
        @METHOD = 'GET',
        @Mapping = 'sekolah:NAMA_SEKOLAH,bentuk:JENJANG,alamat_jalan:ALAMAT,lintang:LAT,bujur:LNG';

Saya harap skrip ini bermanfaat bagi Anda dan membantu dalam mempermudah integrasi API eksternal dengan SQL Server Anda. Jangan ragu untuk meninggalkan komentar atau pertanyaan jika Anda memiliki kesulitan atau masukan.

Selamat coding!