Instalasi Framework 7 Untuk Pemula Bahasa Indonesia

Instalasi Framework 7

Sebelum memulai proses instalasi framework7, ada baiknya kita bahas terlebih dahulu tentang framework7 itu sendiri. Karena mungkin sebagian orang masih asing tentang framework7, saya sendiri mengetahui framework7 ketika sedang mengerjakan skripsi di tahun 2019, modal belajar dari dosen dan minimnya pembahasan di internet. Sobat semua bisa melihat dokumentasi dari frawework7 di website resminya : https://framework7.io/. Mari kita belajar bersama- sama.

Apa itu Framework7?

Framework7 adalah UI framework yang menanggani masalah user interface pada aplikasi android atau mobile. Framework7 tergolong dalam teknologi mobile programing hybrid, seperti halnya dengan Ionic, jQuery Mobile, Onsen UI dan lain sebagainya. Aplikasi Android Jenis Hybrid memanfaatkan penggunaan teknologi berbasis web pada kategori Client Side (bukan Server Side) artinya Android jenis ini dibangun dengan menggabungkan dari bahasa scripting dan bahasa pemrograman antara lain HTML, CSS dan Javascript.

Karena Framework7 termasuk hybrid maka membutuhkan Java Development Kit (JDK), Android Software Development Kit (Android SDK), Gradle dan Native Container.

Software yang dibutuhkan di Framework7

Framework7 merupakan salah satu UI framework yang memiliki fitur terlengkap dibandingkan framework mobile lainnya. Selain itu Framework7 memiliki kemudahan dalam penggunaan dalam proses pengembangan.

Saat artikel ini diterbitkan, saya menggunakan framework7 versi 5 keatas yaitu versi 6. Ada beberapa perbedaan antara versi diatas 5 dan versi dibawah 5, yaitu :

Versi 5 Framework7 versi 5 memiliki Engine dan Code Sample diletakkan secara utuh dalam sebuah project sehingga jika kita ingin mendownload sample projectnya cukup mendownload file zip seperti biasa dan melakukan konfigurasi dasar sebelum projectnya dijalankan pada web server.

Versi > 5 Berbeda dengan Framework7 versi 5, untuk versi diatas 5 (versi 6) Engine dan Code Sample diletakkan secara terpisah sehingga jika kita ingin mendownload sample projectnya secara utuh maka kita harus mendownload Engine secara terpisah menggunakan Node Package Manager (NPM) melalui Pemrograman Interaktif dan Code sample secara terpisah yang kemudian digabungkan serta dikonfigurasi dasar sebelum projectnya dijalankan pada web server.

Berikut software yang dibutuhkan untuk instalasi framework7 antara lain:

Winrar atau sejenisnya (Winzip, Peazip, KGB Archieve, dll)
Visual Studio Code atau sejenisnya (Sublime, Atom, Notepad++, dll)
Windows Command Prompt atau sejenisnya (Bash, PowerShell, Terminal, dll)
Web Server Apache bundling Xampp atau sejenisnya (USB Webserver, Wamp Server, Laragon, dll)
Google Chrome atau sejenisnya (Mozilla Firefox, Opera, UC Browser, dll)
NodeJS

Konfigurasi Pemgrograman Android pada Browser

Sebelum lanjut ke proses, sobat mesti setting konfigurasi browser terlebih dahulu yang mana browser disini kita gunakan sebagai tempat uji coba program android sebelum di compile menjadi apk. Disini saya memakai browser Chrome. Langkah – langkahnya sebagai berikut :

Buka Google Chrome (usahakan versi diatas 70)
Masuk mode Development dengan cara tekan tombol F12 atau klik kanan – pilih opsi Inspect.
Jika langkah no 2 berhasil, maka akan menghasilkan tampilan dibawah ini.

Tampilan Chrome
Langkah berikutnya adalah masuk mode Mobile dengan cara tekan tombol berlogo Smartphone pada lokasi sebelah kiri dari tab Elements.
Konfigurasi Tampilan Android

Kotak warna merah pada gambar diatas merupakan tombol yang digunakan untuk beralih ke mode tampilan web atau tampilan mobile. Sedangkan kotak warna merah satunya merupakan pilihan dari beberapa merk Smartphone (berhubungan dengan dimensi layar).
Dalam Mode Development terdapat beberapa tab yang penting digunakan antara lain:

Elements Pada bagian ini menampilkan syntax dari sebuah halaman yang sedang ditampilkan
Tab Elements
Console Pada bagian ini menampilkan keterangan kesalahan pada syntax atau menampilkan string yang memang sengaja ditampilkan di bagian ini (console.log).
Tab Console
Network Pada bagian ini menampilkan aktivitas yang berhubungan dengan jaringan (bisa mendeteksi kesalahan dalam jaringan). Jaringan yang dimaksud disini adalah penggunaan Application Programming Interface (API).
Tab Network

Pada bagian ini pula ada item yang perlu dikonfigurasi yaitu aktifkan fitur Disable Cache
Application Pada bagian ini menampilkan aktivitas tentang Web Storage (Penyimpanan Lokal).
Tab Aplication

Download Framework7

Seperti yang sudah dibahas diatas cara mendownload framework 7 ada beberapa perbedaan antara versi 5 dan versi diatas 5. Untuk framework 7 versi di bawah 5 sobat bisa download di github resminya yaitu : Link download framework7

lebih lengkapnya sobat bisa mengunjungi documentasi resmi di situs framework7.

Sedangkan framework7 versi 6 atau diatas 5 sobat bisa mengikuti langkah dibawah ini.

Cara Instalasi Framework7

Setelah selesai mengkonfigurasi Google Chrome, maka kita dapat mulai melakukan instalasi framework 7. Tutorial ini menggunkan versi 6. Langkah- langkahnya sebagai berikut :

Dikarenakan Framework7 versi 6 antara Engine dan Code Sample diletakkan secara terpisah, maka kita harus mendownloadnya masing-masing. Pada langkah awal ini kita akan mencoba mendownload Code Samplenya terlebih dahulu.
Buka link KLIK LINK kemudian download yang berekstensi zip.
Github Link Framework7
Kemudian extract file tersebut sehingga terbuat sebuah folder framework7-6.3.1. Didalam folder tersebut memiliki struktur sebagai berikut
Framework7 File
Silahkan membuat folder yang bernama f7_master pada folder htdocs, www atau folder lain sesuai dengan Server Package (Xampp, USBWebserver, dll) yang digunakan
Copy seluruh isi yang ada di framework7-6.3.1\kitchen-sink\core ke folder htdocs\f7_master
Langkah berikutnya adalah mendownload Engine Framework7. Untuk mendownload Engine Framework7 versi 6 ini tidak dilakukan seperti cara download versi sebelumnya akan tetapi menggunakan Pemrograman Interaktif melalui Node Package Manager (NPM) milik NodeJS.
Silahkan install NodeJS minimal versi 12. Jika sebelumnya nodeJS telah terinstall, maka lewati langkah ini.
Silahkan membuat folder yang bernama f7e di drive D
Silahkan buka Command Prompt dan ketikkan perintah d: seperti gambar berikut
Perintah di Command Prompt
Kemudian ketikkan perintah cd f7e
Perintah Pilih folder di Commad Prompt
Langkah berikutnya adalah mendownload Engine Framework7 menggunakan NPM. Ketikkan perintah npm install framework7 seperti gambar berikut
Instalasi Framework7
Jika tampilan yang muncul seperti gambar dilangkah 11, maka download Engine Framework7 berhasil dilakukan.
Langkah berikutnya copy folder framework7 yang ada di D:\f7e\node_modules ke htdocs\f7_master
Jika langkah ke 13 telah selesai dilakukan maka rename folder framework7 yang ada di htdocs\f7_master menjadi core
Langkah berikutnya adalah melakukan konfigurasi dasar path yang ada di file index.html. Gunakan Script Editor untuk merealisasikannya. Ubah syntax yang ada di baris 13 sebagai berikut
Konfigurasi dasar framework7
Kemudian ubah syntax yang ada di baris 107 sebagai berikut
path framework7
Jika langkah 15 dan 16 telah selesai dilakukan, maka saat dijalankan pada Google Chrome akan muncul seperi ini. Ketikkan localhost\f7_master (dengan catatan Service Apache Sudah dijalankan)
Tampilan framework7
Jika telah sesuai dengan gambar pada langkah 17, maka instalasi Framework7 versi 6.3.1 berhasil dilakukan.

Sekian belajar bersama kali ini, jika sobat ada yang ditanyakan bisa tinggalkan di kolom komentar nanti kita akan bahas sama - sama ....