Integrasi Google Form dengan API Premis

Assalamualaikum wbt

Kali ini saya akan kongsikan langkah2 untuk integrasi Google Form dengan API organisasi. Dulu ada terfikir untuk memenuhi keperluan pengguna dengan cepat,google form adalah cara yang paling mudah dan pantas jika keperluan mereka nampak simple serta tidak kompleks. Jadi,timbul keperluan apabila data yang dimasukkann di google form disimpan di dalam google cloud tidak ke pangkalan data atau simpanan database kita. Jadi mcam mana nak buat ? Ok, google form telah menyediakan laluan ini untuk integrasi melalui google scripts atau .gs. So idea adalah google form akan trigger semasa submit form button untuk panggil API yang disediakan oleh pihak agensi. Ok, saya cuba terangkan langkah2 satu per satu. Inshaa Allah.

1.  Login google.com mengguna akaun gmail masing2

2. buka drive.google.com

Klik pada butang ‘New’ pada belah kiri atas  dan pilih ‘Google Form’

3. Seterusnya cuba designkan google form ada 2 medan seperti ini. (terpulang pada masing2)

Nota : perhatikan url : https://docs.google.com/forms/d/1JKHCWB2xlGWT9rcu7Qd1pMbOPhDzfqMMKiH8bL4Ix-8/edit

copy google form id : 1JKHCWB2xlGWT9rcu7Qd1pMbOPhDzfqMMKiH8bL4Ix-8 dan paste ke notepad.

4. Sterusnya, klik pada menu atas kanan pilih scripts editor

5.Seterusnya editor gs akan di paparkan spt ini

6. Buat API ringkas.

Saya membangunkan api simple menggunakan php native dan mysql database dan saya simpan di cloud aws. (elok simpan di cloud bagi memudahkan google kenal link ini).

Sebelum tu saya buat database mysql terlebih dahulu dan table ‘googleformapi‘ yang mengandungi  2 column sahaja iaitu `kambing`,`kucing`.(jenis varchar)

ok,seterusnya ialah  sus kod php api.

7. Google Scripts -gs

Ok selesai api php,jadi kita akan bangunkan script google spt di bawah :

*.gs

function myFunction()
{
var form = FormApp.openById(“1JKHCWB2xlGWT9rcu7Qd1pMbOPhDzfqMMKiH8bL4Ix-8“); // <<  **pastekan google id tadi
ScriptApp.newTrigger(“MyFormSubmit”).forForm(form).onFormSubmit();
}

// This function will be called when the form is submitted
function MyFormSubmit(event)
{

var url=”https://www.bukusicomel.name.my/googleapi.php”;   //INI ADALAH CONTOH API SAYA
// The event is a FormResponse object:
// https://developers.google.com/apps-script/reference/forms/form-response
var formResponse = event.response;
// Gets all ItemResponses contained in the form response
// https://developers.google.com/apps-script/reference/forms/form-response#getItemResponses()
var itemResponses = formResponse.getItemResponses();
// Gets the actual response strings from the array of ItemResponses
var responses = itemResponses.map(function getResponse(e) { return e.getResponse(); });
// Post the payload as JSON to our Cloud Function
UrlFetchApp.fetch(
url,
{
“method”: “post”,
“payload”: JSON.stringify({
“responses”: responses
})
}
).getContentText

dan tekan icon save di tools bar. jika ada error syntax , google akan notify biasanya warna merah pada fonts dan line no.

8. Create Trigger

Pergi ke menu atas,dan ada icon jam,klik disini.

Paparan spt  ini.

Klik butang ‘add trigger’ di bawah belah kanan.

dan pilih function dan events serta tekan save.

9. senarai  status trigger

status trigger akan disenaraikan. jika ‘failed’bermakna pross tidak berjaya dan ‘completed’ proses berjaya.

10. Cubaan Masukkan Data

Ok, selesai part scripts,anda bole cuba masukkan data di google form. dan seterusnya buat semakan di pangkalan data mysql .phpmyadmin

data yang berjaya di integrasi ke api agensi akan dipaparkan dalam table.

11. Papar data

Ok, kita paparkan data dari table yang data dri google form di masukkan ke sini

Cuba tgk paparan dengan melarikan page papar php ini.

yes data berjaya diintegrasi dan di masukkan ke dalam pangkalan data mysql. Paparan pun dapat dilihat spt di atas.

Kaedah yg sama guna jika kita ingin memasukkan data dri google form ke oracle atau mana2 database lain selain dari mysql. Hanya ubahsuai pada api yang di atas.

selamat mencuba

Terima Kasih