Wednesday, November 5, 2014

Polymer JS - Hello World Tutorial 1

Belajar mengenai Polymer JS Cara mudah untuk membuat WebCommponent.

Jadi PolymerJS ini merupakan Framework yang di desain untuk membantu developer web, dalam membangun Component tersendiri. Component yang dapat di include-kan dalam page yang ia inginkan.

Untuk kali ini kita akan mencoba melakukan percobaan untuk membuat component hello-world menggunakan polymer Js.

Adapun requirement yang di butuhkan untuk membangun applikasi kita kali ini adalah :
  • Polymer JS
  • Web Server (xampp(Apache), node js, wampp, dll) kali ini saya menggunakan xampp.
  • Text Editor (Notepad++, Netbeans, Sublime, dll) kali ini saya menggunakan Notepad++.
  1. Langkah Pertama karena saya menggunakan web server xampp maka. masuk ke direktori xampp kemudian htdocs. kebetulan direktori saya seperti ini "C:\xampp\htdocs\". di dalam direktori htdocs buat direktori baru (nama aplikasi) misal hello-polymer sehingga direktori menjadi "C:\xampp\htdocs\hello-polymer".
  2. Selanjutnya download package polymerJS dan extract kedalam direktory hello-polymer.
  3. Setelah direktory sesuai seperti gambar di atas, maka kita bisa membuat component sendiri. buat direktori baru setara dengan bower_components dengan nama folder components selanjutnya buat file hello-world.html di dalam folder components.
    
     
     
    
    
    
    

    Susunan direktori sebagai berikut.
  4. Kemudian buat file index.html di dalam folder hello-polymer. File ini yang nantinya akan kita gunakan untuk memanggil component hello-world yang sudah kita buat.
    
    
     Polymer JS Hello
     
     
     
    
    
     
    
    
    
  5. Susunan Folder akhir akan seperti ini:
    -- xampp
        -- htdocs
            -- hello-polymer
                -- bower-components
                     -- core-component-page
                     -- polymer
                     -- webcomponentsjs
                -- components
                     -- hello-world.html
                -- index.html
    
    
  6. Selanjutnya jalankan web server anda untuk xampp.
  7. Langkah terakhir akses melalui web browser "localhost/hello-polymer"
Sekian tutorial singkat dari saya Saiful Arifin semoga bermanfaat. disini saya lampirkan video dari Joe Maddalone yang kurang lebih hampir sama seperti yang saya tuliskan. 



2 comments:

  1. Tutorial yang sangat membantu mas, klo mau tanya bagaimana ya caranya hosting ke server cpanel utk polymer ini mas? terimakasih

    ReplyDelete
    Replies
    1. maaf mas ini artikel udah lama :( untuk sekarang polymer sudah versi 1.x.x dan syntax-nya berbeda dengan polymer yang versi 0.5 di atas.

      untuk hosting ke cpanel polymer tidak membutuhkan installasi apapun, tinggal upload project + library polymernya ke Cpanel sudah run.

      Delete