Kemarin kita semua telah mempelajari sekilas tentang pengenalan mobile programing, kali ini kita akan masuk pada sesi berikutnya yaitu proses instalasi. karena terdapat beberapa opsi instalasi, ada opsi instalasi via terminal dengan bantuan node js dengan cara mengetikkan perintah di terminal npm install framework7. tapi pada langkah kali ini kita akan melakukan instalasi via github saja, agar lebih mudah dan cepat.

teman-teman bisa mengunduh via link https://github.com/framework7io/framework7/releases

Pastikan teman-teman mengunduh file dengan nama Source Code.tar.gz. jika sudah lakukan extract pada file yang sudah du download. kurang lebih akan ada beberap folder dan file seperti dibawah ini 

disana terdapat beberapa versi yang disediakan ada yang menggunakan vue,react dan juga natural javascript. kali ini kita akan menggunakan versi natural javascript sebagai langkah awal untuk memahami alur dari framework7. setelah teman-teman mengunduh file dengan ekstensi tar.gz kemudian lakukan extract file kedalam direktori yang telah disediakan. dalam hal ini kami sarankan untuk menaruh didalam direktori xampp, karena akan berkelanjutan untuk project berikutnya.

penjelasan singkat yang akan kami uraikan dalam hal ini akan menuju pada yang inti saja, agar lebih mempersingkat pembelajaran. didalam direktori utama kita akan membuat sebuah file dengan extensi file html. dalam hal ini kami menyimpan di folder C:\xampp\htdocs\framework7 . berikut listing kode index.html

  
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    
    


      
      

        
        


          
          

            

            

              
Awesome App
            
          

          
          

            

              
              Link 1
              Link 2
            
          

          
          

            
Page content goes here
            
            About app
          
        
      
    
    
    
    
    
  

Seperti yang sudah kita ketahui dalam bahasa HTML terdapat beberapa tag yang nantinya juga akan diterapkan di framework7. yang patut digaris bawahi adalah div dengan id app, bahwasanya id ini akan berhubungan dengan file javascript kita. penamaan ini tidak harus menggunakan kata app, bisa dengan sesuai keinginan teman-teman.

oke selanjutnya pada instalasi file javascript. pada listingan kode index.html diatas, pada baris ke-3 sebelum akhir terdapat sebuah source path/to/my-app.js. perlu diketahui bahwasanya penyimpanan source atau sumber file mengarah langsung pada direktori project kita. dalam hal ini kita akan merubah nya menjadi assets/js/my-app.js hal ini juga berlaku untuk file tambahan lainnya seperti css, bootstrap dll.

berikut listing kode my-app.js.

var app = new Framework7({
  // App root element
  el: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

var mainView = app.views.create('.view-main');

Variable app mewakili semua perintah yang nantinya akan ditampilkan di index.html. dibawahnya terdapat beberapa parameter yang nantinya bisa kita tambahkan seperti Page Stack, Routes Dsb.

sampai pada langkah ini teman-teman sudah berhasil melakukan instalasi Framework7. uuntuk mencoba kita bisa menggunakan browser. maka akan tampil seperti gambar dibawah ini

perlu diketahui untuk mendapatkan tampilan landscape seperti diatas.teman-teman bisa membuka inspect elemen di browser teman-teman, kemudian pilih dan coba dimensi yang cocok .

Sampai disini semoga teman-teman berhasil melakukan instalasi dengan benar.