<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Farhan Roy -- | 😁</title>
    <description>The latest articles on DEV Community by Farhan Roy -- | 😁 (@farhanroy).</description>
    <link>https://dev.to/farhanroy</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F530295%2F2f8e10cd-df6e-4037-b4bd-70f427628505.png</url>
      <title>DEV Community: Farhan Roy -- | 😁</title>
      <link>https://dev.to/farhanroy</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/farhanroy"/>
    <language>en</language>
    <item>
      <title>Flutter Dio Interceptor</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Sun, 16 Apr 2023 08:32:05 +0000</pubDate>
      <link>https://dev.to/farhanroy/flutter-dio-interceptor-43m7</link>
      <guid>https://dev.to/farhanroy/flutter-dio-interceptor-43m7</guid>
      <description>&lt;p&gt;Terkadang dalam membuat aplikasi kita perlu mengetahui data request yang dikirim ke server guna memastikan apakah data yang dikirim apakah betul.&lt;/p&gt;

&lt;p&gt;Hal ini bisa dilakukan dengan &lt;em&gt;tracing&lt;/em&gt; menggunakan Interceptor pada package Dio. Interceptor sendiri merupakan suatu mekanisme yang digunakan untuk memodifikasi request sebelum dikirim dan response sebelum diterima. Fitur ini sangat berguna bagi developer dalam mengirimkan request dengan header khusus atau juga mengambil data pada setiap response yang diterima.&lt;/p&gt;

&lt;p&gt;Ada beberapa jenis interceptor, pada kasus ini interceptor yang dipakai adalah &lt;strong&gt;DioLoggingInterceptor&lt;/strong&gt;. Berikut langkah - langkah penggunaannya:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Pastikan project sudah menggunakan package Dio, lalu buat kelas baru yang berisi seperti berikut&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;

&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:dio/dio.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="s"&gt;'package:flutter/material.dart'&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;LoggingInterceptor&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="n"&gt;Interceptor&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nd"&gt;@override&lt;/span&gt;
  &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="n"&gt;onResponse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;Response&lt;/span&gt; &lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;ResponseInterceptorHandler&lt;/span&gt; &lt;span class="n"&gt;handler&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;onResponse&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;response&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;handler&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;debugPrint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'&lt;/span&gt;&lt;span class="se"&gt;\n\n&lt;/span&gt;&lt;span class="s"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;debugPrint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'&amp;lt;--- HTTP CODE : &lt;/span&gt;&lt;span class="si"&gt;${response.statusCode}&lt;/span&gt;&lt;span class="s"&gt; URL : &lt;/span&gt;&lt;span class="si"&gt;${response.requestOptions.baseUrl}${response.requestOptions.path}&lt;/span&gt;&lt;span class="s"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;debugPrint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'Headers: '&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;printWrapped&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'Response : &lt;/span&gt;&lt;span class="si"&gt;${response.data}&lt;/span&gt;&lt;span class="s"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;debugPrint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'&amp;lt;--- END HTTP'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="n"&gt;printWrapped&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kt"&gt;String&lt;/span&gt; &lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;RegExp&lt;/span&gt; &lt;span class="n"&gt;pattern&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;RegExp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;'.{1,800}'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="n"&gt;pattern&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;allMatches&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;text&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="n"&gt;RegExpMatch&lt;/span&gt; &lt;span class="n"&gt;match&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;debugPrint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;match&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;group&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)));&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;ol&gt;
&lt;li&gt;Kemudian tinggal mentautkan dengan objek Dio-nya&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;

&lt;span class="kd"&gt;final&lt;/span&gt; &lt;span class="n"&gt;dio&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Dio&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="n"&gt;dio&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;interceptors&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;LoggingInterceptor&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Setelah itu pada saat running akan mendapatkan output seperti ini&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqk954wetztu960cdaqji.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqk954wetztu960cdaqji.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>dio</category>
    </item>
    <item>
      <title>Country Code Picker using Jetpack Compose</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Tue, 23 Nov 2021 08:20:35 +0000</pubDate>
      <link>https://dev.to/farhanroy/country-code-picker-using-jetpack-compose-1lan</link>
      <guid>https://dev.to/farhanroy/country-code-picker-using-jetpack-compose-1lan</guid>
      <description>&lt;p&gt;Pada artikel kali ini saya akan menunjukan bagaimana membuat country picker menggunakan jetpack compose.&lt;/p&gt;

&lt;p&gt;Jetpack Compose tentunya berbeda dengan XML. Yang sebenarnya, XML layout akan dirender menjadi kode android.view. Sedangkan jetpack compose tidak lagi menggunakan android.view. Ini menjadikan Jetpack Compose lebih cepat ketika di compile&lt;/p&gt;

&lt;p&gt;Saat ini sedikit plugin yang support Jetpack Compose. Disini saya akan menjelaskan bagaimana menampilkan Country Code Picker menggunakan Jetpack Compose ini.&lt;/p&gt;

&lt;p&gt;Pertama saya perkenalkan dulu dengan library atau package yang bernama &lt;strong&gt;ComposeCountryCodePicker&lt;/strong&gt; ini merupakan package buatan saya sendiri yang berguna untuk membuat tampilan country code picker.&lt;/p&gt;

&lt;h2&gt;
  
  
  🎉 Requirement
&lt;/h2&gt;

&lt;p&gt;There are requirements that you must meet in order to use this library:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Jetpack Compose version 1.1.0-beta02&lt;/li&gt;
&lt;li&gt;Android Gradle Plugin version 7.0.3&lt;/li&gt;
&lt;li&gt;Kotlin version 1.5.31&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  🔧 Installing plugin
&lt;/h2&gt;

&lt;p&gt;First tambahkan repository jitpack di &lt;code&gt;build.gradle&lt;/code&gt;. Seperti dibawah ini&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight groovy"&gt;&lt;code&gt;&lt;span class="n"&gt;repositories&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;maven&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt; &lt;span class="s1"&gt;'https://jitpack.io'&lt;/span&gt; &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Setelah itu tambahkan plugin nya seperti biasa di file &lt;code&gt;app/build.gradle&lt;/code&gt;.&lt;br&gt;
Setelah itu jangan lupa untuk &lt;strong&gt;Sync Gradle&lt;/strong&gt; supaya library terpasang dengan baik&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight groovy"&gt;&lt;code&gt;&lt;span class="n"&gt;implementation&lt;/span&gt; &lt;span class="s1"&gt;'com.github farhanroy:ComposeCountryCodePicker:1.0.2'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  ✏️ How to usage ?
&lt;/h2&gt;

&lt;p&gt;Sangat mudah sekali, panggil saja Composable functionnya, lalu untuk mendapatkan nama dari negara cukup manfaatkan high order parameter yang ada.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight kotlin"&gt;&lt;code&gt;&lt;span class="nc"&gt;CountryCodeDialog&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;pickedCountry&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; 
    &lt;span class="nc"&gt;Log&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;d&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;it&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// picked contry name&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Jika ada error atau bug lain langsung saja buat &lt;strong&gt;issue&lt;/strong&gt; di repository package ini.&lt;/p&gt;

&lt;h2&gt;
  
  
  Preview
&lt;/h2&gt;

&lt;p&gt;Berikut tampilan dari kode diatas&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--h_JCgte7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://i.ibb.co/N70nMjV/1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--h_JCgte7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://i.ibb.co/N70nMjV/1.png" alt="Image description" width="234" height="481"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1jsJ7L09--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://i.ibb.co/8sJC0B8/2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1jsJ7L09--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://i.ibb.co/8sJC0B8/2.png" alt="Image description" width="234" height="481"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing
&lt;/h2&gt;

&lt;p&gt;Feel free untuk bertanya atau &lt;strong&gt;pull request&lt;/strong&gt; ke repository saya ini merupakan project opensource dan terbuka untuk semua orang.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/farhanroy/ComposeCountryCodePicker"&gt;https://github.com/farhanroy/ComposeCountryCodePicker&lt;/a&gt;&lt;/p&gt;

</description>
      <category>android</category>
      <category>kotlin</category>
      <category>mobile</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Awesome Dialog with Jetpack Compose</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Thu, 04 Nov 2021 02:57:58 +0000</pubDate>
      <link>https://dev.to/farhanroy/awesome-dialog-with-jetpack-compose-2c41</link>
      <guid>https://dev.to/farhanroy/awesome-dialog-with-jetpack-compose-2c41</guid>
      <description>&lt;p&gt;&lt;strong&gt;Jetpack Compose&lt;/strong&gt; is a new toolkit for creating UI on native android. With jetpack compose building a display becomes easier and more intuitive. When this article was written, jetpack compose had reached version &lt;code&gt;1.1.0-beta01&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Alright, let's go straight to the Awesome Dialog discussion. This is a third party library for jetpack compose, this library displays beautiful dialogues unlike ordinary dialogue material.&lt;/p&gt;

&lt;p&gt;Actually you can create a display of dialogue like this, but it takes a long time to recreate. For that you only need to add this library to your jetpack cm=compose project and then you use it (plug &amp;amp; play)&lt;/p&gt;

&lt;h2&gt;
  
  
  🎉 Requirement
&lt;/h2&gt;

&lt;p&gt;There are requirements that you must meet in order to use this library:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Jetpack Compose version &lt;code&gt;1.0.3&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Android Gradle Plugin version &lt;code&gt;7.0.2&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Kotlin version &lt;code&gt;1.5.30&lt;/code&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  📦️ Install library
&lt;/h2&gt;

&lt;p&gt;To install this library, in the &lt;code&gt;build.gradle&lt;/code&gt; file add the &lt;strong&gt;jitpack&lt;/strong&gt; repository&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight groovy"&gt;&lt;code&gt;&lt;span class="n"&gt;repositories&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;maven&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt; &lt;span class="n"&gt;url&lt;/span&gt; &lt;span class="s1"&gt;'https://jitpack.io'&lt;/span&gt; &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After that in app/build.gradle add the library with the latest version&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight groovy"&gt;&lt;code&gt;&lt;span class="n"&gt;dependencies&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
     &lt;span class="n"&gt;implementation&lt;/span&gt; &lt;span class="s1"&gt;'com.github.farhanroy:compose-awesome-dialog:1.0.1'&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After that until the build process is complete 👍&lt;/p&gt;

&lt;h2&gt;
  
  
  ✏️ How to use ?
&lt;/h2&gt;

&lt;p&gt;How to use it, just call the composable function. The way to display the dialogue is almost the same as displaying the dialog as usual.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight kotlin"&gt;&lt;code&gt;&lt;span class="kd"&gt;val&lt;/span&gt; &lt;span class="py"&gt;openDialog&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;remember&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nf"&gt;mutableStateOf&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;  &lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;onClick&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;openDialog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;value&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;true&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
       &lt;span class="nc"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;text&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Open"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;openDialog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="nc"&gt;ComposeAwesomeDialog&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="n"&gt;type&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;ComposeAwesomeDialogType&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Success&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;title&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Success"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;desc&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"This is success dialog"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;onDismiss&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;openDialog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;value&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;false&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
     &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  ✅ Run
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://i.giphy.com/media/6QvnmIcnr9BU75fZIf/giphy.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://i.giphy.com/media/6QvnmIcnr9BU75fZIf/giphy.gif" width="234" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Reference
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/farhanroy/compose-awesome-dialog"&gt;https://github.com/farhanroy/compose-awesome-dialog&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>jetpackcompose</category>
      <category>howto</category>
      <category>android</category>
      <category>mobile</category>
    </item>
    <item>
      <title>Design pattern: Singelton</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Tue, 14 Sep 2021 07:39:16 +0000</pubDate>
      <link>https://dev.to/farhanroy/design-pattern-singelton-3cik</link>
      <guid>https://dev.to/farhanroy/design-pattern-singelton-3cik</guid>
      <description>&lt;p&gt;There are so many types of design patterns to make it easier to solve problems in the program. But this time I only discuss the &lt;strong&gt;Singelton&lt;/strong&gt;, so what is the singleton?&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--W-qeQPzl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glbochwli209cvbj1u4t.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--W-qeQPzl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glbochwli209cvbj1u4t.png" alt="image" width="540" height="275"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Apa itu Singelton Patttern ?
&lt;/h2&gt;

&lt;p&gt;The Singleton Pattern is a pattern whose goal is that a class can only be instanced once. Unlike regular classes that don't use &lt;strong&gt;Singelton&lt;/strong&gt;, which can create multiple instances.&lt;/p&gt;

&lt;p&gt;Why use singleton , why not just use a normal class ?&lt;/p&gt;

&lt;h2&gt;
  
  
  Example program
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;&lt;span class="kd"&gt;public&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Singleton&lt;/span&gt;
&lt;span class="o"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;private&lt;/span&gt; &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="nc"&gt;Singleton&lt;/span&gt; &lt;span class="n"&gt;instance&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;private&lt;/span&gt; &lt;span class="nf"&gt;Singleton&lt;/span&gt;&lt;span class="o"&gt;(){}&lt;/span&gt;

  &lt;span class="kd"&gt;public&lt;/span&gt; &lt;span class="kd"&gt;static&lt;/span&gt; &lt;span class="nc"&gt;Singleton&lt;/span&gt; &lt;span class="nf"&gt;GetInstance&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt;
  &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="n"&gt;instance&lt;/span&gt;&lt;span class="o"&gt;==&lt;/span&gt;&lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="o"&gt;)&lt;/span&gt;
      &lt;span class="n"&gt;instance&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Singleton&lt;/span&gt;&lt;span class="o"&gt;();&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;instance&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
  &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Pros
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;You can be sure that a class has only a single instance.&lt;/li&gt;
&lt;li&gt;You gain a global access point to that instance.&lt;/li&gt;
&lt;li&gt;The singleton object is initialized only when it’s requested for the first time.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Cons
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Violates the Single Responsibility Principle. The pattern solves two problems at the time.&lt;/li&gt;
&lt;li&gt;The Singleton pattern can mask bad design, for instance, when the components of the program know too much about each other.&lt;/li&gt;
&lt;li&gt;The pattern requires special treatment in a multi-threaded environment so that multiple threads won’t create a singleton object several times. (using &lt;strong&gt;Multi-Thread — Lazy Load Singleton&lt;/strong&gt;)&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>programming</category>
      <category>singelton</category>
    </item>
    <item>
      <title>Graphical User Interface</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Tue, 14 Sep 2021 06:10:12 +0000</pubDate>
      <link>https://dev.to/farhanroy/graphical-user-interface-2b80</link>
      <guid>https://dev.to/farhanroy/graphical-user-interface-2b80</guid>
      <description>&lt;p&gt;GUI atau Graphical User Interface adalah sistem komponen visual untuk komputer. Dengan GUI user semakin betah ketika menggunakan aplikasi kita karena penggunaan grafis memudahkan user untuk berinteraksi dengan komputer. GUI menjadi standar desain yang berpusat pada pengguna dalam pemrograman aplikasi perangkat lunak, memberikan pengguna kemampuan untuk mengoperasikan komputer dan perangkat elektronik lainnya secara intuitif melalui manipulasi langsung ikon grafis seperti tombol, scroll bar, window, tab, menu, kursor , dan mouse.&lt;/p&gt;

&lt;p&gt;Sejarah&lt;br&gt;
Sejarah mengatakan bahwa Xerox PARC (Palo Alto Research Center) yang pertama kali merancang GUI. Pada tahun 1984, Apple merilis Macintosh yang menggunakan GUI hasil riset Xerox PARC. Beberapa tahun kemudian, Microsoft merilis sistem operasi Windows-nya  yang juga menggunakan GUI. Apple mengklaim bahwa Microsoft mencuri ide dari Apple.&lt;/p&gt;

&lt;p&gt;Microsoft Windows atau lebih dikenal dengan sebutan Windows adalah sistem operasi yang dikembangkan oleh Microsoft yang menggunakan antarmuka dengan pengguna berbasis grafik GUI (Graphical User Interface). Karena hal ini Steve Job mencibir Bill Gates karena menurutnya gates meniru terobosan miliknya.&lt;br&gt;
Cara Kerja&lt;br&gt;
Mengutip dari glints.com, GUI adalah sistem yang menggunakan prinsip desain yang sesuai dengan arsitektur software model-view-controller (MVC) arsitektur ini sering dijumpai ketika pada pengembangan web php. Jadi user hanya melihat fungsi yang diperlukan tanpa harus melihat kode dibaliknya, ini memberi kesan yang menarik bagi user terutama bagi yang awam tentang coding. &lt;br&gt;
GUI bersifat independen (tidak terikat) dengan fungsi aplikasi. Oleh karena itu, pengembang dapat mengembang GUI lebih bebas demi meraih kepuasan user. Selain dari sisi estetika, GUI juga dinilai dari segi fungsionalitas nya juga. Apakah gambar visual yang ditampilkan pas dengan keinginan user atau tidak. Percuma saja bagus tetapi tidak sambung dengan fungsi dari aplikasi.&lt;br&gt;
Kelebihan&lt;br&gt;
Memberi dampak baik bagi user&lt;br&gt;
Dengan adanya GUI berakhirlah era CLI dimana user harus mengakses terminal untuk menjalankan aplikasi. Beberapa orang menyebabkan malas karena harus melihat tulisan yang banyak dan sesekali membingungkan, ini juga dapat berdampak pada sisi bisnis juga.&lt;br&gt;
Mudah digunakan&lt;br&gt;
Desain visual yang ditawarkan GUI menyebabkan user lebih mudah untuk menjalankan aplikasi. GUI yang bagus adalah GUI yang user ketika menjalankan pun tidak bertanya langsung bisa&lt;br&gt;
Mempercantik Tampilan&lt;br&gt;
Selain dari sisi bisnisnya, GUI dapat menambah nilai estetika dari aplikasi kita. Desain visual menjadi pengganti text pada CLI yang menyebabkannya.&lt;br&gt;
Kekurangan&lt;br&gt;
Membutuhkan lebih banyak penggunaan RAM&lt;br&gt;
GUI membutuhkan lebih banyak RAM karena ketika proses running aplikasi, sistem akan merender dari kode hingga menjadi tampilan di layar, dan proses itu mahal apalagi ada penempatan GUI yang salah maka akan terjadi Lake Memory.&lt;br&gt;
Bagi developer akan bekerja 2 kali&lt;br&gt;
Developer mengerjakan aplikasi dari sisi backend (fungsi) atau juga frontend (GUI). Apabila perusahaan hanya mempunyai karyawan yang pas - pasan maka proses pembuatan aplikasi akan memakan waktu yang lebih lama. Beberapa perusahaan unicorn di indonesia memiliki banyak karyawan di masing masing bidang&lt;br&gt;
Tidak cocok untuk perintah yang kompleks&lt;br&gt;
GUI sangat bukan menjadi pilihan bagi aplikasi atau program yang memiliki perintah kompleks seperti compiler atau semacamnya kebanyakan memakai CLI.&lt;br&gt;
Kesimpulan&lt;br&gt;
Jadi GUI adalah sistem grafis visual untuk aplikasi komputer atau semacamnya. Dengan adanya GUI user tidak lagi menggunakan CLI yang menyebabkan mata lelah dan malas. User lebih mudah menggunakan karena GUI menawarkan fitur yang lebih menarik daripada CLI. GUI tidak hanya dinilai dari tampilannya saja tapi juga dari experience si pengguna.&lt;/p&gt;

&lt;p&gt;Referensi&lt;br&gt;
&lt;a href="https://www.amesbostonhotel.com/pengertian-graphical-user-interface/"&gt;https://www.amesbostonhotel.com/pengertian-graphical-user-interface/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://glints.com/id/lowongan/gui-adalah/"&gt;https://glints.com/id/lowongan/gui-adalah/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.techfor.id/kelebihan-dan-kekurangan-sistem-graphic-user-interface-gui/"&gt;https://www.techfor.id/kelebihan-dan-kekurangan-sistem-graphic-user-interface-gui/&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Graphical User Interface</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Tue, 07 Sep 2021 14:45:24 +0000</pubDate>
      <link>https://dev.to/farhanroy/graphical-user-interface-4kae</link>
      <guid>https://dev.to/farhanroy/graphical-user-interface-4kae</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwa13n4usaars94tn55u9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwa13n4usaars94tn55u9.png" alt="image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;GUI atau Graphical User Interface adalah sistem komponen visual untuk komputer. Dengan GUI user semakin betah ketika menggunakan aplikasi kita karena penggunaan grafis memudahkan user untuk berinteraksi dengan komputer. GUI menjadi standar desain yang berpusat pada pengguna dalam pemrograman aplikasi perangkat lunak, memberikan pengguna kemampuan untuk mengoperasikan komputer dan perangkat elektronik lainnya secara intuitif melalui manipulasi langsung ikon grafis seperti tombol, scroll bar, window, tab, menu, kursor , dan mouse.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sejarah
&lt;/h2&gt;

&lt;p&gt;Sejarah mengatakan bahwa Xerox PARC (Palo Alto Research Center) yang pertama kali merancang GUI. Pada tahun 1984, Apple merilis Macintosh yang menggunakan GUI hasil riset Xerox PARC. Beberapa tahun kemudian, Microsoft merilis sistem operasi Windows-nya  yang juga menggunakan GUI. Apple mengklaim bahwa Microsoft mencuri ide dari Apple.&lt;/p&gt;

&lt;p&gt;Microsoft Windows atau lebih dikenal dengan sebutan Windows adalah sistem operasi yang dikembangkan oleh Microsoft yang menggunakan antarmuka dengan pengguna berbasis grafik GUI (Graphical User Interface). Karena hal ini Steve Job mencibir Bill Gates karena menurutnya gates meniru terobosan miliknya.&lt;/p&gt;

&lt;h2&gt;
  
  
  Cara Kerja
&lt;/h2&gt;

&lt;p&gt;Mengutip dari glints.com, GUI adalah sistem yang menggunakan prinsip desain yang sesuai dengan arsitektur software model-view-controller (MVC) arsitektur ini sering dijumpai ketika pada pengembangan web php. Jadi user hanya melihat fungsi yang diperlukan tanpa harus melihat kode dibaliknya, ini memberi kesan yang menarik bagi user terutama bagi yang awam tentang coding. &lt;br&gt;
GUI bersifat independen (tidak terikat) dengan fungsi aplikasi. Oleh karena itu, pengembang dapat mengembang GUI lebih bebas demi meraih kepuasan user. Selain dari sisi estetika, GUI juga dinilai dari segi fungsionalitas nya juga. Apakah gambar visual yang ditampilkan pas dengan keinginan user atau tidak. Percuma saja bagus tetapi tidak sambung dengan fungsi dari aplikasi.&lt;/p&gt;

&lt;h2&gt;
  
  
  Kelebihan
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Memberi dampak baik bagi user Dengan adanya GUI berakhirlah era CLI dimana user harus mengakses terminal untuk menjalankan aplikasi. Beberapa orang menyebabkan malas karena harus melihat tulisan yang banyak dan sesekali membingungkan, ini juga dapat berdampak pada sisi bisnis juga.&lt;/li&gt;
&lt;li&gt;Mempercantik Tampilan Selain dari sisi bisnisnya, GUI dapat menambah nilai estetika dari aplikasi kita. Desain visual menjadi pengganti text pada CLI yang menyebabkannya.&lt;/li&gt;
&lt;li&gt;Mudah digunakan Desain visual yang ditawarkan GUI menyebabkan user lebih mudah untuk menjalankan aplikasi. GUI yang bagus adalah GUI yang user ketika menjalankan pun tidak bertanya langsung bisa&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Kekurangan
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Membutuhkan lebih banyak penggunaan RAM
GUI membutuhkan lebih banyak RAM karena ketika proses running aplikasi, sistem akan merender dari kode hingga menjadi tampilan di layar, dan proses itu mahal apalagi ada penempatan GUI yang salah maka akan terjadi Lake Memory.&lt;/li&gt;
&lt;li&gt;Bagi developer akan bekerja 2 kali
Developer mengerjakan aplikasi dari sisi backend (fungsi) atau juga frontend (GUI). Apabila perusahaan hanya mempunyai karyawan yang pas - pasan maka proses pembuatan aplikasi akan memakan waktu yang lebih lama. Beberapa perusahaan unicorn di indonesia memiliki banyak karyawan di masing masing bidang&lt;/li&gt;
&lt;li&gt;Tidak cocok untuk perintah yang kompleks
GUI sangat bukan menjadi pilihan bagi aplikasi atau program yang memiliki perintah kompleks seperti compiler atau semacamnya kebanyakan memakai CLI.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Kesimpulan
&lt;/h2&gt;

&lt;p&gt;Jadi GUI adalah sistem grafis visual untuk aplikasi komputer atau semacamnya. Dengan adanya GUI user tidak lagi menggunakan CLI yang menyebabkan mata lelah dan malas. User lebih mudah menggunakan karena GUI menawarkan fitur yang lebih menarik daripada CLI. GUI tidak hanya dinilai dari tampilannya saja tapi juga dari experience si pengguna.&lt;/p&gt;

&lt;p&gt;Referensi&lt;br&gt;
&lt;a href="https://www.amesbostonhotel.com/pengertian-graphical-user-interface/" rel="noopener noreferrer"&gt;https://www.amesbostonhotel.com/pengertian-graphical-user-interface/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://glints.com/id/lowongan/gui-adalah/" rel="noopener noreferrer"&gt;https://glints.com/id/lowongan/gui-adalah/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.techfor.id/kelebihan-dan-kekurangan-sistem-graphic-user-interface-gui/" rel="noopener noreferrer"&gt;https://www.techfor.id/kelebihan-dan-kekurangan-sistem-graphic-user-interface-gui/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>gui</category>
      <category>ui</category>
      <category>ux</category>
      <category>frontend</category>
    </item>
    <item>
      <title>Jetpack Compose: Badge</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Tue, 17 Aug 2021 07:43:17 +0000</pubDate>
      <link>https://dev.to/farhanroy/jetpack-compose-badge-18ho</link>
      <guid>https://dev.to/farhanroy/jetpack-compose-badge-18ho</guid>
      <description>&lt;p&gt;Badges are widely used on android. Badge gives a display to notify the user when there are notifications or other important things. As in the message app that displays new messages with badges and many others.&lt;/p&gt;

&lt;p&gt;Jetpack compose does this well. The new Jetpack Compose UI toolkit for android development has an API for displaying badges. The following is an example of its use on &lt;strong&gt;Bottom Navigation Bar Item&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight kotlin"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;androidx.compose.material.Badge&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;androidx.compose.material.BadgedBox&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;androidx.compose.material.BottomNavigation&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;androidx.compose.material.BottomNavigationItem&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;androidx.compose.material.Icon&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;androidx.compose.material.Text&lt;/span&gt;

&lt;span class="nc"&gt;BottomNavigation&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nc"&gt;BottomNavigationItem&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
        &lt;span class="n"&gt;icon&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nc"&gt;BadgedBox&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;badge&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nc"&gt;Badge&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nc"&gt;Text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"8"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="nc"&gt;Icon&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
                    &lt;span class="nc"&gt;Icons&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Filled&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Favorite&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
                    &lt;span class="n"&gt;contentDescription&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"Favorite"&lt;/span&gt;
                &lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="n"&gt;selected&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="k"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="n"&gt;onClick&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;BadgeBox&lt;/code&gt; gives the child a place to display composable Badge(). This compostable is still in &lt;strong&gt;Experimental&lt;/strong&gt; meaning it is not yet stable. Maybe it will be stable in the next few versions of jetpack compsoe. stay tuned&lt;/p&gt;

&lt;h3&gt;
  
  
  Reference
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary"&gt;https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary&lt;/a&gt;&lt;/p&gt;

</description>
      <category>android</category>
      <category>jetpackcompose</category>
      <category>kotlin</category>
      <category>materialdesign</category>
    </item>
    <item>
      <title>Flutter Stateless vs Stateful</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Tue, 10 Aug 2021 07:18:38 +0000</pubDate>
      <link>https://dev.to/farhanroy/flutter-stateless-vs-stateful-504n</link>
      <guid>https://dev.to/farhanroy/flutter-stateless-vs-stateful-504n</guid>
      <description>&lt;p&gt;Hampir semua example code flutter menggunakan Stateless dan Stateful Widget. Namun apakah perbedaan dari keduanya ? maka dari itu saya akan bahas perbedaan kedua widget ini.&lt;/p&gt;

&lt;h2&gt;
  
  
  Stateless Widget
&lt;/h2&gt;

&lt;p&gt;Stateless merupakan widget yang di-build hanya dengan konfigurasi yang telah diinisiasi sejak awal. Jadi Stateless Widget adalah Widget yang tidak akan pernah berubah.&lt;/p&gt;

&lt;p&gt;Misal kita mempunyai gambar di aplikasi kita. Apabila kita hanya ingin menampilkan gambar maka widget yang paling tepat untuk digunakan adalah stateless, karena penerapannya sama dengan konsep stateless widget.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--y13flRmk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://ik.imagekit.io/u8uufhbnoej/blog/flutter-tutorial-indonesia/stateful-stateless/unnamed_ExnvGuOB23ma.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--y13flRmk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://ik.imagekit.io/u8uufhbnoej/blog/flutter-tutorial-indonesia/stateful-stateless/unnamed_ExnvGuOB23ma.png" alt="" width="502" height="330"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Stateful Widget
&lt;/h2&gt;

&lt;p&gt;Widget ini merupakan kebalikan dari widget Stateless, widget ini memungkinkan kita untuk membuat widget secara interaktif. Jadi misal kita membutuhkan widget yang dapat berubah - ubah seperti tombol favorit, animasi ataupun yang lainnya.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bLKDk_Gg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://ik.imagekit.io/u8uufhbnoej/blog/flutter-tutorial-indonesia/stateful-stateless/statefull_l5tHsEP_2F.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bLKDk_Gg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://ik.imagekit.io/u8uufhbnoej/blog/flutter-tutorial-indonesia/stateful-stateless/statefull_l5tHsEP_2F.png" alt="" width="512" height="308"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Kode diatas merupakan contoh sederhana dari penggunaan stateful widget yang mana terdiri dari 2 kelas. Kelas pertama ini digunakan untuk menciptakan object bertipe State yaitu kelas kedua dalam metode 'createState', data di dalam kelas ini tidak bisa diubah, datanya bersifat final dan nilainya diberikan melalui konstruktor, sama seperti Stateless, kelas ini dibuang dan digantikan ketika ada perubahan data dan Widget baru perlu dibuat ulang.&lt;br&gt;
Untuk menset state di widget menggunakan setState()&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YIk_L9uG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://ik.imagekit.io/u8uufhbnoej/blog/flutter-tutorial-indonesia/stateful-stateless/setstate_N1f1vQnYNePk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YIk_L9uG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://ik.imagekit.io/u8uufhbnoej/blog/flutter-tutorial-indonesia/stateful-stateless/setstate_N1f1vQnYNePk.png" alt="" width="397" height="294"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Pada kelas yang kedua ini akan terjadi banyak proses ketika kita menggunakan state. Jadi ketika kita men set state maka flutter akan merender ulang widget widget yang ada di method build&lt;br&gt;
Stateful widget juga memiliki lifecycle atau daur hidup dari si widget dari pertama di build hingga di destroy. konsep ini hampir sama dengan konsep lifecycle activity/fragment pada Android Native.&lt;br&gt;
Berikut lifecycle yang tersedia di flutter:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;createState()&lt;br&gt;
Saat kita membangun Stateful Widget baru, maka widget akan langsung memanggil createState()&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;initState()&lt;br&gt;
metode pertama yang dipanggil setelah Widget dibuat. Ini setara dengan onCreate () dan viewDidLoad ()&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;didChangeDependencies()&lt;br&gt;
Metode ini dipanggil segera setelah initState() saat pertama kali widget dibuat. Jika StatefulWidgets kita bergantung dari InheritedWidget, ia akan memanggil lagi jika diperlukan perubahan.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;build()&lt;br&gt;
Metode ini adalah metode yang sangat penting. Di sini ia merelay Widget kita untuk di render dan dipanggil tepat setelah didChangeDependencies (). Semua komponen UI di render disini dan akan dipanggil setiap kali UI perlu di render karena menggambar lagi adalah operasi yang murah.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;didUpdateWidget()&lt;br&gt;
Mungkin Lifecycle ini sering jarang kita jumpai, tetapi seperti namanya, ini akan dipanggil setelah Widget induk melakukan perubahan dan perlu menggambar ulang UI&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;deactivate()&lt;br&gt;
Flutter memanggil metode ini setiap kali ia menghapus objek Status ini dari Widget Tree. Dalam beberapa kasus, Si flutter akan memasukkan kembali objek ke bagian lain dari widget tree.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;dispose()&lt;br&gt;
Yang ini sangat penting dan dipanggil ketika objek ini dan Statusnya dihapus dari widget tree secara permanen dan tidak akan pernah di build lagi.&lt;br&gt;
Lifecycle ini adalah satu-satunya yang kita butuhkan untuk berhenti Stream controller, destroy animasi, dll. Sama halnya dengan initState.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>flutter</category>
      <category>statelesswidget</category>
      <category>statefulwidget</category>
      <category>android</category>
    </item>
    <item>
      <title>Github repo to learn Jetpack Compose</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Tue, 27 Jul 2021 09:51:05 +0000</pubDate>
      <link>https://dev.to/farhanroy/github-repo-to-learn-jetpack-compose-11he</link>
      <guid>https://dev.to/farhanroy/github-repo-to-learn-jetpack-compose-11he</guid>
      <description>&lt;p&gt;Jetpack compose is the new toolkit UI for Android Development. It can implementation ui like swift ui or flutter. When you learn jetpack compose you need some resources to help your learn. In this blog i will show you all, github repos that you can use as a resource.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/Foso/Jetpack-Compose-Playground"&gt;https://github.com/Foso/Jetpack-Compose-Playground&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/Gurupreet/ComposeCookBook"&gt;https://github.com/Gurupreet/ComposeCookBook&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example"&gt;https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/airbnb/Showkase"&gt;https://github.com/airbnb/Showkase&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/zsoltk/compose-pokedex"&gt;https://github.com/zsoltk/compose-pokedex&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/jetpack-compose/jetpack-compose-awesome"&gt;https://github.com/jetpack-compose/jetpack-compose-awesome&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;if you want website page :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.jetpackcompose.app/"&gt;https://www.jetpackcompose.app/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://foso.github.io/Jetpack-Compose-Playground/"&gt;https://foso.github.io/Jetpack-Compose-Playground/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>jetpackcompose</category>
      <category>github</category>
      <category>android</category>
      <category>learning</category>
    </item>
    <item>
      <title>Kenalan dengan AWS</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Sun, 13 Jun 2021 08:08:28 +0000</pubDate>
      <link>https://dev.to/farhanroy/kenalan-dengan-aws-17l3</link>
      <guid>https://dev.to/farhanroy/kenalan-dengan-aws-17l3</guid>
      <description>&lt;p&gt;Hai temen - temen, kali ini aku akan kenalin kalian dengan AWS Web Service. Apa sih AWS itu, dan apa kaitannya dengan cloud computing ?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WiyVGSvh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://i1.wp.com/www.maxmanroe.com/vid/wp-content/uploads/2018/02/Pengertian-Web-Server.jpg%3Fresize%3D640%252C360%26ssl%3D1" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WiyVGSvh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://i1.wp.com/www.maxmanroe.com/vid/wp-content/uploads/2018/02/Pengertian-Web-Server.jpg%3Fresize%3D640%252C360%26ssl%3D1" alt="Cloud Computing" width="640" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ok, sebelum itu saya akan membahas tentang cloud computing dahulu biar kalian lebih paham mengenai AWS. Menurut AWS Cloud Computing adalah penggunaan sesuai kebutuhan sumber daya IT melalui internet dengan harga sesuai pemakaian(pay-as-you-go). Dari definisi diatas ada tiga poin penting mengenai cloud computing.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Pertama penggunaan sesuai kebutuhan, ini menunjukan cloud computing memiliki &lt;em&gt;resource&lt;/em&gt; yang selalu memenuhi kebutuhan kita. Jika kita tiba-tiba kita membutuhkan 300 virtual server atau perlu storage 200 gigabyte, lakukan beberapa klik saja maka kalian mendapatkannya.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Kedua sumber daya IT. Sumber daya yang dimaksud contohnya adalah aplikasi seperti penyimpanan data, server, database, jaringan, dan perangkat lunak.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Terakhir yaitu untuk mengakses atau menggunakan sumber daya tersebut cukup lakukan lewat Web Browser atau CLI.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Mudah bukan, Cloud Computing hadir dengan segala kemudahan yang ada didalamnya belum lagi ada mekanisme pembayaran yang namanya &lt;strong&gt;pay as yo go&lt;/strong&gt;. Artinya bayar sesuai yang anda pakai. Jadi tidak seperti server - server hosting yang harus bayar dimuka cloud computing lebih dinamis dan bayarnya sesuai yang sudah dipakai.&lt;/p&gt;

&lt;p&gt;So, kenapa sih kita harus pake cloud computing ? OK aku akan bahas kelebihan dan kekurangan pake cloud computing&lt;/p&gt;

&lt;h2&gt;
  
  
  Kelebihan Cloud Computing
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Tidak ada biaya pengelolaan dan pemeliharaan data center&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Jika kita membuat data center atau server sendiri maka di perlukan biaya pengelolaan dan pemeliharaan data center yang tentunya mahal. Dengan Cloud Computing ini kita tidak perlu memikirkan hal hal itu, kita hanya fokus pada aplikasi &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Kapasitas yang besar&lt;br&gt;
Dengan menggunakan cloud computing kita tidak perlu khawatir dengan ketersediaan kapasitas untuk infrastruktur yang kita perlukan. Cloud Computing akan menyediakan semuanya. Bahkan kita juga bisa scale in (kurangi) atau scale out (tambahi) kapasitas sesuai kebutuhan.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Optimalisasi kecepatan&lt;br&gt;
Mungkin jika kalian set up sendiri server akan memakan waktu yang lama dibanding dengan menggunakan cloud computing yang bisa langsung di konfigurasi.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Mengglobal dalam hitungan menit&lt;br&gt;
Cloud Computing dapat meluncurkan aplikasi kita ke user di seluruh dunia dengan cepat sekaligus dengan latency yang rendah. Cloud Computing menggunakan teknologi CDN yang servernya tersebar di beberapa regional yang tersebar di seluruh dunia.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Kekurangan Cloud Computing
&lt;/h2&gt;

&lt;p&gt;Disamping punya kelebihan, cloud computing juga memiliki beberapa kelemahan, diantaranya yaitu:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Security menjadi alasan utama untuk kelemahan cloud computing. Provider cloud dapat mengakses data yang tersimpan dalam komputer server. Sangat jarang sekali ada masalah seperti ini tetapi bukan berarti tak dapat terjadi mungkin saja terjadi.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Beralih ke layanan Cloud Computing perlu dipikirkan terlebih dahulu. Karena aplikasi yang berjalan dengan baik disatu platform belum tentu berjalan baik di platform lain mungkin karena tidak kompatible, hal ini tentunya menjadi resiko.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Kontrol yang terbatas, pengguna memiliki hak kontrol yang terbatas pada data, alat, dan aplikasi saat cloud dikendalikan oleh &lt;em&gt;provider&lt;/em&gt;. Bahkan pengguna mungkin tidak memiliki akses ke layan administratif server.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Downtime pada server cloud. Kelebihan - kelebihan yang dimiliki cloud bukan berati tidak bisa downtime atau istilah saya sedang lemot. Dengan kelebihan beban besar pada server dari berbagai klien, maka penyedia layanan harus mengambil tindakan mitigasi yang tepat untuk permasalahan tersebut. Karena situasi yang tidak dapat dihindari ini, bisnis pengguna dapat disabotase sementara.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Amazon Web Service (AWS)
&lt;/h2&gt;

&lt;p&gt;Nah, sekarang kita akan membahas tentang AWS. AWS adalah provider layanan cloud computing yang aman dan juga banyak digunakan oleh pengguna. AWS menawarkan banyak layanan diantaranya cloud server, storage, database, machine learning, dan banyak lagi service lainnya yang bisa manfaatkan untuk kepentingan bisnis kita.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Infrastructure of service&lt;/strong&gt; menjadi sebutan yang lekat dengan AWS. Ini karena AWS memberikan banyak services yang memudahkan kita dalam membangun bisnis.&lt;/p&gt;

&lt;h3&gt;
  
  
  Beberapa Layanan di AWS
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Amazon Elastic Compute Cloud (Amazon EC2)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Dengan Amazon EC2 kita bisa mengolah server yang disediakan AWS dalam bentuk virtual server. Tapi jangan khawatir walaupun virtual server rasa server asli. Bahkan &lt;strong&gt;EC2&lt;/strong&gt; bisa berkembang dan berkurang (fleksibel) sesuai kebutuhan kita. Jadi ketika kita butuh 10 server maka EC2 menyediakannya dan ketika kita hanya butuh 1 server saja maka langsung dikurangi dari jumlah asalnya.&lt;/p&gt;

&lt;p&gt;Pembayarannya pun sesuai penggunaan kita saja. Kalau server kita stop jadi akan di hentikan juga kalkulasi bayarnya. Sama halnya pada server biasa, di instance EC2 pengguna bisa memilih OS sesuai kebutuhan dan perangkat lunak yang ada didalamnya.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Amazon Simple Storage Service (Amazon S3)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Dalam bisnis, tentunya kita perlu penyimpanan yang berfungsi untuk meyimpan data perusahaan seperti spreadsheet, docs, file presentasi, video dan lainnya. Nah, Amazon S3 bisa digunakan sebagai tempat untuk menyimpan file - file tersebut dalam jumlah tak terbatas pada skala apa pun.&lt;/p&gt;

&lt;p&gt;Amazon S3 data disimpan dalam bentuk objek. Objek disimpan tidak di direktori file melainkan data disimpan di dalam &lt;em&gt;bucket&lt;/em&gt;. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AWS Lambda&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Kalau sebelumnya ada Amazon EC2 sekarang ada AWS Lambda. Service ini memungkin kan pengguna me-running aplikasi tanpa harus menkonfigurasi server terlebih dahulu. Artinya dengan AWS Lambda kita tidak membutuhkan server untuk deploy aplikasi kita. Lambda mendukung banyak bahasa seperti: Java, Go, Node.js, Python dan lain - lain. AWS Lambda hampir sama dengan layanan yang disediakan oleh Google Cloud yaitu Cloud Function.&lt;/p&gt;

&lt;h3&gt;
  
  
  Referensi
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.dicoding.com/academies/251"&gt;https://www.dicoding.com/academies/251&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dosenit.com/jaringan-komputer/teknologi-jaringan/kelebihan-dan-kekurangan-cloud-computing"&gt;https://dosenit.com/jaringan-komputer/teknologi-jaringan/kelebihan-dan-kekurangan-cloud-computing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://aws.amazon.com/id/lambda/"&gt;https://aws.amazon.com/id/lambda/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>aws</category>
      <category>cloud</category>
    </item>
    <item>
      <title>Pantang menyerah dalam kerja tim</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Sat, 09 Jan 2021 04:35:22 +0000</pubDate>
      <link>https://dev.to/farhanroy/pantang-menyerah-dalam-kerja-tim-21i6</link>
      <guid>https://dev.to/farhanroy/pantang-menyerah-dalam-kerja-tim-21i6</guid>
      <description>&lt;p&gt;Bekerja sendiri sangat lumrah mudah dikerjakan oleh sebagian besar orang didunia, alasan utamanya mungkin karena dapat memprioritaskan kehendak sendiri tanpa harus berunding dengan orang lain, wait!! Bagaimana untuk pekerjaan yang rumit dan kompleks ? masih bisa kerja sendiri ?&lt;/p&gt;

&lt;p&gt;Nah dari sinilah kerja tim sangat diperlukan dimana setiap individu bekerja untuk suatu goals yang sama. Tetapi tidak semua pekerjaan dalam tim dapat berjalan sesuai planning yang sudah ditentukan sebelumnya. Masalah dapat datang kapan saja dan dari aspek mana saja, sehingga setiap bagian tim harus tetap solid agar tercapainya sebuah goals.&lt;/p&gt;

&lt;p&gt;Begitupun dengan tim kami. Tim kami dibentuk sekitar 2 minggu sebelum audisi lomba diadakan. Seharusnya itu waktu yang cukup untuk mengerjakan ketentuan - ketentuan audisi. BUT kami punya satu masalah yang bisa memperlambat kinerja tim kami. &lt;/p&gt;

&lt;p&gt;Kami hidup di Ponpes, ada peraturan yang berbenturan dengan kepentingan tim, sehingga proses pengerjaan hanya ketika di sekolah. Di Sekolah pun hanya 3 hari dalam seminggu dengan durasi beberapa jam saja. Hal ini terjadi dikarenakan pandemi covid-19 yang melanda. Jadi praktis proses pengerjaan hanya 6 hari saja. &lt;/p&gt;

&lt;p&gt;Walaupun begitu, kami tetap tidak menyerah dengan keadaan yang terjadi. Kita tetap mengerjakan ketentuan - ketentuan lomba yang ada. Tim kami berjumlah 5 orang dimana masing masing mendapatkan task sehingga setiap hari ada progres pengerjaan. &lt;/p&gt;

&lt;p&gt;Kami selalu bertukar pikiran terhadap tugas - tugas yang ada, walaupun setiap anggota tim punya tugas masing - masing. Sehingga kesolidan tim tetap terjaga demi tercapainya goals - goals yang ada&lt;/p&gt;

&lt;p&gt;Nah itulah pentingnya pantang menyerah dalam tim walaupun dikejar - kejar deadline. Hard Skill atau talent murni diperlukan oleh seseorang tapi soft skill juga sangat dibutuhkan ketika kita bekerja dalam tim.&lt;/p&gt;

</description>
      <category>softskill</category>
    </item>
    <item>
      <title>Working with Jetpack Data Store 🛢</title>
      <dc:creator>Farhan Roy -- | 😁</dc:creator>
      <pubDate>Wed, 06 Jan 2021 02:43:20 +0000</pubDate>
      <link>https://dev.to/farhanroy/working-with-jetpack-data-store-31fh</link>
      <guid>https://dev.to/farhanroy/working-with-jetpack-data-store-31fh</guid>
      <description>&lt;p&gt;Migrasi dari SharedPreferences API ke library Jetpack Datastore, library baru untuk solusi data storage di android&lt;/p&gt;

&lt;h2&gt;
  
  
  Apa itu DataStore ?
&lt;/h2&gt;

&lt;p&gt;Beberapa hari lalu Google merilis library baru yang tergabung dalam jetpack component yaitu &lt;code&gt;Datastore&lt;/code&gt;. Jetpack Component selalu menghadirkan library — library yang membuat kode android menjadi lebih baik dan minim boilerplate. Library DataStore ini yang menurut blog resmi bertujuan untuk menggantikan &lt;code&gt;SharedPreferences&lt;/code&gt; API yang memiliki beberapa kekurangan&lt;/p&gt;

&lt;p&gt;Library &lt;code&gt;Datastore&lt;/code&gt; di buat dengan Coroutines dan Flowuntuk menyimpan data secara asynchronous. Datastore memungkinkan kita untuk menyimpan data key-value seperti &lt;code&gt;SharedPreferences&lt;/code&gt; atau menyimpan data dalam bentuk &lt;code&gt;typed-object&lt;/code&gt; (Proto Buffer)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;SharedPreferences ✖️ DataStore&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Ada beberapa keunggulan antara &lt;code&gt;SharedPreferences&lt;/code&gt; dengan &lt;code&gt;DataStore&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;DataStore menyediakan API asecara asynchronous untuk menyimpan dan membaca data, sedangkan SharedPreferences hanya menyediakan API synchronous saat membaca nilai yang diubah.&lt;/li&gt;
&lt;li&gt;DataStoreaman untuk di gunakan di UI thread. Karena menggunakan Dispatchers.io&lt;/li&gt;
&lt;li&gt;SharedPreferences menyebabkan runtime error sedangkan DataStore tidak&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Tipe Datastore&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Jetpack Datastore menyediakan 2 jenis :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Preference Datastore — pada jenis ini, peng-implementasiannya hampir sama dengan SharedPreferences jadi ketika menyimpan data harus menggunakan key-value&lt;/li&gt;
&lt;li&gt;Proto Datastore — ini menyimpan data sebagai objek khusus. Ini memberikan keamanan tipe di luar kotak, tetapi mengharuskan kita untuk menentukan skema menggunakan buffer protokol.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Setup Project
&lt;/h3&gt;

&lt;p&gt;Yang pertama kali dilakukan, tambahkan library di &lt;code&gt;build.gradle&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Preferences DataStore
implementation "androidx.datastore:datastore-preferences:1.0.0-alpha01"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Write Datastore
&lt;/h3&gt;

&lt;p&gt;Sebelum menulis atau menyimpan data di datastore, kita perlu membuat / init Datastore nya dahulu dengan fungsi &lt;code&gt;Context.createDataStore()&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight kotlin"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Buat Datastore-nya&lt;/span&gt;
&lt;span class="kd"&gt;val&lt;/span&gt; &lt;span class="py"&gt;dataStore&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nc"&gt;DataStore&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Preferences&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;context&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;createDataStore&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"settings"&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Lalu kita bisa membuat sebuah fungsi lain untuk store data. berikut kodenya&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight kotlin"&gt;&lt;code&gt;&lt;span class="k"&gt;suspend&lt;/span&gt; &lt;span class="k"&gt;fun&lt;/span&gt; &lt;span class="nf"&gt;incrementCounter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="n"&gt;dataStore&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;edit&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;settings&lt;/span&gt; &lt;span class="p"&gt;-&amp;gt;&lt;/span&gt;

        &lt;span class="kd"&gt;val&lt;/span&gt; &lt;span class="py"&gt;currentValue&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nc"&gt;COUNTER&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;?:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
        &lt;span class="n"&gt;settings&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nc"&gt;COUNTER&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;currentCounter&lt;/span&gt; &lt;span class="p"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;

    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Read data dari Datastore
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;DataStore&lt;/code&gt; memastikan bahwa data diambil di &lt;code&gt;Dispatchers.IO&lt;/code&gt;sehingga UI Thread kita tidak diblok oleh sistem. Hal ini membuat Datastore lebih aman digunakan.&lt;br&gt;
Berikut contoh kodenya:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight kotlin"&gt;&lt;code&gt;&lt;span class="kd"&gt;val&lt;/span&gt; &lt;span class="py"&gt;MY_COUNTER&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;preferencesKey&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Int&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;(&lt;/span&gt;&lt;span class="s"&gt;"my_counter"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="kd"&gt;val&lt;/span&gt; &lt;span class="py"&gt;myCounterFlow&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nc"&gt;Flow&lt;/span&gt;&lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Int&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="n"&gt;dataStore&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;
     &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="n"&gt;currentPreferences&lt;/span&gt; &lt;span class="p"&gt;-&amp;gt;&lt;/span&gt;

        &lt;span class="n"&gt;currentPreferences&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nc"&gt;MY_COUNTER&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;?:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;   

   &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Sekian dari saya mohon maaf bila ada kesalahan kata 😅&lt;/p&gt;

</description>
      <category>android</category>
      <category>jetpackcomponent</category>
      <category>datastore</category>
    </item>
  </channel>
</rss>
