X

Friday, September 30, 2022

Instalasi Vue Js dan Membuat Project Baru


 

Vue Js merupakan salah satu framework atau kerangka kerja javascript yang bekerja di sisi front end. Framework ini bersifat open source yang dapat digunakan untuk mempermudah dalam membuat antar muka website

Instalasi

Hal pertama yang wajib di pelajari adalah cara Instalasi Vue.js untuk membuat project baru. Ada dua cara yang bisa digunakan dalam instalasi vue.js yaitu menggunakan CDN :

    
    <html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Aplikasi Vue JS</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{pesan}}</h1>
</div>
<script>
const App = new Vue({
el: '#app',
data: {
pesan: 'Hello World!',
}
})
</script>
</body>
</html>
Selain itu kita bisa menggunakan cara kedua Vue CLI, untuk caranya anda perlu menginstall node js terlebih dahulu kemudian menjalankan perintah berikut :

    npm i -g @vue/cli @vue/cli-service-global

atau jika anda menggunakan yarn :

    yarn global add @vue/cli @vue/cli-service-global

Membuat project baru

Membuat project baru dengan vue js sangatlah mudah, jika anda menggunakan CDN anda tinggal menambahkan code seperti di atas. Jika anda menggunakan CLI anda tinggal menjalankan perintah berikut :

vue create new-app

new-app merupakan nama project yang akan dibuat. Setelah project berhasil di buat, gunakan perintah "npm run serve" untuk menjalankan project.

Tuesday, September 6, 2022

Menghubungkan Bot Telegram dengan Spreadsheet

Tahukah kalian bahwa kita bisa membuat aplikasi dengan menggabungkan bot Telegram dengan Spreadsheet, caranya pun terbilang sangat mudah. Sebelum kita lanjut, ada baiknya mengetahui terlebih dahulu apa itu bot telegram.

bot telegram adalah fitur ataupun akun yang ada di telegram dimana akun ini dioperasikan seperti bot atau AI yang dapat di desain sesuai kebutuhan. Salah satu fungsi yang paling banyak digunakan adalah menjawab pesan yang masuk secara otomatis.

Pada postingan kali ini kita akan membuat sebuah bot telegram yang dapat mengambil ataupun menginput data ke spreadsheet layaknya database.

Silahkan ikuti langkah-langkah di bawah ini :

1. Buat akun bot telegram, silahkan ketikkan "BotFather " di pencarian telegram kemudian pilih yang bercentang biru.

2. Tekan tombol start kemudian masukkan nama yang terdiri dari 5 - 32 karakter, kemudian masukkan username yang di inginkan. 




3. Selanjutnya bila berhasil akan muncul respon berisi token dari botFather, silahkan simpan token ini.

4. Buka spreadsheet kemudian buat file baru.

5. Isi file baru sesuai gambar di bawah :




6. Klik Extensi -> Apps Script




7. Selanjutnya akan muncul editor seperti pada gambar di bawah :




8. Klik icon tambah pada library kemudian tambahkan Google Sheets API




9. Edit Kode.gs seperti berikut


var token = "MASUKKAN_TOKEN_BOT_ANDA_DISINI";
var SheetID = "MASUKKAN_SHEET_ID_DISINI";
var url = "TEMPEL_URL_HASIL_DEPLOY_DISINI";

function doPost(e) {

var stringJson = e.postData.getDataAsString();
var updates = JSON.parse(stringJson);
var pesan_dari_bot = updates.message.text;
var jenisAksi = pesan_dari_bot.toLowerCase();
var id_pesan = updates.message.chat.id;


switch(jenisAksi) {
case "ambil_data":
var data = AmbilDataDariSheet();
sendText(id_pesan,data);
break;
case "input_data":
InputDataKeSheet("Pulpen", "A2");
InputDataKeSheet("Alat tulis", "B2");
InputDataKeSheet(10, "C2");
InputDataKeSheet(2000, "D2");
break;
default:
sendText(id_pesan,"Aksi tisak ada!");
}


}

function InputDataKeSheet(isi, posisi){
var request = {
majorDimension: "ROWS",
values: [[isi]]
};

Sheets.Spreadsheets.Values.update(
request,
SheetID,
"Sheet1!"+posisi,
{valueInputOption: "USER_ENTERED"}
);
return true;
}

function AmbilDataDariSheet(){
var data = "";
var rows = Sheets.Spreadsheets.Values.get(SheetID, "Sheet1!A2:D2").values;
for (var row = 0; row < rows.length; row++) {
data = "Nama Barang : " + rows[row][0] + "\n\n" +
"Deskripsi : " + rows[row][1] + "\n" +
"Jumlah : " + rows[row][2] + "\n" +
"Harga Satuan : " + rows[row][3] + "\n";
}
return data;
}

function setbot(){
var link = "https://api.telegram.org/bot"+token+"/setWebhook?url="+url;
var a = UrlFetchApp.fetch(link);
Logger.log(a);
}


function sendText(chatid,text,replymarkup){
var data = {
method: "post",
payload: {
method: "sendMessage",
chat_id: String(chatid),
text: text,
parse_mode: "HTML",
reply_markup: JSON.stringify(replymarkup)
}
};
UrlFetchApp.fetch('https://api.telegram.org/bot' + token + '/', data);
}
Isi token sesuai token bot telegram yang telah dibuat. SheetID bisa di dapatkan pada url Spreadsheet anda pada bagian seperti pada gambar di bawah :




Sedangkan url bisa akan ada setelah melakukan deployment.

10. Klik Terapkan -> Deployment baru




11. Klik ikon pengaturan kemudian pilih aplikasi web




12. Isi deskripsi, dan pilih yang memiliki akses sebagai "siapa saja" kemudian klik terapkan




13. Klik Izinkan akses kemudian login ke akun google anda dan berikan akses.



Jika muncul seperti gambar di ata klik advance kemudian "Go to Project tak berjudul (unsafe)". Selanjutnya allow pada halaman selanjutnya.

14. Selanjutnya akan muncul ID penerapan dan URL. Silahkan salin url untuk ditempel pada codingan yg telah dibuat tadi.



15. Paste url ke bagian:


var url = "TEMPEL_URL_HASIL_DEPLOY_DISINI";

16. Selanjutnya pada bar pilih save kemudian pilih setBot kemudian klik jalankan




Hal ini untuk membuat bot telegram berinteraksi dengan spreadsheet yang telah dibuat dan bisa menjalankan kode.

Perlu di perhatikan setiap kali anda melakukan perubahan pada kode silahkan save, kemudian ulangi langkah 10 - 16. Jika tidak kode perubahan tidak akan diterapkan.

Kurang lebih contohnya akan tampak seperti berikut :