Topik Khusus Manajemen Data dan Informasi

“Blogger berserta Dokumentasi API dan

Penggunaan API pada HTML”

Oleh :
I Wayan Eka Krisna Putra 1605552007

Dosen :
Prof. Dr. I Ketut Gede Darma Putra, S.Kom., M.T.

Fakultas Teknik
Jurusan Teknologi Informasi
Universitas Udaya
 DAFTAR ISI

BAB I PENDAHULUAN ................................................................................................................ 2

1.1 Latar Belakang .............................................................................................................. 2
1.2 Rumusan Masalah ......................................................................................................... 2
BAB II PEMBAHASAN ................................................................................................................. 3
2.1 Pengertian Blogger ........................................................................................................ 3
2.2 Kelebihan dan Kekurangan Blogger ............................................................................ 3
2.2.1 Kelebihan ............................................................................................................... 4
2.2.2 Kekurangan ........................................................................................................... 4
2.3 Dokumentasi dan Penggunaan API Pada HTML ....................................................... 4
2.3.1 Membuat Client ID ............................................................................................... 4
2.3.2 Membuat Key ID................................................................................................... 7
2.3.3 Penggunaan API.................................................................................................... 8
2.3.4 Hasil Penggunaan................................................................................................ 11
BAB III PENUTUP ....................................................................................................................... 13
3.1 Kesimpulan................................................................................................................... 13
3.2 Saran ............................................................................................................................. 13
DAFTAR PUSTAKA .................................................................................................................... 14

1
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Blog merupakan bentuk mengaplikasikan web atau sarana penyampaian
secara online yang berbentuk tulisan-tulisan yang disebut sebagai posting pada
sebuah halaman. Situs web log ini yang biasanya dapat diakses oleh semua
pengguna internet untuk membuat blog yang sesuai dengan topik dan tujuan dari si
pengguna blog tersebut.
Perkembangan media untuk menyampaikan ide-ide semakin luas dalam arti
semakin dipermudah yang dimana beredar situs-situs yang menyediakan blog-blog
secara gratis tanpa melakukan koding. Salah satu situs blog yang dapat digunakan
adalah Blogger.com yang bersifat Open Source yang diperuntukkan oleh pengguna
blog tersebut.
Blog ini memiliki berbagai macam fungsi yang beragam, dari sebagai daily
note sampai dengan media publikasi. Beberapa blog ini dapat di dapat dikatakan
sebagai media interaksi dengan para pengunjungnya, yang dapat memberikan para
pengunjung blog untuk mengirimkan pesan kepada pemilik blog tersebut. Masih
banyak pengguna blogger belum mengetahui dokumentasi API agar blog dapat
dikembangkan secara bertahap.

1.2 Rumusan Masalah

Berdasarkan uraian pada latar belakang diatas, maka dapat diambil rumusan
masalah dalam paper atau makalah yang terlah dibuat sebagai berikut.
1. Apakah yang dimaksud dengan blogger dan perkembangannya?
2. Bagaimana kelebihan dan kekurangan dari blogger?
3. Bagaimana bentuk dokumentasi API pada blogger?

2
 BAB II
PEMBAHASAN

2.1 Pengertian Blogger

Blogger atau layanan ini merupakan sebuah layanan publikasi web log atau
blog yang didevelop oleh Pyra Labs dan kemudian diakuisisi oleh google pada
tahun 2003. Secara global, blog yang dihosting oleh Google ini berada pada
subdomain blogspot.com. Blogspot.com ini meperbolehkan penggunanya untuk
mempublikasikan blognya di server lain, melalui protokol pengiriman berkas (FTP)
mulai 1 Mei 2010. Semua blog yang telah dibuat di blogspot.com harus disimpan
pada server yang dimiliki oleh Google, yang dimana pengguna dapat menggunakan
alamat blognya sendiri dangen fitur Custom ULR.[2]
Perkembangan blogspot.com ini memiliki sejarah, desain ulang, sampai
mengintegrasikannya yang dimana blogspot.com ini didirikan pada tanggal 23
Agustus 1999, yang sebagai salah satu perangkat publikasi blog pertama di dunia
dan berperan dalam mempopulerkan format blog di dunia. Sampainya tahun 2006
blogspot.com ini dimigrasikan ke server Google yang menklaim bahwa dengan
adanya migrasi tersebut, blogger.com ini lebih stabil karena dari kulitas server yang
dimiliki google lebih baik dari sebelumnya.[2]
Blogspot.com kemudian melakukan integrasi pada situsnya seperti
blogger.com ini menambahkan fitur perubahan template, yang memberikan
pengguna mengubah tampilan blognya sesuai keinginan pengguna blog.
Blogspot.com juga dapat dihubungkan dengan google+ dan blogspot.com juga
mendukung layanan google AdSense sebagai penambah penghasilan bagi
pengguna blog melalui iklan yang ditampilkan pada blog penggunan.[2]

2.2 Kelebihan dan Kekurangan Blogger

Blogspot.com juga memiliki kelebihan dan kekurangan dalam berbagai hal
baik oleh pengguna maupun pengunjung blog tersebut berikut adalah kelebihan dan
kekurangan dari blogspot.[3]

3
2.2.1 Kelebihan
1 Tidak memerlukan keterampilan coding untuk membangun blog dasar.
2 Tidak perlu membeli ruang hosting. Diinangi secara gratis di server Google
(hampir 100% ke atas).
3 Integrasi dan persetujuan AdSense yang mudah.
4 Secara otomatis menerbitkan konten baru di Google Plus.
5 Dapat membuat desain template khusus Anda sendiri.
6 Bisakah Anda blog alamat blogspot Anda ke alamat domain kustom gratis.
7 Dapat dengan mudah ditautkan ke alat Google Analytic dan Webmaster.

2.2.2 Kekurangan
1. Tampilan dashboard adminya terlalu sederhana.
2. Kurangnya tools yang disediakan tidak lengkap dibandikan situs web log
lainnya.
3. Bagi blogger yang masih baru yang belum mengerti bahasa pemrograman
HTML dan CSS akan kesusahan dalam menyesuaikan tampilan blognya.
4. Pilihan tampilan yang dimiliki blogspot.com terlalu sedikit.
5. Blogspot.com ini merupakan salah satu produk Google, pengguna harus taat
pada peraturan yang dibuat oleh Google.

2.3 Dokumentasi dan Penggunaan API Pada HTML

Blogspot memiliki API (Application Programming Interface) yang digunakan
untuk mengintegrasikan dua bagian dari aplikasi atau dengan aplikasi yang berbeda
secara bersamaan. Berikut merupakan langkah untuk mendapatkan client id, key,
dan post id pada blogspot sebagai berikut. [1]
2.3.1 Membuat Client ID
1) Membuat Project Baru
Membuat project baru ini merupakan langkah pertama yang harus dilakukan
untuk mendapatkan client id dan key blogspot yang dapat diakses pada
https://console.developers.google.com seperti gambar dibawah ini.[1]

4
 Gambar 3.1 Membuat Project Baru
Gambar 3.1 merupakan tampilan untuk membuat project baru yang
digunakan untuk mendapatkan client id dan key pada blogspot.[1]

2) Memilih Blogspot
Blogspot API yang digunakan adalah Blogger API v3 kemudian melakukan
enable untuk mengaktifkan API blogspot tersebut. Berikut merupakan gambar
untuk melakukan enable sebagai berikut.[1]

Gambar 3.2 Blogger API v3

Gambar 3.2 merupakan gambar yang digunakan untuk mengaktifkan API
blogspot situs website dapat diakses pada
https://console.developers.google.com/apis/api/blogger.googleapis.com/ kemudian
pilih Credentials untuk mendapatkan API blogspot.[1]

5
3) Membuat Credentials
Credentials ini merupakan langkah untuk mendapatkan client id dan key
blogspot dengan cara membuat Credentials. Berikut langkah yang diterapkan
seperti gambar dibawah ini.[1]

Gambar 3.3 Langkah Pertama

Gambar 3.3 merupakan langkah pertama dalam membuat Credentials yang
digunakan API Blogger API v3, kemudian memilih Web browser (Javascript), dan
memilih data yang akan diakses seperti User data. Berikut merupakan langkah
kedua dalam melakukan pembuatan credentials seperti gambar dibawah ini.[1]

Gambar 3.4 Langkah Kedua

6
 Gambar 3.4 merupakan langkah kedua dalam membuat Credentials dengan
memberikan nama client id dan jika ingin mengintegrasikan dengan salah satu
domain web server dengan cara mengisi Authorized JavaScript origins dan
Authorized redirect URIs dengan http://localhost atau domain lainnya. Selanjutnya
merupakan langkah ketiga digunakan untuk membuat Credentials seperti gambar
dibawah ini.[1]

Gambar 3.5 Langkah Keempat

Gambar 3.5 merupakan langkah keempat yang digunakan untuk membuat
Credentials dengan cara melakukan set up content kemudian memasukan email
yang digunakan dan memberikan nama pada product name. Hasil dari proses
membuat credentials ini mendapatkan hasil seperti gambar dibawah ini.[1]

Gambar 3.6 Hasil Credentials

Gambar 3.6 merupakan hasil credential yang mendapatkan Client ID berupa
949184385149-ec4cat74f7tceuu3gm8rr62qmmqa4nma kemudian Client ID ini
dapat di download.[1]

2.3.2 Membuat Key ID

Membuat key ID ini dapat dilakukan dengan cara memilih menu Create
Credentials kemudian pilih Create Key ID dan dapat menghasilkan Key ID seperti
gambar dibawah ini.[1]

7
 Gambar 3.7 API Key Created
Gambar 3.7 merupakan hasil dari tahapan pembuatan API Key dengan kode
AIzaSyAS3YvZtuQhvhQ_hsXJ2bgMSr0rV6l-FkA yang digunakan untuk
mengintegrasikan blogspot dengan aplikasi lainnya. [1]

2.3.3 Penggunaan API

Penggunaan API blogspot ini diterapkan pada Vue.js yang dimana API ini
akan digunakan untuk membuat blog tanpa membuka situs blogspot.com dengan
menggunakan html dan Vue.js. Berikut kode program yang digunakan untuk
melakukan pembuatan blog sebagai berikut. [4]
1) Index.html
<!DOCTYPE html>
<html>
<head>
<title>Pigura Sari</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" href="styles.css"/>
</head>
<body >
<div id="app">s
<button @click="authorizeUser">
Authorize!
</button>
<input type="text" name="title" placeholder="title" v-
model="bloggerPost.title" />
<input type="text" name="content" placeholder="content" v-
model="bloggerPost.content" />
<button @click="postBlog">
Post!
</button>

8
 <ul v-if="isList && bloggerData.items" v-for="(item, index)
in bloggerData.items">
<li>
{{item.title}}
</li>
<button @click="deletePost(item.id)">
Delete
</button>
</ul>
</div>
<script src="https://apis.google.com/js/client.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></
script>
<script
src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-ls@2.3.3/dist/vue-
ls.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Kode Program 3.1 Index.php
Kode Program 3.1 merupakan kode program menggunakan bahasa
pemrograman HTML yang digunakan untuk menampilkan tampilan bentuk
tampilan suatu website. Kode program ini terhubung atau terintegrasi dengan kode
program script.js berikut kode program script.js sebagai berikut.[4]
2) Script.js
Vue.use(VueLocalStorage);
new Vue({
el: '#app',
data(){
return{
bloggerData: {
items:[]
},
isList: true,
content: '',
googleAuth: null,
bloggerPost:{
title: null,
content: null
},
blogId: '4194191267098242642'
}
},
watch: {
googleAuth: function(val) {
this.$ls.set('token', val)
}
},
mounted(){

9
 var vm = this
vm.fetchBloggerApi()
this.googleAuth = this.$ls.get('token', {});
this.$ls.on('token', function(val) {
vm.googleAuth = val;
});
},
methods:{
deletePost(postId){
var vm = this
axios({
method: 'delete',
url:
'https://www.googleapis.com/blogger/v3/blogs/'+vm.blogId+'/posts
/' + postId,
headers: {
'Authorization': 'Bearer ' + vm.googleAuth,
'Content-Type': 'application/json',
}
})
},
postBlog(){
var vm = this
var bodyParameters = {
"kind": "blogger#post",
"blog": {
"id": vm.blogId
},
"title": vm.bloggerPost.title,
"content": vm.bloggerPost.content
}
axios({
method: 'post',
url:
'https://www.googleapis.com/blogger/v3/blogs/'+vm.blogId+'/posts
',
data: bodyParameters,
headers: {
'Authorization': 'Bearer ' + vm.googleAuth,
'Content-Type': 'application/json',
}
}).then( function(response) {
console.log( response )
}).catch(function (error) {
console.log(error);
});;
},
authorizeUser(){
var vm = this
var config = {
"client_id": "633073559772-
83pis2lb172qec6vcgk26o41br7220m2",
'scope': 'https://www.googleapis.com/auth/blogger'
};
gapi.auth.authorize(config, function(){
console.log(gapi.auth.getToken().access_token)

10
 vm.googleAuth = gapi.auth.getToken().access_token;
});
},
fetchBloggerApi(){
var vm = this;

axios.get('https://www.googleapis.com/blogger/v3/blogs/'+vm.blog
Id +'/posts?key=AIzaSyDQINHjgMOkqKtV2N_TI9dOedaZ806Z5FI')
.then(function (response) {
vm.bloggerData = response.data
})
.catch(function (error) {
console.log(error);
});
},
}
})
Kode Program 3.2 Script.js
Kode program 3.2 merupakan kode program yang digunakan untuk
menghubungkan aplikasi dengan Client ID dan Key ID Blogger API v3 yang telah
dibuat sebelumnya. Posts Key didapatkan dari link blog yang telah dibuat seperti
ini https://www.blogger.com/blogger.g?blogID=4194191267098242642#allposts
dengan ID 4194191267098242642.[4]

2.3.4 Hasil Penggunaan

Hasil penggunaan merupakan hasil uji coba menggunakan Blogger API v3
dengan menampilkan blog apa saja yang terdapat pada Client ID, Key ID dan Post
ID seperti gambar dibawah ini.[4]

Gambar 3.8 Hasil Tampilan

11
 Gambar 3.8 merupakan hasil penggunaan API Blogger v3 dengan
menggunakan bahasa pemrograman HTLM dan Framework Vue.js untuk
menambahkan blog tanpa harus masuk ke website blogspot.com. Dengan cara
melakukan Authorize akun google kemudian inputkan Tittle atau Judul Blog dan
input Content yang ingin diisi setelah itu hasil akan masuk ke blogspot.com sesuai
dengan Client ID, Post ID, dan Key ID.[4]

12
 BAB III
PENUTUP

3.1 Kesimpulan
Berdasarkan kesimpulan diatas adalah penggunaan API Blogger ini
mempermudah programmer untuk mengintegrasikan seperti programmer yang
menggunakan API dapat menjalankan programnya dalam sistem operasi mana saja
asalkan Client ID, Key ID dan Post ID di dapatkan. Hal ini sangat penting dalam
hal editing dan pengembangan dalam pembuatan program.

3.2 Saran
Dengan adanya kelebihan dan kekurangan yang dimiliki blogspot.com
Google, maka hendaknya pengguna dapat memanfaatkan API yang disediakan
dengan sebaik-baiknya.

13
 DAFTAR PUSTAKA

[1] Google Blogger, Juny 6, 2017, Blogger API: Using the API,
https://developers.google.com/blogger/docs/3.0/using.
[2] Wikipedia, 24 January 2019, Blogger (service),
https://en.wikipedia.org/wiki/Blogger_(service).
[3] Vinodh Reddy Chennu, Mar 23, 2016, What are some advantages and
disadvantages of Blogger (Product)? , https://www.quora.com/What-are-
some-advantages-and-disadvantages-of-Blogger-Product.
[4] Edward Lance Lorilla, eneficial-scorpion, Glitch,
https://glitch.com/edit/#!/beneficial-scorpion?path=README.md:1:0.

14