Sekilas tentang Basic Electronics for IOT

Hai hai….

Balik lagi nih aku mau share materi yang udah dikasihin sama kak ichaa tentang Basic Electronics for IOT

Okey .. mulai ya

Kenapa kak icha ambil Judul seperti itu .. karena yg akan kita pelajari hari ini adalah Elektronika dasar yang nantinya akan menyangkut ke IoT dalam pengaplikasiannya. Jadi sebelum masuk ke materi kita samakan tujuan qta dulu ya.. belajar elektronika untuk aplikasi IoT

Basic Electronic yang harus kalian pertama pahami adalah mengenai teori atom ..

Sudah pernah belajar teori atom kn waktu SMA/SMK? dimana elektron dapat berpindah2 atau loncat jika ada yang mempengaruhi. Jika masih ingat dengan teori atom, maka KIta akan lanjut ke materi

> ARUS LISTRIK (ELECTRIC CURRENTS)

Kita semua tentu paham bahwa arus listrik terjadi karena adanya aliran elektron dimana setiap elektron mempunyai muatan yang besarnya sama. Jika kita mempunyai benda bermuatan negatif berarti benda tersebut mempunyai kelebihan elektron. Derajat termuatinya benda tersebut diukur dengan jumlah kelebihan elektron yang ada. Muatan sebuah elektron, sering dinyatakan dengan simbul q atau e, dinyatakan dengan satuan coulomb, yaitu sebesar

dimana muatan arus listrik itu sama

q = 1,6 x 10^-19 couloumb

Nah dalam kabel / kawat penghantar yang kita pakai terdapat aliran elektron dalam jumlah besar. Jika elektron itu bergerak ke kanan dan ke kiri secara bersamaan maka tidak akan terjadi apa2 atau arus akan bernilai nol. Nah jika ada benda di sebelah kanan kawat yang mempengaruhi (contoh crystal, dll) maka elektron akan tertarik ke sebelah kanan, inilah yang dimaksud arus listrik.

Besarnya arus di ukur dengan satuan ampere (A)

dalam 1 A = 1coloumb / detik

Ini penemunya ya

Contoh Aliran Arus yang ada dalam Pemakaian Sehari2 :

Stasiun pembangkit ................... 1000 A

Starter mobil ................... 100 A

Bola larnpu ................... 1 A

Radio kecil ................... 10 mA

Jam tangan ................... 1 mA

Maralisa Aulia Rahmi, [03.12.17 20:36]

kalau disimpulkan

Arus Listrik itu besarannya Ampere (A)

nah Arus Listrik berperan mengalirkan elektron ke aplikator yang dibutuhkan

contoh Smartphone ..

jika diibaratkan dengan sebuah sungai >

sungai itu adalah kabelnya ..

seberapa besar arus nya itu adalah arus listriknya

Lanjut ya.. itu tadi mengenai arus listrik

> TEGANGAN (VOLTAGE)

Supaya lebih gampang .. qta analogikan Tegangan sebagai sebuah tabung berisi air, tabung air ini berisi 12 inchi volume tabung.. yang kemudian dialirkan melalui pipa2 air (analogikan dengan kabel) . ingat alliran air selalu mengalir dari yang tinggi ke rendah, jadi air akan mengalir melalui pipa dan menyalakan aplikator.

Jadi kalau kita analogikan:

Tabung air : Baterai berisi tegangan

air : tegangan

Pipa : kabel / kawat

aliran air : arus listrik

blender (kincir berputar) : aplikator seperti lampu, dll

Jadi sudah membedakan kan antara Tegangan dan Arus? Nah apa yang membuat tegangan itu mengalir adalah jumlah tegangan yang dikiri dan kanan.

Yang dimaksud tegangan kanan dan kiri. Kita ibaratkan dua tabung ini, jika kedua tabung sama arusnya maka tidak akan terjadi apa2 meski jumlah tegangannya sama dan jika salah satu tabungnya memiliki arus yang lebih tinggi maka tegangan pasti akan mengalir ke tabung yang lebih rendah.

Terjadinya aliran tersebut dapat dipahami dengan konsep energi potensial. Tingginya tabung menunjukkan besarnya energi potensial yang dimiliki. Yang palingpenting dalam hal ini adalah perbedaan tinggi kedua tabung yang sekaligus menentukan besarnya perbedaan potensial. Jadi semakin besar perbedaan potensialnya semakin deras aliran air dalam pipa.

Perlu dicatat bahwa beda potensial diukur antara ujung-ujung suatu konduktor. Namun kadang-kadang kita berbicara tentang potensial pada suatu titik tertentu. Dalam hal ini kita sebenarnya mengukur beda potensial pada titik tersebut terhadap suatu titik acuan tertentu. Sebagai standar titik acuan biasanya dipilih titik tanah (ground).

Intinya jika ada Energi potensial pada kedua ujung kabel yang berbeda (salah satu tabungnya lebih tinggi) maka arus listrik akan terjadi dan tegangan dapat dialirkan.

masih dalam konteks > TEGANGAN

Alessandro Giuseppe Antonio Anastasio Gerolamo Umberto Volta (lahir di Como, Tanah Milik Duke Milan, (kini Italia), 18 Februari 1745 – meninggal di Como, Lombardi-Venetia, (kini Italia), 5 Maret 1827 pada umur 82 tahun) adalah seorang fisikawan Italia. Ia terutama dikenal karena mengembangkan baterai pada tahun 1800.

Ia melanjutkan pekerjaan Luigi Galvani dan membuktikan bahwa teori Galvani yaitu efek kejutan kaki kodok adalah salah. Secara fakta, efek ini muncul akibat 2 logam tak sejenis dari pisau bedah Galvani. Berdasarkan pendapat ini, Volta berhasil menciptakan "Baterai Volta" (Voltac Pile). Atas jasanya, satuan beda potensial listrik dinamakan volt.

itu penemu Tegangan Listrik

Nah Besaran tegangan itu sendiri adalah Volt

>HUKUM OHM

Pada sebagian besar konduktor (penghantar listrik) selalu diatur oleh hukum Ohm. Nah berlaku Rumus VIR (bukan buah VIR ya..)

V = I X R

Tegangan = Arus x hambatan

loh R itu apa kak??

R itu artian dari Resistansi (Hambatan). Hambatan yang dimaksud disini bisa aplikator yang dipakai (Lampu , dll) atau Resistor. Bedanya resistor itu untuk menghambat / memperkecil arus yang mengalir , kalau Aplikator itu untuk mengkonsumsi tegangan, misal tegangan itu berubah menjadi nyala lampu.

Intermezzo ..

Contoh untuk mencari berapa arus yang teraliri jika Tegangannya 12 volt dan Hambatan bebannnya 6 Ohm , maka

V = I X R

12 volt = I x 6 ohm

I = V / R

I = 12 / 6

  = 2 Ampere

> DAYA (POWER)

Jika sebuah tegangan V dikenakan pada sebuah hambatan R maka besarnya arus yang mengalir adalah

I = V / R (hukum Ohm).

Daya itu disimbolkan P (Power) dan satuannya adalah Watt dan daya yang diberikan sebesar:

P = VxI

atau

P= V^2/R (Tegangan dipangkat 2 dibagi R)

P= I^2R (Arus dipangkat 2 dibagi R)

Nah itu kalau di Arus DC (Tegangan konstan), sedangkan akan berbeda rumusnya jika Arus yang dipakai adalah Arus AC ( Tegangan tidak konstan)

Bedanya apa kak??

Arus DC itu Arus yang stabil dengan tegangan tetap ... contoh baterai HP, Baterai ABC , dll .. yang hanya memiliki tegangan 0,001 V - 15 Volt. (Gak nyetrum)

Arus AC itu Arus yang naik turun (bolak balik) dengan tegangan yang tidak tetap juga. .. contoh listrik PLN (jangan coba2 kalau ga mau nyetrum)

makanya arus AC itu selalu di simbolkan dengan simbol infinite (tak hingga), nah dalam Arus AC , tegangannya menjadi:

v = V sin w t (Tegangan dikali Sin omega dikali waktu)

Nah ini biasanya diukur pake oscilloscope, dengan demikian

i = v/R

= (V/R) sin w t (Tegangan dibagi Hambatan dikali sin Omega dikali waktu)

atau

P = v X i

   = (V^2/R) sin^2 w t (Tegangan pangkat 2 dibagi Hambatan dikali sin pangkat 2 dikali omega dikali waktu)

oke sampai sini Basic Electronics for IoT Part 1 selesai

Aku mau nanya. Dengan dasar2 yg sudah diberikan, apa sih contoh implementasi di IoT jaman now?

Jawab:

Contoh Implementasi nya tergantung Input dan Output dari si IoT itu sendiri ..

Contohnya penyiram Tanaman otomatis,

maka Input nya adalah sinar matahari pagi dan sore kan ? atau real time , nah biasanya interface nya ditampilkan dalam Web page internet yang dikirimkan melalui sebuah module elektronik

nah outputny adalah pompa air kan ..

nah implementasi input dan output ini gabisa qta asal pasang tegangan dia akan menyala .. butuh perhitungan agar , komponen elektronika yang dipakai tidak cepat rusak dan tidak mudah terbakar ..

karena kan setiap komponen elektronika itu memiliki arus dan tegangan yang dipakai berbeda2 ..

Input :

contoh Sensor ?

sensor gerak dengan sensor cahaya akan berbeda kebutuhan Arus dan tegangannya ..

Output :

Contoh  LED?

LED itu memiliki arus dan tegangan yang berbeda.. jika LED yang membutuhkan tegangan hanya 5 volt dialiri tegangan 12 volt maka kemungkinan LED akan menyala terang dan cepat panas, maka dibutuhkan Resistor agar tegangan yang dialiri stabil 5 volt.

jika LED itu membutuhkan Tegangan 12 volt dan hanya dialiri tegangan 5 volt maka LED itu akan menyala dan terangnya sedikit..

sedangkan Implementasi IoT yang ada di jaman Now itu kan ada 3 :

1. Implementasi Keamanan (Contoh CCTV)

2. Implementasi Property (Contoh Nyala mati lampu otomatis, penyiram tanaman otomatis)

3. Implementasi Medis (Contoh Pengukur Detak jantung)

Sampai sini dulu ya, nanti kita lanjut lagi dengan materi lainnya

Mau tau materi selanjutnya?? Kunjungi terus ya blogku J

Materi Generate Static Website With Hugo

Apa kabar semua….

Selamat datang kembali diblog saya.

Kali ini saya akan memberikan materi tentang Generate Static Website With Hugo yang telah disampaikan oleh kakak Gita Citra Puspita yang sedang bekerja sebagai Trainer dan Web Developer di Kolla.

Jangan lupa untuk persiapkan instalasi berikut ini untuk memperlancar belajar kalian:

🌼 Install Git Bash

Link: https://git-scm.com/download/win

🌼 Install Go 1.5+

Link: https://golang.org/dl/

🌼 Install govendor

Link: https://github.com/kardianos/govendor

Hari ini kita akan berkenalan dengan HUGO.

Apa itu Hugo?

Hugo adalah salah satu open source generator website statis dengan kecepatan yang baik, fleksibilitas baik, dan memberikan kemudahan pada pengguna dalam membuat statis website.

Banyak sekali jenis generator website statis, ada HUGO, phenomic, grav, Jekyll, dll

Apa bedanya HUGO dengan beberapa generator itu?

Hugo adalah Go-based templating dan Hugo dikembangkan dengan bahasa Go-lang. Hugo memiliki banyak sekali tema website statis yang bisa kita gunakan dan kita customize.

Berikut ini link kumpulan tema website yang bisa kamu gunakan pada Hugo:

https://themes.gohugo.io/

Dari hasil research kak Gita, hanya HUGO yang punya banyak variasi tema website statis. Selain menggunakan tema yang sudah ada, pengguna juga bisa membuat tema sendiri untuk website statis miliknya. Kenapa harus menggunakan Hugo? Kan banyak tuh generator webstatis selain Hugo.

Berikut ini ada beberapa keunggulan Hugo dibandingkan dengan generator website lainnya:

☘ Dokumentasi softwarenya baik

Hugo memiliki dokumentasi software yang sangat baik dan detail. Dokumentasi penjelasan tidak hanya berupa teks saja, namun ada juga video tutorialnya. Ini memberikan kemudahan pada pengguna baru untuk memahami Hugo. Dokumentasi yang baik akan memudahkan developer dalam menggunakan tools.

Berikut ini link dokumentasi HUGO:

https://gohugo.io/documentation/

Coba di cek deh. Pasti kalian akan sepakat.

☘ Sangat terstruktur untuk pengelompokan konten websitenya.

Hugo memiliki pengorganisasian konten website yang rapih.

☘ Memiliki banyak theme yang bisa di customize

HUGO memiliki banyak tema dan beberapa tema bisa di customize

☘ Supported Content Formats Markdown and Emacs Org-Mode.

Nah loh, apa itu Markdown? Webstatis jaman now bisa dibuat dengan menggunakan Markdown. Jadi tidak harus nulis pake tag-tag gitu (tag HTML).

Markdown adalah sebuah tools untuk konversi text-to-HTML yang bisa digunakan ketika membuat konten pada web. Markdown memungkinkan kita untuk membuat sebuah format html dengan sangat sederhana dan ramah lingkungan (easy-to-read dan easy-to write). Kalau kamu biasa pake github pasti pernah membuat file dengan format README dengan format *.md (format file Markdown).

Ini contoh penulisan konten website dengan menggunakan format Markdown:

Tampilan webnya seperti apa?

Seperti gambar di bawah ini:

easy-to-read dan easy-to write kan?

Selaiin Markdown, HUGO juga support Emacs Org-Mode.

Apa itu Emacs Org-Mode?

Sama seperti markdown, Org-Mode juga sebuah format penulisan teks. Nah dia bisa di generate oleh aplikasi dengan nama Emacs.

Contoh penulisan Org-Mode pada Emacs:

Display pada web:

☘ HUGO mendukung Front Matter dengan 3 format, TOML, YAML, dan JSON.

Generator pada umumnya hanya mendukung satu format Front Matter, yaitu YAML

Kalau HUGO mendukung 3 Format.

Berikut contoh dari format Front Matter pada HUGO:

Gambar di atas adalah contoh dari YAML Front Matter Format

Gambar di atas adalah contoh dari TOML Front Matter Format

Gambar di atas adalah contoh dari JSON Front Matter Format

Dari contoh di atas kita akan melihat tulisan berikut:

---

title: "spf13-vim 3.0 release and new website"

description: "spf13-vim is a cross platform distribution of vim plugins and resources for Vim."

tags: [ ".vimrc", "plugins", "spf13-vim", "vim" ]

lastmod: 2015-12-23

date: "2012-04-06"

categories:

  - "Development"

  - "VIM"

slug: "spf13-vim-3-0-release-and-new-website"

---

Tulisan

title :

pada tulisan dengan YAML itu maksudnya seperti

<title></title>

Pada halaman web page

Tulisan

description:

pada tulisan dengan YAML itu maksudnya seperti

<meta name="description">

Pada halaman web page

Dari ke-3 contoh di atas dapat kalian pahami bahwa Front Matter adalah isi pertama dari sebuah page website yang berisi informasi tentang title, dan meta data.

☘ Mendukung Shortcode yang menghandle penyisipan konten yang tidak bisa dilakukan jika menggunakan Markdown.

Ketika kita membuat website tentu kita ingin menyisipkan video tutorial, post instagram, post twitter di website statis kita. Kita tidak bisa menyisipkannya dengan menggunakan Markdown. Kalau di generator lain, mereka pasti akan memasukan tag html. Nah, kalau di HUGO tidak perlu, HUGO memiliki  shortcode untuk menyisipkan hal-hal tersebut.

Bisa kalian intip di sini:

https://gohugo.io/content-management/shortcodes/

Converting Design to HTML

Kali ini pemateri kita yaitu Muhibbudin Suretno yang akan membagikan materi *Converting Design to HTML*

Melanjutkan dari materi sebelumnya yaitu soal UI/UX Design pada beberapa minggu yg lalu.

Disini sudah pada mempersiapkan tools yg ada pada bagian readme pada repo yang telah di share belum? Oke, sebetulnya alasan saya bikin materi ini karena kadang ada beberapa teman yang bertanya.

Apa sih template? apa pernah menggunakan HTML template? bagaimana cara membuatnya? seperti apakah kesulitan membuatnya?

Maka dari itu saya coba buat materi ini, untuk memandu teman-teman yang ingin mencoba membuat template sendiri. Beberapa waktu lalu saya telah membuat sample desain untuk "sebuah agensi desain rumah"

Next, pada desain ini ada bagian pot bunga yg menjadi background dari 2 section (nanti kita sebut hero dan testimony)

Malam ini kita coba convert desain tersebut menjadi sebuah template html

Pertama, kalian boleh clone / download dulu asset gambar pada repository ini https://github.com/muhibbudins/homies

Untuk kali ini kita akan mencoba framework css baru bernama Spectre.css. Kita ngga pake bootstrap dulu 😄 karena menurut saya terlalu mainstream

Next sekarang silahkan buat folder css & scss di dalam folder homies yang telah di download tadi. Setelah itu buat file index.html pada folder tadi lalu buat file style.scss pada folder scss.

Sekarang buka folder homies tadi pada text editor atau IDE kesukaan kalian.

Nice! sekarang silahkan paste code berikut ke file index.html

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Homies - Design Your Home</title>

 <!-- Meta Tag -->

 <!-- Style -->

 <!-- Icon & Fonts -->

</head>

<body>

 <!-- Our Code Will Be Here -->

</body>

</html>

Ini adalah struktur awal untuk template kita

Next kita masukan Spectre.css kedalam index.html dengan mereplace code <!-- Style --> dengan code berikut :

Lalu karena pada desain ini kita menggunakan custom font, kita masukan juga font serta icon yang kita gunakan pada desain ini.

Disini saya menggunakan font Lobster, Oswal (500) & Quicksand (400 & 500)

Silahkan replace comment <!-- Icon & Fonts --> dengan code berikut :

Make sure, code kalian pada bagian sebelum </head> adalah seperti ini ya :)

Dan pastiin juga kalau struktur folder kalian seperti ini

- Homies

|- css

|- img

|- scss

|- .gitignore

|- index.html

|- LICENSE

|- README.md

Sekarang kita coba mulai experiment dengan desainnya ya 😄

Silahkan nyalakan ruby sass dengan cara

Buka command prompt / terminal kalian pada folder homies dan jalankan command berikut sass --watch scss/style.scss:css/style.css.

Jika sudah seharusnya sudah ada 2 file baru di folder css yaitu style.css dan style.css.map

Kalau sudah silahkan buka file style.scss dan kita tuliskan beberapa variable yang akan kita gunakan

Codenya sebagai berikut (paste di file style.scss)

// Background

$bgHero      : url(../img/hero.png);

$bgTestimony : url(../img/testimony.png);

$bgProjects  : url(../img/projects.png);

$bgFooter    : url(../img/footer.png);

// Color

$background : #F7FAFF;

$green      : #2EC787;

$grass      : #43E09F;

$ocean      : #23CED9;

$blue       : #2EBEC7;

$darkblue   : #2D9CDB;

$darkBlack  : #252525;

$black      : #5C5C5C;

$darkGrey   : #717171;

$grey       : #828282;

$lightGrey  : #E0E0E0;

// Font

$quicksand : 'Quicksand', sans-serif;

$oswald    : 'Oswald', sans-serif;

$lobster   : 'Lobster', cursive;

Next, kita siapkan dulu skeleton dari section yang akan kita buat. Silahkan replace comment <!-- Our Code Will Be Here --> dengan code dibawah ini

<!-- Heading -->

 <div class="heading">

 </div><!-- ./ Heading -->

 <!-- Hero -->

 <div class="hero">

 </div><!-- ./ Hero -->

 <!-- Testimony -->

 <div class="testimony">

 </div><!-- ./ Testimony -->

 <!-- Projects -->

 <div class="projects">

 </div><!-- ./ Projects  -->

 <!-- Contact Us -->

 <div class="contact-us">

   

    </div><!-- ./ Contact Us -->

 <!-- Footer -->

 <div class="footer">

 </div><!-- ./ Footer -->

Oke deh kita lanjut aja, sekarang kita buat navbar pada bagian atas dengan menambahkan code setelah <div class"heading">

Codenya sebagai berikut :

munculll...

Sekarang seharusnya keluar navbar polosan dari Spectre.css seperti ini

Kadang kala pasti bingung css nya seperti apa, disini kita akan memasukan gambar tsb sebagai background pada element body

Silahkan pastekan code berikut pada file style.scss dibagian bawah variable

/* Section Body */

body {

 background-color: $background;

 background-image: $bgHero;

 background-repeat: no-repeat;

 background-size: 700px 1000px;

 background-position: top right;

 font-family: $quicksand;

}

Hasilnya seperti ini

Selanjutnya kita coba custom navbar di atas agar sesuai dengan desain yg diinginkan

Kita pastekan code berikut pada file style.scss

/* Section Heading */

.heading {

 background-color: white;

 box-shadow: 0px -4px 13px 0px rgba(20, 20, 20, 0.7);

}

]

Code diatas akan membuat navbar diatas menjadi warna putih dan memiliki bayangan

Lalu tambahkan lagi code berikut untuk mempercantik tulisan serta button pada navbar diatas

/* Sub Section Heading */

.navbar {

 padding: 15px 0;

 &-brand {

  color: $grass;

  font-family: $lobster;

  font-size: 28px;

  line-height: normal;

  margin-bottom: 5px;

 }

 .btn {

  color: lighten($darkGrey, 8%);

  padding: 6px 20px;

  font-size: 14px;

  &-active {

   color: $grass;

  }

  &-primary {

   background-color: $grass;

   border: 0;

   color: white;

   border-radius: 20px;

   margin-left: 20px;

  }

 }

}

Code berikut akan merubah warna serta jenis font untuk brand name, serta merubah warna dan ukuran font pada bagian menu sebelah kanan

Hasilnya sepertti ini

Lanjut kita buat bagian hero atau bagian section pertama setelah navbar

Silahkan masukan code berikut pada bagian <div class="hero"></div>

Dan tambahkan code berikut pada file style.scss

/* Section Hero */

.hero {

 width: 100%;

 min-height: calc(100vh - 70px);

 display: flex;

 align-items: center;

 justify-content: center;

 &-title {

  font-size: 64px;

  font-family: $oswald;

  color: $green;

  line-height: 1.1;

  margin-bottom: 10px;

 }

 &-sub_title {

  color: $darkGrey;

  margin-bottom: 40px;

  font-size: 16px;

 }

 .btn {

  border: 1px solid $darkblue;

  background-color: transparent;

  color: $darkblue;

  padding: 14px 48px;

  height: auto;

  border-radius: 30px;

 }

}

Pada code diatas kita membuat sebuah section bernama hero dengan tinggi 100vh (viewport height) dikurangi tinggi dari heading / menu (70px), lalu kita tambahkan property flex box untuk membuat content yg berada di dalamnya menjadi center vertical & horizontal. Serta mengganti warna dan ukuran title, sub title & button.

Hasilnya

Bagian atasnya sudah, selanjutnya kita coba buat bagian testimony yang berada dibawah section hero

di bagian ini kita coba membuat sebuah section review dari customer berupa card yang berisi apa yang di reviewnya serta commentnya

Silahkan masukan code berikut setelah code <div class="testimony">

Hasil

Jika kalian sadar pada code berikut saya menggunakan pseudo classes css: before untuk membuat tulisan TESTIMONY yang mengambang dibagian kanan

Itu adalah salah satu best practice setelah background yg ada pada body tadi

Selanjutnya kita coba membuat bagian projects setelah bagian testimony

Pastekan code berikut di dalam code <div class="projects">

Hasil

Lalu, ini bagian paling panjang codenya ya itu berisi list project dari agensi desain ini

Replace code <!-- Masonry Grid --> dengan code berikut :

Hasil

kalau background vas nya ilang jadi putih kenapa ya?

Hasil

Boleh inspect element dan screenshot bagian console?

Next kita masukan code berikut pada bagian <div class="contact-us">

Dan stylenya pada file style.scss

     featureType: "poi",

     elementType: "labels",

     stylers: [{

      visibility: "off"

     }]

    }, {

     featureType: "water",

     elementType: "labels",

     stylers: [{

      visibility: "off"

     }]

    }, {

     featureType: "road",

     elementType: "labels",

     stylers: [{

      visibility: "off"

     }]

    }]

         });

  }

    </script>

Foala, we finish it. Templatenya sudah selesai sesuai dengan desain yang telah di buat

FYI, and it's important! Spectre.css sepertinya mengusung konsep Adaptive Design bukan Responsive Design seperti kebanyakan framework

So sedikit PR untuk kita dan ini bisa menjadi pelajaran tambahan untuk kalian mengembangkan template yang sudah kita buat ini 🙂

Untuk bagian mobile belum saya kembangkan lagi 😄