Kepada seluruh pengguna Widget COVID-19 disarankan agar melakukan update, dengan cara mengubah URL pada script Widget yang di sediakan. Tutorial update ada dibawah. Terima Kasih

admin

Beberapa bulan lalu dunia dihebohkan oleh sebuah virus yang berasal dari Wuhan, China. Virus ini disebut dengan Corona Virus dengan codename COVID-19.

Seiring berkembangnya waktu, virus tersebut telah menyebar keseluruh penjuru dunia, termasuk di Indonesia.

Masyarakat indonesia saling kerja sama untuk menekan pertumbuhan virus ini, dimulai dari diri sendiri tentunya, seperti seperti mengurangi kegiatan diluar, hingga menjaga kebersihkan diri setiap hari.

Sebagai seseorang yang bergelut di dalam dunia teknologi, kita mungkin ada keinginan untuk membantu masyarakat luas, seperti yang telah dilakukan oleh para dokter dan relawan yang ada di luar sana.

Jika kita seorang software engineer, dapat mencoba untuk bergabung ke https://kawalcorona.com/ untuk membangun platform mereka.

Jika kita seorang tech enthusiast yang kurang memiliki keahlian pemrograman, namun memiliki website atau blog, setidaknya kita dapat berkontribusi kepada masyarakat dengan memberikan informasi yang akurat dan tepat.

Dari background diatas, saya mencoba membuat sebuah widget yang dapat dipasang di website pribadi masing-masing. Widget yang saya buat dapat memberikan statistik COVID-19 yang ada di Indonesia saat ini.

Widget yang dibangun menggunakan API yang dimiliki oleh https://kawalcorona.com/ , saya sangat berterimakasih dengan adanya API ini.

Cara Pasang Widget Kawal Corona

Cara pemasangannya cukup simple, saya coba menjelaskan cara pemasangan di wordpress dan blogspot.

Pasang widget kawal corona di WordPress

Untuk website yang dibangun dengan wordpress, kita dapat masuk ke halaman Tampilan, lalu masuk ke menu Widget.

Setelah itu, kita tambahkan widget HTML Khusus kedalam sidebar. Lalu pada kolom isi di widget HTML Khusus kita tambahkan script dibawah ini

<div id="kopi-covid"></div>
<script>
  var f = document.createElement("iframe");
  f.src = "https://kopi.dev/widget-covid-19/";
  f.width = "100%";
  f.height = 380;
  f.scrolling = "no";
  f.frameBorder = 0;
  var rootEl = document.getElementById("kopi-covid");
  console.log(rootEl);
  rootEl.appendChild(f);
</script>

Seperti dibawah ini

Pasang widget kawal corona di Blogger / Blogspot

Untuk memasang widget kawal corona di Blogger/Blogspot kalian dapat masuk ke halaman Tata Letak, lalu klik tombol "Tambahkan Widget". Saat muncul popup, kalian pilih menu HTML/JavaScript ini:

<div id="kopi-covid"></div>
<script>
  var f = document.createElement("iframe");
  f.src = "https://kopi.dev/widget-covid-19/";
  f.width = "100%";
  f.height = 380;
  f.scrolling = "no";
  f.frameBorder = 0;
  var rootEl = document.getElementById("kopi-covid");
  console.log(rootEl);
  rootEl.appendChild(f);
</script>

Lalu tambahkan script diatas tadi kedalam kolom Konten, seperti ini:

Pasang widget kawal corona di Laravel

Untuk pemasangan widget pada Laravel, cukup mudah sekali, kita tinggal buka blade template yang kita miliki, lalu kita sematkan script html diatas ke lokasi yang kita inginkan

Mengatur ketinggian & warna widget kawal corona

Untuk mengatur ketinggian widget kawal corona, kalian dapat mengubah nilai ketinggian pada baris f.height = 380; , dan untuk menggunakan widget kawal corona berwarna gelap, kalian dapat mengubah url pada baris f.src = "https://kopi.dev/widget-covid-19/"; menjadi f.src = "https://kopi.dev/widget-covid-19/?dark=true";

Mode terang widget kawal corona

Mode gelap widget kawal corona

Pada artikel kali ini kita akan belajar sebuah tutorial dasar reactjs dengan cara yang paling sederhana dan mudah untuk dipahami, jika kalian belum membaca artikel tentang reactjs sebelumnya, saya sarankan untuk membacanya.

Baca Juga : Pemahaman dasar reactjs untuk pemula

Pada tutorial dasar reactjs kali ini kita akan membuat sebuah aplikasi "Message Box" atau Kotak Pesan, aplikasi kotak pesan adalah aplikasi sederhana untuk menampilkan alert  saat sebuah tombol di klik.

Aplikasinya sangat sederhana, lingkup yang akan kita buat seputar membuat button dan menampilkan alert yang dikirim dari sebuah tombol.

Pemahaman Dasar

Ada beberapa cara untuk memulai menggunakan reactjs, dari yang paling mudah hingga yang tidak cukup mudah, karena membutuhkan beberapa instalasi yang cukup memakan waktu.

Oleh karena itu, pada tutorial dasar reactjs kali ini kita akan memulai reactjs dengan cara yang paling mudah.

Cara yang paling mudah untuk memulai reactjs adalah dengan menggunakan file HTML biasa, lalu kita import React, ReactDOM, serta Babel library kedalam file HTML yang kita gunakan. Tahapan yang perlu kita lakukan untuk memulai adalah:

  1. Buat file index.html - Sebagai file untuk menampilkan reactjs library
  2. Import react library - library yang diperlukan untuk memulai reactjs
  3. Import react dom library - library yang diperlukan untuk memulai reactjs
  4. Import babel - library yang diperlukan untuk melakukan kompilasi sintaks `jsx` pada JavaScript

Apa itu JSX?

JSX adalah singkatan dari JavaScript XML. JSX memungkin kita untuk menulis tag HTML didalam JavaScript. Berikut adalah contohnya:

ReactDOM.render(
  <h1>Welcome Selamat Datang di Reactjs Kopidev !!</h1>,
  document.getElementById('container')
);

Kode JSX mirip seperti kode yang ada pada HTML, karena kita dapat menulis semua elemen yang ada pada HTML kedalam JSX.

Apabila sintaks diatas kita diajalankan di browser, maka sintaks diatas akan menampilkan pesan di dalam tag h1 , lalu tag h1 tersebut akan disematkan kedalam elemen  container.

JSX juga digunakan oleh pengguna reactjs karena mempermudah dan mempercepat dalam pembuatan sebuah UI komponen dibanding kode JavaScript biasa.

Apakah kita harus & perlu menggunakan JSX?

Jawabannya adalah tidak, karena itu preferensi masing-masing software engineer, namun perlu kita ketahui, tujuan dari dibuatnya JSX adalah untuk mempermudah dalam development reactjs.

Sebab, jika kita tidak menggunakan JSX dalam membuat aplikasi reactjs, kita akan sedikit kesulitan, karena kita harus menuliskannya seperti ini:

"use strict";
 
React.createElement(
  "p",
  null,
  "Welcome Selamat Datang di Reactjs Kopidev !!"
)

Menurut kalian lebih nyaman yang mana antara JSX dan tidak menggunakan JSX? Bagi saya pribadi lebih nyaman menggunakan JSX dan saya memilih menggunakan JSX.

Apa itu Babel?

Babel adalah sebuah Javascript compiler. Babel digunakan untuk mengkonversi ECMAScript 2015+ agar kompatibel dengan browser yang belum mendukung ECMAScript 2015+.

Pada kasus JSX yang kita tulis diatas, jika kita tidak menambahkan babel, browser tidak akan dapat menjalankan atau mengerti kode yang kita tulis, sehingga layar browser tidak akan menampilkan apapun karena menganggap script yang kita tulis tidak dikenali. Oleh karena jika kita menggunakan JSX, kita membutuhkan babel.

Ini adalah hasil kompilasi yang dilakukan oleh babel, terhadap sintaks JSX yang kita tulis:

// JSX SEBELUM dicompile
ReactDOM.render(
  <h1>Welcome Selamat Datang di Reactjs Kopidev !!</h1>,
  document.getElementById('container')
);

// JSX SESUDAH dicompile oleh babel
"use strict";
ReactDOM.render( /*#__PURE__*/React.createElement("h1", null, "Welcome Selamat Datang di Reactjs Kopidev !!"), document.getElementById('container'));

Membuat aplikasi sederhana dengan reactjs

Buka code editor, lalu buat sebuah file bernama index.html, pada file ini, kalian import 3 file yang dibutuhkan (seperti yang diterangkan diatas), seperti ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Latihan React</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <!-- tag yang digunakan untuk menampilkan reactjs yang dibuat -->
    <div id="root"></div>

    <!-- tag yang digunakan untuk menulis code reactjs -->
    <script type="text/babel">
      /**
       * Seluruh code reactjs akan ditulis disini
       * /
    </script>
  </body>
</html>

Coba kita perhatikan script HTML diatas, saya menambahkan tag div dengan id root, tujuan elemen ini dibuat adalah sebagai elemen utama untuk menampung atau merender script Reactjs yang akan kita buat nantinya.

Dan juga ada tag <script tyle="text/babel"> tag ini digunakan untuk menampung seluruh file reactjs yang akan kita tulis.

Menambahkan Judul Aplikasi

Selanjutnya kita buat sebuah elemen untuk menampilkan judul aplikasi, seperti ini:

    <script type="text/babel">
      function MessageBox() {
        return (
          <div>
            <h1>Kotak Pesan Kopidev</h1>
          </div>
        );
      }

      ReactDOM.render(<MessageBox />, document.getElementById("root"));
    </script>

Penjelasan kode diatas adalah:

  1. Kita buat sebuah fungsi bernama MessageBox(), dalam reactjs fungsi ini disebut dengan komponen. Komponen MessageBox ini berisi tag div, yang didalamnya terdapat tag h1 dengan isi "Kotak Pesan Kopidev"
  2. Terdapat sebuah sintaks ReactDOM.render(<MessageBox/>, document.getElementById("root")); , sintaks ini bermaksud untuk menampilkan komponen <MessageBox/> kedalam tag div dengan id root

Jika kita run di browser, akan muncul seperti ini

Menambahkan tombol

selanjutkan kita buat sebuah tombol, tombol yang akan kita buat memiliki fungsi untuk menampilkan sebuah alert saat di klik. Seperti ini:

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <button
        onClick={() => {
          alert("Hai kamu");
        }}
      >
        Tombol Hai
      </button>
    </div>
  );
}

Jika kita run di browser, maka akan muncul seperti ini:

Reusable Component

Seperti yang telah saya jelaskan di artikel dasar reactjs , reactjs menerapkan konsep Reusable Component , dimana komponen yang buat dapat digunakan secara berulang.

Di tahap ini, kita akan membuat sebuah tombol yang dapat digunakan berulang kali. Tombol ini kita beri nama "MyButton", seperti ini :

function MyButton() {
  return (
    <button
      onClick={() => {
        alert("Hai kamu");
      }}
    >
      Tombol hai
    </button>
  );
}

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <MyButton />
    </div>
  );
}

Penjelasan sintaks diatas adalah setelah kita membuat atau memindahkan tombol yang sebelumnya kedalam komponen MyButton, pada komponen MessageBox kita ubah tombol sebelumnya menjadi <MyButton/>. Kita juga dapat menggunakan komponen <MyButton/> secara berulang, seperti ini:

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <MyButton />
      <MyButton />
      <MyButton />
      <MyButton />
    </div>
  );
}

Hasilnya seperti ini:

Component Props

Pada tahap ini, kita akan belajar tentang props. Pada dasarnya setiap komponen di reactjs dapat memiliki atau menerima sebuah input, attribute, dan lain sebagainya. Setiap Input terhadap suatu komponen disebut dengan props (kependekan dari property). Contoh sederhana:

function Welcome(props) {
  return <h1>Selamat Datang, {props.name}</h1>;
}

Sintaks diatas adalah untuk membuat sebuah komponen bernama Welcome, komponen welcome tersebut menerima sebuah props bernama name, jadi kita dapat memanggil komponen Welcome tersebut dengan cara seperti ini

const element = <Welcome name="Sara" />;

Hasilnya seperti ini

Pada tahap ini kita akan menambahkan beberapa props terhadap komponen MyButton, props yang akan tambahkan adalah judul, dan pesan. Kurang lebih seperti ini:

function MyButton(props) {
  return (
    <button
      onClick={() => {
        alert(props.pesan);
      }}
    >
      {props.judul}
    </button>
  );
}

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <MyButton judul="Arryangga" pesan="Selamat Datang Arryangga" />
      <MyButton judul="Jokowi" pesan="halo boskuuuuhhhhh" />
      <MyButton judul="Soekarno" pesan="Gimana pak disana? Enak?" />
    </div>
  );
}

Hasilnya seperti ini, bisa kalian klik satu per satu

Latihan React


Kesimpulan

Tutorial ini bertujuan untuk memahami konsep dasar reactjs, dengan cara belajar memahami apa itu JSX, apa itu babel, dan apa korelasi antara babel dan JSX. Dan juga kita belajar membuat sebuah aplikasi sederhana yang didalamnya terdapat reusable komponen, dan juga props pada reactjs.

Sampai jumpa di tutorial berikutnya ya. Terimakasih banyak

Sejak 5 tahun terakhir banyak bermunculan JavaScript library seperti ReactJS, VueJS, Angular, Preact, dan lain sebagainya. Library tersebut dibangun dengan tujuan yang sama, yaitu untuk mendukung pembuatan aplikasi agar lebih cepat dan efisien.

Saat ini ReactJS adalah library yang paling populer digunakan oleh Frontend Developer untuk membangun User Interface dengan JavaScript.

Baca juga: ✅Panduan Menjadi Front End Developer Lengkap

Pada survey yang dilakukan oleh StackOverflow, library ReactJS menduduki peringkat pertama pada kategori JavaScript Library (Pustaka JavaScript) yang paling banyak digunakan, seperti pada gambar dibawah ini:

most popular front-end frameworks in 2020

Peringkat kedua disusul oleh Vue.JS, dan AngularJS ada diposisi ketiga. Oleh karenanya pada tulisan ini, saya akan coba membahas tentang React.JS

Apa itu ReactJS?

Jadi, apa itu reactjs? ReactJS adalah sebuah library bahasa pemrograman JavaScript yang dibuat oleh Facebook. ReactJS merupakan library yang bersifat Open-Source. ReactJS digunakan untuk membangun sebuah User Interface pada Website, Mobile, dan juga aplikasi Desktop.

ReactJS dibangun dengan konsep "Reusable Components", dimana kita dapat membuat komponen kecil (bagian kecil dari User Interface, seperti tombol, input, dsb) yang dapat kita gunakan secara berulang sehingga memberikan performa yang bagus pada aplikasi yang dibuat, serta dapat membuat proses development menjadi lebih cepat.

Digunakan Oleh Banyak Perusahaan Besar

Top 25 Companies/Brands Using ReactJS Development - Frontend ...

ReactJS digunakan oleh banyak perusahaan besar seperti Facebook, Instagram, Netflix, Airbnb, dan lain sebagainya. Di indonesia sendiri beberapa startup besar yang menggunakan ReactJS diantaranya adalah WarungPintar, Sorabel, Traveloka, Tokopedia, dan lain sebagainya.

Facebook

Sosial media terbesar di dunia yaitu Facebook secara keseluruhan dibangun menggunakan ReactJS pada website mereka. Pada aplikasi facebook yang berbasis android dan ios sebagian halamannya dibangun menggunakan Framework React Native.

Instagram

Website instagram.com juga dibangun menggunakan ReactJS. Sedangkan untuk aplikasi instagram yang berbasis android dan ios hanya sebagian fitur yang dibangun menggunakan React Native.

WarungPintar

Website utama warungpintar sepenuhnya dibangun menggunakan ReactJS dan GatsbyJS. Sedangkan untuk aplikasi mobile seperti aplikasi Juragan dan KurirApps secara keseluruhan dibangun menggunakan Framework React Native.

Support Komunitas Yang Besar

ReactJS juga memiliki komunitas yang sangat besar, di Indonesia ada sebuah komunitas bernama ReactJS Indonesia yang sangat aktif dan sering mengadakan meetup untuk membahas perkembangan ReactJS.

Di kota Surabaya, ada 2 komunitas yang aktif membahas perkembangan ekosistem JavaScript, yaitu komunitas Surabayadev dan komunitas Surabayajs

Alasan Kenapa Memilih ReactJS

Ketika sebuah teknologi atau library baru muncul, selalu ada persaingan sengit dalam menentukan pilihan, dan sebagai seorang Frontend Developer pasti ada saat dimana kita harus memilih sebuah library yang akan digunakan di Project selanjutnya.

Pilihan tahun ini biasanya pada 3 library besar, yaitu ReactJS, VueJS, dan AngularJS. Namun saya akan coba menjelaskan kenapa kita ReactJS adalah pilihan yang paling bijak dan tepat.

ReactJS mudah untuk dipelajari

Didalam kaidah teknologi, jika sesuatu mudah dipelajari dan dipahami, itu berarti akan mudah untuk diterapkan atau diimplementasikan. Karena kemudahan untuk dipelajari saya meyakini jika setiap programmer dapat dengan mudah memahami sintaks dan siklus hidup (lifecycle) pada komponen di ReactJS.

Requirements yang dibutuhkan untuk mempelajari ReactJS tidak rumit kok, kalian cukup memiliki dasar pengetahuan tentang HTML, CSS, dan JavaScript. Dengan 3 pengetahuan dasar ini, saya jamin kalian bisa untuk belajar ReactJS

ReactJS itu cukup sederhana

ReactJS mudah dipelajari dan diimplementasikan (dengan catatan kita sudah memiliki pemahaman dasar tentang JavaScript). Siklus hidup pada komponen di ReactJS sangat mudah untuk dipahami. Kita akan selalu bertemu dengan komponen, karena semua yang ada di ReactJS adalah komponen.

Native Approach

Future Scope of React Native for Mobile App Development ...

ReactJS terkenal dengan reusabilitynya, yang dimaksud reusability adalah komponen yang ada pada ReactJS dapat dengan mudah digunakan untuk platform yang lain, seperti Android, iOS, dan Desktop.

Jadi dengan sekali belajar ReactJS kita dapat mengimplementasikan ke banyak platform, tentunya ini menjadi nilai plus bagi para Frontend Developer.

write once, run anywhere.

-- ReactJS

One Way Data Binding

Singkat cerita, sebelum react lahir konsep two-way data binding lebih dulu populer di dunia frontend. Cara kerjanya, ketika data berubah maka UI berubah, begitu juga sebaliknya. Framework seperti angular dan ember menggunakan turut mempopulerkan konsep ini.

Tapi ternyata banyak developer merasa performance dari konsep ini kurang baik ketika aplikasi semakin besar, akhirnya facebook memperkenalkan react dengan konsep one-way data flow yang di dasari oleh functional programming.

Berbeda dengan two-way data binding, merubah UI tidak otomatis mengubah data. Aliran datanya akan tetap satu arah itu sebabnya disebut one-way data flow. Cara untuk merubahnya menggunakan teknik callback.

Kedua konsep ini mirip seperti analogi jalan satu arah dan dua arah, keduanya memiliki kelebihan dan kelemahan masing-masing. React memilih one-way data flow untuk alasan performancescalability, dan single source of truth.

- Sastra Nababan

Performa yang bagus dengan Virtual DOM

ReactJS terkenal cepat dan aman. Dan tidak banyak terjadi permsalahan performa pada tahap production. Virtual DOM adalah representasi DOM secara virtual. Pada dasarnya, bahasa pemrograman JavaScript sudah cukup kencang. Faktor yang membuat JavaScript menjadi lambat adalah ketika JavaScript mengolah DOM.

React membuat virtual DOM untuk mempercepat urusan tersebut. React melakukan semua operasi di dalam virtual DOM. Setelah operasi tersebut selesai, React melakukan perubahan tersebut pada DOM.

Banyak Lowongan Pekerjaan

Karena ReactJS sanagat populer, banyak perusahaan yang mengadaptasi library ini kedalam project mereka. Karena hal ini pula, lowongan pekerjaan dengan requirement ReactJS juka sangat membludak, baik onsite maupun remote.

Jika kalian googling dengan kata kunci "Lowongan Frontend" kalian akan banyak menemukan requiremens ReactJS pada deskripsi lowongan pekerjaan mereka.

Kesimpulan

ReactJS adalah library yang dibangun oleh Facebook, karena popularitasnya banyak Frontend developer yang akhirnya menggunakan ReactJS. Akibatnya sangat banyak perusahaan besar yang mencari Frontend Developer yang menguasai ReactJS.

Untuk belajar ReactJS tidaklah sulit, pengetahuan dasar yang harus dimiliki hanyalah HTML, CSS, dan JavaScript. 3 pengetahuan ini merupakan requirements wajib sebelum mempelajari ReactJS.

Jika teman-teman lebih menyukai video penjelasan ReactJS, teman-teman dapat menonton video ini

 

Pada artikel ini kita akan belajar membuat aplikasi android sederhana, aplikasi android sederhana ini dibuat untuk melakukan pencarian produk halal MUI. Pada tutorial ini saya menggunakan Android Studio versi 3.2.2.

Tutorial Membuat Aplikasi Android - Studi Kasus Pencarian Produk Halal MUI

Menyiapkan Project Baru di Android Studio

  1. Buat projek baru di Android Studio, klik Start a new Android Studio project.
  2. Pilih Empty Activity, kemudian atur nama project, package name dan direktori (folder lokasi) penyimpanan sesuai keinginan kalian.
  3. Untuk bahasa gunakan Java dan minimum API level pilih API 21.
  4. Tekan Chekbox (Ceklis) pada Use AndroidX artifacts, lalu klik Finish dan tunggu hingga pembuatan projek selesai.
  5. Kemudian tambahkan repository jitpack.io di build.gradle (project)
    allprojects {
        repositories {
            . . .
            maven { url 'https://jitpack.io' }
            . . .
        }
    }
    
  6. Kemudian buka build.gradle ( di dalam app directory) lalu tambahkan library berikut:
    dependencies {
        . . .
        implementation 'com.google.android.material:material:1.0.0'
        implementation 'androidx.recyclerview:recyclerview:1.1.0'
        implementation 'com.github.JabirDev:HalalMUIAndroid:1.0'
        . . .
    }
    

Membuat Layout Aplikasi Produk Halal di Android Studio

Buat layout baru caranya klik kanan pada direktori layout pilih new lalu pilih Layout resource file beri nama dengan item_list.

Tutorial Membuat Aplikasi Android - Studi Kasus Pencarian Produk Halal MUI

Tutorial Android - Pencarian Produk Halal MUI

Lalu, paste kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:orientation="vertical"
    android:paddingStart="16dp"
    android:paddingTop="16dp"
    android:paddingEnd="16dp">

    <TextView
        android:id="@+id/tv_produk"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6" />

    <TextView
        android:id="@+id/tv_produsen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle2" />

    <TextView
        android:id="@+id/tv_sertifikat"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body2" />

    <TextView
        android:id="@+id/tv_berlaku"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body2" />

    <View
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="16dp"
        android:background="?android:attr/listDivider" />
</LinearLayout>

Menambahkan ListAdapter

Selanjutnya buat file java baru untuk adapter RecyclerView, beri nama ListAdapter.

Tutorial Android - Pencarian Produk Halal MUI

Selanjutnya, paste kode berikut ini:

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class ListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private Context context;
    private List<HalalData> items;

    public ListAdapter(Context context, List<HalalData> items) {
        this.context = context;
        this.items = items;
    }

    class ListHolder extends RecyclerView.ViewHolder {

        TextView produk, produsen, sertifikat, berlaku;

        public ListHolder(@NonNull View itemView) {
            super(itemView);
            produk = itemView.findViewById(R.id.tv_produk);
            produsen = itemView.findViewById(R.id.tv_produsen);
            sertifikat = itemView.findViewById(R.id.tv_sertifikat);
            berlaku = itemView.findViewById(R.id.tv_berlaku);
        }

        public void setData(HalalData data) {
            produk.setText(data.getNamaProduk());
            produsen.setText(data.getNamaProdusen());
            sertifikat.setText(data.getNomorSertifikat());
            berlaku.setText(data.getTanggalValid());
        }
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View view = inflater.inflate(R.layout.item_list, parent, false);
        return new ListHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        ListHolder h = (ListHolder) holder;
        h.setData(items.get(position));
    }

    @Override
    public int getItemCount() {
        return items.size();
    }
}

Sekarang buka MainActivity.xml. Di sini saya menggunakan:

  1. EditText untuk menginputkan teks.
  2. Radio Button di dalam Radio Group untuk memilih kategori.
  3. RecyclerView untuk menampilkan daftar produk.

Berikut kode layoutnya kalian bisa desain sesuai keinginan atau copy paste aja:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/input_query"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Cari produk"
        android:inputType="textPersonName" />

    <RadioGroup
        android:id="@+id/rg_kategori"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_produk"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Produk" />

        <RadioButton
            android:id="@+id/rb_produsen"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Produsen" />

        <RadioButton
            android:id="@+id/rb_sertifikat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Nomor Sertifikat" />
    </RadioGroup>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Lanjut buka file MainActivity.java. Kemudian paste kode berikut:

import android.os.Bundle;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.util.Log;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";
    private String kategori;
    private List<HalalData> items = new ArrayList<>();
    private ListAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        adapter = new ListAdapter(this, items);
        RecyclerView rv = findViewById(R.id.recyclerview);
        rv.setAdapter(adapter);
        rv.setLayoutManager(new LinearLayoutManager(this));

        EditText inputQuery = findViewById(R.id.input_query);
        RadioGroup rgKategori = findViewById(R.id.rg_kategori);
        final RadioButton produk = findViewById(R.id.rb_produk);
        final RadioButton produsen = findViewById(R.id.rb_produsen);

        rgKategori.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // Ketika Radio Group dipilih
                if (checkedId == produk.getId()){
                    kategori = "produk";
                } else if (checkedId == produsen.getId()){
                    kategori = "produsen";
                } else {
                    kategori = "sertifikat";
                }
            }
        });

        inputQuery.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                // Ketika user memasukkan teks pada edit text
                String q = s.toString();
                if (TextUtils.isEmpty(q)){
                    // Jika teks kosong maka akan menampilkan toast berikut
                    Toast.makeText(MainActivity.this, "Input text", Toast.LENGTH_SHORT).show();
                } else {
                    // Jika teks tidak kosong maka akan melakukan pencarian sesuai dengan teks yang sudah dimasukkan
                    pencarian(q);
                }
            }
        });

    }

    // Fungsi untuk mencari produk
    private void pencarian(String q) {
        items.clear();
        if (TextUtils.isEmpty(kategori)){
            // Jika kategori tidak dipilih maka akan menampikan toast dengan pesan berikut
            Toast.makeText(MainActivity.this, "Pilih kategori pencarian", Toast.LENGTH_SHORT).show();
        } else if (kategori.equals("produk")){
            // Jika kategori yang dipilih adalah produk
            HalalMui.byNamaProduk(q, new HalalListener() {
                @Override
                public void ketikaSukses(List<HalalData> halalData) {
                    items.addAll(halalData);
                    adapter.notifyDataSetChanged();
                }

                @Override
                public void ketikaTidakAdaData(String s) {
                    Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
                }

                @Override
                public void ketikaGagal(Throwable t) {
                    Log.e(TAG, "ketikaGagal: ", t);
                    Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
        } else if (kategori.equals("produsen")){
            // Jika kategori yang dipilih adalah produsen
            HalalMui.byNamaProdusen(q, new HalalListener() {
                @Override
                public void ketikaSukses(List<HalalData> halalData) {
                    items.addAll(halalData);
                    adapter.notifyDataSetChanged();
                }

                @Override
                public void ketikaTidakAdaData(String s) {
                    Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
                }

                @Override
                public void ketikaGagal(Throwable t) {
                    Log.e(TAG, "ketikaGagal: ", t);
                    Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
        } else if (kategori.equals("sertifikat")){
            // Jika kategori yang dipilih adalah sertifikat
            HalalMui.byNomorSertifikat(q, new HalalListener() {
                @Override
                public void ketikaSukses(List<HalalData> halalData) {
                    items.addAll(halalData);
                    adapter.notifyDataSetChanged();
                }

                @Override
                public void ketikaTidakAdaData(String s) {
                    Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
                }

                @Override
                public void ketikaGagal(Throwable t) {
                    Log.e(TAG, "ketikaGagal: ", t);
                    Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

Terakhir buka file AndroidManifest.xml lalu tambahkan permission untuk mengakses internet, seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jabirdeveloper.halalmui">

    <uses-permission android:name="android.permission.INTERNET"/>

</manifest>

Sekarang jalan projek bisa menggunakan device android kalian atau bisa juga menggunakan emulator. Tekan Shift + F10, berikut tampilan Aplikasi Halal MUI yang sudah kita buat.

Tadi pagi ada yang share tentang font baru, sebuah font yang dibuat khusus untuk menulis code, nama fontnya adalah jetbrains mono. Saya langsung baca-baca tentang font ini di landing page nya, dan saya cukup terkesan dengan Jetbrains, karena telah berbaik hati membuat font khusus untuk para penulis code.

Menurut saya pribadi font Jetbrains Mono ini mirip dengan consolas font, mirip tapi tak sama. Perbedaan yang paling dapat dirasakan adalah huruf kecilnya, jebrains menambahkan tinggi font untuk huruf kecilnya, menurut websitenya Jetbrains Mono, dengan memaksimalkan tinggi font dapat meningkatkan reading experience.

Jetbrains mono font

Ligatur

Salah satu yang menjadi favorit saya adalah Ligatur (Dalam penulisan dan tipografi, suatu ligatur terjadi ketika dua atau lebih grafem atau huruf digabungkan sebagai satu mesin terbang). Dan si Jetbrains Mono ini menggabungkan dua atau lebih menjadi satu simbol. Contoh saat kita menulis sebuah arrow ( -> ) JetBrains Mono akan mengubahnya menjadi simbol panah

Ligatur pada Jetbrains mono

Dan terakhir yang menjadi favorit saya adalah GRATIS, dan instalnya gampang banget. Kalian langsung saja download di situs resminya, dan install. Setelah itu ubah configurasi font pada editor kita, contohnya VSCode, kita buka setting preference (JSON), lalu:

"editor.fontFamily":"'JetBrainsMono', 'monospace', 'Droid Sans Fallback'",

Apa Itu Front End Developer?

Apa itu frontend developer

Apa itu front end developer

Front End Developer adalah salah satu dari sekian banyak bidang pekerjaan yang ada di dalam dunia pemrograman Website & Mobile. Pada suatu proses pembuatan website atau aplikasi, umumnya terdapat 3 komposisi utama yang sangat penting agar website atau aplikasi dapat dinikmati secara sempurna. 3 komposisi tersebut adalah Front End Developer, Backend Developer, dan Web Designer atau UI/UX Designer.

3 komposisi utama ini harus saling bekerja sama dengan baik agar tercipta sebuah website atau aplikasi yang indah yang dapat memanjakan penggunanya.

Apa tugas seorang Front-end Developer?

Seorang Front End Developer bertugas untuk menerapkan interface dan experience yang telah diberikan oleh seorang desainer Website atau UI/UX Designer. Setelah tugas tersebut selesai, Front End Developer masih memiliki tugas lain (menurut saya ini hanyalah tugas opsi), yaitu menghubungkan atau melakukan intregasi website atau aplikasi yang telah dibuat dengan data yang telah disediakan oleh Backend Developer.

Apa Perbedaan Antara Front End & Back End Developer?

frontend vs backend

front end vs back end

Front end developer dan Backend developer dapat dibedakan dari lingkup kerja & tugasnya, serta bahasa yang digunakan.

Dari segi bahasa yang digunakan, seorang Front end Developer umumnya menggunakan HTML, CSS, dan JavaScript, sedangkan seorang Backend Developer umumnya menggunakan Golang, PHP, Python, Ruby dan lain sebagainya.

Untuk memahami lebih lanjut tentang perbedaan Front end dan Back end, penulis ingin bertanya kepada pembaca.

Setiap harinya kita pasti membuka sebuah website kan? Seperti facebook, google, twitter, situs berita, dan lain sebagainya. Saya rasa jawabannya adalah "YA PASTI".

Yang kita lihat pada layar, serta interaksi yang kita lakukan pada website tersebut, seperti klik tombol, membuka menu, menggeser sebuah gambar, dan lain sebagainya, hal tersebut merupakan lingkup kerja yang dilakukan oleh seorang Frontend Developer. Sedangkan seorang Backend Developer bekerja dibalik itu semua dengan cara menyajikan data yang dibutuhkan oleh Front end Developer untuk ditampilkan di layar.

Relasi Antara Front end Developer dan Backend Developer

Kita bayangkan ada sebuah website sederhana berisi halaman login. Pada halaman login terdapat 2 teks input, yaitu teks input untuk e-mail dan teks input untuk password.

Front end Developer memiliki kewajiban untuk merekam value e-mail dan password yang diberikan/di inputkan oleh user.

Saat user selesai mengisi inputan e-mail dan password, user menekan tombol "submit", saat ada aksi tekan tombol "submit" Front end Developer bertugas untuk mengirim sebuah request(permintaan) kepada Backend Developer, request yang dikirim oleh Front end berisi e-mail, dan password yang telah direkam sebelumnya.

Backend Developer kemudian menerima data dari request yang dikirim oleh Front end Developer, data yang diterima oleh Backend Developer end berisi e-mail, dan password.

Backend Developer kemudian bertugas untuk mencocokkan data yang diterima dari request tadi ke dalam database.

Pada tahapan ini, ada atau tidak adanya data yang cocok, antara data yang ada di dalam database dengan data yang diterima, Backend developer wajib memberikan informasi (response) tersebut kepada Front end Developer.

Sehingga front end dapat menjelaskan kepada user tentang hasil(response) dari aksi login yang dilakukan oleh user tersebut.

Perbedaan Lingkup Kerja Front end Developer dan Backend Developer

Front endBackend
HTML, CSS, JavaScript, dllPython, Golang, PHP, Ruby, dll.
AksesibilitasArsitektur Server
Cross Browser TestingSecurity
SEO implementationApplication Programmable Interface (API)A

Tahap-tahap untuk menjadi  seorang Front end Developer?

Apabila kita telaah dunia front end development pada 5 tahun terakhir, mungkin kita akan sering mendengar terminologi yang belum pernah kita dengar pada artikel, dan video seperti ES6, jQuery, React, Redux, Webpack, Babel, TDD, JEST, Git, async, OOP, functional-style, npm, Node.js, Yarn, SQL, NoSQL, Graph databases, MongoDB, Angular.

Jika sekitar tahun 2010 kita hanya butuh HTML, CSS, JavaScript atau mungkin jQuery dalam membuat website, pata tahun 2020 sekarang ini sudah sangat amat jauh berbeda, bahkan ada sebagian orang yang menganggap jika jQuery sudah masuk ke zona "outdated" alias zona lawas yang sudah harus ditinggalkan.

Front end development memiliki pertumbuhan yang sangat cepat, sehingga standarisasi seorang Front end developer juga ikut semakin rumit, dan muncul terminologi diatas.

Berdasarkan research dan pengalaman saya di dunia Front end Development, saya membagi hal yang harus dilalui seorang Front end Developer kedalam beberapa tahap, berikut adalah tahapannya:

KelasKualifikasi Yang Harus Dilalui
Kelas 1HTML
CSS
JavaScript
jQuery Framework
Bootstrap Framework
Penggunaan GIT
Instalasi Web pada Hosting
Konfigurasi Domain, SSL
Kelas 2Package Manager (Yarn, NPM) *
Task runner (NPM Script, Gulp, dll) *
CSS Arsitektur (BEM, OOCS, SMACSS) *
CSS Preprocessor (SASS, PostCSS, LESS, dll) *
CSS Framework (Material UI, Reactstrap, Tailwind) *
Modern CSS (Styled-components, CSS Module) *
Linter dan Formatter (Prettier, ESlint)
Module Bundler (Webpack, Parcel, Rollup) *
Menggunakan Framework (React, VueJS, Angular, Svelte) *
Memahami state management (Redux, Mobx, Unistore) *
Kelas 3Memahami Testing (Unit test, Integration Test, Functional Test)
Menggunakan Testing Framework (Jest, Cypress, Enzyme, dll) *
Type checker (Typescript, Flow) *
Progressive Web Apps
Server Side Rendering
GraphQL
Static Site Generator
Mobile Apps (Javascript Framework) *
Desktop Application (Electron, Proton, dll) *
Web Assembly
Dll.

*Dapat memilih salah-satu dari sekian opsi yang ada, namun baik apabila kita dapat memahami opsi lainnya

Frontend Developer Roadmap

Front end Developer Roadmap

Berapa gaji seorang Front-End Developer di Indonesia?

Dengan banyaknya rintangan yang harus dilalui untuk menjadi seorang front end developer yang keren, mungkin muncul sebuah pertanyaan Berapa sih gaji seorang Front end Developer? Emang sesuai dengan yang sudah dilalui?.

Saya mendapatkan data dari beberapa situs seperti techinasia.com, careerexplorer.com, dll. Dan setelah saya rangkum dari beberapa situs tersebut saya mendapat nilai rata-rata.

Di Indonesia gaji seorang front end developer berkisar pada angka:

LevelGaji
JuniorRp 5.000.000 - Rp 7.500.00
MidRp. 7.500.000 - 15.000.000
SeniorLebih dari Rp. 15.000.000

Kesimpulan

Lebih dari 20 tahapan yang harus dilalui untuk menjadi seorang Front end Developer, itu angka yang cukup banyak, dan butuh waktu yang tidak sedikit.

Saya sangat menyadari jika hal ini dapat membuat seseorang yang ingin mulai belajar akan berjalan mundur perlahan karena sudah takut melihat list yang sebanyak itu.

Oleh karena itu pada series ini kita akan sama-sama belajar untuk menjadi seorang Front end Developer dengan menggunakan sebuah project atau istilahnya real world example, sehingga dapat lebih mudah memahami tentang maksud dan tujuan dari sebuah tahapan yang harus dilalui seorang front end developer.

Terminologi yang banyak disebutkan di atas hanyalah sebuah tools, framework, metode, dan lain sebagainya yang front end developer butuhkan di tahun 2018 kedepan.

Saran saya jangan terlalu dipikirkan, relax saja, dan jangan takut, karena saya yakin semua akan paham jika waktunya sudah tepat.

Oleh karena itu, saya mencoba menulis artikel ini untuk membimbing teman-teman agar menjadi seorang Front end Developer yang ciamik dan hebat.

Jangan lupa untuk selalu buka situs ini, karena series ini akan selalu di perbaharui. Jika ada masukan atau pertanyaan, teman-teman dapat bertanya melalui kolom komentar. Saya akan berusaha menjawab sebaik mungkin.