Jekyll2021-09-15T10:13:55+07:00http://coding4ever.net/feed.xml» Coding4ever’s Blog «Coding4ever's BlogKamarudinMembuat WhatsApp Bot itu gampang, jangan dipersulit !2020-11-22T21:44:50+07:002020-11-22T21:44:50+07:00http://coding4ever.net/blog/2020/11/22/whatsapp-bot<p><img src="http://coding4ever.net/assets/images/logo/wa-logo.png" alt="" class="align-left" />Beberapa waktu yang lalu saya merilis sebuah library dengan nama <a href="http://wa-net.coding4ever.net/">WhatsApp NET Client</a>. Library ini merupakan <code class="language-plaintext highlighter-rouge">hadiah</code> dari saya :grin: untuk teman-teman .NET Developer yang ingin membuat aplikasi yang bisa berkomunikasi dengan aplikasi WhatsApp Web secara mudah.</p>
<p>Dengan menggunakan library ini Anda bisa dengan mudah membuat aplikasi:</p>
<ul>
<li>WhatsApp Blast</li>
<li><a href="https://github.com/k4m4r82/OnlineTestWABot">WhatsApp Bot</a></li>
<li>Dan Aplikasi WhatsApp klien lainnya</li>
</ul>
<p>Jadi dipostingan kali ini kita akan memahas bagaimana mudahnya membuat aplikasi <a href="https://github.com/k4m4r82/OnlineTestWABot">WhatsApp Bot</a> dengan menggunakan library <a href="http://wa-net.coding4ever.net/">WhatsApp NET Client</a>. Jadi Anda tidak perlu lagi memikirkan bagaimana caranya berkomunikasi dengan WhatsApp web sehingga bisa lebih fokus ke proses bisnis atau logic aplikasi yang ingin dikembangkan.</p>
<p>Ok untuk contoh kasusnya kita akan membuat <a href="https://github.com/k4m4r82/OnlineTestWABot">WhatsApp Bot</a> dengan tema <strong>Tes Online Bahasa Inggris</strong>. Di tes online ini kita akan menjawab soalnya bahasa inggris dengan pilihan ganda.</p>
<p><img src="http://coding4ever.net/assets/images/2020/05-whatsapp-bot/05-screenshot-soal1.jpeg" alt="" class="align-center" /></p>
<h3 id="database">Database</h3>
<p>Pertama kita rancang dulu databasenya dan berhubung dulu saya juga pernah menulis postingan tentang database <a href="http://coding4ever.net/blog/2010/06/14/mengenal-lebih-dekat-database-sqlite/">SQLite</a> jadi untuk databasenya kita menggunakan SQLite saja.</p>
<p>SQLite adalah database standalone yang kecil, mungil dan gratis. Bagaimana cara membuat database di SQLite sudah saya bahas juga di <a href="http://coding4ever.net/blog/2010/06/14/mengenal-lebih-dekat-database-sqlite/">sini</a> kemudian bagaimana mengaksesnya dari aplikasi juga sudah saya bahasa di <a href="http://coding4ever.net/blog/2010/07/05/mengakses-database-sqlite-menggunakan-library-dhsqlite/">sini</a>.</p>
<p>Berikut adalah rancangan sederhana database tes online bahasa inggris yang akan kita buat :</p>
<p><img src="http://coding4ever.net/assets/images/2020/05-whatsapp-bot/01-struktur-database.png" alt="" class="align-center" /></p>
<h3 id="mengakses-whatsapp-web">Mengakses WhatsApp Web</h3>
<p>Ada banyak cara agar aplikasi kita berkomunikasi dengan WhatsApp Web, yang pertama bisa dengan menggunakan <a href="https://www.selenium.dev/">Selenium WebDriver</a> secara langsung, tapi tentunya cara ini (menggunakan <a href="https://www.selenium.dev/">Selenium WebDriver</a>) bukan cara yang favorit dikalangan programmer instan seperti Anda dan Saya :grin:, jadi dipostingan ini saya menggunakan library siap pakai seperti <a href="http://wa-net.coding4ever.net/">WhatsApp NET Client</a> yang bisa dengan mudah berkomunikasi dengan WhatsApp Web.</p>
<blockquote>
<p>Ingat library ini adalah library gratis, segala resiko (kemudahan dalam membuat aplikasi <a href="https://github.com/k4m4r82/OnlineTestWABot">WhatsApp Bot</a>) silahkan ditanggung sendiri :grin:.</p>
</blockquote>
<h3 id="whatsapp-net-client">WhatsApp NET Client</h3>
<p><a href="http://wa-net.coding4ever.net/">WhatsApp NET Client</a> adalah library gratis untuk .NET Developer yang digunakan untuk mengembangkan aplikasi WhatsApp klien berbasis desktop. Library ini dikembangkan di atas teknologi .NET dengan menggunakan bahasa pemrograman C#, sehingga bisa juga digunakan untuk semua bahasa pemrograman .NET selain C# seperti VB.NET, F#, C++ dan bahasa .NET lainnya.</p>
<p><a href="http://wa-net.coding4ever.net/">WhatsApp NET Client</a> mempunyai beberapa fungsi standard seperti membaca/membalas pesan yang masuk. Sehingga dengan adanya fitur ini kita bisa dengan mudah membuat aplikasi seperti <a href="https://github.com/k4m4r82/OnlineTestWABot">WhatsApp Bot</a>.</p>
<p>Berikut adalah beberapa cuplikan kode untuk membuat aplikasi <a href="https://github.com/k4m4r82/OnlineTestWABot">WhatsApp Bot</a> menggunakan library <a href="http://wa-net.coding4ever.net/">WhatsApp NET Client</a>:</p>
<h4 id="1-mengakses-whatsapp-web">1. Mengakses WhatsApp Web</h4>
<p>Langkah pertama yang harus kita lakukan adalah mengakses WhatsApp Web langsung dari library <a href="http://wa-net.coding4ever.net/">WhatsApp NET Client</a>. Untuk mengakses WhatsApp Web kita cukup memanggil method <code class="language-plaintext highlighter-rouge">Connect</code> dari objek WhatsApp NET Client.</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">private</span> <span class="n">IWhatsAppNETAPI</span> <span class="n">_whatsAppApi</span><span class="p">;</span> <span class="c1">// deklarasi objek WhatsApp NET Client</span>
<span class="k">private</span> <span class="k">void</span> <span class="nf">btnStart_Click</span><span class="p">(</span><span class="kt">object</span> <span class="n">sender</span><span class="p">,</span> <span class="n">EventArgs</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
<span class="n">_whatsAppApi</span> <span class="p">=</span> <span class="k">new</span> <span class="n">WhatsAppNETAPI</span><span class="p">.</span><span class="nf">WhatsAppNETAPI</span><span class="p">();</span>
<span class="kt">var</span> <span class="n">url</span> <span class="p">=</span> <span class="s">"https://web.whatsapp.com"</span><span class="p">;</span>
<span class="k">using</span> <span class="p">(</span><span class="k">new</span> <span class="nf">StCursor</span><span class="p">(</span><span class="n">Cursors</span><span class="p">.</span><span class="n">WaitCursor</span><span class="p">,</span> <span class="k">new</span> <span class="nf">TimeSpan</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">)))</span>
<span class="p">{</span>
<span class="c1">// buka chrome web browser untuk menjalankan WhatsApp Web</span>
<span class="k">if</span> <span class="p">(</span><span class="n">_whatsAppApi</span><span class="p">.</span><span class="nf">Connect</span><span class="p">(</span><span class="n">url</span><span class="p">))</span>
<span class="p">{</span>
<span class="k">while</span> <span class="p">(!</span><span class="n">_whatsAppApi</span><span class="p">.</span><span class="nf">OnReady</span><span class="p">())</span>
<span class="p">{</span>
<span class="n">Thread</span><span class="p">.</span><span class="nf">Sleep</span><span class="p">(</span><span class="m">1000</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">// subscribe event OnMessageRecieved </span>
<span class="n">_whatsAppApi</span><span class="p">.</span><span class="n">OnMessageRecieved</span> <span class="p">+=</span> <span class="n">OnMessageRecievedEventHandler</span><span class="p">;</span>
<span class="n">_whatsAppApi</span><span class="p">.</span><span class="nf">MessageSubscribe</span><span class="p">();</span>
<span class="n">btnStart</span><span class="p">.</span><span class="n">Enabled</span> <span class="p">=</span> <span class="k">false</span><span class="p">;</span>
<span class="n">btnStop</span><span class="p">.</span><span class="n">Enabled</span> <span class="p">=</span> <span class="k">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span>
<span class="n">_whatsAppApi</span><span class="p">.</span><span class="nf">Disconnect</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
<h4 id="2-subcribelisten-pesan-yang-masuk">2. Subcribe/listen pesan yang masuk</h4>
<p>Untuk subcribe/listen pesan yang masuk kita cukup menambahkan kode berikut:</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="n">_whatsAppApi</span><span class="p">.</span><span class="n">OnMessageRecieved</span> <span class="p">+=</span> <span class="n">OnMessageRecievedEventHandler</span><span class="p">;</span>
<span class="n">_whatsAppApi</span><span class="p">.</span><span class="nf">MessageSubscribe</span><span class="p">();</span></code></pre></figure>
<p>Kode di atas di panggil pada saat user menekan tombol Start (Langkah 1 - Mengakses WhatsApp Web). Untuk keperluan subscribe event <code class="language-plaintext highlighter-rouge">OnMessageRecieved</code> ini, kita perlu menyediakan method event handler yang akan merespon ketika event <code class="language-plaintext highlighter-rouge">OnMessageRecieved</code> tersebut aktif.</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">private</span> <span class="k">void</span> <span class="nf">OnMessageRecievedEventHandler</span><span class="p">(</span><span class="n">MsgArgs</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
<span class="kt">var</span> <span class="n">user</span> <span class="p">=</span> <span class="k">new</span> <span class="n">User</span>
<span class="p">{</span>
<span class="n">user_id</span> <span class="p">=</span> <span class="n">e</span><span class="p">.</span><span class="n">Sender</span>
<span class="p">};</span>
<span class="kt">var</span> <span class="n">chat</span> <span class="p">=</span> <span class="k">new</span> <span class="n">Chat</span>
<span class="p">{</span>
<span class="n">user_id</span> <span class="p">=</span> <span class="n">e</span><span class="p">.</span><span class="n">Sender</span><span class="p">,</span>
<span class="n">text</span> <span class="p">=</span> <span class="n">e</span><span class="p">.</span><span class="n">Msg</span>
<span class="p">};</span>
<span class="kt">var</span> <span class="n">msgToReplay</span> <span class="p">=</span> <span class="kt">string</span><span class="p">.</span><span class="n">Empty</span><span class="p">;</span>
<span class="nf">AutoReplay</span><span class="p">(</span><span class="n">user</span><span class="p">,</span> <span class="n">chat</span><span class="p">,</span> <span class="k">ref</span> <span class="n">msgToReplay</span><span class="p">);</span>
<span class="n">_whatsAppApi</span><span class="p">.</span><span class="nf">SendMessage</span><span class="p">(</span><span class="k">new</span> <span class="nf">MsgArgs</span><span class="p">(</span><span class="n">e</span><span class="p">.</span><span class="n">Sender</span><span class="p">,</span> <span class="n">msgToReplay</span><span class="p">));</span>
<span class="p">}</span></code></pre></figure>
<p>Ketika method ini dijalankan, di dalamnya kita akan melakukan parsing pesan yang masuk, mengolahnya, dan kemudian mengirimkan hasilnya dengan memanggil method <code class="language-plaintext highlighter-rouge">SendMessage</code>.</p>
<h4 id="3-memparsing-pesan-yang-masuk-kemudian-membalasnya">3. Memparsing pesan yang masuk kemudian membalasnya</h4>
<p>Langkah berikutnya adalah menyiapkan method yang bertugas untuk memparsing pesan yang masuk.</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">private</span> <span class="k">void</span> <span class="nf">AutoReplay</span><span class="p">(</span><span class="n">User</span> <span class="n">user</span><span class="p">,</span> <span class="n">Chat</span> <span class="n">chat</span><span class="p">,</span> <span class="k">ref</span> <span class="kt">string</span> <span class="n">msgToReplay</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="n">chat</span><span class="p">.</span><span class="n">text</span><span class="p">.</span><span class="n">Length</span> <span class="p">></span> <span class="m">0</span><span class="p">)</span>
<span class="p">{</span>
<span class="kt">var</span> <span class="n">splitPesan</span> <span class="p">=</span> <span class="n">chat</span><span class="p">.</span><span class="n">text</span><span class="p">.</span><span class="nf">Split</span><span class="p">(</span><span class="sc">' '</span><span class="p">);</span>
<span class="kt">var</span> <span class="n">keyword</span> <span class="p">=</span> <span class="n">splitPesan</span><span class="p">[</span><span class="m">0</span><span class="p">];</span>
<span class="kt">var</span> <span class="n">param</span> <span class="p">=</span> <span class="kt">string</span><span class="p">.</span><span class="n">Empty</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="n">splitPesan</span><span class="p">.</span><span class="nf">Count</span><span class="p">()</span> <span class="p">></span> <span class="m">1</span><span class="p">)</span> <span class="n">param</span> <span class="p">=</span> <span class="n">splitPesan</span><span class="p">[</span><span class="m">1</span><span class="p">];</span>
<span class="nf">SaveUser</span><span class="p">(</span><span class="n">user</span><span class="p">);</span>
<span class="nf">SaveChat</span><span class="p">(</span><span class="n">chat</span><span class="p">);</span>
<span class="kt">var</span> <span class="n">perintahBot</span> <span class="p">=</span> <span class="k">new</span> <span class="nf">PerintahBot</span><span class="p">();</span>
<span class="k">switch</span> <span class="p">(</span><span class="n">keyword</span><span class="p">.</span><span class="nf">ToLower</span><span class="p">())</span>
<span class="p">{</span>
<span class="k">case</span> <span class="s">"/about"</span><span class="p">:</span>
<span class="n">msgToReplay</span> <span class="p">=</span> <span class="kt">string</span><span class="p">.</span><span class="nf">Format</span><span class="p">(</span><span class="n">ABOUT</span><span class="p">,</span> <span class="n">_currentVersion</span><span class="p">,</span> <span class="n">AUTHOR</span><span class="p">,</span> <span class="n">EMAIL</span><span class="p">,</span> <span class="n">URL</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s">"/bantuan"</span><span class="p">:</span>
<span class="n">msgToReplay</span> <span class="p">=</span> <span class="kt">string</span><span class="p">.</span><span class="nf">Format</span><span class="p">(</span><span class="n">BANTUAN</span><span class="p">,</span> <span class="n">_currentVersion</span><span class="p">,</span> <span class="n">AUTHOR</span><span class="p">,</span> <span class="n">EMAIL</span><span class="p">,</span> <span class="n">URL</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s">"/mulai"</span><span class="p">:</span>
<span class="n">perintahBot</span><span class="p">.</span><span class="nf">Mulai</span><span class="p">(</span><span class="n">user</span><span class="p">.</span><span class="n">user_id</span><span class="p">,</span> <span class="k">ref</span> <span class="n">msgToReplay</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s">"/soal"</span><span class="p">:</span>
<span class="n">perintahBot</span><span class="p">.</span><span class="nf">Soal</span><span class="p">(</span><span class="n">user</span><span class="p">.</span><span class="n">user_id</span><span class="p">,</span> <span class="k">ref</span> <span class="n">msgToReplay</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s">"/soalterakhir"</span><span class="p">:</span>
<span class="n">perintahBot</span><span class="p">.</span><span class="nf">SoalTerakhir</span><span class="p">(</span><span class="n">user</span><span class="p">.</span><span class="n">user_id</span><span class="p">,</span> <span class="k">ref</span> <span class="n">msgToReplay</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s">"/jawab"</span><span class="p">:</span>
<span class="n">perintahBot</span><span class="p">.</span><span class="nf">Jawab</span><span class="p">(</span><span class="n">user</span><span class="p">.</span><span class="n">user_id</span><span class="p">,</span> <span class="n">param</span><span class="p">,</span> <span class="k">ref</span> <span class="n">msgToReplay</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s">"/batal"</span><span class="p">:</span>
<span class="n">perintahBot</span><span class="p">.</span><span class="nf">Batal</span><span class="p">(</span><span class="n">user</span><span class="p">.</span><span class="n">user_id</span><span class="p">,</span> <span class="k">ref</span> <span class="n">msgToReplay</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="s">"/selesai"</span><span class="p">:</span>
<span class="n">perintahBot</span><span class="p">.</span><span class="nf">Selesai</span><span class="p">(</span><span class="n">user</span><span class="p">.</span><span class="n">user_id</span><span class="p">,</span> <span class="k">ref</span> <span class="n">msgToReplay</span><span class="p">);</span>
<span class="k">break</span><span class="p">;</span>
<span class="k">default</span><span class="p">:</span>
<span class="n">msgToReplay</span> <span class="p">=</span> <span class="kt">string</span><span class="p">.</span><span class="nf">Format</span><span class="p">(</span><span class="n">PERINTAH_SALAH</span><span class="p">,</span> <span class="n">keyword</span><span class="p">.</span><span class="nf">ToLower</span><span class="p">());</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="n">Console</span><span class="p">.</span><span class="nf">WriteLine</span><span class="p">(</span><span class="s">"msgToReplay: {0}"</span><span class="p">,</span> <span class="n">msgToReplay</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
<p>Kemudian method ini kita panggil melalui method <code class="language-plaintext highlighter-rouge">OnMessageRecievedEventHandler</code>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/05-whatsapp-bot/02-method-OnMessageRecievedEventHandler.png" alt="" class="align-center" /></p>
<h4 id="4-menutup-whatsapp-web">4. Menutup WhatsApp Web</h4>
<p>Terakhir untuk menutup komunikasi ke WhatsApp Web, kita cukup memanggil method Disconnect dari object WhatsApp NET Client</p>
<figure class="highlight"><pre><code class="language-csharp" data-lang="csharp"><span class="k">private</span> <span class="k">void</span> <span class="nf">btnStop_Click</span><span class="p">(</span><span class="kt">object</span> <span class="n">sender</span><span class="p">,</span> <span class="n">EventArgs</span> <span class="n">e</span><span class="p">)</span>
<span class="p">{</span>
<span class="k">using</span> <span class="p">(</span><span class="k">new</span> <span class="nf">StCursor</span><span class="p">(</span><span class="n">Cursors</span><span class="p">.</span><span class="n">WaitCursor</span><span class="p">,</span> <span class="k">new</span> <span class="nf">TimeSpan</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">)))</span>
<span class="p">{</span>
<span class="c1">// unsubscribe event OnMessageRecieved </span>
<span class="n">_whatsAppApi</span><span class="p">.</span><span class="n">OnMessageRecieved</span> <span class="p">-=</span> <span class="n">OnMessageRecievedEventHandler</span><span class="p">;</span>
<span class="n">_whatsAppApi</span><span class="p">.</span><span class="nf">MessageUnSubscribe</span><span class="p">();</span>
<span class="c1">// tutup chrome web browser</span>
<span class="n">_whatsAppApi</span><span class="p">.</span><span class="nf">Disconnect</span><span class="p">();</span>
<span class="n">btnStart</span><span class="p">.</span><span class="n">Enabled</span> <span class="p">=</span> <span class="k">true</span><span class="p">;</span>
<span class="n">btnStop</span><span class="p">.</span><span class="n">Enabled</span> <span class="p">=</span> <span class="k">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span></code></pre></figure>
<h3 id="screenshot">Screenshot</h3>
<p>Ini adalah tampilkan aplikasi utama <a href="https://github.com/k4m4r82/OnlineTestWABot">WhatsApp Bot</a>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/05-whatsapp-bot/08-whatapp-bot.jpeg" alt="" class="align-center" /></p>
<p>Dan di bawah ini adalah screenshot ketika Anda berinteraksi dengan <a href="https://github.com/k4m4r82/OnlineTestWABot">WhatsApp Bot</a> via WhatsApp mobile.</p>
<h4 id="1-menampilkan-perintah-yang-tersedia">1. Menampilkan perintah yang tersedia</h4>
<p>Untuk menampilkan perintah yang tersedia, cukup dengan mengirimkan pesan: <code class="language-plaintext highlighter-rouge">/bantuan</code></p>
<p><img src="http://coding4ever.net/assets/images/2020/05-whatsapp-bot/03-screenshot-bantuan.jpeg" alt="" class="align-center" /></p>
<h4 id="2-memulai-sesi-tes-online">2. Memulai sesi tes online</h4>
<p>Untuk memulai sesi tes online, kirimkan pesan: <code class="language-plaintext highlighter-rouge">/mulai</code></p>
<p><img src="http://coding4ever.net/assets/images/2020/05-whatsapp-bot/04-screenshot-mulai.jpeg" alt="" class="align-center" /></p>
<h4 id="3-menampilkan-soal-tes">3. Menampilkan soal tes</h4>
<p>Untuk menampilkan soal tes online, kirimkan pesan: <code class="language-plaintext highlighter-rouge">/soal</code> dan untuk menjawabnya kirim pesan: <code class="language-plaintext highlighter-rouge">/jawab jawaban</code></p>
<p><img src="http://coding4ever.net/assets/images/2020/05-whatsapp-bot/05-screenshot-soal1.jpeg" alt="" class="align-center" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/05-whatsapp-bot/06-screenshot-soal2.jpeg" alt="" class="align-center" /></p>
<h4 id="4-selesai">4. Selesai</h4>
<p>Terakhir untuk mengakhiri sesi tes online, kirimkan pesan: <code class="language-plaintext highlighter-rouge">/selesai</code></p>
<p><img src="http://coding4ever.net/assets/images/2020/05-whatsapp-bot/07-screenshot-selesai.jpeg" alt="" class="align-center" /></p>
<p>Selamat <a href="https://github.com/k4m4r82/OnlineTestWABot">MENCOBA</a> :blush:</p>
<p>Referensi:</p>
<ul>
<li><a href="http://wa-net.coding4ever.net/">WhatsApp Client Library for .NET Developer</a></li>
<li><a href="https://unicode.org/emoji/charts/full-emoji-list.html#1f976">Full Emoji List</a> - kode unicode untuk menampilkan emoji</li>
</ul>KamarudinBeberapa waktu yang lalu saya merilis sebuah library dengan nama WhatsApp NET Client. Library ini merupakan hadiah dari saya :grin: untuk teman-teman .NET Developer yang ingin membuat aplikasi yang bisa berkomunikasi dengan aplikasi WhatsApp Web secara mudah.WhatsApp Client Library untuk .NET Developer2020-07-07T15:18:00+07:002020-07-07T15:18:00+07:00http://coding4ever.net/blog/2020/07/07/whatsapp-net-client<p><img src="http://coding4ever.net/assets/images/logo/wa-logo.png" alt="" class="align-left" />WhatsApp NET Client adalah library untuk .NET Developer yang digunakan untuk mengembangkan aplikasi WhatsApp klien berbasis desktop. Library ini dikembangkan di atas teknologi .NET dengan menggunakan bahasa pemrograman C#, sehingga bisa juga digunakan untuk semua bahasa pemrograman .NET selain C# seperti VB.NET, F#, C++ dan bahasa .NET lainnya.</p>
<p>Dengan menggunakan library ini Anda bisa dengan mudah membuat aplikasi:</p>
<ul>
<li>WhatsApp Blast</li>
<li><a href="https://github.com/k4m4r82/OnlineTestWABot">WhatsApp Bot</a></li>
<li>Dan aplikasi WhatsApp klien lainnya</li>
</ul>
<h2 id="fitur">Fitur</h2>
<ul>
<li>Full mode siluman (headless/no window). Anda bisa mengatakan selamat tinggal kepada chrome/firefox browser yang biasanya muncul untuk menjalankan WhatsApp Web.</li>
<li>Otomatis menyimpan sesi login (jadi scan qr code WAnya cukup sekali saja)</li>
<li>Mendukung penggunaan <a href="https://github.com/WhatsAppNETClient/WhatsAppNETClientMultiAccount">multi account WA</a></li>
<li>Grab contacts untuk membaca kontak WA sehingga hasilnya bisa disimpan ke database</li>
<li>Grab groups dan members untuk membaca data group beserta anggotanya sehingga hasilnya juga bisa disimpan ke database</li>
<li>Mengirim pesan personal atau group</li>
<li>Mengirim banyak pesan (broadcast)</li>
<li>Mengirim pesan dengan gambar, audio, video, dan semua jenis dokumen</li>
<li>Mengirim pesan dengan gambar, audio, video, dan semua jenis dokumen via URL</li>
<li>Mengirim lokasi</li>
<li>ReplyMessage (quoted message)</li>
<li>Bisa menyimpan gambar, audio, video, semua jenis dokumen termasuk vcard dari pesan yang masuk (bisa ditentukan sendiri lokasi penyimpanannya)</li>
<li>Bisa juga membaca pesan dengan tipe vcard dan location</li>
<li>Bisa membaca pesan dari group dan mendapatkan informasi pengirimnya</li>
<li>Subscribe event ChangeState untuk memonitoring perubahan status koneksi</li>
<li>Subscribe pesan yang masuk, jadi enggak perlu nambah objek timer lagi untuk membaca pesan masuk</li>
<li>Subscribe pesan yang dikirim, dengan fitur ini kita bisa mengecek apakah pesan yang dikirim berhasil atau gagal</li>
<li>Archive chat</li>
<li>Delete chat</li>
<li>Logout</li>
<li>Bisa dengan mudah diintegrasikan dengan semua jenis database</li>
</ul>
<h2 id="persyaratan-sistem">Persyaratan Sistem</h2>
<ul>
<li>Windows 8, 10 dan windows versi terbaru</li>
<li>.NET Framework 4.5 dan .NET versi terbaru</li>
<li>Node.js versi 14.16.x atau versi terbaru</li>
<li>Software git (version control)</li>
</ul>
<h2 id="instalasi">Instalasi</h2>
<p>Petunjuk instalasi bisa Anda lihat di <a href="http://wa-net.coding4ever.net/">http://wa-net.coding4ever.net/</a>.</p>
<h2 id="screenshot">Screenshot</h2>
<p>Di bawah ini adalah contoh aplikasi desktop yang dibuat dengan bantuan library WhatsApp NET Client.</p>
<p><img src="http://coding4ever.net/assets/images/2020/04-whatsapp-net-client/1.png" alt="" class="align-center" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/04-whatsapp-net-client/2.jpg" alt="" class="align-center" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/04-whatsapp-net-client/3.jpg" alt="" class="align-center" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/04-whatsapp-net-client/4.png" alt="" class="align-center" /></p>
<p>Selamat MENCOBA :blush:</p>
<p>Referensi:</p>
<ul>
<li><a href="http://wa-net.coding4ever.net/">WhatsApp Client Library for .NET Developer</a></li>
</ul>KamarudinWhatsApp NET Client adalah library untuk .NET Developer yang digunakan untuk mengembangkan aplikasi WhatsApp klien berbasis desktop. Library ini dikembangkan di atas teknologi .NET dengan menggunakan bahasa pemrograman C#, sehingga bisa juga digunakan untuk semua bahasa pemrograman .NET selain C# seperti VB.NET, F#, C++ dan bahasa .NET lainnya.ReportViewer untuk .NET Developer Bagian #12020-05-23T12:49:22+07:002020-05-23T12:49:22+07:00http://coding4ever.net/blog/2020/05/23/reportviewer-1<blockquote>
<p>Tak kenal maka tak sayang, tak sayang maka tak cinta.</p>
</blockquote>
<p><img src="http://coding4ever.net/assets/images/logo/rv-logo.png" alt="" class="align-left" />Mungkin inilah pepatah yang tepat sebagai pembuka postingan saya kali ini :grin:. Sudah banyak tool reporting yang saya gunakan untuk membuat laporan aplikasi mulai dari Data Report, Crystal Report, dan ActiveReport. Ketiga tool reporting ini saya gunakan ketika membuat aplikasi dengan menggunakan Visual Basic 6.</p>
<p>Ketika pindah ke platform .NET saya pun tetap menggunakan tool reporting yang sama yaitu Crystal Report .NET atau ActiveReport .NET. Walaupun waktu itu saya sudah mengetahui adanya ReportViewer yang merupakan tool reporting bawaan .NET, tapi ya karena memang sudah nyaman menggunakan Crystal Report .NET atau ActiveReport .NET jadi saya memang belum punya alasan atau motivasi yang kuat untuk nyobain yang namanya ReportViewer. Alasan lainnya karena waktu itu tool ReportViewer ini masih saya pandang sebelah mata, jadi saya masih mengganggap tool ini sama seperti tool Data Reportnya Visual Basic 6 yang kurang powerful untuk membuat laporan yang kompleks :grin:. Terakhir karena masalah lisensi akhirnya saya lebih memilih untuk menggunakan Crystal Report .NET dari pada ActiveReport .NET.</p>
<p>Nah masalah muncul ketika saya mulai mengembangkan project open source <a href="https://github.com/rudi-krsoftware/open-retail">OpenRetail</a> (2017). Sebenarnya bukan karena masalah teknis sih, tapi karena <a href="https://github.com/rudi-krsoftware/open-retail">OpenRetail</a> ini adalah project open source tentu akan menjadi <strong>mass production</strong> (produksi massal) yang akan digunakan oleh banyak orang. Masalahnya adalah file runtime Crystal Report .NET itu punya ukuran yang lumayan besar, yang terdiri dari dua versi yaitu 32 bit (75 mb) dan 64 bit (83 mb). Jadi klo saya membuat paket instalasi untuk <a href="https://github.com/rudi-krsoftware/open-retail">OpenRetail</a> berarti saya harus mengikutsertakan ke dua file runtime Crystal Report .NET tersebut. Anggap saja untuk hasil build/compile project <a href="https://github.com/rudi-krsoftware/open-retail">OpenRetail</a> ini adalah 10 mb berarti klo ditambah runtime Crystal Report .NET maka file setup yang dihasilkan akan berukuran lebih kurang 168 mb :scream:, ini belum termasuk runtime NET Framework loh ya yang berukuran 40-60 mban. Jadi boro-boro ada user yang mau nyobain, download aja males :grin:.</p>
<p>Singkat cerita setelah mendapat masukan dari salah satu teman yang menggunakan ReportViewer untuk tool reportingnya, saya pun memutuskan untuk menggunakan ReportViewer untuk keperluan pembuatan laporan di project <a href="https://github.com/rudi-krsoftware/open-retail">OpenRetail</a>. Motivasi utamanya jelas karena file runtime ReportViewer cuma berukuran 7.5 mb :thumbsup:.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/36-runtime-cr-vs-rv.png" alt="" class="align-center" /></p>
<p>Jadi dengan menggunakan ReportViewer ditambah dengan file-file runtime lainnya, paket instalasi <a href="https://github.com/rudi-krsoftware/open-retail">OpenRetail</a> yang dihasilnya hanya berukuran 22 mb. Lumayan ngiritkan dari 168 mb menjadi 22 mb :grin:.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/37-setup-openretail.png" alt="" class="align-center" /></p>
<h2 id="apa-itu-reportviewer">Apa itu ReportViewer?</h2>
<p>ReportViewer adalah tool reporting gratis yang dikembangkan Microsoft untuk platform .NET, selain gratis tool ini juga secara built-in sudah terinstall ketika kita menginstall Visual Studio .NET. Tapi sejak Visual Studio 2017, kita harus menginstall secara manual ReportViewer melalui menu <code class="language-plaintext highlighter-rouge">Tools</code> -> <code class="language-plaintext highlighter-rouge">Extensions and Update</code>.</p>
<p>Berikut adalah beberapa keuntungan menggunakan ReportViewer:</p>
<ul>
<li>Drag-and-drop.</li>
<li>Mendukung beberapa operasi standar seperti filtering, sorting grouping dan aggregation.</li>
<li>Mendukung beberapa cara menampilkan data seperti list, tabel, grafik dan matrik (crosstabs).</li>
<li>Mendukung conditional formatting atau embed expressions (bisa langsung coding direportnya).</li>
<li>Mendukung mode print langsung atau print preview.</li>
<li>Bisa dengan mudah mengatur jenis font, colors, border styles, background images dll.</li>
<li>Bisa di ekspor ke Excel, Word and PDF formats.</li>
<li>Selain bisa digunakan untuk WinForm dan WPF, ReportViewer juga bisa digunakan untuk project ASP.NET Web Forms atau ASP.NET MVC.</li>
</ul>
<h2 id="cara-mengirim-data-ke-reportviewer">Cara Mengirim Data ke ReportViewer</h2>
<p>Secara umum ada 2 cara yang bisa digunakan untuk mengirim data ke report.</p>
<ol>
<li>Pull model – kita mengeset koneksi ke database, mengirimkan perintah SQL, menentukan filter dan sisanya akan langsung ditangani oleh tool reporting. Cara yang pertama ini adalah cara umum yang biasanya digunakan untuk menampilkan data, dan rata-rata tutorial yang beredar juga menggunakan cara ini.</li>
<li>Push model – dengan cara yang kedua ini kita membuat tabel temporary dengan menggunakan objek DataSet, kemudian objek DataSet ini kita isi datanya dengan menggunakan objek collection, tapi sebelumnya objek collection ini kita olah dulu datanya dari aplikasi.</li>
</ol>
<p>Tool reporting seperti <a href="http://coding4ever.net/categories/crystal-reports-net/">CrystalReport.NET</a> mendukung 2 cara di atas, sedangkan <a href="http://coding4ever.net/categories/reportviewer">ReportViewer</a> hanya mendukung cara yang kedua yaitu dengan menggunakan push model.</p>
<p>Nah pada postingan kali ini kita akan menggunakan cara yang kedua yaitu Push Model dengan sumber datanya berupa object collection.</p>
<h2 id="pembuatan-project-reportviewer">Pembuatan Project ReportViewer</h2>
<p>Adapun tool yang digunakan dalam pembuatan project kali ini adalah:</p>
<ol>
<li><a href="http://www.visualstudio.com/en-us/downloads/download-visual-studio-vs#d-community">Visual Studio Community 2013</a>, Anda bisa saja menggunakan Visual Studio .NET versi sebelumnya (2010, 2012) atau versi yang lebih tinggi</li>
<li><a href="http://coding4ever.net/categories/nuget/">NuGet</a>, untuk memudahkan dalam menambahkan library pihak ketiga. Adapun library pihak ketiga yang digunakan dalam sample ini adalah <a href="http://coding4ever.net/categories/dapper-net/">Dapper .NET</a> dan <a href="https://www.nuget.org/packages/System.Data.SQLite.Core/">System.Data.SQLite.Core</a></li>
<li>ReportViewer</li>
<li>Database <a href="http://www.sqlite.org/">SQLite</a>, dengan menggunakan sample data database <a href="https://github.com/k4m4r82/ReportViewer1/tree/master/database">Northwind</a></li>
<li>Tipe project WinForm</li>
</ol>
<p>Untuk contoh postingan kali ini, kita hanya menggunakan satu buah tabel dengan struktur seperti berikut :</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/01-struktur-tabel.png" alt="" class="align-center" /></p>
<p>Setelah semua tool yang dibutuhkan tersedia kita lanjutkan dengan pembuatan project :</p>
<ul>
<li>
<p>Buat project baru dengan type WinForm</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/02-membuat-project.png" alt="" /></p>
</li>
<li>
<p>Kemudian atur atau sesuaikan struktur projectnya seperti gambar berikut</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/03-struktur-project.png" alt="" /></p>
<p>Berikut keterangan atau fungsi dari folder di atas:</p>
<ul>
<li>
<p>Controller</p>
<p>Selain berisi logic aplikasi, controller juga bertanggung jawab untuk mengatur komunikasi antara View dan Model. Jadi ketika ada <code class="language-plaintext highlighter-rouge">request</code> dari View, Controller akan menentukan Model yang manakah yang berhak merespon request tersebut.</p>
</li>
<li>
<p>Context</p>
<p>Folder Context berisi class yang bertanggung jawab untuk berinteraksi secara langsung dengan database, seperti membuat koneksi, menjalankan perintah sql seperti insert, update, delete dan select atau mengeksekusi objek database seperti store procedure dan function</p>
</li>
<li>
<p>Entity</p>
<p>Folder ini berisi class-class yang disebut dengan class model/entity. Class ini merupakan representasi dari tabel-tabel yang ada di dalam database. Tujuan dari pembuatan class ini adalah agar kita bisa melakukan mapping (pemetaan) baris/row yang merupakan hasil <code class="language-plaintext highlighter-rouge">SELECT</code> dari sebuah tabel menjadi sekumpulan objek (object collection).</p>
</li>
<li>
<p>Repository</p>
<p>Folder repository berisi class-class yang digunakan untuk menjalankan operasi <a href="https://en.wikipedia.org/wiki/Create,_read,_update_and_delete">CRUD</a>. Untuk informasi lebih lanjut tentang bagaimana cara membuat class repository, bisa Anda baca postingan saya yang berjudul <a href="http://coding4ever.net/categories/repository-pattern/">Repository Pattern</a>.</p>
</li>
<li>
<p>View</p>
<p>Folder ini berisi form atau file report (ReportViewer)</p>
</li>
</ul>
</li>
</ul>
<h2 id="class-modelentity">Class Model/Entity</h2>
<p>Untuk menerapkan konsep OOP (Object-oriented programming) dalam pemrograman database kita perlu membuat sebuah class yang disebut dengan istilah class Model atau Entity. Class ini merupakan representasi dari tabel-tabel yang ada di dalam database. Tujuan dari membuat class ini adalah agar kita bisa melakukan mapping (pemetaan) baris/row yang merupakan hasil <code class="language-plaintext highlighter-rouge">SELECT</code> dari sebuah tabel menjadi sekumpulan objek (object collection).</p>
<p>Pemetaan bisa dilakukan secara manual atau bisa juga secara otomatis dengan menggunakan tool-tool ORM dari pihak ketiga seperti <a href="http://coding4ever.net/categories/dapper-net/">Dapper .NET</a> dan <a href="http://coding4ever.net/categories/entity-framework/">Entity Framework</a>. Untuk contoh kali ini kita menggunakan <a href="http://coding4ever.net/categories/dapper-net/">Dapper .NET</a>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/04-ilustrasi-row-mapping.png" alt="" class="align-center" /></p>
<p>Setelah memahami apa itu class model dan bagaimana proses pemetaan record ke objek terjadi, langkah berikutnya adalah menambahkan class model/entity <code class="language-plaintext highlighter-rouge">Product</code> yang mempunyai struktur sama persis dengan rancangan tabel di awal.</p>
<p>Berikut langkah-langkah untuk menambahkan class model/entity.</p>
<ul>
<li>
<p>Klik kanan folder Entity -> Add -> Class…</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/05-add-class-entity1.png" alt="" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/06-add-class-entity2.png" alt="" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/07-add-class-entity3.png" alt="" /></p>
</li>
<li>
<p>Kemudian lengkapi kodenya seperti berikut:</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/08-class-product.png" alt="" /></p>
<p>Yang perlu diperhatikan pada saat membuat class model/entity, untuk penamaan property class sebaiknya disamakan dengan nama field yang ada di tabel. Jadi nanti akan mempermudah kita melakukan proses mapping (pemetaan) baris/row yang merupakan hasil <code class="language-plaintext highlighter-rouge">SELECT</code> dari sebuah tabel menjadi sekumpulan objek (object collection)</p>
</li>
</ul>
<h2 id="class-repository-dan-controller">Class Repository dan Controller</h2>
<p>Class <a href="http://coding4ever.net/categories/repository-pattern/">Repository</a> adalah class yang bertugas untuk menangani operasi database yang dikenal dengan istilah operasi <a href="https://en.wikipedia.org/wiki/Create,_read,_update_and_delete">CRUD</a> (Create, Read, Update dan Delete). Di dalam class inilah kita menuliskan perintah-perintah SQL seperti <code class="language-plaintext highlighter-rouge">INSERT</code>, <code class="language-plaintext highlighter-rouge">UPDATE</code>, <code class="language-plaintext highlighter-rouge">DELETE</code> dan <code class="language-plaintext highlighter-rouge">SELECT</code>.</p>
<p>Sebagai contoh kita akan mengambil salah satu method yang ada di dalam class <a href="https://github.com/k4m4r82/ReportViewer1/blob/master/src/ReportViewer1/Model/Repository/ProductRepository.cs">ProductRepository</a> yaitu method <a href="https://github.com/k4m4r82/ReportViewer1/blob/d5a0186cec424ca9227cb87dc69c4e3c520a463a/src/ReportViewer1/Model/Repository/ProductRepository.cs#L45">GetAll</a>. Method ini akan mengeksekusi perintah SQL SELECT kemudian merubah/mengonversi hasilnya yang berupa objek resultset menjadi objek collection dengan bantuan library <a href="http://coding4ever.net/categories/dapper-net/">Dapper.NET</a>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/09-method-getall-repository.png" alt="" class="align-center" /></p>
<p>Method <code class="language-plaintext highlighter-rouge">GetAll</code> yang ada di dalam class <a href="https://github.com/k4m4r82/ReportViewer1/blob/master/src/ReportViewer1/Model/Repository/ProductRepository.cs">ProductRepository</a> ini tidak langsung di panggil dari Form (View), tapi kita buatkan terlebih dulu method di class <a href="https://github.com/k4m4r82/ReportViewer1/blob/master/src/ReportViewer1/Controller/ProductController.cs">Controllernya</a> dengan nama yang sama yaitu <a href="https://github.com/k4m4r82/ReportViewer1/blob/d5a0186cec424ca9227cb87dc69c4e3c520a463a/src/ReportViewer1/Controller/ProductController.cs#L14">GetAll</a>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/10-method-getall-controller.png" alt="" class="align-center" /></p>
<p>Setelah itu baru kita panggil dari Form (View).</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/11-panggil-method-getall.png" alt="" class="align-center" /></p>
<p>Berikut adalah hasil dari pemanggilan kode di atas</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/12-form-product.png" alt="" class="align-center" /></p>
<h2 id="dataset">DataSet</h2>
<p>Dengan model data push kita tidak langsung menghubungkan antara ReportViewer dengan database, jadi sebagai solusinya kita menggunakan DataSet yang berfungsi sebagai tabel temporary dan menjadi sumber data bagi ReportViewer. DataSet ini sendiri, nantinya akan kita isi datanya berupa objek collection yang kita dapatkan dari pemanggilan method <code class="language-plaintext highlighter-rouge">GetAll</code> di atas.</p>
<p>Ada beberapa cara untuk membuat DataSet yaitu:</p>
<ol>
<li>
<p>Secara otomatis dengan memanfaatkan fasilitas Data Source, melalui menu Project -> Add New Data Source…</p>
<p>Dengan cara pertama ini kita bisa langsung memilih database berikut tabel atau view (query) yang datanya akan ditampilkan ke ReportViewer. Objek DataSet dan DataTablenya sudah otomatis dibuatkan.</p>
</li>
<li>
<p>Secara manual dengan menambahkan objek DataSet melalui klik kanan Project -> Add -> New Item… -> DataSet</p>
<p>Dengan cara yang kedua ini kita akan membuat objek DataSet dan DataTable secara manual.</p>
</li>
</ol>
<p>Di postingan ini kita akan menggunakan cara kedua. Berikut langkah-langkahnya:</p>
<ul>
<li>
<p>Klik kanan folder Report -> Add -> New Item…</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/13-add-dataset1.png" alt="" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/14-add-dataset2.png" alt="" /></p>
</li>
<li>
<p>Langkah berikutnya kita menambahkan DataTable</p>
<p>Caranya dengan klik kanan pada Designer Dataset</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/15-add-datatable1.png" alt="" /></p>
<p>Kemudian ganti nama DataTablenya menjadi Product. Untuk semua field yang ada di DataTable Product harus disesuaikan dengan struktur tabel product atau sesuai dengan property yang ada di dalam class Product.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/16-add-datatable2.png" alt="" /></p>
</li>
</ul>
<h2 id="mendesain-laporan-menggunakan-reportviewer">Mendesain Laporan Menggunakan ReportViewer</h2>
<p>ReportViewer adalah tool reporting gratis yang dikembangkan Microsoft untuk platform .NET, selain gratis tool ini juga secara built-in sudah terinstall ketika kita menginstall Visual Studio .NET.</p>
<p>Berikut langkah-langkah mendesain laporan menggunakan ReportViewer:</p>
<ul>
<li>
<p>Klik kanan folder Report -> Add -> New Item…</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/17-add-report1.png" alt="" /></p>
<p>setelah itu akan tampil Designer ReportViewer</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/18-add-report2.png" alt="" /></p>
<p>kemudian atur property <code class="language-plaintext highlighter-rouge">Copy to Output Directory</code> menjadi <code class="language-plaintext highlighter-rouge">Copy if Newer</code>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/32-add-report3.png" alt="" /></p>
</li>
<li>
<p>Berikutnya aktifkan panel Report Data melalui menu View -> Report Data</p>
<p>selanjutnya klik kanan folder Datasets -> Add Dataset…</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/19-add-report3.png" alt="" /></p>
<p>kemudian atur nilai properties datasetnya seperti gambar berikut:</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/20-add-report4.png" alt="" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/21-add-report5.png" alt="" /></p>
</li>
<li>
<p>Untuk menampilkan data dalam bentuk tabel kita bisa menggunakan komponen Table</p>
<p>Caranya klik kanan Designer ReportViewer -> Insert -> Table</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/22-inset-table.png" alt="" /></p>
<p>setelah itu atur ukuran tabelnya seperti berikut:</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/23-design-table1.png" alt="" /></p>
<p>Kemudian drag field-field yang akan ditampilkan ke komponen tabel.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/24-design-table2.png" alt="" /></p>
<p>Jika kolom/field tabelnya masih kurang, untuk menambahkannya kita tinggal klik kanan kolom yang terakhir -> insert column -> right. Anda bisa mengulangi langkah-langkah ini sampai semua kolom/field yang dibutuhkan sudah lengkap.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/25-design-table3.png" alt="" /></p>
<p>Khusus untuk kolom No (No urut) karena nilainya tidak dibaca dari Dataset, kita bisa menggunakan built-in function <code class="language-plaintext highlighter-rouge">RowNumber</code> untuk mendapatkan nomor baris. Jadi kita tinggal panggil fungsi ini melalui property <code class="language-plaintext highlighter-rouge">Value</code>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/26-design-table4.png" alt="" /></p>
<p>Berikut hasil akhir design komponen tabel yang sudah dirapikan</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/27-design-table5.png" alt="" /></p>
<p>Untuk menambahkan judul laporan di atas (<strong>LAPORAN PRODUCT</strong>), kita bisa menggunakan komponen <code class="language-plaintext highlighter-rouge">TextBox</code>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/28-design-table6.png" alt="" /></p>
</li>
</ul>
<h2 id="menambahkan-komponen-reportviewer">Menambahkan Komponen ReportViewer</h2>
<p>Setelah semua persiapan selesai, langkah berikutnya adalah menambahkan komponen ReportViewer yang berfungsi sebagai container untuk untuk menampilkan report. Tapi sebelumnya kita akan menambahkan terlebih dulu form baru untuk menempatkan komponen ReportViewer ini. Form baru ini kita beri nama <code class="language-plaintext highlighter-rouge">FrmPreview</code>, di form inilah kita akan menempatkan komponen ReportViewer.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/29-add-reportviewer1.png" alt="" /></p>
<p>Berikut langkah-langkah menambahkan komponen ReportViewer:</p>
<ul>
<li>
<p>Aktifkan FrmPreview kemudian tambahkan Komponen ReportViewer</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/30-add-reportviewer2.png" alt="" /></p>
<p>kemudian tambahkan kode berikut di <a href="https://github.com/k4m4r82/ReportViewer1/blob/master/src/ReportViewer1/View/FrmPreview.cs">FrmPreview</a></p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/31-add-reportviewer3.png" alt="" /></p>
</li>
<li>
<p>Setelah menambahkan kode di atas, kembali ke FrmProduct kemudian klik ganda button Preview</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/33-button-preview1.png" alt="" /></p>
<p>kemudian lengkapi kodenya seperti berikut:</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/34-button-preview2.png" alt="" /></p>
<p>Setelah melengkapi kode terakhir ini, kita tinggal jalankan aplikasinya kemudian klik button Preview. Berikut adalah contoh hasil laporan yang dibuat menggunakan ReportViewer :blush: :thumbsup:.</p>
<p><img src="http://coding4ever.net/assets/images/2020/02-report-viewer-1/35-reportviewer-preview.png" alt="" /></p>
</li>
</ul>
<p>Selamat <a href="https://github.com/k4m4r82/ReportViewer1">MENCOBA</a> :blush:</p>
<p>Referensi:</p>
<ul>
<li><a href="http://www.gotreportviewer.com/">Got ReportViewer</a></li>
<li><a href="https://docs.microsoft.com/en-us/sql/reporting-services/application-integration/using-the-winforms-reportviewer-control?view=sql-server-ver15">Use the WinForms ReportViewer Control</a></li>
</ul>KamarudinTak kenal maka tak sayang, tak sayang maka tak cinta.Proteksi Hasil Compile Aplikasi Anda Menggunakan ConfuserEx2020-05-13T22:19:44+07:002020-05-13T22:19:44+07:00http://coding4ever.net/blog/2020/05/13/confuser-ex<h2 id="apa-itu-confuserex">Apa itu ConfuserEx?</h2>
<p><img src="http://coding4ever.net/assets/images/logo/confuser-ex-logo.png" alt="" class="align-left" /><a href="https://yck1509.github.io/ConfuserEx/">ConfuserEx</a> adalah tool open-source yang berfungsi untuk melindungi hasil compile aplikasi yang dikembangkan di atas platform .NET (C#, VB.NET, F# dan bahasa .NET lainnya). ConfuserEx dianggap sebagai salah satu tool <a href="https://en.wikipedia.org/wiki/Obfuscation_(software)">obfuscators</a> terbaik yang tersedia gratis untuk platform .NET.</p>
<!-- more -->
<p>Hasil compile (assembly) yang sudah diproteksi menggunakan <a href="https://yck1509.github.io/ConfuserEx/">ConfuserEx</a> akan menyulitkan orang lain untuk membaca kembali kodenya walaupun sudah di <code class="language-plaintext highlighter-rouge">decompile</code> menggunakan tool decompiler sekelas <a href="https://www.jetbrains.com/decompiler/">JetBrains dotPeek</a>.</p>
<h2 id="net-framework-yang-disupport">.NET Framework yang disupport</h2>
<p>Walaupun pengembangan <a href="https://yck1509.github.io/ConfuserEx/">ConfuserEx</a> untuk saat ini sudah dihentikan. Untuk versi terakhirnya sudah mendukung .NET Framework sampai versi 4.6.x. Saya sendiri biasanya jika membuat aplikasi desktop tetap menggunakan .NET Framework versi 4.0 dengan pertimbangan agar aplikasinya tetap bisa di jalankan di Windows XP, sehingga tool <a href="https://yck1509.github.io/ConfuserEx/">ConfuserEx</a> ini masih tetap bisa saya gunakan.</p>
<h2 id="jetbrains-dotpeek">JetBrains dotPeek</h2>
<p><a href="https://www.jetbrains.com/decompiler/">JetBrains dotPeek</a> adalah tool decompiler gratis untuk aplikasi yang dikembangkan di atas platform .NET (C#, VB.NET, F# dan bahasa .NET lainnya).</p>
<p>Di <a href="http://coding4ever.net/blog/2020/05/13/confuser-ex/">postingan</a> ini saya akan menggunakan tool <a href="https://www.jetbrains.com/decompiler/">JetBrains dotPeek</a> untuk keperluan uji coba decompiler hasil compile dari aplikasi .NET Framework.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/01-jetBrains-dotPeek.png" alt="" class="align-center" /></p>
<h2 id="hasil-compile-aplikasi-net-framework">Hasil Compile Aplikasi .NET Framework</h2>
<p>Perlu diketahui bawah hasil compile dari aplikasi .NET masih dalam bentuk <a href="https://en.wikipedia.org/wiki/Common_Intermediate_Language">IL</a> jadi belum dalam bentuk native code (bahasa mesin), sehingga dibutuhkan .NET Framework agar hasil compile ini bisa berjalan.</p>
<p>Ada banyak tool yang bisa dengan <em>sempurna</em> melakukan proses <a href="https://en.wikipedia.org/wiki/Decompiler">decompiler</a> hasil compile aplikasi .NET Framework, salah satunya adalah tool <a href="https://www.jetbrains.com/decompiler/">JetBrains dotPeek</a>.</p>
<p>Sebagai contoh sudah saya buatkan aplikasi yang akan kita coba decompile hasil compilenya menggunakan <a href="https://www.jetbrains.com/decompiler/">JetBrains dotPeek</a>. Aplikasi ini bisa Anda download di <a href="https://github.com/k4m4r82/NorthwindMVC">sini</a>. Ini adalah aplikasi CRUD sederhana yang sudah menerapkan konsep <a href="http://coding4ever.net/categories/repository-pattern/">Repository Pattern</a> dan <a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC Pattern</a>. Untuk database saya menggunakan MySQL.</p>
<p>Yuk, kita liat dulu tampilan aplikasinya</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/02-form-list.png" alt="" class="align-center" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/03-form-entry.png" alt="" class="align-center" /></p>
<p>Struktur project sudah menerapkan konsep <a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">MVC Pattern</a></p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/04-struktur-project.png" alt="" class="align-center" /></p>
<p><code class="language-plaintext highlighter-rouge">Model</code> adalah layer yang bertugas untuk berkomunikasi dengan database secara langsung. Salah satu class yang ada di layer ini adalah class <code class="language-plaintext highlighter-rouge">DbContext.cs</code>. Class <code class="language-plaintext highlighter-rouge">DbContext.cs</code> ini bertanggung jawab untuk berinteraksi secara langsung dengan database, seperti membuat koneksi, menjalankan perintah sql seperti insert, update, delete dan select atau mengeksekusi objek database seperti store procedure dan function. Sehingga di class inilah biasanya kita menuliskan beberapa <code class="language-plaintext highlighter-rouge">informasi rahasia</code> seperti <code class="language-plaintext highlighter-rouge">username</code> dan <code class="language-plaintext highlighter-rouge">password</code> yang digunakan untuk melakukan koneksi ke database seperti MySQL.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/05-class-dbcontext.png" alt="" class="align-center" /></p>
<p>Berikutnya kita akan melihat kode yang ada di class Repository. Class Repository adalah class yang berisi kode-kode untuk menjalankan operasi <a href="https://en.wikipedia.org/wiki/Create,_read,_update_and_delete">CRUD</a>. Sebagai contoh kita akan melihat isi dari class <a href="https://github.com/k4m4r82/NorthwindMVC/blob/master/src/NorthwindApp/Model/Repository/ProductRepository.cs">ProductRepository.cs</a>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/06-class-repository1.png" alt="" class="align-center" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/07-class-repository2.png" alt="" class="align-center" /></p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/08-class-repository3.png" alt="" class="align-center" /></p>
<p>Setelah melihat kode di atas, sekarang akan kita lakukan proses build/compile projectnya</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/09-proses-compile.png" alt="" class="align-center" /></p>
<p>kemudian akan kita lakukan proses decompile menggunakan tool decompiler <a href="https://www.jetbrains.com/decompiler/">JetBrains dotPeek</a>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/10-proses-decompile.png" alt="" class="align-center" /></p>
<p>Pertama kita cek dulu hasil decompile class <code class="language-plaintext highlighter-rouge">DbContext.cs</code>nya.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/11-hasil-decompile-class-dbcontext.png" alt="" class="align-center" /></p>
<p>Mengerikan bukan hasil decompilenya, sama persis dengan kode aslinya :scream: :grin:</p>
<p>Sekarang kita cek juga hasil decompile class ProductRepositorynya, dan hasilnya pun sama persis dengan kode aslinya.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/12-hasil-decompile-class-product-repository.png" alt="" class="align-center" /></p>
<p>Nah sampai di sini sudah pahamkan, kenapa kita harus mengeluarkan usaha lebih untuk mengamankan hasil compile aplikasi kita.</p>
<h2 id="confuserex-in-action">ConfuserEx In Action</h2>
<p>Ok berikutnya kita akan menambahkan proteksi hasil compile aplikasi kita menggunakan tool <a href="https://yck1509.github.io/ConfuserEx/">ConfuserEx</a>, jadi silahkan Anda download terlebih dulu aplikasinya di <a href="https://github.com/yck1509/ConfuserEx/releases/download/v1.0.0/ConfuserEx_bin.zip">sini</a>. Kemudian Anda ekstrak, misal ke folder <code class="language-plaintext highlighter-rouge">C:\ConfuserEx_bin</code>.</p>
<p>Ada 2 cara untuk menggunakan <a href="https://yck1509.github.io/ConfuserEx/">ConfuserEx</a>, yaitu:</p>
<ol>
<li>Menggunakan GUI</li>
<li>Menggunakan CLI (Command-line Interface)</li>
</ol>
<p>Di postingan ini saya akan menggunakan cara yang kedua yaitu menggunakan CLI (Command-line Interface). Berikut langkah-langkahnya:</p>
<ol>
<li>
<p>Tambahkan sebuah file dengan ekstensi <code class="language-plaintext highlighter-rouge">.crproj</code> (ConfuserEx project), untuk nama filenya kita samakan dengan nama projectnya, setelah itu simpan di folder aplikasi (satu folder dengan file project).</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/13-file-confuser-ex-project.png" alt="" /></p>
<p>Kemudian lengkapi scriptnya seperti berikut:</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/14-isi-file-confuser-ex-project.png" alt="" /></p>
<p>Jika file yang akan diproteksi lebih dari satu, Anda bisa tambahkan setelah baris perintah <code class="language-plaintext highlighter-rouge"><module path=... /></code>. Contoh:</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/15-isi-file-confuser-ex-project.png" alt="" /></p>
</li>
<li>
<p>Aktifkan <code class="language-plaintext highlighter-rouge">command prompt</code>, kemudian Anda pindah ke folder project Anda.</p>
<p>Setelah itu ketik perintah: <code class="language-plaintext highlighter-rouge">C:\ConfuserEx_bin\Confuser.CLI.exe NorthwindApp.crproj</code></p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/16-confuser-ex-cli.png" alt="" /></p>
<p>tunggu beberapa saat sampai proses ConfuserExnya selesai</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/17-confuser-ex-cli-output.png" alt="" /></p>
<p>bisa kita lihat pada gambar output di atas, untuk file <code class="language-plaintext highlighter-rouge">NorthwindApp.exe</code> yang sudah diproteksi ada di folder <code class="language-plaintext highlighter-rouge">Confused</code></p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/18-confuser-ex-cli-output2.png" alt="" /></p>
<p>Nah sekarang kita coba lagi untuk melakukan proses decompile ulang terhadap file hasil compile yang sudah kita tambahkan proteksi ConfuserExnya menggunakan tool decompiler yang sama yaitu <a href="https://www.jetbrains.com/decompiler/">JetBrains dotPeek</a>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/19-proses-decompile2.png" alt="" /></p>
<p>Dan ini adalah hasil decompile untuk class <code class="language-plaintext highlighter-rouge">DbContext.cs</code>. Sudah tidak terlihat lagi kan <code class="language-plaintext highlighter-rouge">username</code> dan <code class="language-plaintext highlighter-rouge">password</code> untuk konek ke database :thumbsup:</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/20-proses-decompile2-class-dbcontext.png" alt="" /></p>
<p>begitu juga dengan hasil decompile untuk class ProductRepositorynya sudah terproteksi dengan baik.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/21-proses-decompile2-class-product-repository.png" alt="" /></p>
</li>
</ol>
<h2 id="build-events">Build Events</h2>
<p>Sebenarnya pembahasan tentang ConfuserEx ini sudah selesai, tapi berhubungan perintah <code class="language-plaintext highlighter-rouge">ConfuserEx CLI</code> di atas masih dijalankan secara manual via <code class="language-plaintext highlighter-rouge">command prompt</code> tentu akan merepotkan sekali jika harus dijalankan secara berulang setiap selesai melakukan proses build/compile. Trus apa solusinya agar perintah <code class="language-plaintext highlighter-rouge">ConfuserEx CLI</code> di atas bisa dijalankan secara otomatis? Salah satu solusinya adalah dengan memanfaatkan fasilitas <a href="http://coding4ever.net/categories/build-events/">Build Events</a> yang sudah tersedia di Visual Studio .NET. Dengan fasilitas <a href="http://coding4ever.net/categories/build-events/">Build Events</a> kita bisa menuliskan perintah <code class="language-plaintext highlighter-rouge">command prompt (shell)</code> termasuk menjalankan perintah <code class="language-plaintext highlighter-rouge">ConfuserEx CLI</code>.</p>
<p>Nah berikut script <a href="http://coding4ever.net/categories/build-events/">Build Events</a> yang harus kita buat untuk menjalankan perintah <code class="language-plaintext highlighter-rouge">ConfuserEx CLI</code> di atas secara otomatis setiap kali kita melakukan proses build.</p>
<figure class="highlight"><pre><code class="language-shell" data-lang="shell">rem <span class="nb">set </span>lokasi folder deploy
<span class="nb">set </span><span class="nv">DeployDir</span><span class="o">=</span><span class="s2">"</span><span class="si">$(</span>SolutionDir<span class="si">)</span><span class="s2">..</span><span class="se">\d</span><span class="s2">eploy"</span>
<span class="k">if </span>not exist %DeployDir% <span class="nb">mkdir</span> %DeployDir%
rem copy hasil build ke folder deploy
copy /Y <span class="s2">"</span><span class="si">$(</span>TargetDir<span class="si">)$(</span>TargetFileName<span class="si">)</span><span class="s2">.config"</span> %DeployDir%
copy /Y <span class="s2">"</span><span class="si">$(</span>TargetDir<span class="si">)</span><span class="s2">*.dll"</span> %DeployDir%
rem jalankan ConfuserEx CLI
<span class="nb">set </span><span class="nv">ConfuserExDir</span><span class="o">=</span><span class="s2">"C:</span><span class="se">\C</span><span class="s2">onfuserEx_bin"</span>
%ConfuserExDir%<span class="se">\C</span>onfuser.CLI.exe <span class="s2">"</span><span class="si">$(</span>ProjectDir<span class="si">)$(</span>ProjectName<span class="si">)</span><span class="s2">.crproj"</span>
rem hapus file build yang tidak diperlukan
del /s /q %DeployDir%<span class="se">\*</span>.vshost.<span class="k">*</span>
del /s /q %DeployDir%<span class="se">\*</span>.xml
del /s /q %DeployDir%<span class="se">\*</span>.pdb</code></pre></figure>
<p>Untuk mengaktifkan <a href="http://coding4ever.net/categories/build-events/">Build Events</a>, klik kanan nama project -> Properties -> tab <a href="http://coding4ever.net/categories/build-events/">Build Events</a>. Kemudian copas script di atas di bagian <code class="language-plaintext highlighter-rouge">Post-build Event Command Line</code>.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/22-script-build-event.png" alt="" class="align-center" /></p>
<p>Setelah itu lakukan proses build, dan secara otomatis perintah ConfuserEx CLI akan dijalankan.</p>
<p><img src="http://coding4ever.net/assets/images/2020/01-confuser-ex/23-run-build-event.png" alt="" class="align-center" /></p>
<p>Selamat mencoba :blush:</p>
<p>Referensi:</p>
<ul>
<li><a href="https://yck1509.github.io/ConfuserEx/">ConfuserEx project</a></li>
<li><a href="https://github.com/yck1509/ConfuserEx/wiki/Documentation">ConfuserEx wiki</a></li>
</ul>KamarudinApa itu ConfuserEx?Menyimpan konfigurasi aplikasi secara terpusat menggunakan Consul Key-Value Store Bagian #22019-08-31T09:26:47+07:002019-08-31T09:26:47+07:00http://coding4ever.net/blog/2019/08/31/menyimpan-konfigurasi-terpusat-menggunakan-consul-key-value-store-bagian-number-2<p><img src="http://coding4ever.net/assets/images/logo/consul-logo.png" alt="" class="align-left" />Oke, hari ini saya ingin melanjutkan pembahasan <a href="http://coding4ever.net/blog/2019/08/02/menyimpan-konfigurasi-terpusat-menggunakan-consul-key-value-store-bagian-number-1/">postingan</a> saya sebelumnya tentang penyimpanan konfigurasi aplikasi secara terpusat menggunakan <a href="https://www.consul.io/">consul</a>. Jika pada <a href="http://coding4ever.net/blog/2019/08/02/menyimpan-konfigurasi-terpusat-menggunakan-consul-key-value-store-bagian-number-1/">postingan</a> sebelumnya fokus pembahasan pada instalasi kemudian dilanjutkan dengan demo cara mengakses data yang tersimpan pada <code class="language-plaintext highlighter-rouge">key-value store</code> menggunakan salah satu tool REST Client favorit saya yaitu <a href="https://www.getpostman.com/downloads/">Postman</a>, maka fokus pembahasan kali ini adalah bagaimana cara mengakses data <code class="language-plaintext highlighter-rouge">key-value store</code> yang berbasis <code class="language-plaintext highlighter-rouge">REST API</code> menggunakan bahasa pemrograman Visual Basic 6 dan C# (.NET).</p>
<!-- more -->
<h3 id="mengakses-data-key-value-store">Mengakses Data Key-Value Store</h3>
<p>Sebagai review untuk data yang tersimpan di <code class="language-plaintext highlighter-rouge">key-value store</code> bisa diakses via RESTful API (Web API) menggunakan <code class="language-plaintext highlighter-rouge">HTTP METHOD GET</code>. Adapun endpoint yang digunakan yaitu <code class="language-plaintext highlighter-rouge">/v1/kv/NAMA_KEY</code>. Contoh</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-01.png" alt="" class="align-center" /></p>
<p>Informasi <code class="language-plaintext highlighter-rouge">endpoint</code> dan <code class="language-plaintext highlighter-rouge">HTTP METHOD</code> ini penting untuk dicatat karena berhubungan dengan kode program yang akan kita tulis di pembahasan berikutnya.</p>
<h3 id="mengakses-data-key-value-store-dari-visual-basic-6">Mengakses Data Key-Value Store Dari Visual Basic 6</h3>
<p>Sebagai contoh kasus kita akan membuat form login, di mana form login ini selain membutuhkan <code class="language-plaintext highlighter-rouge">user</code> dan <code class="language-plaintext highlighter-rouge">password</code> juga membutuhkan informasi <code class="language-plaintext highlighter-rouge">server</code>, <code class="language-plaintext highlighter-rouge">database</code> dan <code class="language-plaintext highlighter-rouge">port</code>. Khusus untuk informasi <code class="language-plaintext highlighter-rouge">server</code>, <code class="language-plaintext highlighter-rouge">database</code> dan <code class="language-plaintext highlighter-rouge">port</code> secara otomatis akan membaca data yang tersimpan di dalam <code class="language-plaintext highlighter-rouge">Key-Value Store</code>.</p>
<p>Untuk tampilannya kita buat yang sederhana aja ya :grin:</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-02.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-03.png" alt="" class="align-center" /></p>
<p>Karena data yang diakses berupa RESTful API (dokumen web), di Visual Basic 6 kita menggunakan library <code class="language-plaintext highlighter-rouge">Microsoft XML v6.0</code></p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-04.png" alt="" class="align-center" /></p>
<p>Setelah itu kita buat sebuah method dengan nama <code class="language-plaintext highlighter-rouge">GetRequest</code> untuk mengakses RESTful API dengan menggunakan library <code class="language-plaintext highlighter-rouge">Microsoft XML v6.0</code>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-05.png" alt="" class="align-center" /></p>
<p>Kemudian tambahkan lagi sebuah method dengan nama <code class="language-plaintext highlighter-rouge">LoadAppConfig</code>, di dalam method ini kita memanggil method <code class="language-plaintext highlighter-rouge">GetRequest</code> dan menampilkan hasilnya ke console. Agar method ini bisa dipangil secara otomatis, kita panggil method ini di event form load.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-06.png" alt="" class="align-center" /></p>
<p>Jika berhasil, hasilnya seperti berikut:</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-07.png" alt="" class="align-center" /></p>
<p>Nah dari gambar di atas, kita lihat bahwa hasil pemanggilan endpoint <code class="language-plaintext highlighter-rouge">Key-Value Store</code> ini mengembalikan data string dengan format <a href="https://www.json.org/">JSON</a>. Secara built-in VB6 tidak menyediakan library untuk mengolah data dengan format <a href="https://www.json.org/">JSON</a>, tapi untungnya di luar sana sudah ada yang berbaik hati membuatkan <a href="http://www.ediy.co.nz/vbjson-json-parser-library-in-vb6-xidc55680.html">librarynya</a>, sehingga mempermudah kita untuk mengolah data dengan format <a href="https://www.json.org/">JSON</a> menggunakan Visual Basic 6.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-08.png" alt="" class="align-center" /></p>
<p>Setelah menambahkan library <a href="http://www.ediy.co.nz/vbjson-json-parser-library-in-vb6-xidc55680.html">VB-JSON</a> sekarang kita bisa langsung mengolah data <a href="https://www.json.org/">JSON</a>nya sebagai sebuah objek dan kemudian langsung menampilkan hasilnya ke dalam textbox <code class="language-plaintext highlighter-rouge">server</code>, <code class="language-plaintext highlighter-rouge">database</code> dan <code class="language-plaintext highlighter-rouge">port</code>. Berikut adalah hasil revisinya method <code class="language-plaintext highlighter-rouge">LoadAppConfig</code>nya:</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-09.png" alt="" class="align-center" /></p>
<p>Ok sampai di sini, kita bisa langsung menjalankan aplikasi untuk melihat hasilnya. Setelah form loginnya tampil aktifkan tab Connection, di mana informasi server, database dan port sudah otomatis terisi sesuai dengan informasi <code class="language-plaintext highlighter-rouge">Key-Value Store</code> yang tersimpan di server consul.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-10.png" alt="" class="align-center" /></p>
<p>Sudah tampil bukan?</p>
<p>Sekarang kita coba edit informasi db-confignya, melalui menu <code class="language-plaintext highlighter-rouge">Key/Value</code>, kemudian jalankan sekali lagi aplikasinya.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-11.png" alt="" class="align-center" /></p>
<p>Nah secara otomatis perubahan data yang tersimpan di <code class="language-plaintext highlighter-rouge">Key-Value Store</code> juga akan terbaca oleh aplikasi.</p>
<h3 id="mengakses-data-key-value-store-dari-c-net">Mengakses Data Key-Value Store Dari C# (.NET)</h3>
<p>Untuk contoh berikutnya kita akan mengakses data <code class="language-plaintext highlighter-rouge">Key-Value Store</code> menggunakan bahasa pemrograman C# (.NET). Di C# saya biasanya menggunakan library <a href="https://www.nuget.org/packages/RestSharp/">RestSharp</a> untuk mengakses web api, selain itu kita juga membutuhkan library <a href="https://www.nuget.org/packages/Newtonsoft.Json">Newtonsoft.Json</a>, kenapa? Karena hasil dari pemanggilan web apinya berupa string dengan format json. Jadi kita membutuhkan library ini untuk mengkonversi string json ke objek class. Untuk menginstall kedua library ini Anda bisa menggunakan <a href="http://coding4ever.net/categories/nuget/">Nuget Package Manager Console</a> dengan perintah berikut:</p>
<figure class="highlight"><pre><code class="language-shell" data-lang="shell">Install-Package RestSharp <span class="nt">-Version</span> 105.2.3
Install-Package Newtonsoft.Json <span class="nt">-v</span> 9.0.1</code></pre></figure>
<p>Setelah menginstall ke dua library di atas, langkah berikutnya adalah kita akan menambahkan class model terlebih dulu. Class model ini saya beri nama <code class="language-plaintext highlighter-rouge">AppConfig</code> agar nanti hasil dari pemanggilan webnya bisa langsung kita konversi ke objek class model ini dengan bantuan library <a href="https://www.nuget.org/packages/Newtonsoft.Json">Newtonsoft.Json</a>. Berikut contoh class model yang dibuat.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-15.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-12.png" alt="" class="align-center" /></p>
<p>Pada gambar di atas, kita bisa lihat untuk struktur class modelnya dibuat menyesuaikan struktur json yang ada di <code class="language-plaintext highlighter-rouge">Key-Value Store</code>.</p>
<p>Setelah itu tambahkan kode berikut untuk pemanggilan web apinya.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-13.png" alt="" class="align-center" /></p>
<p>Kemudian kita bisa langsung menjalankan aplikasi untuk melihat hasilnya. Setelah form loginnya tampil aktifkan tab Connection, di mana informasi server, database dan port sudah otomatis terisi sesuai dengan informasi <code class="language-plaintext highlighter-rouge">Key-Value Store</code> yang tersimpan di server consul.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190829-14.png" alt="" class="align-center" /></p>
<h3 id="kesimpulan">Kesimpulan</h3>
<p>Dengan menggunakan <a href="https://www.consul.io/">consul</a> sebagai pusat penyimpanan konfigurasi aplikasi, akan mempermudah kita ketika terjadi perubahan konfigurasi aplikasi yang selama ini biasanya disimpan secara lokalan. Jadi kita tidak perlu merubah konfigurasi lokal aplikasi satu per satu di pc/lapton klien.</p>
<p>Selamat mencoba :blush:</p>KamarudinOke, hari ini saya ingin melanjutkan pembahasan postingan saya sebelumnya tentang penyimpanan konfigurasi aplikasi secara terpusat menggunakan consul. Jika pada postingan sebelumnya fokus pembahasan pada instalasi kemudian dilanjutkan dengan demo cara mengakses data yang tersimpan pada key-value store menggunakan salah satu tool REST Client favorit saya yaitu Postman, maka fokus pembahasan kali ini adalah bagaimana cara mengakses data key-value store yang berbasis REST API menggunakan bahasa pemrograman Visual Basic 6 dan C# (.NET).Solusi Mengakses Database Lokal (IP Private) Secara Online2019-08-25T16:00:03+07:002019-08-25T16:00:03+07:00http://coding4ever.net/blog/2019/08/25/solusi-mengakses-database-lokal-ip-private-secara-online<p><img src="http://coding4ever.net/assets/images/logo/websocket-logo.png" alt="" class="align-left" />Salah satu tantangan bagi software developer untuk aplikasi bisnis berbasis desktop adalah ketika klien meminta untuk mengonlinekan database mereka. Karena memang rata-rata aplikasi desktop hanya digunakan untuk keperluan internal kantor/perusahaan.</p>
<p>Biasanya ada beberapa solusi yang bisa kita tawarkan, ketika klien menginginkan database lokal mereka (ip private) bisa diakses secara online, seperti:</p>
<!-- more -->
<ul>
<li>Upgrade paket internet, jika klien kita berlangganan paket internet indihome bisa upgrade ke paket enterprise, tapi klo berat dibiaya bisa langganan IP Dynamic Indihome. Apakah masalah sudah selesai sampai di sini? Engga juga sih, kita masih harus menyeting portforwarding dan setting-lainnya lainya.</li>
<li>Menggunakan software VPN seperti <a href="http://coding4ever.net/blog/2010/02/02/belajar-winsock-bagian-4-e28093-membuat-jaringan-vpn-sendiri/">Hamachi</a>, <a href="https://www.zerotier.com/">ZeroTier</a>, atau <a href="http://coding4ever.net/blog/2018/07/05/membuat-jaringan-vpn-menggunakan-softether-vpn-bagian-number-1/">SoftEther VPN</a>, tapi cara kedua ini akan mengurangi koneksi internet kita karena harus menyediakan jalur untuk koneksi VPNnya.</li>
<li>Menyewa layanan <code class="language-plaintext highlighter-rouge">Shared Hosting</code>, biaya langganannya juga lumayan murah, sekitar 100 ribuan pertahun. Dengan menyewa layanan <code class="language-plaintext highlighter-rouge">Shared Hosting</code> berarti kita harus membuat copyan database lokal untuk ditempatkan di <code class="language-plaintext highlighter-rouge">Shared Hosting</code> agar bisa diakses secara online. Tantangannya adalah kita harus membuat aplikasi kecil yang bertugas menyinkronkan database lokal dan database yang ada di <code class="language-plaintext highlighter-rouge">Shared Hosting</code>.</li>
<li>Membuat sendiri service yang berfungsi sebagai gateway yang bertugas menjembatani antara aplikasi klien dan database. Untuk cara yang terakhir ini kita membutuhkan sebuah server dengan ip public, contoh disini saya menyewa VPS dengan OS Linux (Ubuntu) di <a href="https://www.digitalocean.com/">digitalocean</a>.</li>
</ul>
<p>Nah dipostingan ini kita akan membahas solusi terakhir. Idenya adalah kita ingin memberikan kemudahan kepada klien/customer dalam menggunakan aplikasi yang kita buat, jadi dengan konfigurasi yang sangat minim sekali, aplikasi client bisa langsung konek ke database. Keuntungan lainnya adalah dengan cara ini bisa dijadikan lahan bisnis untuk layanan sewa server, jadi klo klien ingin databasenya bisa diakses secara online ya harus sewa server dulu hehehe :grin:</p>
<p>Karena postingan kali ini adalah hasil dari riset komersil yang saya kerjakan, jadi saya hanya akan membahas tentang <code class="language-plaintext highlighter-rouge">arsitektur</code> dan <code class="language-plaintext highlighter-rouge">teknologi</code> yang digunakan, tanpa kode ya… :grin:.</p>
<h3 id="arsitektur-aplikasi">Arsitektur Aplikasi</h3>
<p>Untuk arsitektur aplikasi yang digunakan seperti gambar berikut:</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/2019082507.png" alt="" class="align-center" /></p>
<p>Keterangan gambar:</p>
<ol>
<li>Database yang diinstall di jaringan lokal, bisa database PostgreSql, FirebirdSql, SQL Server, MySQL, dan lain-lain. Tergantung database yang Anda gunakan.</li>
<li>
<p>WebSocketService – Aplikasi ini bisa diinstall secara terpisah atau satu mesin dengan database. Jadi aplikasi inilah yang terkoneksi langsung dengan database via jaringan lokal (LAN). Aplikasi ini dibuat menggunakan WinForm atau bisa juga berbasis windows service, intinya disesuaikan dengan kebutuhan Anda. Karena aplikasi ini menggunakan library <a href="https://docs.microsoft.com/en-us/aspnet/core/signalr/introduction?view=aspnetcore-2.2">SignalR Core</a> untuk berkomunikasi dengan aplikasi WebSocketGateway yang ada di VPS, maka untuk menjalankan aplikasi ini minimal windows yang dibutuhkan adalah Windows 7 SP1 (.NET Framework 4.6.x).
<img src="center https://coding4ever.files.wordpress.com/2019/08/2019082502.png" alt="" class="align-center" /></p>
</li>
<li>
<p>WebSocketGateway – Aplikasi ini berfungsi sebagai WebSocket server, dibuat menggunakan ASP.NET Core. Selain bertugas untuk menghandle komunikasi via websocket (signalR), juga bertugas untuk menghandle komunikasi via http (web api). WebSocketGateway ini nantinya akan di deploy ke VPS dengan bantuan <a href="https://www.docker.com/">Docker</a>.
<img src="https://coding4ever.files.wordpress.com/2019/08/2019082503.png" alt="" class="align-center" /></p>
</li>
<li>
<p>Aplikasi klien, bisa berupa desktop, web dan mobile. Aplikasi ini akan berkomunikasi dengan WebSocketGateway via web api (web service)
<img src="https://coding4ever.files.wordpress.com/2019/08/2019082504.png" alt="" class="align-center" /></p>
<p><img src="url" alt="" class="align-center" /></p>
</li>
</ol>
<h3 id="teknologi-yang-digunakan">Teknologi yang digunakan:</h3>
<ul>
<li>ASP.NET Core, teknologi ini saya gunakan karena VPS yang disewa berbasis linux (Ubuntu)</li>
<li>Websocket menggunakan <a href="http://coding4ever.net/categories/signalr/">SignalR</a></li>
<li><a href="https://www.docker.com/">Docker</a> digunakan untuk mempermudah proses deploy aplikasi ASP.NET Corenya</li>
</ul>
<h3 id="apa-itu-aspnet-core">Apa itu ASP.NET Core?</h3>
<p>ASP.NET Core adalah sebuah framework yang bisa digunakan untuk membangun sebuah layanan Web API berbasis teknologi .NET. Framework ini adalah versi open-source dari ASP.NET, yang bisa berjalan di berbagai platform seperti macOS, Linux, dan Windows.</p>
<p>Untuk informasi lebih lanjut mengenai ASP.NET Core bisa Anda baca di <a href="https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-2.2">sini</a>.</p>
<h3 id="apa-itu-signalr">Apa itu SignalR?</h3>
<p>SignalR adalah library yang memudahkan kita untuk menambahkan fungsi komunikasi real-time pada aplikasi yang kita kembangkan. Fungsi real-time di sini adalah kemampuan server melakukan pengiriman (push) konten atau data kepada client yang sudah terkoneksi ke server, sehingga server tidak perlu menunggu client untuk melakukan permintaan (request) data terbaru.</p>
<p>SignalR selain digunakan untuk pengembangan aplikasi web, juga bisa digunakan untuk platform lainnya seperti desktop (console dan windows form) ataupun mobile (windows phone, android dan iOS).</p>
<p>SignalR menyediakan API yang memungkinkan server memanggil fungsi/method yang dimiliki oleh client atau pun sebaliknya. Proses memanggil method secara remote ini dikenal dengan istilah remote procedure call (RPC).</p>
<p>Komunikasi antara client dan server SignalR dibangun di atas koneksi <a href="https://en.wikipedia.org/wiki/WebSocket">WebSocket</a>.</p>
<p>Beberapa waktu lalu saya pernah menulis implementasi SignalR untuk aplikasi berbasis windows yang bisa Anda baca di<a href="http://coding4ever.net/categories/signalr/">sini</a>.</p>
<h3 id="apa-itu-docker">Apa itu Docker?</h3>
<p>Docker adalah teknologi container yang memudahkan kita untuk melakukan proses <code class="language-plaintext highlighter-rouge">deployment</code> aplikasi ke berbagai platform (macOS, Linux, dan Windows). Untuk informasi lebih lanjut tentang Docker, bisa Anda baca di<a href="https://www.docker.com/">sini</a>.</p>
<h3 id="demo-aplikasi">Demo Aplikasi</h3>
<p>Cara menghubungan aplikasi klien (desktop atau mobile) dengan WebSocketService sangat mudah, cukup menginputkan app id yang ditampilkan aplikasi WebSocketService pada tab Pengaturan. Setelah itu aplikasi klien Anda langsung terhubung ke database lokal.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/2019082506.png" alt="" class="align-center" /></p>
<p>Jika Anda juga penasaran dengan cara kerja aplikasi ini, dan ingin mencoba langsung, bisa Anda download demonya di <a href="https://github.com/k4m4r82/demo-websocket-signalr">sini</a>.</p>
<p>Selamat mencoba :blush:</p>KamarudinSalah satu tantangan bagi software developer untuk aplikasi bisnis berbasis desktop adalah ketika klien meminta untuk mengonlinekan database mereka. Karena memang rata-rata aplikasi desktop hanya digunakan untuk keperluan internal kantor/perusahaan.Menyimpan konfigurasi aplikasi secara terpusat menggunakan Consul Key-Value Store Bagian #12019-08-02T15:13:39+07:002019-08-02T15:13:39+07:00http://coding4ever.net/blog/2019/08/02/menyimpan-konfigurasi-terpusat-menggunakan-consul-key-value-store-bagian-number-1<p><img src="http://coding4ever.net/assets/images/logo/consul-logo.png" alt="" class="align-left" />Cara apa yang biasa Anda gunakan untuk menyimpan konfigurasi aplikasi? Biasanya ada beberapa pilihan seperti menyimpan dalam format text (<a href="https://en.wikipedia.org/wiki/INI_file">INI</a>, <a href="https://en.wikipedia.org/wiki/XML">XML</a>, <a href="https://www.json.org/">JSON</a>), database atau langsung di hardcode di dalam kode program. Nah cara terakhir adalah yang paling ekstrim, jika terjadi perubahan konfigurasi aplikasi berarti kita harus merubah kode program dan melakukan kompilasi ulang :grin:.</p>
<!-- more -->
<p>Konfigurasi lokalan ini memang sedikit merepotkan bagai programmer desktop, karana aplikasinya biasanya diinstall dibeberapa tempat sesuai dengan jumlah klien yang ada.</p>
<p>Konfigurasi apa saja sih yang biasanya diperlukan oleh sebuah aplikasi? Ini juga tergantung kebutuhan, biasanya yang paling umum itu ya konfigurasi yang berhubungan dengan database seperti, <em>ip server</em>, <em>nama database</em> dan <em>port</em> yang digunakan. Contoh:</p>
<script src="https://gist.github.com/acd0b3a14f3830fff0c603909ef4a097.js"> </script>
<script src="https://gist.github.com/817ed3721c9d6a62e2a17b1e58f51129.js"> </script>
<script src="https://gist.github.com/872fa7d5e9775078e13c922c9e301cf4.js"> </script>
<p>Pada contoh di atas konfigurasi aplikasi disimpan dengan berbagai format seperti <a href="https://en.wikipedia.org/wiki/INI_file">INI</a>, <a href="https://en.wikipedia.org/wiki/XML">XML</a> dan <a href="https://www.json.org/">JSON</a>.</p>
<p>Untuk aplikasi yang dibuat menggunakan VB6 biasanya akan menyimpan konfigurasi dengan format <a href="https://en.wikipedia.org/wiki/INI_file">INI</a>, sedangkan yang menggunakan .NET lebih senang menggunakan format <a href="https://en.wikipedia.org/wiki/XML">XML</a> atau <a href="https://www.json.org/">JSON</a>.</p>
<p>Jadi apapun pilihan format konfigurasi aplikasi yang Anda gunakan, ketika ada perubahan konfigurasi berarti kita harus merubah satu per satu konfigurasi lokal dari aplikasi kita yang sudah terinstall di pc/laptop klien, baik dilakukan secara langsung (datang ke lokasi) atau dengan bantuan tool remote seperti Radmin. Anda bayangkan saja klo pengguna aplikasi kita sudah ratusan bahkan ribuan, tentu akan menjadi pekerjaan yang merepotkan alias buang-buang waktu :grin:</p>
<h3 id="apa-itu-consul">Apa itu Consul?</h3>
<p><a href="https://www.consul.io/">Consul</a> adalah tool yang digunakan untuk keperluan discovery dan konfigurasi service. Tool ini mempunyai beberapa fitur utama yaitu:</p>
<ul>
<li>Service Discovery</li>
<li>Health Checking</li>
<li>Key/Value Store</li>
<li>Multi Datacenter</li>
</ul>
<p>Saya sendiri mencoba tool ini ketika mempelajari arsitektur <a href="https://microservices.io/">microservices</a> untuk keperluan monitoring service. Nah salah satu fitur tool ini yaitu <code class="language-plaintext highlighter-rouge">Key/Value Store</code> yang bisa kita gunakan untuk keperluan menyimpan konfigurasi aplikasi secara terpusat.</p>
<h3 id="cara-menginstall-consul">Cara Menginstall Consul</h3>
<p>Cara installnya gampang, Anda tinggal <a href="https://www.consul.io/downloads.html">download</a> consul sesuai dengan versi OS yang Anda gunakan.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-01.png" alt="" class="align-center" /></p>
<p>Contoh di sini saya mendownload consul versi Windows dan menyimpannya di folder c:\consul.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-02.png" alt="" class="align-center" /></p>
<p>Setelah itu kita bisa langsung menjalankan consul dengan mode development.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-03.png" alt="" class="align-center" /></p>
<p>Setelah jalan, kita bisa langsung mengakses web administrasi consul di alamat localhost:8500</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-04.png" alt="" class="align-center" /></p>
<p>Menjalankan consul dengan mode development ini ada sedikit kekurangan yaitu perubahan data yang kita lakukan misal menambahkan data di menu <code class="language-plaintext highlighter-rouge">Key/Value</code> itu tidak tersimpan secara permanen, jadi kita akan menjalankan consul agent dengan mode production. Caranya adalah dengan menambahkan file konfigurasi, misal kita simpan di folder c:\consul\config dengan nama <code class="language-plaintext highlighter-rouge">consul.json</code>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-05.png" alt="" class="align-center" /></p>
<p>Kemudian untuk isinya seperti gambar berikut:</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-06-1.png" alt="" class="align-center" /></p>
<p>Untuk element <code class="language-plaintext highlighter-rouge">bind_addr</code> diisi dengan ip pc/server dimana consul dijalankan. Dan untuk informasi lebih lanjut tentang bagaimana cara mengkonfigurasi consul, bisa anda cek di link <a href="https://www.consul.io/docs/agent/options.html">ini</a>.</p>
<p>Setelah itu kita jalankan kembali consul dengan mode production.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-07.png" alt="" class="align-center" /></p>
<h3 id="consul-key-value-store">Consul Key-Value Store</h3>
<p>Seperti yang sudah saya jelaskan di atas, salah satu fitur menarik yang dimiliki oleh consul yaitu <code class="language-plaintext highlighter-rouge">Key-Value Store</code>. Dengan fitur ini kita bisa menyimpan konfigurasi aplikasi secara terpusat di pc/server yang sudah terinstall consul. Jadi konfigurasi aplikasi kita yang awalnya tersimpan di lokalan, apakah itu menggunakan format <a href="https://en.wikipedia.org/wiki/INI_file">INI</a>, <a href="https://en.wikipedia.org/wiki/XML">XML</a> atau <a href="https://www.json.org/">JSON</a> bisa langsung kita pindah ke sini.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-08.png" alt="" class="align-center" /></p>
<h3 id="mengakses-data-key-value-store">Mengakses Data Key-Value Store</h3>
<p>Data yang tersimpan di <code class="language-plaintext highlighter-rouge">Key-Value Store</code> bisa diakses via RESTful API, untuk postingan <a href="http://coding4ever.net/blog/2019/08/02/menyimpan-konfigurasi-terpusat-menggunakan-consul-key-value-store-bagian-number-1/">pertama</a> ini kita akan menggunakan salah satu tool REST Client yaitu <a href="https://www.getpostman.com/downloads/">Postman</a> untuk mengakses data tersebut. Adapun endpoint yang digunakan yaitu <code class="language-plaintext highlighter-rouge">/v1/kv</code>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-09.png" alt="" class="align-center" /></p>
<p>Untuk response valuenya sudah diencoded menggunakan algoritma Base64, tapi jika ingin langsung menampilkan data aslinya kita tinggal tambahkan parameter <code class="language-plaintext highlighter-rouge">?raw=true</code>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-10.png" alt="" class="align-center" /></p>
<h3 id="menambahkan-token">Menambahkan token</h3>
<p>Kayaknya kurang aman klo semua orang bisa langsung mengakses endpoint <code class="language-plaintext highlighter-rouge">Key-Value Store</code> tersebut tanpa memasukan token terlebih dulu. Jadi kita bisa menambahkan token pada saat mengakses endpoint <code class="language-plaintext highlighter-rouge">Key-Value Store</code>. Caranya adalah dengan mengedit kembali file konfigurasi consulnya.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-11-1.png" alt="" class="align-center" /></p>
<p>Setelah itu kita coba akses kembali untuk mengakses endpoint <code class="language-plaintext highlighter-rouge">Key-Value Store</code>nya tanpa token. Apakah masih bisa?</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-12.png" alt="" class="align-center" /></p>
<p>Karna sudah tertolak, sekarang coba tambahkan parameter <code class="language-plaintext highlighter-rouge">?token</code> untuk mengakses endpointya.</p>
<p><img src="https://coding4ever.files.wordpress.com/2019/08/20190802-13.png" alt="" class="align-center" /></p>
<p>Horeee berhasil :blush:</p>
<p>Nah dengan adanya fitur <code class="language-plaintext highlighter-rouge">Key-Value Store</code> yang di miliki oleh <a href="https://www.consul.io/">Consul</a> ini, akan memudahkan kita jika terjadi perubahan konfigurasi aplikasi karena bisa dilakukan secara terpusat.</p>
<p>Mungkin cukup ya untuk postingan bagian <a href="http://coding4ever.net/blog/2019/08/02/menyimpan-konfigurasi-terpusat-menggunakan-consul-key-value-store-bagian-number-1/">pertama</a> ini, insyaAlloh di postingan <a href="http://coding4ever.net/blog/2019/08/31/menyimpan-konfigurasi-terpusat-menggunakan-consul-key-value-store-bagian-number-2/">berikutnya</a> kita akan bahas bagaimana mengakses data <code class="language-plaintext highlighter-rouge">Key-Value Store</code> langsung dari aplikasi yang dibuat menggunakan VB6 dan .NET.</p>
<p>Oh iya ada yang kelupaan, gimana caranya agar consul bisa diinstall sebagai service (windows service)? Gampang, Anda tinggal ikuti langkah-langkah yang ada di <a href="https://learn.hashicorp.com/consul/datacenter-deploy/windows">sini</a> :grin:.</p>
<p>Selamat mencoba :blush:</p>KamarudinCara apa yang biasa Anda gunakan untuk menyimpan konfigurasi aplikasi? Biasanya ada beberapa pilihan seperti menyimpan dalam format text (INI, XML, JSON), database atau langsung di hardcode di dalam kode program. Nah cara terakhir adalah yang paling ekstrim, jika terjadi perubahan konfigurasi aplikasi berarti kita harus merubah kode program dan melakukan kompilasi ulang :grin:.Membuat jaringan VPN Menggunakan SoftEther VPN Bagian #12018-07-05T14:50:45+07:002018-07-05T14:50:45+07:00http://coding4ever.net/blog/2018/07/05/membuat-jaringan-vpn-menggunakan-softether-vpn-bagian-number-1<p><img src="http://coding4ever.net/assets/images/logo/softether-logo.png" alt="" class="align-left" />Salah satu tantangan bagi kita, pengembang software untuk aplikasi bisnis berbasis desktop adalah ketika klien kita bertanya “Mas, databasenya kalau di taruh di server saja bisa ya? Jadi bisa di akses dari mana saja, soalnya butuh juga akses dari luar”, sedangkan kondisi database server mereka hanya mempunyai <code class="language-plaintext highlighter-rouge">ip private</code>. Solusi paling cepat dan murah (gratis) yang mungkin bisa kita tawarkan adalah dengan menggunakan software VPN. Ada banyak pilihan software VPN, mulai dari instalasinya yang gampang seperti <a href="https://www.vpn.net/">Hamachi</a> dan <a href="https://www.zerotier.com/">ZeroTier One</a> atau yang sedikit lebih ribet tapi menawarkan segudang fitur yang wah seperti <a href="https://www.softether.org/">SoftEther VPN</a>.</p>
<!-- more -->
<h3 id="apa-itu-vpn">Apa itu VPN?</h3>
<p><a href="https://en.wikipedia.org/wiki/Virtual_private_network">VPN (Virtual Private Network)</a> adalah koneksi private melalui jaringan publik (dalam hal ini internet) yang bersifat virtual, dengan kata lain tidak ada koneksi jaringan secara riil antara 2 atau lebih perangkat (bisa pc, laptop, dll) yang akan berhubungan. VPN bersifat private sehingga tidak semua orang bisa mengaksesnya. Data yang dikirimkan terenkripsi sehingga tetap rahasia meskipun menggunakan jaringan publik. Selain untuk masalah keamanan data, VPN juga bisa digunakan untuk membuat koneksi private dari rumah ke jaringan toko atau kantor misalnya, tanpa menggunakan ip publik, cukup akses internet saja.</p>
<p>Aslinya saya tidak terlalu tertarik dengan solusi software VPN, tapi ini hanya buat jaga-jaga saja. Seperti yang sudah saya jelaskan di bagian intro.</p>
<h3 id="environment-test">Environment Test</h3>
<p>Pembuatan jaringan VPN ini menggunakan environment test sebagai berikut:</p>
<h4 id="server-vpn">Server VPN</h4>
<ul>
<li>Sistem Operasi: Windows 7</li>
<li>Software: <a href="http://www.softether-download.com/en.aspx?product=softether">SoftEther VPN Server</a></li>
<li>Relay Server: VPN Azure Cloud, layanan VPN gratis dari Microsoft</li>
</ul>
<h4 id="client-vpn">Client VPN</h4>
<ul>
<li>Sistem Operasi: Windows 7</li>
<li>Software: <a href="http://www.softether-download.com/en.aspx?product=softether">SoftEther VPN Client</a></li>
</ul>
<p>Selain Windows, <a href="https://www.softether.org/">SoftEther VPN</a> juga mendukung OS Linux, Mac, FreeBSD dan Solaris.</p>
<h3 id="skema-jaringan">Skema Jaringan</h3>
<p>Sebelum dimulai, kita lihat terlebih dulu skema jaringan yang saya gunakan untuk uji coba membuat jaringan VPN menggunakan SoftEther VPN.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-01.png" alt="" class="align-center" /></p>
<p>Pada gambar di atas kita bisa melihat, untuk koneksi VPN dari pc/laptop klien ke server VPN kantor melewati VPN Azure Cloud. Apa itu VPN Azure Cloud? VPN Azure Cloud adalah layanan VPN gratis dari Microsoft, dengan menggunakan layanan VPN ini sebagai relay server kita bisa membuat server VPN cukup dengan menggunakan <code class="language-plaintext highlighter-rouge">ip private</code>. Jadi itu alasan kenapa di <a href="http://coding4ever.net/blog/2018/07/05/membuat-jaringan-vpn-menggunakan-softether-vpn-bagian-number-1/">postingan bagian pertama</a> ini kita menggunakan layanan VPN Azure Cloud.</p>
<h3 id="instalasi-softether-vpn-server">Instalasi SoftEther VPN Server</h3>
<h4 id="langkah-1-download-softether-vpn-versi-server">Langkah 1: Download SoftEther VPN versi Server</h4>
<p>Klik link <a href="http://www.softether-download.com/en.aspx?product=softether">download SoftEther VPN</a>, kemudian pilih <code class="language-plaintext highlighter-rouge">SoftEther VPN Server</code> di bawah drop-down list <code class="language-plaintext highlighter-rouge">Select Component</code>. Berikutnya di pilihan <code class="language-plaintext highlighter-rouge">Select Platform</code> pilih <code class="language-plaintext highlighter-rouge">Windows</code></p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-02.png" alt="" class="align-center" /></p>
<p>Versi terakhir saat postingan ini ditulis adalah versi (4.27, Build 9668, beta). Karna masih beta (artinya masih dalam tahap pengembangan dan tes), jadi saya akan menggunakan rilis stabil versi sebelumnya yaitu versi (4.25, Build 9656, rtm).</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-03.png" alt="" class="align-center" /></p>
<p>Kemudian klik link <a href="http://www.softether-download.com/files/softether/v4.25-9656-rtm-2018.01.15-tree/Windows/SoftEther_VPN_Server_and_VPN_Bridge/softether-vpnserver_vpnbridge-v4.25-9656-rtm-2018.01.15-windows-x86_x64-intel.exe">SoftEther VPN Server and VPN Bridge (Ver 4.25, Build 9656, rtm)</a> untuk memulai proses download.</p>
<h4 id="langkah-2-instalasi-softether-vpn-versi-server">Langkah 2: Instalasi SoftEther VPN versi Server</h4>
<p>Jalankan file EXE SoftEther VPN Server yang sudah didownload untuk memulai instalasi SoftEther VPN versi Server. Setelah instalasi berjalan untuk pertama kali akan tampil jendela welcome, klik tombol Next untuk melanjutkan instalasi.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-04.png" alt="" class="align-center" /></p>
<p>Selanjutnya akan tampil jendela untuk memilih jenis <code class="language-plaintext highlighter-rouge">SoftEther VPN Server</code>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-05.png" alt="" class="align-center" /></p>
<p>Pilih SoftEther VPN Server kemudian klik tombol Next. Selanjutnya di jendela End User License Agreement, aktifkan pilihan I agree … , kemudian klik Next.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-06.png" alt="" class="align-center" /></p>
<p>Kemudian klik tombol Next beberapa kali sampai proses instalasi SoftEther VPN Server dimulai.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-07.png" alt="" class="align-center" /></p>
<p>Setelah instalasi selesai, di jendela Setup Finished, aktifkan pilihan Start the SoftEther VPN Server Manager kemudian klik tombol Finish.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-08.png" alt="" class="align-center" /></p>
<h3 id="konfigurasi-softether-vpn-server">Konfigurasi SoftEther VPN Server</h3>
<h4 id="langkah-1-mengatur-setting-koneksi-untuk-softether-vpn-server">Langkah 1: Mengatur setting koneksi untuk SoftEther VPN Server</h4>
<p>Setelah proses instalasi selesai, akan tampil jendela SoftEther VPN Server Manager, kemudian klik tombol Connect.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-09.png" alt="" class="align-center" /></p>
<p>Setelah itu akan diminta untuk menginputkan password administrator.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-10.png" alt="" class="align-center" /></p>
<h4 id="langkah-2-memilih-jenis-softether-vpn-server">Langkah 2: Memilih jenis SoftEther VPN Server</h4>
<p>Pada jendela ini kita aktifkan pilihan Remote Access VPN Server.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-11.png" alt="" class="align-center" /></p>
<h4 id="langkah-3-konfigurasi-virtual-hub">Langkah 3: Konfigurasi Virtual Hub</h4>
<p>Jendela berikutnya adalah mengeset konfigurasi Virtual Hub. Penamaan Virtual Hub biasanya berdasarkan lokasi dari server, misal KANTOR-JOGJA-VPN.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-12.png" alt="" class="align-center" /></p>
<h4 id="langkah-4-konfigurasi-dynamic-dns-function">Langkah 4: Konfigurasi Dynamic DNS Function</h4>
<p>Jendela berikutnya adalah pengaturan Dynamic DNS Function. Di jendela ini Anda bisa menggunakan pengaturan default atau bisa juga mengganti nilai dari Dynamic DNS Hostname</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-13.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-14.png" alt="" class="align-center" /></p>
<p>Jika gagal, ada kemungkinan Dynamic DNS Hostname sudah digunakan, Anda bisa mencoba Hostname yang lain. Setelah itu klik tombol Exit</p>
<h4 id="langkah-5-konfigurasi-ipsec--l2tp--l2tpv3">Langkah 5: Konfigurasi IPSec / L2TP / L2TPv3</h4>
<p>Untuk saat ini kita tidak perlu melakukan perubahan konfigurasi di jendela ini karna kita akan menggunakan layanan VPN Azure Cloud relay server sebagai layanan VPN gratis dari Microsoft.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-15.png" alt="" class="align-center" /></p>
<p>Kecuali jika ingin menggunakan layanan VPS (Virtual Private Server) sendiri apakah berbasis windows atau linux, Anda harus mengaktifkan pilihan Enable L2TP Server Function, agar server VPNnya bisa diakses dari client.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-16.png" alt="" class="align-center" /></p>
<h4 id="langkah-6-mengaktifkan-layanan-vpn-azure-cloud">Langkah 6: Mengaktifkan layanan VPN Azure Cloud</h4>
<p>Langkah berikutnya adalah mengaktifkan layanan VPN Azure Cloud relay server sebagai layanan VPN gratis dari Microsoft.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-17.png" alt="" class="align-center" /></p>
<p>Aktifkan pilihan Enable VPN Azure, kemudian tunggu sampai statusnya menjadi Connected. Untuk penamaan hostname VPN Azure, menyesuaikan dengan Konfigurasi Dynamic DNS Function (langkah 4).</p>
<h4 id="langkah-7-membuat-user">Langkah 7: Membuat User</h4>
<p>Langkah berikutnya adalah membuat user yang boleh mengakses server VPN. Pada langkah ini sangat penting untuk membuat kombinasi password yang kompleks mengingat hubungannya dengan keamanan server VPN Anda.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-18.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-19.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-20.png" alt="" class="align-center" /></p>
<h4 id="langkah-8-konfigurasi-local-bridge">Langkah 8: Konfigurasi Local Bridge</h4>
<p>Setelah berhasil membuat user, langkah berikutnya adalah mengeset konfigurasi Local Bridge dengan cara memilih network adapter dari daftar yang tersedia. Pilihlah network adapter yang terhubungan dengan jaringan lokal. Jangan memilih Wi-Fi adapter karena tidak direkomendasikan untuk membuat Local Bridge.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-21.png" alt="" class="align-center" /></p>
<h4 id="langkah-9-mengaktifkan-konfigurasi-securenat-optional">Langkah 9: Mengaktifkan Konfigurasi SecureNAT (optional)</h4>
<p>Langkah ini sifatnya optional, jadi tergantung kondisi jaringan lokal dari server VPN Anda. Jika jaringan lokal dari server VPN mengaktifkan fungsi DHCP Server (ip dinamis) maka setting ini tidak perlu diaktifkan, sebaliknya jika jaringan lokal server VPN menggunakan ip statis, maka setting ini harus diaktifkan dengan mengklik tombol Manage Virtual Hub.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-22.png" alt="" class="align-center" /></p>
<p>Kemudian klik tombol Virtual NAT and Virtual DHCP Server (SecureNAT)</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-23.png" alt="" class="align-center" /></p>
<p>Untuk melihat konfigurasi default DHCP Server yang digunakan, klik tombol SecureNAT Configuration</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-24.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-25.png" alt="" class="align-center" /></p>
<p>Anda bisa mengganti konfigurasi di atas sesuai dengan kebutuhan.</p>
<p>Kemudian klik tombol Enable SecureNAT untuk mengaktifkan konfigurasi SecureNAT</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-26.png" alt="" class="align-center" /></p>
<h3 id="instalasi-softether-vpn-client">Instalasi SoftEther VPN Client</h3>
<h4 id="langkah-1-download-softether-vpn-versi-client">Langkah 1: Download SoftEther VPN versi Client</h4>
<p>Klik link <a href="http://www.softether-download.com/en.aspx?product=softether">download SoftEther VPN</a>, kemudian pilih <code class="language-plaintext highlighter-rouge">SoftEther VPN Client</code> di bawah drop-down list <code class="language-plaintext highlighter-rouge">Select Component</code>. Berikutnya di pilihan <code class="language-plaintext highlighter-rouge">Select Platform</code> pilih <code class="language-plaintext highlighter-rouge">Windows</code></p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-27.png" alt="" class="align-center" /></p>
<p>Kemudian download versi stabil pada saat postingan ini ditulis yaitu versi (4.25, Build 9656, rtm)</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-28.png" alt="" class="align-center" /></p>
<p>Kemudian klik link <a href="http://www.softether-download.com/files/softether/v4.25-9656-rtm-2018.01.15-tree/Windows/SoftEther_VPN_Client/softether-vpnclient-v4.25-9656-rtm-2018.01.15-windows-x86_x64-intel.exe">SoftEther VPN Client (Ver 4.25, Build 9656, rtm)</a> untuk memulai proses download.</p>
<h4 id="langkah-2-instalasi-softether-vpn-versi-client">Langkah 2: Instalasi SoftEther VPN versi Client</h4>
<p>Jalankan file EXE SoftEther VPN Client yang sudah didownload untuk memulai instalasi SoftEther VPN versi Client. Setelah instalasi berjalan untuk pertama kali akan tampil jendela welcome, klik tombol Next untuk melanjutkan instalasi.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-29.png" alt="" class="align-center" /></p>
<p>Selanjutnya akan tampil jendela untuk memilih jenis <code class="language-plaintext highlighter-rouge">SoftEther VPN Client</code>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-30.png" alt="" class="align-center" /></p>
<p>Pilih SoftEther VPN Client kemudian klik tombol Next. Selanjutnya di jendela End User License Agreement, aktifkan pilihan I agree … , kemudian klik Next.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-31.png" alt="" class="align-center" /></p>
<p>Kemudian klik tombol Next beberapa kali sampai proses instalasi SoftEther VPN Client dimulai.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-32.png" alt="" class="align-center" /></p>
<p>Setelah instalasi selesai, di jendela Setup Finished, aktifkan pilihan Start the SoftEther VPN Client Manager kemudian klik tombol Finish.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-33.png" alt="" class="align-center" /></p>
<h3 id="konfigurasi-softether-vpn-client">Konfigurasi SoftEther VPN Client</h3>
<h4 id="langkah-1-membuat-virtual-network-adapter">Langkah 1: Membuat Virtual Network Adapter</h4>
<p>Virtual Network Adapter digunakan oleh SoftEther VPN Client untuk melakukan koneksi ke server VPN. Cara untuk menambahkan Virtual Network Adapter dengan mengklik kanan list Virtual Network Adapter kemudian pilih New Virtual Network Adapter…</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-34.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-35.png" alt="" class="align-center" /></p>
<p>Untuk saat ini kita menggunakan nama default saja, kemudian klik tombol Ok. Setelah itu akan tampil jendela proses pembuatan Virtual Network Adapter.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-36.png" alt="" class="align-center" /></p>
<p>Virtual Network Adapter berhasil ditambahkan.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-37.png" alt="" class="align-center" /></p>
<h4 id="langkah-2-membuat-koneksi-vpn">Langkah 2: Membuat Koneksi VPN</h4>
<p>Klik ganda item Add VPN Connection</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-38.png" alt="" class="align-center" /></p>
<p>Setelah itu akan tampil jendela New VPN Connection setting</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-39.png" alt="" class="align-center" /></p>
<p>Untuk informasi <code class="language-plaintext highlighter-rouge">Host Name</code>, <code class="language-plaintext highlighter-rouge">Port Number</code> dan <code class="language-plaintext highlighter-rouge">Virtual Hub Name</code>, nilainya disesuaikan dengan konfigurasi SoftEther Server Manager</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-40.png" alt="" class="align-center" /></p>
<p>Selanjutnya klik tombol Advanced Settings …</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-41.png" alt="" class="align-center" /></p>
<p>Kemudian lakukan perubahan konfigurasi seperti berikut.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-42.png" alt="" class="align-center" /></p>
<p>Sampai di sini semua konfigurasi sudah selesai baik di sisi server maupun klien.</p>
<h4 id="langkah-3-tes-koneksi-vpn">Langkah 3: Tes Koneksi VPN</h4>
<p>Untuk melakukan tes koneksi VPN, klik ganda item Koneksi VPN Kantor Jogja.</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-43.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-44.png" alt="" class="align-center" /></p>
<p>Tunggu beberapa saat, dan jika berhasil status koneksi VPN menjadi Connected</p>
<p><img src="https://coding4ever.files.wordpress.com/2018/07/20180705-45.png" alt="" class="align-center" /></p>
<p>Setelah terkoneksi ke server VPN, kita bisa melakukan beberapa tes, misal:</p>
<ol>
<li>Melakukan <code class="language-plaintext highlighter-rouge">ping</code> ke beberapa pc yang ada di kantor.</li>
<li>Melakukan <code class="language-plaintext highlighter-rouge">remote</code> menggunakan RDC (Remote Desktop Connection).</li>
<li>Atau query langsung ke server database.</li>
</ol>
<p>Dan jika berhasil, selamat !!!, Anda sudah mempunyai server VPN sendiri dan bisa mengakses jaringan internal kantor dari mana saja.</p>
<h3 id="kesimpulan">Kesimpulan</h3>
<p>Dengan menggunakan software <a href="https://www.softether.org/">SoftEther VPN</a> dan layanan VPN Azure Cloud dari Microsoft, proses pembuatan server VPN menjadi mudah cukup menggunakan <code class="language-plaintext highlighter-rouge">ip private</code> dengan biaya 0 rupiah.</p>
<p>Selamat mencoba :blush:</p>
<p>Referensi:</p>
<ul>
<li>https://www.softether.org/</li>
<li>http://www.vpnazure.net/en/</li>
</ul>KamarudinSalah satu tantangan bagi kita, pengembang software untuk aplikasi bisnis berbasis desktop adalah ketika klien kita bertanya “Mas, databasenya kalau di taruh di server saja bisa ya? Jadi bisa di akses dari mana saja, soalnya butuh juga akses dari luar”, sedangkan kondisi database server mereka hanya mempunyai ip private. Solusi paling cepat dan murah (gratis) yang mungkin bisa kita tawarkan adalah dengan menggunakan software VPN. Ada banyak pilihan software VPN, mulai dari instalasinya yang gampang seperti Hamachi dan ZeroTier One atau yang sedikit lebih ribet tapi menawarkan segudang fitur yang wah seperti SoftEther VPN.GitLab CI untuk .NET Developer Bagian #22017-09-09T22:17:36+07:002017-09-09T22:17:36+07:00http://coding4ever.net/blog/2017/09/09/gitlab-ci-untuk-net-developer-bagian-number-2<p><img src="http://coding4ever.net/assets/images/logo/gitlabci-logo.png" alt="" class="align-left" />Melanjutkan pembahasan tentang <a href="http://coding4ever.net/categories/continuous-integration/">Continuous Integration</a> menggunakan <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a>. Di <a href="http://coding4ever.net/blog/2017/08/30/gitlab-ci-untuk-net-developer-bagian-number-1/">postingan</a> sebelumnya kita sudah melakukan konfigurasi <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> dengan menambahkan file <a href="https://gist.github.com/k4m4r82/f88e4bb02eb8ade0d9d049a07ec6ee30">.gitlab-ci.yml</a>.</p>
<p>Di konfigurasi awal ini kita sudah menambahkan dua job yang bertugas untuk merestore paket nuget dan melakukan proses build. Berikutnya kita akan menambahkan satu job lagi yang bertugas untuk membuat paket instalasi menggunakan <a href="http://coding4ever.net/categories/inno-setup/">Inno Setup</a> jika job pertama dan kedua berhasil dijalankan. Nah dengan menggunakan CI semua proses ini bisa dilakukan secara otomatis dan terpusat, sehingga kita mempunyai histori hasil build dari waktu ke waktu. Jadi untuk mencari file setup/paket installer terakhir enggak usah lagi nanya ke developer karena bisa langsung kita download dari server CI-nya.</p>
<!-- more -->
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-07.png" alt="" class="align-center" /></p>
<h3 id="inno-setup">Inno Setup</h3>
<p><a href="http://jrsoftware.org/">Inno Setup</a> adalah tool yang digunakan untuk membuat <a href="http://coding4ever.net/categories/tools-installer/">paket installer</a> yang gratis dan open source. Selain <a href="http://jrsoftware.org/">Inno Setup</a>, kita juga bisa menggunakan <a href="http://coding4ever.net/categories/tools-installer/">tool installer</a> lainnya seperti <a href="http://nsis.sourceforge.net/">NSIS</a>. Untuk informasi lebih lanjut tentang <a href="http://jrsoftware.org/">Inno Setup</a> dan <a href="http://nsis.sourceforge.net/">NSIS</a> bisa langsung ke <a href="http://coding4ever.net/categories/inno-setup/">sini</a> dan <a href="http://coding4ever.net/categories/nsis/">sini</a>.</p>
<p>Jadi di postingan kali ini kita akan menggunakan <a href="http://jrsoftware.org/">Inno Setup</a> untuk keperluan pembuatan file setup/paket installer. Sebagai contoh, berikut adalah skrip <a href="http://jrsoftware.org/">Inno Setup</a> yang digunakan untuk membuat file setup/paket installer untuk project <a href="https://gitlab.com/rudi.krsoftware/Northwind">Northwind</a> yang kita gunakan sebagai contoh project.</p>
<script src="https://gist.github.com/5eee78a4609377dcce794683958b9147.js"> </script>
<p>Skrip Inno Setup ini kita tambahkan ke folder yang sama dengan folder source code kemudian kita simpan juga ke repository git.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-01.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-02.png" alt="" class="align-center" /></p>
<h3 id="menambahkan-job-untuk-membuat-paket-instalasi">Menambahkan Job untuk Membuat Paket Instalasi</h3>
<p>Setelah menambahkan file <a href="https://gist.github.com/k4m4r82/5eee78a4609377dcce794683958b9147">Inno Setup</a>, langkah berikutnya adalah kita mengedit file <a href="https://gist.github.com/k4m4r82/f88e4bb02eb8ade0d9d049a07ec6ee30">.gitlab-ci.yml</a> untuk menambahkan job baru yang bertugas untuk mengeksekusi file <a href="https://gist.github.com/k4m4r82/5eee78a4609377dcce794683958b9147">setup.iss</a></p>
<p>Berikut isi file <a href="https://gist.github.com/k4m4r82/f88e4bb02eb8ade0d9d049a07ec6ee30">.gitlab-ci.yml</a> yang sudah kita edit:</p>
<script src="https://gist.github.com/d07cb047d26f2df4778606c48db35b14.js"> </script>
<p>Coba perhatikan skrip di atas, di baris ke-4 kita menambahkan variabel <code class="language-plaintext highlighter-rouge">InnoSetupPath</code> yang isinya adalah lokasi file ISCC.exe yang digunakan untuk mengompile skrip <a href="https://gist.github.com/k4m4r82/5eee78a4609377dcce794683958b9147">inno setup</a>. Kemudian di baris ke-10 kita menambahkan stage baru dengan nama <code class="language-plaintext highlighter-rouge">setup</code> yang digunakan untuk job baru yang akan kita tambahkan yaitu job <code class="language-plaintext highlighter-rouge">create_file_setup</code>. Terakhir di baris ke-29, kita menambahkan job baru dengan nama <code class="language-plaintext highlighter-rouge">create_file_setup</code>. Job ini akan melakukan proses kompilasi skrip <a href="https://gist.github.com/k4m4r82/5eee78a4609377dcce794683958b9147">inno setup</a> menjadi file setup/paket instalasi (baris ke-33), kemudian mengupload ke server GitLab. Untuk keperluan upload ini, kita menambahkan keyword <a href="https://docs.gitlab.com/ee/user/project/pipelines/job_artifacts.html">artifacts</a> masih di job <code class="language-plaintext highlighter-rouge">create_file_setup</code>, kemudian diikuti dengan beberapa konfigurasi. <a href="https://docs.gitlab.com/ee/user/project/pipelines/job_artifacts.html">Artifact</a> adalah output dari proses build, bisa berupa file exe, dll atau file dengan ekstensi lainnya</p>
<p>Setelah itu simpan perubahan file <a href="https://gist.github.com/k4m4r82/d07cb047d26f2df4778606c48db35b14">.gitlab-ci.yml</a> ke repository git.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-03.png" alt="" class="align-center" /></p>
<p>Kemudian langsung di push, untuk melihat apakah semua job (restore, build dan pembuatan paket instalasi) berhasil dijalankan.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-04.png" alt="" class="align-center" /></p>
<p>Tunggu beberapa saat, kemudian cek link <a href="https://gitlab.com/rudi.krsoftware/Northwind/pipelines">Pipelines</a> untuk melihat status <a href="https://gitlab.com/rudi.krsoftware/Northwind/pipelines">Pipelines</a> yang sedang dijalankan.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-05.png" alt="" class="align-center" /></p>
<p><a href="https://docs.gitlab.com/ee/ci/pipelines.html">Pipelines</a> digunakan untuk mengelompokkan job. Jika ingin melihat job apa saja yang ada di dalam <a href="https://docs.gitlab.com/ee/ci/pipelines.html">Pipelines</a>, kita tinggal klik aja link statusnya.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-06.png" alt="" class="align-center" /></p>
<p>Jika sudah selesai, kita bisa melihat link download <code class="language-plaintext highlighter-rouge">artifacts</code> di kolom terakhir.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-07.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-08.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2017/09/20170909-09.png" alt="" class="align-center" /></p>
<p>Selesai…, untuk contoh lengkap hasil buildnya bisa Anda cek di <a href="https://gitlab.com/rudi.krsoftware/Northwind/pipelines">sini</a></p>
<p>Selamat <a href="https://gitlab.com/rudi.krsoftware/Northwind">MENCOBA</a> :blush:</p>KamarudinMelanjutkan pembahasan tentang Continuous Integration menggunakan GitLab CI. Di postingan sebelumnya kita sudah melakukan konfigurasi GitLab CI dengan menambahkan file .gitlab-ci.yml.GitLab CI untuk .NET Developer Bagian #12017-08-30T12:32:47+07:002017-08-30T12:32:47+07:00http://coding4ever.net/blog/2017/08/30/gitlab-ci-untuk-net-developer-bagian-number-1<p><img src="http://coding4ever.net/assets/images/logo/gitlabci-logo.png" alt="" class="align-left" />Sudah hampir setahun saya menggunakan <a href="http://coding4ever.net/categories/jenkins/">Jenkins</a> sebagai tool/software CI <a href="http://coding4ever.net/categories/continuous-integration/">Continuous Integration</a>. Ada banyak manfaat yang saya rasakan terutama untuk mengurangi pekerjaan-pekerjaan <code class="language-plaintext highlighter-rouge">sepele</code> tapi <code class="language-plaintext highlighter-rouge">berulang</code> seperti pembuatan paket instalasi, upload updatean terbaru ke server atau deploy web api/service ke server development atau production. Dengan menggunakan software CI(<a href="http://coding4ever.net/categories/continuous-integration/">Continuous Integration</a>) seperti <a href="http://coding4ever.net/categories/jenkins/">Jenkins</a> pekerjaan-pekerjaan membosankan tersebut bisa dilakukan hanya dengan mengklik satu tombol atau bisa juga dibuat otomatis ketika kita mem-push perubahan source code ke repository git. Waktu yang dibutuhkan juga biasanya tidak lama sekitar 1-3 menit, ya tergantung besar atau kecilnya project yang akan dibuild/deploy.</p>
<!-- more -->
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-011.png" alt="" class="align-center" /></p>
<p>Selain itu dari sisi dokumentasi juga ikut terbantu, karena tool seperti <a href="http://coding4ever.net/categories/jenkins/">Jenkins</a> dan dengan bantuan pluginnya bisa otomatis mengenerate history build dari waktu ke waktu.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-021.png" alt="" class="align-center" /></p>
<p>Tapi pada postingan kali ini saya ingin membahas tool/software CI(<a href="http://coding4ever.net/categories/continuous-integration/">Continuous Integration</a>) yang lain yaitu <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a>. Beberapa hari ini saya menyempatkan untuk mencoba <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> dan kesimpulannya ada beberapa kelebihan <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> dibandingkan <a href="http://coding4ever.net/categories/jenkins/">Jenkins</a> yaitu:</p>
<ul>
<li><a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> sudah terintegrasi dengan <a href="https://gitlab.com/">GitLab </a>. <a href="https://gitlab.com/">GitLab </a> adalah layanan cloud untuk repository git, jadi mirip dengan <a href="http://github.com/">github</a> atau <a href="http://bitbucket.org/">bitbucket</a>. Kelebihan gitlab dibandingkan dengan github dan bitbucket adalah untuk layanan gratisnya tidak ada pembatasan jumlah tim atau jumlah repository private yang bisa dibuat. Sedangkan untuk <a href="http://coding4ever.net/categories/jenkins/">Jenkins</a> repository gitnya harus diinstall terpisah atau menggunakan layanan repository git yang sudah ada seperti gitlab, github atau bitbucket.</li>
<li>Konfigurasi Job di <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> lebih sederhana dibandingkan <a href="http://coding4ever.net/categories/jenkins/">Jenkins</a>. Konfigurasi job <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> menggunakan file text biasa dengan format <a href="https://en.wikipedia.org/wiki/YAML">YAML</a>, sehingga file konfigurasi ini bisa kita tambahkan ke repository git.</li>
<li>Satu konfigurasi <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> sudah bisa digunakan untuk beberapa <a href="https://docs.gitlab.com/ee/ci/yaml/#jobs">job</a> dan <a href="https://docs.gitlab.com/ee/ci/yaml/README.html#stages">stage</a> sedangkan dengan <a href="http://coding4ever.net/categories/jenkins/">Jenkins</a> kita harus membuat beberapa job untuk masing-masing stage (<a href="https://en.wiktionary.org/wiki/CMIIW">CMIIW</a>).</li>
<li>Penggunaan <a href="http://coding4ever.net/categories/jenkins/">Jenkins</a> sangat cocok untuk keperluan internal kantor, jadi jika ingin digunakan secara public (di akses via internet) harus menyediakan mesin khusus yang mempunyai ip public atau bisa juga menggunakan VPS. Sedangkan untuk <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> sendiri kita cukup menyediakan mesin yang mempunyai akses internet dan tidak harus mempunyai ip public.</li>
<li>Apalagi ya…, silahkan dicoba sendiri he he :grin:</li>
</ul>
<h3 id="continuous-integration">Continuous Integration</h3>
<p>Sebelum kita lanjut ke pembahasan <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a>, saya ingin mereview kembali apa yang dimaksud dengan CI (<a href="http://coding4ever.net/categories/continuous-integration/">Continuous Integration</a>). <a href="http://coding4ever.net/categories/continuous-integration/">Continuous Integration</a>, untuk selanjutnya kita sebut CI saja, merupakan salah satu kegiatan untuk meningkatkan produktivitas dalam pengembangan aplikasi di mana seluruh hasil kerja (source code) dari masing-masing developer digabungkan (push) ke dalam satu wadah (server repository source code). Bisa sekali sehari, bisa juga beberapa kali dalam sehari. Setiap penggabungan source code akan diverifikasi secara otomatis oleh server CI, yang memungkinkan tim untuk mendeteksi secara dini jika ada masalah/konflik/error pada saat penggabungan source code.</p>
<p>Setelah penggabungan hasil kerja (source code) selesai, server CI otomatis akan melakukan proses build untuk memastikan tidak ada kode yang merusak/membuat proses build gagal. Jadi semakin cepat kegagalan build ini diketahui semakin cepat pula kita meresponnya. Dan jika proses build-nya berhasil akan dilanjutkan dengan proses deploy. Selain itu server CI juga bisa dikonfigurasi untuk melakukan proses lain seperti menjalankan unit testing, integration testing dan testing otomatis lainnya.</p>
<p>Sebagai .NET developer kita sudah biasa melakukan proses build dengan menekan tombol F5 (Start Debugging) atau Ctrl+F5 (Start Without Debugging) baik pada waktu development atau perbaikan bug. Sedangkan untuk contoh deploy anggap saja seperti kita membuat paket installer yang akan didistribusikan ke komputer/server klien. Nah dengan menggunakan CI semua proses ini bisa dilakukan secara otomatis dan terpusat, sehingga kita mempunyai arsip hasil build dan deploy dari waktu ke waktu. Jadi untuk mencari file setup/paket installer terakhir enggak usah lagi nanya ke developer karena bisa langsung kita download dari server CI-nya.</p>
<p>Proses build ini selain bisa dibuat otomatis setiap kita mem-push source code ke server repository bisa juga kita buatkan jadwalnya, misal pas jam makan siang atau jam pulang kantor. Jadi di kantor dibuat kesepakatan/aturan klo ada yang merusak build pas jam makan siang enggak boleh makan siang sampai proses build-nya berhasil atau yang merusak build pas jam pulang kantor enggak boleh pulang sampai proses build-nya berhasil :grin:</p>
<p>Jadi dengan menggunakan CI, alur kerja kita lebih kurang seperti berikut :</p>
<ul>
<li>Menulis kode, build dan tes di komputer masing-masing (seperti biasa).</li>
<li>Commit dan push kode ke server repository/source control seperti GIT atau SVN.</li>
<li>Server CI akan meng-clone/pull repository kemudian melakukan build, menjalankan tes otomatis (jika ada) dan deploy secara otomatis. Jika buildnya gagal ulangi lagi langkah pertama.</li>
</ul>
<p>Nah mudah-mudahan sampai di sini sudah punya gambaran ya tentang apa itu <a href="http://coding4ever.net/categories/continuous-integration/">Continuous Integration</a> dan bagaimana cara kerjanya.</p>
<h3 id="apa-saja-yang-perlu-dipelajari-">Apa saja yang perlu dipelajari ?</h3>
<p>Untuk belajar CI, tentu saja ada pengetahun penunjang yang perlu Anda pelajari yaitu penggunaan <a href="https://en.wikipedia.org/wiki/Version_control">Source/Version Control</a> terutama <a href="https://git-scm.com/">GIT</a> dan aplikasi GIT Client seperti <a href="https://tortoisegit.org/download/">TortoiseGit</a>. Pengetahun lainnya adalah pembuatan paket instalasi menggunakan <a href="http://coding4ever.net/categories/inno-setup/">Inno Setup</a> untuk aplikasi desktop atau bisa juga pengetahuan mendeploy web api/service ke server.</p>
<h3 id="gitlab-ci">GitLab CI</h3>
<p><a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> adalah salah satu tool/software <a href="http://coding4ever.net/categories/continuous-integration/">Continuous Integration</a> gratis yang merupakan bagian dari <a href="https://about.gitlab.com/">GitLab</a>. <a href="https://about.gitlab.com/">GitLab</a> sendiri merupakan layanan cloud repository git, jadi mirip dengan <a href="http://github.com/">github</a> atau <a href="http://bitbucket.org/">bitbucket</a>. Kelebihan dari <a href="https://about.gitlab.com/">GitLab</a> ini sendiri, untuk versi gratisnya tidak dibatasi seperti halnya <a href="http://github.com/">github</a> dan <a href="http://bitbucket.org/">bitbucket</a>. Jadi dengan versi gratisnya tidak ada pembatasan jumlah private repository yang bisa kita buat ataupun jumlah tim yang terlibat. Menarik bukan untuk sebuah layanan cloud repository git yang gratis.</p>
<p><a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> sendiri kalo kita lihat lebih mirip dengan sebuah dashboard untuk mengelola job dan log hasil buildnya. Jadi aslinya yang melakukan build dan deploy itu bukanlah <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> tapi tool lain yang disebut dengan <a href="https://docs.gitlab.com/runner/#using-gitlab-runner">GitLab Runner</a>. <a href="https://docs.gitlab.com/runner/#using-gitlab-runner">GitLab Runner</a> ini harus kita install di mesin (pc/server) yang mempunyai akses internet agar bisa terhubung ke service <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a>. Mesin untuk <a href="https://docs.gitlab.com/runner/#using-gitlab-runner">GitLab Runner</a> tidak harus mempunyai ip public yang penting terkoneksi dengan internet.</p>
<p>Idenya sederhana tapi brilian, dengan konsep seperti ini akan menghemat resource dari server <a href="https://about.gitlab.com/">GitLab</a> itu sendiri, karena semua resource yang dibutuhkan untuk proses build dan deploy di tanggung oleh mesin dari user/developer. Tapi dari sisi user/developer juga diuntungkan karena mesin untuk build dan deploynya adalah milik kita sendiri, sehingga kita punya akses full untuk setup/konfigurasi tool/software apa saja yang dibutuhkan untuk proses build dan deploy tersebut.</p>
<h3 id="gitlab-runner">GitLab Runner</h3>
<p><a href="https://docs.gitlab.com/runner/#using-gitlab-runner">GitLab Runner</a> adalah tool/software yang bertugas untuk menjalankan job dan mengirimkan kembali hasilnya ke <a href="https://about.gitlab.com/">GitLab</a>, nah data-data inilah yang akan diolah oleh <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a>.</p>
<p>GitLab Runner bisa diinstall untuk GNU/Linux, macOS, FreeBSD, dan Windows.</p>
<h4 id="instalasi-gitlab-runner">Instalasi GitLab Runner</h4>
<p><a href="https://docs.gitlab.com/runner/install/windows.html">Instalasi GitLab Runner</a> sendiri sangat mudah, ditambah dengan dokumentasi yang lengkap. Jadi seharusnya Anda tidak akan mendapatkan masalah untuk langkah-langkah instalasinya. Untuk petunjuknya bisa ada cek di <a href="https://docs.gitlab.com/runner/install/windows.html">sini</a>.</p>
<p>Untuk memastikan instalasinya GitLab Runnernya berhasil, silahkan Anda cek service GitLab Runnernya.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-03.png" alt="" class="align-center" /></p>
<p>Selain menginstall <a href="https://docs.gitlab.com/runner/install/">GitLab Runner</a>, kita juga perlu menginstall beberapa tool pendukung seperti:</p>
<ul>
<li>.NET Framework 4.0, 4.5.x</li>
<li><a href="https://www.microsoft.com/en-us/download/details.aspx?id=48159">Microsoft Build 2015</a></li>
<li>Source/version control <a href="https://git-scm.com/">Git</a></li>
<li>Pembuat paket installer seperti <a href="http://www.jrsoftware.org/">Inno Setup</a></li>
<li><a href="https://www.nuget.org/downloads">Nuget</a> untuk merestore paket nuget</li>
<li>FTP Client seperti <a href="https://winscp.net/eng/index.php">WinSCP</a></li>
</ul>
<p>Intinya semua tool pendukung di atas, diinstall sesuai dengan kebutuhan environment development.</p>
<h4 id="mendaftarkan-repository-ke-gitlab-runner">Mendaftarkan Repository ke GitLab Runner</h4>
<p>Setelah instalasi GitLab Runner, berikutnya adalah mendaftarkan repository git ke GitLab Runner. Berikut langkah-langkahnya:</p>
<p><strong>Langkah 1</strong>. Login ke <a href="https://about.gitlab.com/">GitLab</a>, klo belum punya ya silahkan daftar terlebih dulu.</p>
<p><strong>Langkah 2</strong>. Buat repository baru</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-04.png" alt="" class="align-center" /></p>
<p><strong>Langkah 3</strong>. Setelah membuat repositorynya berhasil, klik link <code class="language-plaintext highlighter-rouge">Settings</code> -> <code class="language-plaintext highlighter-rouge">Pipelines</code></p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-05.png" alt="" class="align-center" /></p>
<p>Scroll ke bawah sedikit, kemudian catat informasi <code class="language-plaintext highlighter-rouge">Specific Runners</code> untuk poin 2 dan 3.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-06.png" alt="" class="align-center" /></p>
<p>Kemudian di bagian <code class="language-plaintext highlighter-rouge">Shared Runners</code> klik tombol <code class="language-plaintext highlighter-rouge">Disable shared Runners</code></p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-07.png" alt="" class="align-center" /></p>
<p><strong>Langkah 4</strong>. Berikutnya adalah mengaktifkan <code class="language-plaintext highlighter-rouge">Command Prompt</code> dengan mode <code class="language-plaintext highlighter-rouge">Administrator</code> kemudian masuk ke folder instalasi GitLab Runner</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-08.png" alt="" class="align-center" /></p>
<p>Setelah itu ketik perintah <code class="language-plaintext highlighter-rouge">gitlab-runner register</code>, kemudian tinggal jawab pertanyaan yang ada termasuk informasi <code class="language-plaintext highlighter-rouge">Specific Runners</code> yang kita dapatkan di <code class="language-plaintext highlighter-rouge">langkah 3</code>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-09.png" alt="" class="align-center" /></p>
<p>Jika proses registrasinya berhasil, kita bisa cek runner aktifnya dibawah informasi <code class="language-plaintext highlighter-rouge">Specific Runners</code></p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-10.png" alt="" class="align-center" /></p>
<h3 id="contoh-project">Contoh Project</h3>
<p>Untuk keperluan uji coba kali ini saya menggunakan contoh aplikasi Northwind yang bisa Anda download di <a href="https://github.com/k4m4r82/RepositoryPattern">sini</a>. Setelah itu kita <code class="language-plaintext highlighter-rouge">push</code> source codenya ke link repository gitlab yang sudah kita buat di langkah-langkah sebelumnya.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-11.png" alt="" class="align-center" /></p>
<p>Dan untuk proses <code class="language-plaintext highlighter-rouge">push</code>-nya saya menggunakan <a href="https://tortoisegit.org/download/">TortoiseGit</a>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-12.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-13.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-14.png" alt="" class="align-center" /></p>
<h3 id="menambahkan-file-gitlab-ciyml">Menambahkan file .gitlab-ci.yml</h3>
<p>Untuk melakukan konfigurasi <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a>, kita perlu menambahkan file dengan nama <a href="https://docs.gitlab.com/ee/ci/yaml/">.gitlab-ci.yml</a>. File ini adalah file text biasa yang menggunakan format <a href="https://en.wikipedia.org/wiki/YAML">YAML</a>, sehingga file konfigurasi ini bisa kita tambahkan ke folder source code kemudian kita simpan juga ke repository git.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-15.png" alt="" class="align-center" /></p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-161.png" alt="" class="align-center" /></p>
<p>Berikut contoh isi file <code class="language-plaintext highlighter-rouge">.gitlab-ci.yml</code></p>
<script src="https://gist.github.com/f88e4bb02eb8ade0d9d049a07ec6ee30.js"> </script>
<p>Coba perhatikan skrip di atas, di baris ke-6 kita mendefinisikan beberapa stage yaitu <code class="language-plaintext highlighter-rouge">restore</code> dan <code class="language-plaintext highlighter-rouge">build</code>, kita bisa juga menambahkan stage yang lain misal <code class="language-plaintext highlighter-rouge">test</code>, <code class="language-plaintext highlighter-rouge">deploy</code>, <code class="language-plaintext highlighter-rouge">development</code>, <code class="language-plaintext highlighter-rouge">production</code>, dst. Stage digunakan untuk menentukan jenis dari job. Jadi perlu diingat bahwa stage dan job itu berbeda, walaupun dibanyak contoh menggunakan nama yang sama untuk stage dan job.</p>
<p>Eksekusi antar job di <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> itu sifatnya independen atau dengan kata lain tidak ada hubungan antar job. Ketika job B membutuhkan file yang dihasilkan oleh job A secara default tidak bisa, sehingga kita perlu menambahkan konfigurasi <code class="language-plaintext highlighter-rouge">cache</code>, seperti yang terlihat di baris ke-10. Kita mendaftarkan folder <code class="language-plaintext highlighter-rouge">lib</code> ke dalam konfigurasi <code class="language-plaintext highlighter-rouge">cache</code>. Folder <code class="language-plaintext highlighter-rouge">lib</code> ini berisi file-file library (*.dll) hasil dari job <code class="language-plaintext highlighter-rouge">restore_nuget_package</code>. Semua file yang ada di folder <code class="language-plaintext highlighter-rouge">lib</code> ini dibutuhkan pada saat menjalankan job <code class="language-plaintext highlighter-rouge">build_solution</code>.</p>
<p>Berikutnya kita pindah ke baris 15, di baris ini kita mendefinisikan job dengan nama <code class="language-plaintext highlighter-rouge">restore_nuget_package</code> dengan tipe stage <code class="language-plaintext highlighter-rouge">restore</code>, kemudian menjalankan skrip untuk merestore paket nuget.</p>
<p>Terakhir di baris ke-21, kita mendefinisikan job lain dengan nama <code class="language-plaintext highlighter-rouge">build_solution</code>, sesuai namanya job ini digunakan untuk membuild solution atau project atau klo lewat IDE Visual Studio .NET kita menekan tombol F5 (Start Debugging) atau Ctrl+F5 (Start Without Debugging).</p>
<h3 id="cara-mengecekmemvalidasi-skrip-file-gitlab-ciyml">Cara Mengecek/Memvalidasi Skrip File .gitlab-ci.yml</h3>
<p>Sebelum kita menambahkan file <code class="language-plaintext highlighter-rouge">.gitlab-ci.yml</code> ke repository git, ada baiknya kita cek terlebih dahulu apakah script yang kita tuliskan sudah benar atau belum.
<a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a> sudah menyediakan link khusus untuk mengeceknya, yang bisa Anda cek di <a href="https://gitlab.com/ci/lint">sini</a>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-171.png" alt="" class="align-center" /></p>
<h3 id="testing-build">Testing Build</h3>
<p>Untuk testing build kita tinggal melakukan push ke repository git.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-181.png" alt="" class="align-center" /></p>
<p>Kemudian untuk melihat log progres buildnya kita bisa cek link <code class="language-plaintext highlighter-rouge">Pipelines</code>.</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-19.png" alt="" class="align-center" /></p>
<p>Gambar detail job yang sedang dijalankan</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-201.png" alt="" class="align-center" /></p>
<p>Untuk melihat detail log dari masing-masing job, tinggal kita klik nama jobnya, misal job restore nuget package</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-211.png" alt="" class="align-center" /></p>
<p>job build solution</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-221.png" alt="" class="align-center" /></p>
<p>Status proses build berhasil</p>
<p><img src="https://coding4ever.files.wordpress.com/2017/08/20170830-231.png" alt="" class="align-center" /></p>
<p>Untuk contoh lengkap hasil buildnya bisa Anda cek di <a href="https://gitlab.com/rudi.krsoftware/Northwind/pipelines">sini</a></p>
<p>Akhirnya selesai juga postingan <a href="http://coding4ever.net/blog/2017/08/30/gitlab-ci-untuk-net-developer-bagian-number-1/">GitLab CI untuk .NET Developer Bagian #1</a>, dan mudah-mudahan bisa dipahami :grin:. Untuk postingan berikutnya insyaAlloh kita akan menambahkan job untuk membuat paket instalasi menggunakan Inno Setup dan menguploadnya sehingga bisa langsung didownload via Dashboard <a href="https://about.gitlab.com/features/gitlab-ci-cd/">GitLab CI</a>.</p>
<p>Selamat <a href="https://gitlab.com/rudi.krsoftware/Northwind/pipelines">MENCOBA</a> :blush:</p>KamarudinSudah hampir setahun saya menggunakan Jenkins sebagai tool/software CI Continuous Integration. Ada banyak manfaat yang saya rasakan terutama untuk mengurangi pekerjaan-pekerjaan sepele tapi berulang seperti pembuatan paket instalasi, upload updatean terbaru ke server atau deploy web api/service ke server development atau production. Dengan menggunakan software CI(Continuous Integration) seperti Jenkins pekerjaan-pekerjaan membosankan tersebut bisa dilakukan hanya dengan mengklik satu tombol atau bisa juga dibuat otomatis ketika kita mem-push perubahan source code ke repository git. Waktu yang dibutuhkan juga biasanya tidak lama sekitar 1-3 menit, ya tergantung besar atau kecilnya project yang akan dibuild/deploy.