Showing posts with label Google. Show all posts
Showing posts with label Google. Show all posts

Tuesday, December 18, 2018

Firebase: Verify ID Token with Admin SDK in Java Backend Server

Halo geeks,

Kali ini saya akan membahas tentang implementasi Admin SDK - Verify ID Token untuk memeriksa apakah token yang dikirim oleh client app(android/iOS) sesuai dengan yang di-generate oleh Firebase atau telah dimanipulasi dari sisi client app.


PENGENALAN

Sebagai contoh, pada penerapan Google Sign-In pada client app, client app akan mengirimkan request menggunakan akun Gmail ke Firebase, yang kemudian client app mengambil ID Token yang berisi data terkait akun yang berhasil masuk dari GoogleSignInAccount objek, info pada ID Token ini yang kemudian akan diperiksa di backend server. 

Pada sisi client app, akan mengirim ID Token ke backend server melalui HTTPS POST request.
Untuk memastikan bahwa Token sesuai, dapat dipastikan dari beberapa poin ini:
  • ID Token memiliki signature yang diberikan oleh Google yang dapat diperiksa menggunakan Google Public Key (JWK atau PEM format).
  • aud pada ID Token harus sama dengan Project ID.
  • iss pada ID Token harus https://securetoken.google.com/<projectId> dimana <projectId> harus sama dengan aud
Pada sisi backend server, ID Token yang diterima akan diperiksa keasliannya dan mengambil uid dari token tersebut untuk mengidentifikasi user yang sedang mengakses aplikasi.

IMPLEMENTASI

Sebelum memulai, kita harus memiliki service account di firebase.

MENAMBAHKAN FIREBASE KE APLIKASI

Untuk menggunakan admin SDK, kita harus membuat Firebase Project terlebih dahulu yang akan digunakan untuk terhubung ke Firebase Service, dan file konfigurasi yang berisi credential akun project yang berformat JSON.
  1. Tambah Project baru di firebase jika belum ada, melalui halaman Firebase Console.
  2. Setelah berhasil menambahkan project baru, masuk halaman Service Account.
  3. Klik tombol Generate New Private Key pada bagian bawah Firebase Admin SDK.
Anda akan menerima file JSON yang berisi credential akun.


MENAMBAHKAN SDK

Tambahkan libary ke java backend server pada file pom.xml
<dependency>
  <groupId>com.google.firebase</groupId>
  <artifactId>firebase-admin</artifactId>
  <version>6.6.0</version>
</dependency>

INISIALISASI SDK

Pada bagian ini kita akan menginisialiasi SDK yang terdapat file JSON yang telah berhasil kita download dari firebase.

FileInputStream serviceAccount = new FileInputStream("path/to/serviceAccountKey.json");
FirebaseOptions options = new FirebaseOptions.Builder()
    .setCredentials(GoogleCredentials.fromStream(serviceAccount))
    .setDatabaseUrl("https://<DATABASE_NAME>.firebaseio.com/")
    .build();
FirebaseApp.initializeApp(options);
Note: database_name disesuaikan database yang pada Firebase Project.

VERIFIKASI ID TOKEN

Untuk memeriksa token dari akun yang sedang mengakses aplikasi, kita dapat menggunakan method verifyIdToken()yang telah tersedia di Admin SDK.
FirebaseToken decodedToken = FirebaseAuth.getInstance().verifyIdToken(idToken);
String uid = decodedToken.getUid();
untuk memeriksa ID Token, dibutuhkan project ID yang didapat dari field project_id pada file JSON tadi.

TAMBAHAN

Contoh file JSON yang berisik credential project pada firebase
json-firebase-credential

Contoh ID Token(JWT) yang diterima backend server dari clien app
{
 // These six fields are included in all Google ID Tokens.
 "iss": "https://accounts.google.com",
 "sub": "110169484474386276334",
 "azp": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
 "aud": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
 "iat": "1433978353",
 "exp": "1433981953",

 // These seven fields are only included when the user has granted the "profile" and
 // "email" OAuth scopes to the application.
 "email": "testuser@gmail.com",
 "email_verified": "true",
 "name" : "Test User",
 "picture": "https://lh4.googleusercontent.com/-kYgzyAWpZzJ/ABCDEFGHI/AAAJKLMNOP/tIXL9Ir44LE/s99-c/photo.jpg",
 "given_name": "Test",
 "family_name": "User",
 "locale": "en"
}

KESIMPULAN

Kita perlu melakukan verifikasi ID Token untuk memastikan bahwa user yang sedang mengakses aplikasi memang merupakan user yang asli/sah sehingga terhindar dari mallicious-ware yang dapat mencuri informasi dan menyebabkan kerugian baik sisi user maupun aplikasi.


Untuk kesalahan penulisan maupun pemahaman/konsep dapat ditambahkan pada kolom komentar.

Terimakasih.

sumber: firebase, google

Sunday, September 9, 2018

Dart Language


Kembali lagi dengan saya Rizky Romadon (Madon)  ,  kali ini saya akan sedikit membahas tentang bahasa pemrogramman Dart. Apasih Dart itu ? Dart adalah bahasa pemrogramman tujuan umum yang awalanya dikembangkan oleh Google dan kemudian disetujui standart oleh Ecma. ini digunakan untuk membangun web , server dan aplikasi seluler 

Kenapa Dart ?
Developer di Google dan ditempat lain menggunakan Dart untuk membuat Aplikasi berkualitas tinggi untuk iOS, Android dan Web dengan fitur yang ditujukan pengembangan pada sisi Client .Dart sangat cocok untuk aplikasi Web dan Mobile

Productive
Syntax Dart ringkas dan jelas dan memiliki inti library dan ribuan package ecosystem

Fast
Dart menyediakan optimaze complie untuk meningkatkan kinerja pada mobile maupun web

Portable
Dart dapat berjalan secara native di iOS , android dan seterusnya. Untuk web apps dart di transpiles ke javascript

Approchable
Dart dapat dengan mudah dipelajari bagi Developer yang sudah familiar dengan OOP.  Jika developer sudah tau tentang C#  , C++ ataupun Java . Dart dapat mudah dipahami dalam hitungan hari.

Two-way problem
Dart Tools dapat melaporkan dua jenis masalah: peringatan dan kesalahan. Peringatan hanyalah indikasi bahwa kode Anda mungkin tidak berfungsi, tetapi mereka tidak mencegah program Anda dieksekusi. Kesalahan dapat berupa waktu-kompilasi atau run-time. Kesalahan waktu kompilasi mencegah kode dari mengeksekusi sama sekali; hasil kesalahan run-time dalam pengecualian yang dibangkitkan saat kode dijalankan.

Platform :
  1. Flutter
    Aplikasi iOS dan android jika ingin menggunakan Dart harus menggunakan Flutter. di desain untuk membangun UI pada aplikasi mobile
  2. Web
    Angular dart digunakan untuk front end. Dart dapat di compile ke dalam javascript sehingga browser dapat menjalankannya
  3. Server
    Dart juga dapat digunakan untuk membangun backend , framework yang bisa dipakai yaitu Express

Instalation :
  • $ brew tap dart-lang/dart
  • $ brew install dart
Fyi, Di dalam SDK Dart sudah terdapat Library yaitu : 
  • Dart
  • Dart2Js
  • DartAnalyzer
  • DartDevc
  • DartDoc
  • DartTmt
  • Pub
Setelah selesai instalasi kita coba membuat file dengan extention dart seperti dibawah ini : 


test.dart


lalu panggil dengan cara command dart "nama file". terlihat text yang kita print di console.

Oke , setelah berhasil print console menggunakan dart selanjutnya kita akan membuat simple REST api menggunakan Aqueduct. Apasih Aqueduct itu ? Aqueduct itu ada sebuah framework open source untuk membuat REST full api mirip seperti Express dan Hapi. Langsung saja kita coba ..

Install menggunakan :
$ pub global activate aqueduct

Lalu kita move to working directory kita buat project dengan command :
$ aqueduct create heroes && cd heroes

setelah project kita selesai dibuat kita buka menggunakan WebStrom , dibawah ini adalah contoh controller dari project yang kita buat tadi

sekarang waktuya kita jalankan aplikasi dengan $ dart bin/main.dart 
setelah berhasil dijalankan mari kita test api kita dengan cara excute http:localhost:8888/example
Nah cukup mudah kan , oke sekian dari saya tentang dart language selamat mencoba dan berkarya menggunakan dart. Terima Kasih  ..


Saturday, June 30, 2018

Jembatani Usaha SEO mu dengan Google Webmaster Tools

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

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


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

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

Fungsi fungsi utama Google Webmaster Tools dibawah ini adalah :

  1. Trafik Pencarian ? Pada menu pertama ini trafik dalam pencarian ini terdapat beberapa subMenu yaitu : Search Queries, Links to Your Site, Internal Links, Manual Actions, International Targeting, Mobile Usability. Dari menu ini kita bisa mengetahui Traffik yang datang ke website kita melalui link yang mana. Kemudian Link mana saja yang mengarah ke website kita atau artikel kita, baik itu internal link ataupun dari luar. Selain itu kita juga bisa melihat performance website kita ketika dibuka dari Desktop atau Smartphone. Apakah ada bagian yang eror.
  2. Index Google ? Ya namanya juga index google dari produk google itu sendiri jadi sudah terlihat cukup jelas, pada menu google Index ini ada beberapa menu yaitu : Index Status, Content Keywords, Blocked Resources dan Remove URLs. Menu-menu ini sangat penting perananya untuk mengatur link yang ada di direktory google. Sehingga jika ada yang hendak kita delet atau kita hapus link nya dari google, kita menggunakan menu ini. Terdapat menu Remuve URLs.

    Perlu di ingat yang terpentik agar terindex dengan google dengan cepat dan tepat hindari Content Keywords yang berlebihan sehingga situs anda tidak terindikasi sebagai SPAM atau di flag sebagai SAMPAH.
  3. Crawl ? Ini juga sangat penting menu di dalamnya adalah : Crawl Errors, Crawl Stats, Fetch as Google, robots.txt, Tester, Sitemaps, URL Parameters. Dari Menu Crawl Erorr kita bisa menghapus link-link erorr yang sudah pernah kita masukkan di google. Patikan semua menu tersebut anda cek dan tidak ada erorr nya. Jika ada erorr, maka segeralah memperbaikinya agar web/blog anda mudah terindex google kembali. Pastikan juga bahwa anda men-Submit Sitemap.XML anda.
  4. Kemunculan Pencarian ? Point - point yang dapat kita gunakan melalui menu ini. Yang pertama Struktur Data. Struktur data ini terdiri dari : Hentry (author, entry-title, updated), Review, WebSite, Person,  AggregateRating, hcard. Untuk melihat lebih jelasnya silahkan masuk ke google webmaster tools. Jika ada kesalahan, cepat memperbaikinya agar web/blog anda tetap dalam keadaan sehat dan baik
Nah setelah anda memahami fungsi dasar dari tools SEO dari google yang gratis ini maka saatnya kita lompat ke prosedur penggunaan GWT.

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








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

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


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

.

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

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

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

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







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

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

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

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


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


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

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

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

Thursday, December 8, 2016

Implementasi Firebase Storage dan Firebase Realtime Database pada Platform Android

Setelah sebelumnya blog ini membahas Firebase Auth pada platform Android, kali ini Nostra akan membahas tentang fitur-fitur lain milik Firebase, yaitu Firebase Real-time Database dan Firebase Storage. Sama seperti Firebase Auth, untuk mengimplementasikan Firebase Real-time Database dan Firebase Storage, pertama-tama kita harus melakukan beberapa konfigurasi terlebih dahulu, seperti konfigurasi google-services.json melalui Firebase Console dan build.gradle melalui android studio, seperti pada gambar di bawah.



Mengapa Nostra menggabungkan kedua fitur tersebut dalam satu postingan blog? Karena dua hal tersebut memiliki sejumlah kemiripan, sehingga "Sekali mendayung, dua tiga pulau terlampaui". Pertama-tama kami akan bahas apa sih sebenarnya Firebase Storage itu? dan apa sih Firebase Real-time Database itu?

Firebase Real-time Database
Firebase Real-time Database merupakan sebuah fitur yang merupakan andalan Firebase ketika awal ia dikenalkan kepada publik, tapi semua berubah ketika Firebase diakuisisi oleh Google. Meskipun telah di akuisisi oleh Google, fitur real-time database ini tetap menjadi salah satu fitur kuat pada Firebase, dimana perubahan pada database bisa langsung didapatkan oleh seluruh perangkat yang terhubung pada database tersebut. Ohiya sebelum membahas lebih dalam lagi, real-time database ini merupakan sebuah database dengan paradigma NoSQL, dimana data disimpan dalam format JSON.

Jadi bagaimana implementasi Firebase Real-time Database ini dilakukan? Pada dasarnya konsep dari Firebase adalah pemrograman secara reaktif, dimana perangkat akan terdapat listener untuk setiap node dari database, sehingga setiap ada perubahan pada node tersebut maka perangkat akan langsung mendapatkan perubahan tersebut.

Lalu bagaimana "mendengarkan" perubahan-perubahan tersebut? Secara umum Firebase telah menyediakan dua metode untuk "mendengarkan", yaitu ValueEventListener dan ChildEventListener yang dapat kita implementasi sesuai dengan kebutuhan, baik untuk Web, iOS, Android, bahkan Server.

Secara sederhana, implementasi Firebase Real-time Storage dapat dilakukan seperti pada gambar di bawah, di mana pada onStart dilakukan inisiasi listener pada node yang akan "didengarkan".


Dengan menggunakan kode di atas, maka aplikasi kita akan selalu "mendengarkan" perubahan yang terjadi pada node yang dituju oleh mPostReference (berupa DatabaseReference). Pada method onDataChange kita dapat mendefinisikan tindakan-tindakan apa saja yang akan dilakukan ketika data pada node tersebut mengalami perubahan. Selain memasang listener pada suatu node di Firebase Real-time Database, kita juga dapat melepas listener tersebut dengan cara seperti pada gambar berikut.


Firebase Storage
Firebase Storage adalah fitur pada Firebase menyimpan file dan user-generated content di cloud dan menggunakan teknologi yang sama dengan Google Cloud Storage. Selain menggunakan teknologi yang sama dengan Google Cloud Storage, Firebase Storage juga terintegrasi dengan Google Cloud Platform

Bagaimana cara menggunakan Firebase Storage ini? Sama seperti Firebase Real-time Database, Firebase Storage juga menggunakan mekanisme reference yang berupa StorageReference, di mana pada contoh ini reference tersebut diberi nama mStorageRef. Pada reference tersebut, kita dapat mengunggah, mengunduh, maupun menghapus file di lokasi tersebut.

Untuk mengunggah ke dalam Firebase Storage dapat dilakukan seperti contoh pada gambar berikut.


Sedangkan untuk mengunduh file dari Firebase Storage dapat dilakukan seperti pada gambar berikut.




Well, secara sederhana kita sudah bisa mengimplementasikan Firebase Storage dan Firebase Real-time Database pada aplikasi Android yang kita kembangkan. So, apa saja kesamaan antara Firebase Storage dan Firebase Real-time Database yang Nostra maksudkan? Seperti yang telah disinggung pada pembahasan Firebase Storage, kesamaan pertama dari kedua fitur ini adalah mereka sama-sama menggunakan konsep reference untuk menunjukkan path dari node (pada database) ataupun folder (pada storage).

Terus kesamaan selanjutnya apa? 
Kesamaan kedua adalah mereka mengimplementasikan mekanisme keamanan yang sama, yaitu Firebase Security Rules. Firebase Security Rules itu sendiri merupakan mekanisme khusus pada Firebase, dimana developers dapat mendefinisikan berbagai aturan pada Firebase Real-time Database dan Firebase Storage. Secara sederhana, Firebase Security Rules dapat kita implementasikan untuk mengamankan path (seperti membatasi akses berdasarkan user id), hingga melakukan validasi terhadap data/file yang dilemparkan ke Firebase. Secara konsep, Firebase Real-time Database dan Firebase Storage memiliki konsep Firebase Security Rules yang sama, namun kedua hal tersebut memiliki perbedaan khususnya pada segi syntaxes.

Bagaimana melakukan konfigurasi Firebase Security Rules tersebut?
Konfigurasi rules dapat dilakukan melalui Firebase Console, dimana kita memasuki halaman masing-masing fitur pada console dan kemudian memilih rules untuk kemudian melakukan berbagai konfigurasi yang diperlukan.

Demikian isi tulisan kali ini, semoga dapat membantu memahami konsep dan implementasi sederhana dari Firebase Storage dan Firebase Real-time Database, serta menambah wawasan tentang Firebase secara umum.

See you around.


Sumber referensi:
1. http://stackoverflow.com/questions/30564735/android-firebase-simply-get-one-child-objects-data
2. https://github.com/firebase/quickstart-android

Tuesday, March 15, 2016

Materialize Part I

Pada kesempatan kali ini saya akan membahas mengenai Materialize. Materialize merupakan salah satu dari product google. Materialize merupakan responsive front-end framework yang menggunakan Material Design sebagai dasarnya.

Material Design sendiri merupakan dasar design yang di berikan google sebagai acuan dalam membuat sebuah visualisasi yang memiliki dasar- dasar design. 

Apabila kita pernah mencoba membuat android project, maka google juga memberikan atribut- atribut untuk mendukung material design yang diusung oleh google.

Materialize sendiri memiliki fungsi yang mirip seperti boostrap. Ke dua framework tersebut memiliki atribut- atribut yang memiliki UX yang kaya dan mudah di aplikasikan. Mengapa saya membahas materialize? Karena menurut saya pribadi materialize memiliki memiliki atribut- atribut yang lebih cantik di banding beberapa framework lain.

Setelah pembicaraan di atas, mari kita mulai mencoba menggunakan Materialize.
apabila memiliki bower dapat langsung run command : bower install materialize





Atau dapat mendownloadnya dari : http://materializecss.com/getting-started.html

Berikutnya saya akan memperlihatkan atribut- atribut yang mudah dibuat menggunakan materialize :
  1. Wave
    Merasa repot menambahkan efek kepada button yang akan di klik? Materialize menyiapkan wave effect untuk membuat button terlihat interaktif ketika di klik. hanya perlu menambahkan class  : waves-effect dan effect type seperti waves-light atau  waves-teal.
    <a class="waves-effect waves-light btn-large" href="#">Wave</a>
    
    
  2. Floating Button
    Seperti halnya floating button yang bisa di temukan pada android material view. Materialize menyediakan floating button untuk digunakan dalam web view.
    <a class="btn-floating btn-large waves-effect waves-light red">
      <i class="material-icons">add</i>
    </a>
    
    
  3. Horizontal Fixed Floating Button
    Chips merupakan sebuah tempat kecil yang bisa memberikan informasi kita. Lebih cocok untuk digunakan sebagai list contact atau label.
      <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-large red">
          <i class="large material-icons">mode_edit</i>
        </a>
        <ul>
          <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
          <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
          <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
          <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
        </ul>
      </div>

  4.  Chips
    Chips merupakan sebuah tempat kecil yang bisa memberikan informasi kita. Lebih cocok untuk digunakan sebagai list contact atau label.
    <div class="class="chip waves-effect waves-light"">
        <img src="images/cutecat.jpg">
        Cute Cat
    </div>
    <div class="chip pink yellow accent-2">
        Tag
        <i class="material-icons mdi-navigation-close"></i>
    </div>


Dan masih banyak sekali atribut- atribut menarik yang disediakan oleh materialize.
Atribut lain dapat dilihat pada http://materializecss.com/
Sekian dulu untuk blog kali ini. Happy eksploring~