Jembatani Usaha SEO mu dengan Google Webmaster Tools

Setelah sebelumnya saya deprisikan mengenai definisi dan pengertian dasar mengenai SEO di artikel saya sebelumnya, di postingan saya kali ini saya ingin mengajak para peminat dari SEO untuk memulai apa sih yang harus di lakukan untuk memulai perjalanan pengoptimalan mesin pencarian yang seru tanpa henti.

Perlu di ingat, dalam melakukan perjalanan ini ketekunan, kesabaran, dan semangat serta ketelitian merupakan faktor penting dalam memaksimalkan SEO untuk situs web anda. Maka dari itu mari kita bikin terlebih dahulu jembatan untuk mengatur optimasi mesin pencarian google ( saya mengambil google karena sebagian besar pengguna internet default google sebagai mesin pencarian mereka ).

Kali ini saya ingin menjelaskan tentang fungsi serta penggunaan tools SEO gratis dari google yaitu 

google webmaster tools 

Google Webmaster Tools sendiri sebuah produk GRATIS dari google web based untuk hal-hal seperti Verification Details, Website yang didaftarkan di mesin pencari google, Search Appearance, Search Traffik, Google Index, Crawl, Security Issues dan Other Resources.

Fungsi fungsi utama Google Webmaster Tools dibawah ini adalah :

1. Trafik Pencarian ? Pada menu pertama ini trafik dalam pencarian ini terdapat beberapa subMenu yaitu : Search Queries, Links to Your Site, Internal Links, Manual Actions, International Targeting, Mobile Usability. Dari menu ini kita bisa mengetahui Traffik yang datang ke website kita melalui link yang mana. Kemudian Link mana saja yang mengarah ke website kita atau artikel kita, baik itu internal link ataupun dari luar. Selain itu kita juga bisa melihat performance website kita ketika dibuka dari Desktop atau Smartphone. Apakah ada bagian yang eror.
   
2. Index Google ? Ya namanya juga index google dari produk google itu sendiri jadi sudah terlihat cukup jelas, pada menu google Index ini ada beberapa menu yaitu : Index Status, Content Keywords, Blocked Resources dan Remove URLs. Menu-menu ini sangat penting perananya untuk mengatur link yang ada di direktory google. Sehingga jika ada yang hendak kita delet atau kita hapus link nya dari google, kita menggunakan menu ini. Terdapat menu Remuve URLs.
   
   Perlu di ingat yang terpentik agar terindex dengan google dengan cepat dan tepat hindari Content Keywords yang berlebihan sehingga situs anda tidak terindikasi sebagai SPAM atau di flag sebagai SAMPAH.
   
3. Crawl ? Ini juga sangat penting menu di dalamnya adalah : Crawl Errors, Crawl Stats, Fetch as Google, robots.txt, Tester, Sitemaps, URL Parameters. Dari Menu Crawl Erorr kita bisa menghapus link-link erorr yang sudah pernah kita masukkan di google. Patikan semua menu tersebut anda cek dan tidak ada erorr nya. Jika ada erorr, maka segeralah memperbaikinya agar web/blog anda mudah terindex google kembali. Pastikan juga bahwa anda men-Submit Sitemap.XML anda.
   
4. Kemunculan Pencarian ? Point - point yang dapat kita gunakan melalui menu ini. Yang pertama Struktur Data. Struktur data ini terdiri dari : Hentry (author, entry-title, updated), Review, WebSite, Person,  AggregateRating, hcard. Untuk melihat lebih jelasnya silahkan masuk ke google webmaster tools. Jika ada kesalahan, cepat memperbaikinya agar web/blog anda tetap dalam keadaan sehat dan baik

Nah setelah anda memahami fungsi dasar dari tools SEO dari google yang gratis ini maka saatnya kita lompat ke prosedur penggunaan GWT.

Masuk ke halaman google webmaster tools dengan email anda dan masukan property URL website anda

Nah ketika anda sudah memasukkan property ke console dari google tersebut, sekarang google ingin
mengetahui apakah ownership dari website yang ingin anda proses menggunakan GWT. Google akan memberikan beberapa cara yang bisa anda pilih.

Apabila anda tidak merasa aman dan nyaman dalam mengUpload file HTML anda, ada metode alternatif lain yang dapat anda gunakan, seperti menambahkan meta tags ke halaman index.html milik anda. Akan lebih mudah lagi apabila anda menggunakan tools gratis dari google lainnya seperti Google Analytics serta Google Tag Manager..

 

Selanjutnya kita akan mulai memasuki ke dalam console preference, disini anda dapat mengatur apakah GWT akan mengirimkan notifikasi tentang perkembangan SEO kedalam email anda,baik itu error ataupun notifikasi lainnya, tentu anda dapat mengEnable atau menDisable fitur ini secara manual.

.

Anda menambahkan user dan property owner dimana anda dapat mengasosiasikan kerabat kerja yang bekerja dengan anda yang ingin membantu usaha SEO bersama sama sehingga beberapa fitur dari GWT dapat anda bagi dengan kerabat kerja anda, yang pasti penambahan user dan property owner ini membutuhkan email gmail yang utama.

 

Yang berikutnya adalah Verification Detail sekarang ini adalah sesuatu yang sudah kita lakukan. Ini hanya akan memberi tahu Anda ketika seseorang telah mencoba memverifikasi akun, apakah itu gagal atau berhasil dan bagaimana mereka melakukan verifikasi kepemilikan situs ini.

Yang terakhir adalah Associates. Ini karena jika Anda ingin menambahkan pengguna baru yang terkait. Ini sering digunakan jika Anda ingin tidur siang dalam kaitannya dengan situs web Anda dan katakanlah Anda ingin Google pada kesempatan tertentu mengirimkannya kepada pengguna langsung ke aplikasi web versus situs web Anda, ini akan membantu Anda menyiapkannya di sini .

Setelah melakukan langkah di atas seiring waktu anda dapat melihat dan memonitoring hasil dari usaha SEO anda yang di lakukan di luar GWT, seperti SEO onpage dan SEO Offpage yang menggunakan banyak metode seperti yang dapat anda lihat yaitu Struktural Data website anda.

yang dimana Struktral Data pada GWT ini menampilkan dan digunakan untuk membantu Google mencari tahu apa sebenarnya situs Anda dan membantunya menampilkan Cuplikan Kaya dan hasil pencarian. Jadi ini adalah ketika Anda ingin menambahkan markup data terstruktur ke situs web Anda dan Anda dapat mencari jenis konten yang Anda miliki dan dalam kode Anda.

dan yang terakhir dalam postingan saya kali ini yaitu mengenai Search Traffic dan Search Analytics, yang pasti hal ini dapat di pantau dan di monitoring menggunakan GWT.

Search Traffic  ini jelas terkait dengan semua informasi tentang lalu lintas pencarian yang Anda terima di situs web Anda, dan itu memberi anda banyak informasi berharga yang dapat Anda gunakan untuk benar-benar meningkatkan peringkat Anda, dan meningkatkan lalu lintas Anda dan segala sesuatu yang terjadi dengan situs web.

Sedangkan untuk Search Analytics dapat menampilkan informasi dari situs anda, anda akan diberi bagan dari semua analitik pencarian Anda yang berbeda yang akan dapat Anda sesuaikan. Jadi anda benar-benar dapat menelusuri halaman tertentu, Anda benar-benar dapat membandingkan halaman yang berbeda dan ini akan memberi tahu Anda bagaimana Anda dapat meningkatkan konten yang ada di situs anda.


Conclusion : Banyak Tools tools untuk diluar sana yang mempunyai fitur yang tidak ada di GWT seperti Moz, SEMrush, dll. yang Tools apapun yang anda gunakan di luar sana tidak luput dari monitoring dari user atau property owner karena SEO ini adalah proses yang konsisten dan memerlukan beberapa sentuhan improvisasi, intinya kembali lagi dari bagaimana usaha kita dalam menggunakan tools tools gratis demi mencapai tujuan untuk site kita.


Reference :
https://www.amazeemetrics.com/en/blog/seo-tutorial-google-webmaster-tools

https://neilpatel.com/blog/beginners-guide-to-google-webmaster-tools/

https://support.google.com/webmasters/?hl=en

Search Engine Optimization for life ? why not ?

Selamat malam, selamat berbahagia, semoga para pembaca setia Blog Nostra selalu di berikan karunia kesehatan jiwa dan raga, kali ini saya pengen membagikan informasi yang cukup bermanfaat mengenai SEO, apalagi tentang penting gak sih SEO itu buat kehidupan suatu produk yang baru di go-live kan apalagi memaintain sehingga bisa menyalip para pencari produk anda.

Nah sebelum saya ulas lebih dalam lagi. APA SIH SEO itu ?? hmmm...

Search Engine Optimization ?? bukaann itu singkatan, jadi secara definitif SEO itu adalah sesuatu existensi ( kalau saya menyebutnya ) ilmu dalam dunia digital yakni proses atau aktifitas yang di lakukan secara kontinus  terhadap situs web atau halaman web anda / produk digital anda yang berbasis web kebanyakan sehingga ketika para pengguna internet mencari sesuatu yang berhubungan dengan isi dari situs web atau halaman web / produk kita itu, situs web anda akan di tampilkan dalam halaman awal dari mesin pencarian. ( sebagai contoh GOOGLE ).


Illustrasi SEO ?

siapa sih yang gak pengen situsnya peringkat 1 dalam pencarian kata kunci tertentu, sebagai contoh anda mempunyai sebuah perusahaan, perusahaan anda bergerak dibidang jasa konsultan software atau mempunyai produk yang bisa di pasarkan ke konsumer atau Business to Business. Nostra misalnya, nostra mempunyai banyak tipe jasa yakni seperti Nostra Consultant, Nostra Labs, Nostra DevOps, dsb. Maka dengan melakukan SEO atau optimisasi mesin pencari yang baik dan benar, ketika ada yang mencari dengan kata kunci Software House terbaik jakarta atau konsultan IT terbaik ( dengan bantuan mesin pencari web sebagai contoh GOOGLE ), situs web perusahaan anda akan berada dihalaman pertama daftar hasil pencarian. Semakin baik peringkat di halaman pertama dari berbagai macam kata kunci maka semakin teroptimalisasikan juga web perusahaan anda.


Terus Bedanya SEO sama Non-SEO gimana ? ( serta kelebihan dan kekurangannya )

dan masing masing kekurangan dari SEO & Non-SEO .

 Definisi Definisi dari SEO

1. Kata kunci (atau keyword atau KW) adalah satu kata yang diketikkan oleh pengguna internet di mesin pencari.
2.  SEO adalah search engine optimization atau search engine optimizer.
   Frasa kunci (atau key phrase) adalah frase (beberapa kata) yang diketikkan oleh pengguna internet di mesin pencari. Walau berbeda arti, frase kunci sering disebut sebagai kata kunci.
3.  SERP adalah search engine result page yaitu halaman hasil pencarian mesin pencari.

Berikut ini gambar visual dari definisi-definisi tersebut:

Apakah itu pencarian Organik dan pencarian non-Organik ?

Konsultan IT Indonesia yang diketikkan oleh pengguna internet di mesin pencari sebagaimana ilustrasi di atas disebut dengan “kata kunci” atau “keyword (disingkat KW)“  Ingat istilah penting bersinonim berikut ini:

1.  Hasil pencarian SEO = hasil pencarian alami = hasil pencarian tak-berbayar = hasil pencarian non-iklan = hasil pencarian organik
2.  Hasil pencarian non-SEO = hasil pencarian tidak alami = hasil pencarian berbayar = hasil pencarian iklan = hasil pencarian non-organik
3.  Jadi SEO selalu alami/organik, tak berbayar, non-iklan.
4.  Dan non-SEO selalu berbayar ( sebagai contoh kita menggunakan jasa Google Ads untuk menempatkan kita pada ranking teratas di beberapa Keyword / niche dalam kurun waktu tertentu ), dan yang pasti cara ini memang lebih cepat dalam mencari user yang mengklik menuju situs anda tetapi untuk anda yang ingin mengetahui lebih tentang SEO saya sarankan untuk menggunakan metode SEO secara alami ( alias Free ).
       

Tujuan SEO itu apa ?
Banyaaakkk, karena fokus SEO yakni meningkatkan Trafik, trafik berarti situs anda sering di kunjungi = situs anda lebih di kenal = situs anda banyak yang tahu ( jika situs anda mempunyai konten yang bermanfaat maka tidak luput pula kemungkinan untuk di share oleh pengguna internet juga besar ).

berikut ini saya jabarkan beberapa tujuan dari SEO.

1.  Meningkatkan Kualitas Trafik Kunjungan Calon Konsumen Produk atau Jasa AndaSebanyak mungkin pengunjung tersebut adalah pengunjung yang ditargetkan sesuai kata kunci yang akan Anda pilih, sehingga lalu-lintas / trafik pengunjung / kunjungan yang datang memang membutuhkan dan sedang mencari apa-apa yang Anda tawarkan di situs Anda. Hal ini menciptakan trafik kunjungan yang berkualitas ke situs Anda).
   
   
2. Meningkatkan Volume Trafik Kunjungan Pengguna InternetSupaya sebanyak-banyaknya pengunjung mendatangi situs kita dengan menjadi yang paling banyak diklik (berada di area berwarna merah pada click heatmap yaitu di bagian separuh halaman di atas/upper fold, lebih baik lagi menjadi nomor 1 – 3 di SERP).
3. Mempertahankan Kedua Jenis Trafik di Atas Secara BerkesinambunganSebagaimana Anda dipahami, dengan riset kata kunci yang benar dan proses SEO yang baik, peringkat pencarian yang bagus tercapai, maka ketiga tujuan utama SEO di atas akan mudah segera dicapai. Jika tujuan SEO Anda tercapai, dari tujuan dasar dan tujuan utama ini, maka dapat dipastikan akan banyak trafik tertarget menuju situs web atau halaman web yang Anda optimisasi untuk mesin pencari. Semakin banyak trafik tertarget, maka potensi tercapainya objektif atau tujuan akhir dari situs Anda akan semakin tinggi.

Nah setelah saya jabarkan beberapa definisi diatas, masa saya gak menyimpulkan apa aja gitu keuntungan SEO bagi pencari trafik dan kostumer yang ada di Internet ? dibawah ini sebagian besar saya jabarkan keuntungan dari SEO.

1. Biaya yang minimal. Namun masih perlu effort dan waktu yang adil. Oleh karena itu saya mengatakan bahwa SEO tidak gratis!
2. Cepat terkenal. Semakin sering situs web Anda di bagian atas mesin pencari, semakin banyak orang yang tahu web Anda.
3. Banyaknya traffic pengunjung. Jika situs web Anda berhasil berada di urutan pertama, atau setidaknya halaman pertama dari halaman mesin pencari, website Anda mempunyai kesempatan besar untuk mendapatkan banyak lalu lintas pengunjung.
4. Tidak harus Anda sendiri. Untuk melakukan SEO, Anda sendiri tidak perlu melakukannya. Anda dapat mencari orang atau menggunakan jasa SEO untuk mengerjakannya pada web Anda.
5. Berpeluang membuka jasa SEO. Jika Anda berhasil menerapkan SEO di situs web, Anda dapat membuka jasa pengerjaan SEO.

Reference :

https://medium.com/@georgekao/simple-guide-to-authentic-seo-1b9abb06eacf

https://www.searchenginejournal.com/a-day-in-the-life-of-an-seo/48159/ 

http://adiproject.com/jasa-seo/pengertian-fungsi-dan-tujuan-seo/

Integrasi Mock API dengan Aplikasi

Nah pada kesempatan di pertengahan maret 2018 kali ini, gue pengen berbagi gimana cara sih integrasi dari MockAPI kedalam aplikasi kita, just for info postingan gue kali ini lanjutan dari postingan pengenalan MockAPI dari mas Rukaan dan dapat di lihat disini :

Quick Backend Menggunakan MockAPI

Setelah lu bikin akun dan resource, lu bisa lihat method dan penggunaan apa saja yang harus di penuhi untuk mengeksekusi resource API yang sudah anda buat.

( method dan cara penggunaannya )

Setelah lu buat segala macam API tersebut lu tinggal panggil di aplikasi lu dengan HTTP protocol :

( memanggil mockAPI menggunakan vue.js )

dan Method nya lu bisa panggil menggunakan ajax ataupun lainnya.

( nambahin method untuk di terapkan di aplikasi ( service ) )

dan jangan lupa lu binding ke halaman HTMLnya, masing masing framework berbeda beda caranya ( angularjs, angular, react.js, vue.js, dll ) , dan apabila ingin menggunakan method seperti POST, PUT, dan DELETE, dapat di masukkan terlebih ke dalam function serta function tersebut baru di integrasiin ke HTMLnya beserta param yang akan di lempar :

( integrasi ke html menggunakan framework vue.js )

( data yang dilempar sebagai parameter untuk di integrasikan kedalam function )

dan setelah lu ngelakuin hal di atas, bisa di coba di aplikasi yang sedang anda jalankan dan develop :

( tampilan aplikasi dengan GET yang sudah di integrasikan dengan service API dari mockAPI )

dan di bawah ini contoh apabila menggunakan method POST :

( Tampilan pengisian form untuk di add )

Dan dibawah ini adalah hasil setelah action di atas :

( Tampilan setelah di add )

Cukup mudah bukan ?? semua yang membatasi adalah pengetahuan dari diri anda sendiri.
jadi.. keep coding and keep learning.

Sekian Postingan saya dalam kesempatan kali ini.

Reference :--------------------

MockAPI.io

Postingan sebelumnya oleh Rukaan

PDFmake. Client/server side PDF printing in pure JavaScript

Baiklah dalam kesempatan saya kali ini dalam kuartal pertama pada tahun 2018 ini, pada postingan saya yang kedua ini saya ingin berbagi knowledge mengenai PDFmake yang kebetulan di projek si MERAH , tool ini di gunakan guna untuk ngeprint suatu isi dari container dalam html yang datanya berasal dari service dan dinamis, maka saya menggunakan tool ini karena murni menggunakan javascript dan mempunyai banyak fitur. OKEH langsung saja, gimana sih cara nginstallnya ?

via NPM / Bower ?

bower install pdfmake <-- Bower Install
npm install pdfmake <-- NPM install

Apasih keuntungan menggunakan PDFmake ??
dibawah ini gue jabarin 3 keuntungan besar klo lu make PDFmake

• In-Browser
  Cetak PDF langsung di browser atau delegasikan ke backend NodeJS Anda. Gunakan definisi dokumen yang sama dalam kedua kasus.
• Fully Declarative
  Lupakan kalkulasi manual x, y. Deklarasikan struktur dokumen dan biarkan pdfmake melakukan sisanya.
  
  
• Powerful Layout Engine
  Gunakan paragraf, kolom, daftar, tabel, kanvas, dll. Deklarasikan gaya Anda sendiri, gunakan font khusus, bangun DSL dan perpanjang kerangkanya.

Fiturnya PDFmake gimana ??
Buanyakkk oke gue jelasin jabarin dibawah semua nih.

1. Basics
   ----------------------------------------------------------------------
   
   line-wrapping
   text-alignments left/right/centered/justified
   numbered and bulleted lists
   margins
   images and vector graphics
   ----------------------------------------------------------------------
2. Tables and Columns
   ----------------------------------------------------------------------
   

   auto/fixed/star-sized/percentage columns

   col-spans and row-spans

   headers automatically repeated in case of a page-break

   non-breaking rows

   non-breaking sections keeping headers and rows together

   ----------------------------------------------------------------------
3. Styling
   -----------------------------------------------------------------------
   

   convenient styling

   style inheritance

   custom style dictionaries

   -----------------------------------------------------------------------
4. Page Headers and Footers
   -----------------------------------------------------------------------
   

   static or dynamic content

   page numbers

   page count

   -----------------------------------------------------------------------
5. Client-side Helper Methods
   -----------------------------------------------------------------------
   

   open in another tab

   print auto-triggering print

   download with the specified filename

   -----------------------------------------------------------------------
6. Other
   -----------------------------------------------------------------------
   

   page dimensions and orientations

   custom page breaks

   font embedding

   support for complex, multi-level (nested) structures

   -----------------------------------------------------------------------

Gimana ? lumayan banyak kan ? hehehe...

How To  ??

INSTALL

Artikel ini akan memandu Anda melalui dasar-dasar pdfmake dan akan menunjukkan cara membuat file PDF di browser. Jika Anda tertarik untuk mencetak server-side, periksa contoh foldernya.

Untuk memulai dengan konfigurasi default, Anda harus menyertakan dua file:

• pdfmake.min.js
• vfs-font.js - Font default (berisi Roboto, Anda bisa menggunakan Custom Font sebagai gantinya)

 <!doctype html>
 <html lang='en'>
 <head>
  <meta charset='utf-8'>
  <title>my first pdfmake example</title>
  <script src='build/pdfmake.min.js'></script>
  <script src='build/vfs_fonts.js'></script>
 </head>
 <body>
 (...)

Anda dapat mendownload kedua file dari github atau dengan bower:

 bower install pdfmake

Dalam kasus terakhir Anda akan menemukan file di bawah bower_components / pdfmake / build.

DOCUMENT DEFINITION OBJECT :

pdfmake mengikuti pendekatan deklaratif.

Ini pada dasarnya berarti, Anda tidak perlu menghitung posisi secara manual atau menggunakan perintah seperti: writeText (teks, x, y) atau moveDown, seperti yang akan Anda lakukan dengan banyak perpustakaan lainnya.

Konsep paling mendasar yang harus dikuasai adalah document-definition-object yang bisa sesederhana:

 var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };

atau menjadi cukup kompleks (memiliki tabel multi level, gambar, daftar, paragraf, margin, styles dll ..).

Segera setelah Anda memiliki dokumen-definisi-objek, Anda siap untuk membuat dan membuka / mencetak / mendownload PDF:

 // open the PDF in a new window
 pdfMake.createPdf(docDefinition).open();

 // print the PDF
 pdfMake.createPdf(docDefinition).print();

 // download the PDF
 pdfMake.createPdf(docDefinition).download('optionalName.pdf');

STYLING :

pdfmake memungkinkan style paragraf atau bagiannya:

 var docDefinition = {
   content: [
     // if you don't need styles, you can use a simple string to define a paragraph
     'This is a standard paragraph, using default style',

     // using a { text: '...' } object lets you set styling properties
     { text: 'This paragraph will have a bigger font', fontSize: 15 },

     // if you set pass an array instead of a string, you'll be able
     // to style any fragment individually
     {
       text: [
         'This paragraph is defined as an array of elements to make it possible to ',
         { text: 'restyle part of it and make it bigger ', fontSize: 15 },
         'than the rest.'
       ]
     }
   ]
 };

STYLE DICTIONARIES :

Jika Anda menggunakan kembali gaya yang sama di seluruh dokumen, Anda mungkin harus memanfaatkannya.

Dictionary :

 var docDefinition = {
   content: [
     { text: 'This is a header', style: 'header' },
     'No styling here, this is a standard paragraph',
     { text: 'Another text', style: 'anotherStyle' },
     { text: 'Multiple styles applied', style: [ 'header', 'anotherStyle' ] }
   ],

   styles: {
     header: {
       fontSize: 22,
       bold: true
     },
     anotherStyle: {
       italic: true,
       alignment: 'right'
     }
   }
 };

Untuk memiliki pemahaman styling yang lebih dalam dalam pdfmake, pewarisan gaya dan penggantian styles lokal pada STYLES1, STYLES2 dan STYLES3 di playground.

COLUMNS :

Secara default paragraf diterjemahkan sebagai tumpukan elemen vertikal (satu di bawah yang lain). Namun mungkin untuk membagi ruang yang tersedia menjadi kolom.

var docDefinition = {
  content: [
    'This paragraph fills full width, as there are no columns. Next paragraph however consists of three columns',
    {
      columns: [
        {
          // auto-sized columns have their widths based on their content
          width: 'auto',
          text: 'First column'
        },
        {
          // star-sized columns fill the remaining space
          // if there's more than one star-column, available width is divided equally
          width: '*',
          text: 'Second column'
        },
        {
          // fixed width
          width: 100,
          text: 'Third column'
        },
        {
          // percentage width
          width: '10%',
          text: 'Last column'
        }
      ],
      // optional space between columns
      columnGap: 10
    },
    'This paragraph goes below all columns and has full width'
  ]
};

Kolom konten tidak terbatas pada teks sederhana. Ini sebenarnya bisa mengandung elemen pdfmake yang valid. Pastikan untuk melihat contoh COLUMNS di playground.

TABLE :

Tabel konseptual mirip dengan kolom. Namun mereka dapat memiliki header, perbatasan dan sel yang mencakup lebih dari beberapa kolom / baris.

var docDefinition = {
  content: [
    {
      table: {
        // headers are automatically repeated if the table spans over multiple pages
        // you can declare how many rows should be treated as headers
        headerRows: 1,
        widths: [ '*', 'auto', 100, '*' ],

        body: [
          [ 'First', 'Second', 'Third', 'The last one' ],
          [ 'Value 1', 'Value 2', 'Value 3', 'Value 4' ],
          [ { text: 'Bold value', bold: true }, 'Val 2', 'Val 3', 'Val 4' ]
        ]
      }
    }
  ]
};

Semua konsep yang terkait dengan tabel dijelaskan dalam contoh TABEL di taman playground.

LISTS :

pdfMake sangat mendukung dalam penggunaan numbered and bulleted lists:

var docDefinition = {
  content: [
    'Bulleted list example:',
    {
      // to treat a paragraph as a bulleted list, set an array of items under the ul key
      ul: [
        'Item 1',
        'Item 2',
        'Item 3',
        { text: 'Item 4', bold: true },
      ]
    },

    'Numbered list example:',
    {
      // for numbered lists set the ol key
      ol: [
        'Item 1',
        'Item 2',
        'Item 3'
      ]
    }
  ]
};

HEADER AND FOOTER :

Halaman header dan footer di pdfmake bisa jadi: statis atau dinamis.

var docDefinition = {
  header: 'simple text',

  footer: {
    columns: [
      'Left part',
      { text: 'Right part', alignment: 'right' }
    ]
  },

  content: (...)
};

Untuk konten yang dibuat secara dinamis (termasuk jumlah halaman dan jumlah halaman), Anda dapat mengirimkan sebuah fungsi ke header atau footer:

var docDefinition = {
  footer: function(currentPage, pageCount) { return currentPage.toString() + ' of ' + pageCount; },
  header: function(currentPage, pageCount) {
    // you can apply any logic and return any valid pdfmake element

    return { text: 'simple text', alignment: (currentPage % 2) ? 'left' : 'right' };
  },
  (...)
};

Demikian artikel dari postingan gue yang kedua, gue harap dapat membantu siapapun yang ingin mendevelop aplikasi berbasis javascript.

REFERENCE :

http://pdfmake.org

Membuat Blockchain Kurang dari 1 Jam ?? Bisa !

Hmm.. Pada post saya yang kedua ini saya ingin membagi apa yang saya ketahui tentang Blockchain ( Apa sih Blockchain itu ?? )

BLOCK CHAIN

teknologi pencatatan transaksi terintegrasi dengan teknologi modern, dimana memiliki kode unik yang tak bisa dirubah (kekal) yang merevolusi cara kerja internet, perbankan dan hal-hal lainnya.

Arti Kata '' BLOCK CHAIN

berasal dari Block dan Chain yang masing-masing memiliki makna tersendiri. Chain (rantai) adalah pencatatan berantai yang unik dan merupakan alur dari seluruh tahapan yang konsisten dari sebuah item/transaksi. Block (kotak khusus) adalah sebuah tempat/batasan/area khusus untuk menampung seluruh perubahan item/transaksi yang terjadi selama chain process.

Alasan mengapa tipe struktur data ini bermanfaat untuk hal-hal seperti kriptografi adalah desentralisasi, yang berarti catatan di dalam rantai ini tidak tersimpan di satu lokasi pun, dapat diakses oleh semua orang, dan tidak dapat diubah oleh satu pihak pun.

Pengaplikasian BLOCKCHAIN ?

Meskipun Blockchain paling sering dikaitkan dengan Bitcoin, ternyata ada banyak kegunaan untuk teknologi. Apa aja sih kategori aplikasi yang luas itu ? Cekidot !

1. Data serta Kontrak yang kredibel / dapat diverifikasi
   Blockchain dapat membuat rekaman data, file, atau kontrak yang dapat diverifikasi. Ini bisa berguna di Industri manapun yang menggunakan Big Data, seperti Industri medis atau pemerintah.
2. Mata Uang dan Aset Digital
   Blockchain yang membentuk Bitcoin mengirimkan uang secara global ke perorangan dan pedagang. Tapi Blockchains juga bisa menciptakan aset digital seperti saham dan obligasi.

Kita akan menggunakan Ethereum untuk membuat Smart Contract. Ethereum adalah Blockchain dengan bahasa pemrograman Turing-Complete, yang dapat menjalankan aplikasi pemodelan masalah komputasi apapun ( selama runtime dan memori memungkinkan ). Pastikan untuk membiasakan diri dengan persyaratan Ethereal berikut sebelum mulai.

Account adalah unit dasar atau objek di Ethereal. Blockchain melacak keadaan setiap akun. Ada dua jenis akun:

1. Externally Owned Accounts (EOA)
   yang di kendalikan oleh manusia
2. Contract Accounts
   yang dikendalikan oleh kode kontrak internal mereka dan dapat diaktifkan oleh Akun Eksternal.

"Smart Contract" atau "Decentralized Application (DApp)" 

ditentukan oleh kode dalam rekening kontrak yang akan diaktifkan saat EOA mengirimkan transaksi ke Rekening Kontrak. Rekening Kontrak dipicu oleh EOA eksternal untuk menghasilkan jawaban yang dapat disepakati oleh semua node yang melihatnya.'

Setiap akun berisi paling banyak empat landasan bidang:

1. Nonce (sebuah counter digunakan untuk memastikan setiap transaksi hanya terjadi satu kali)
2. Ether Balance
3. Contract Code
4. Storage

Transaksi adalah paket data yang ditandatangani yang menyimpan pesan yang dikirim dari satu akun ke akun lainnya. Ini berisi bidang data berikut:

1. Recipient
2. Signature
3. Amount of Ether transferred
4. Data

Ether adalah Etherium's Crptocurrency (ETH / USD = ~ $ 50, sampai hari ini) yang dipertukarkan sebagai biaya setiap kali proses transaksi di Ethereal.

Untuk mengurangi risiko transaksi berbahaya, seperti serangan Distributed Denial of Service (DDoS), Ethereum mengenakan biaya untuk setiap transaksi yang dilakukan melalui transaksi tersebut.

Jadi siapa yang mengumpulkan biaya ini? Ada node yang disebut penambang yang mengumpulkan biaya untuk memverifikasi dan melaksanakan semua transaksi. Kelompok miners melakukan transaksi ke blok yang kemudian dapat ditambahkan ke blockchain.

Sekarang setelah Anda memahami dasar bagaimana Etherium bekerja, saatnya untuk memulai.

Kita memerlukan Linux ( beberapa jenis OS Linux ) atau MacOS ( Menggunakan HomeBrew ) atau Windows 10 ( dengan menggunakan terminal dan binary ). Cara lengkap CLI dan teknik penginstallan dapat ditemukan disini

Membuat BLOCKCHAIN

Install Geth

Pertama Anda perlu menginstal Ethereal dari PPA. Di terminal Anda, jalankan command yang berikut ini:

sudo apt-get install -y software-properties-common
sudo add-apt-repository -y ppa:ethereum/ethereum
sudo apt-get update
sudo apt-get install -y ethereum

Sekarang Anda bisa membuat Genesis Block dengan membuat direktori baru dan menulis ke file json

cd
mkdir eth-new
cd eth-new
nano genesis.json

Selanjutnya, paste kode berikut ini ke dalam file json untuk membuat Genesis Block :

{
    "nonce": "0x0000000000000042",
    "mixhash": "0x0000000000000000000000000000000000000000000000000000000000000000",
    "difficulty": "0x4000",
    "alloc": {},
    "coinbase": "0x0000000000000000000000000000000000000000",
    "timestamp": "0x00",
    "parentHash": "0x0000000000000000000000000000000000000000000000000000000000000000",
    "extraData": "Custem Ethereum Genesis Block",
    "gasLimit": "0xffffffff"
}

Simpan file blok genesis baru ini dengan Ctrl + X, Y, Enter.

Creating Blockchain
Berikut ini adalah pembuatan Blockchain, dengan perintah maxpeers diatur ke 0 untuk menonaktifkan jaringan.

mkdir eth-data
geth --datadir eth-new genesis.json init eth-new/genesis.json --networkid 123 --nodiscover --maxpeers 0 console

Di konsol geth, ketikkan yang berikut untuk membuat akun baru dan membuat password baru dengan mengetikkan apa pun yang Anda inginkan. Anda harus mengetikkan password baru dua kali.

personal.newAccount()

Output setelah ini harus berupa serangkaian huruf dan angka - alamat akun Anda. Simpan alamat ini di suatu tempat dan keluar dengan mengetik "exit" dan tekan Enter.

Mengirim Ether ke Akun Anda
Anda perlu membuka kembali file Genesis Block. Ketik yang berikut ini:

nano genesis.json

Di dalam bracket "alloc", tempelkan alamat akun yang telah Anda simpan tadi. Anda harus terus maju dan memberi diri Anda keseimbangan Ether juga. Jumlah yang ditunjukkan di samping "balance" di bawah sama dengan 10 Ether.

{
    "nonce": "0x0000000000000042",
    "mixhash": "0x0000000000000000000000000000000000000000000000000000000000000000",
    "difficulty": "0x4000",
    "alloc": {
    "0x09c7b615a1c5b3016ff6b521723364aa9382ec6e": {
        "balance": "10000000000000000000"
     }
    },
    "coinbase": "0x0000000000000000000000000000000000000000",
    "timestamp": "0x00",
    "parentHash": "0x0000000000000000000000000000000000000000000000000000000000000000",
    "extraData": "Custem Ethereum Genesis Block",
    "gasLimit": "0xffffffff"
}

Setelah selesai updating, simpan file dengan Ctrl + X, Y, Enter.

Menghapus Blockchain Lama dan CreateYang Baru
Jalankan perintah ini untuk menghapus data blokir lama dan restart geth:

cd eth-data
rm -rf chaindata dapp history nodekey
cd ..
geth --datadir eth-new genesis.json --networkid 123 --nodiscover --maxpeers 0 console

Di konsol geth, jalankan command berikut:

> primary = eth.accounts[0]
> web3.fromWei(eth.getBalance(primary), "ether")

Alamat anda akan muncul, begitu juga dengan saldo anda 10 Ether.


Start Mining
Untuk memiliki working Blockchain, Anda perlu membuat penambang. Untuk melakukan ini, keluar dari konsol geth dengan mengetik "exit" dan tekan Enter.

Untuk memulai mining, jalankan command ini:

geth --mine --datadir eth-data --networkid 123 --nodiscover --> maxpeers 0 console 2>>geth.log

Geth sekarang akan mulai. Anda telah membuat penambang yang, seperti yang saya sebutkan sebelumnya, mengumpulkan biaya ether. Ketik perintah di bawah ini untuk memeriksa saldo Anda sekarang:

> primary = eth.accounts[0]
> balance = web3.fromWei(eth.getBalance(primary), "ether")

Anda sekarang seharusnya memiliki lebih banyak Ether daripada sebelumnya.

Installing Solc
Kontrak Ethereal yang Andakerjakan akan ditulis dalam Solidity. Anda harus menginstal kompiler Solc agar bisa menggunakan Solidity. Untuk melakukan ini, buka terminal baru dan ketik yang berikut ini:

bash
sudo add-apt-repository ppa:ethereum/ethereum

Sebuah pesan muncul dengan mengucapkan "Press Enter To Continue." Tekan Enter lalu ketik  perintah yang berikut ini:

sudo apt-get update
sudo apt-get install solc -y
which solc

Ini akan menampilkan jalan ke Solc, yang perlu Anda ingat. Kembali ke jendela Terminal yang menampilkan konsol geth. Jalankan perintah ini, ubah <path> ke jalan yang dikembalikan kepada Anda:

admin.setSolc("<path>")
eth.getCompilers()

Tanggapan terhadap perintah kedua adalah ["Solidity"] yang memberitahu kita bahwa Anda sekarang memiliki Solc dan dapat menggunakan Solidity.

Understanding Greeter Contract
Berikut adalah kode untuk kontrak sederhana dengan menambahkan komentar, diambil dan dimodifikasi dari Kelas Sams. Ini berisi dua jenis kontrak. Yang pertama, sebuah kontrak yang tidak abadi / mortal, menentukan sebuah kontrak yang bisa dihapus / dibunuh oleh orang yang menulisnya dan perlu diumumkan seperti itu, karena kontraknya abadi secara default. Yang kedua adalah Greeter Contract yang akan mencetak sedikit output sapaan.

contract mortal {
    /* Define var owner of the type address*/
    address owner;

    /* this function sets the owner of the contract */
    function mortal() { owner = msg.sender; }

    /* Function to recover fees */
    function kill() { if (msg.sender == owner) selfdestruct(owner); }
}

contract greeter is mortal {
    /* define variable greeting type*/
    string greeting;

    /* this runs when the contract is executed */
    function greeter(string _greeting) public {
        greeting = _greeting;
    }

    /* main*/
    function greet() constant returns (string) {
        return greeting;
    }
}

Unlocking Your Account
Memulai kontrak membutuhkan biaya Ether, jadi Anda perlu membuka kunci akun Anda. Anda bisa melakukan ini dengan mengetikkan yang berikut ini:

primary = eth.accounts[0]
personal.unlockAccount(primary)

dan ketika menginput password anda Begitu Anda melihat output "true", Anda akan tahu bahwa Anda telah berhasil membuka kunci akun Anda.


Compiling Your Contract
Di konsol geth, Copas seluruh kode snippet kontrak Anda dari sebelumnya dalam satu baris tanpa komentarnya:

var greeterSource = 'contract mortal { address owner; function mortal() { owner = msg.sender; } function kill() { if (msg.sender == owner) suicide(owner); } } contract greeter is mortal { string greeting; function greeter(string _greeting) public { greeting = _greeting; } function greet() constant returns (string) { return greeting; } }'

Ini akan kembali "undefined"


Di konsol geth, ketik berikut ini:

> var greeterCompiled = web3.eth.compile.solidity(greeterSource)

Preparing Your Contract For Deployment
Setelah Anda memiliki kontrak tidak abadi / mortal dan Greeter Contract Anda, Anda harus menentukan greeting dan memberi contoh objek akun Anda. Ini akan membutuhkan lebih banyak Ether.
di konsol geth, ketikkan command dibawah ini :

var _greeting = "Hello World!"
var greeterContract = web3.eth.contract(greeterCompiled.greeter.info.abiDefinition);

var greeter = greeterContract.new(_greeting, {from: eth.accounts[0], data: greeterCompiled.greeter.code, gas: 1000000}, function(e, contract){
  if(!e) {

    if(!contract.address) {
      console.log("Contract transaction send: TransactionHash: " + contract.transactionHash + " waiting to be mined...");

    } else {
      console.log("Contract mined! Address: " + contract.address);
      console.log(contract);
    }

  }
})

Pesan "Contract Transaction Send" muncul, dan setelah beberapa detik, Anda akan melihat pesan yang keluar "Contract Mined!"


Testing The Contract
Perintah berikut akan mengembalikan alamat yang panjang dan kemudian greeting anda.

eth.getCode(greeter.address)
greeter.greet()

Selamat !! Anda sudah membuat program Blockchain micro pertama Anda !

Demikian postingan kedua saya, saya harap dapat menambah pengetahuan untuk readers !! keep learning keep coding.

Reference :

https://github.com/ethereum/go-ethereum/wiki

https://medium.com/@ConsenSys/a-101-noob-intro-to-programming-smart-contracts-on-ethereum-695d15c1dab4