Mengenal Framework7 App, Framework HTML untuk Membuat Aplikasi Mobile Hybrid

Last Updated on April 18, 2022 by

Framework7 adalah framework HTML gratis dan open-source (sumber terbuka) untuk membangun aplikasi mobile hybrid atau aplikasi web dengan iOS dan Android agar terlihat dan terasa lebih asli (native).

Framework ini juga merupakan alat aplikasi prototipe yang sangat diperlukan untuk menunjukkan prototipe aplikasi yang berfungsi dengan sangat cepat jika diperlukan.

Pendekatan utama dari Framework7 adalah memberikan kesempatan kepada para developer untuk menciptakan aplikasi iOS dan Android dengan HTML, CSS, dan JavaScript dengan lebih mudah dan jelas. Framework7 memberi Anda kebebasan dalam menciptakan aplikasi.

Framework ini tidak membatasi Anda dalam menciptakan aplikasi dan menawarkan berbagai cara atau solusi dari berbagai permasalahan pengembangan.

Dengan rangkaian komponen UI yang menakjubkan yang disediakan Framework7 langsung dari kotaknya, ini memungkinkan untuk membuat aplikasi web, aplikasi web progresif atau Progresive Web App (PWA) dan aplikasi iOS dan Android dengan tampilan dan nuansa asli. Framework7 yang dipasangkan dengan alat tambahan seperti Electron dan NW.js memungkinkan untuk membangun aplikasi desktop asli.

Framework7 merupakan ekosistem yang kaya, karena selain library JavaScript, Framework7 hadir dengan komponen Vue.js, React dan Svelte untuk menghadirkan komponen-sintaksis, data terstruktur, dan pengikatan data dengan kekuatan dan kesederhanaan Vue.js, React atau Svelte.

Fitur-fitur Framework7 App

• Framework7 adalah framework dengan sumber terbuka (open source) dan dapat digunakan secara gratis.
• Framework7 memiliki syntax yang mudah dan mirip dengan jQuery untuk memulai tanpa penundaan.
• Framework7 memiliki pustaka built-in FastClick yang berguna untuk melakukan kontrol terhadap penundaan klik ketika menyentuh UI.
• Framework7 memiliki sistem grid layout built-in untuk mengatur elemen Anda secara responsive.
• Framework dapat secara dinamis memuat halaman dari template melalui flexible router api (router api yang fleksibel).

Kelebihan dan Kekurangan Framework7 App

Kelebihan yang dimiliki oleh Framework7:

1. Lebih mudah mengembangkan aplikasi untuk iOS dan Android.
2. Kurva pembelajaran untuk Framework7 sangat mudah.
3. Framework7 memiliki banyak widget / komponen pre-style.
4. Framework7 memiliki perpustakaan pembantu built-in.
5. Framework7 tidak bergantung pada pustaka pihak ketiga mana pun bahkan untuk manipulasi DOM. Sebaliknya, ia memiliki DOM7 khusus sendiri.
6. Framework7 juga dapat digunakan dengan framework Angular dan React.
7. Anda dapat mulai membuat aplikasi setelah mengetahui HTML, CSS, dan beberapa JavaScript dasar.
8. Framework7 mendukung pengembangan yang lebih cepat melalui Bower.
9. Mudah untuk mengembangkan aplikasi untuk iOS dan Android tanpa mempelajarinya.

Kekurangan Framework7

Namun, Framework7 App tidak kompatibel dengan berbagai platform. Aplikasi ini fokus pada iOS dan desain Google Material untuk membawa pengalaman terbaik dan simple. Aplikasi ini sangat direkomendasi untuk para developer yang familiar dengan dasar-dasar HTML, CSS, dan JavaScript untuk memulai pembuatan aplikasi dengan Framework7.

Dokumentasi yang disediakan oleh Framework7 tidak mencakup proses kompilasi aplikasi Framework7 ke aplikasi Cordova. Dokumentasi yang ada saat ini lebih tentang Framework7 dan bagaimana menggunakan semua komponennya.

Untuk mempelajari lebih lanjut tentang cara menyusun aplikasi Framework7 ke aplikasi Cordova hybrid yang dapat dirilis di iOS dan Google Play store, lihat Dokumentasi Resmi Cordova. Framework7 Kitchen Sink juga merupakan tempat yang tepat untuk memulai, karena memiliki banyak contoh untuk semua komponen Framework7 dan mencakup sebagian besar aspek.

Kekurangan lainnya adalah, dukungan komunitas online untuk kerangka Framework7 kurang dibandingkan dengan iOS dan Android.

Instalasi Framework7 App

Pada artikel ini kami menyajikan cara install Framework7 untuk Anda yang ingin mencoba Framework7. Anda dapat mendownload Framework 7 dengan 2 cara. Pertama dari repositori Github pada link https://github.com/framework7io/framework7. Anda dapat menginstal Framework7 menggunakan Bower. Setelah berhasil menginstal Framework7 Anda ikuti step berikut ini:

1. Instal gulp-cli untuk melakukan pembangunan dan versi dist dari Frameworky dengan menggunakan perintah sebagai berikut:npm install gulp-cliCli disini ditujukan untuk Command Line Utility untuk Gulp.
2. Gulp harus diinstal secara global dengan menggunakan command sebagai berikut:
   npm install –global gulp
3. Selanjutnya install package manajer NodeJS, yang menginstal program node yang membuatnya lebih mudah untuk menentukan dan menghubungkan dependensi. Perintah berikut digunakan untuk menginstal npm.
   npm install
4. Pembangunan versi dari Framework7 yang dapat dibangun dengan command berikut:
   npm build
5. Setelah Anda membangun versi pengembangan Framework7, mulailah membangun aplikasi dari dist / folder dengan menggunakan command berikut.
   npm dist
6. Simpan folder aplikasi Anda di server dan jalankan perintah berikut untuk navigasi antar halaman aplikasi Anda.
   gulp server.

Download Library Framework7 dengan dari CDN

CDN atau Content Delivery Network adalah jaringan server yang dirancang untuk menyajikan file kepada pengguna. Jika Anda menggunakan tautan CDN di halaman web Anda, ini memindahkan tanggung jawab hosting file dari server Anda sendiri ke serangkaian server eksternal.

Ini juga menawarkan keuntungan bahwa jika pengunjung halaman web Anda telah mengunduh salinan Framework7 dari CDN yang sama, itu tidak perlu diunduh ulang. Anda dapat menyertakan file CDN berikut ke dalam dokumen HTML.

CDN berikut digunakan dalam tata letak Aplikasi iOS –

<link rel = “stylesheet”
href = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css” />

Kode berikut ini digunakan untuk menyertakan Framework7 iOS CSS Library ke aplikasi Anda.
<link rel = “stylesheet”
href = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css” />

Kode ini digunakan untuk menyertakan gaya warna terkait Framework7 iOS ke aplikasi Anda.
CDN berikut digunakan di Android / Material App Layout –
<script src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script>

Kode ini digunakan untuk menyertakan pustaka JS Framework7 ke aplikasi Anda.
<script src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css”></script>

Hal ini digunakan untuk menyertakan penataan Material Framework7 ke aplikasi Anda.
Anda menggunakan versi CDN pustaka sepanjang tutorial ini. Kami menggunakan AMPPS (AMPPS adalah tumpukan WAMP, MAMP, dan LAMP dari server Apache, MySQL, MongoDB, PHP, Perl & Python) untuk menjalankan semua contoh berikut:
<!DOCTYPE html>
<html>

<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>

<body>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>

<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>

<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>

<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>

<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

<script>
// here initialize the app
var myApp = new Framework7();

// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;

// Add the view
var mainView = myApp.addView('.view-main', {

// enable the dynamic navbar for this view:
dynamicNavbar: true
});

//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {

//get page data from event data
var page = e.detail.page;

if (page.name === 'blog') {

// you will get below message in alert box when page with data-page attribute is equal to “about”
myApp.alert(‘Here its your About page’);
}
})
</script>
</body>
</html>

Output:

Setelah melakukan beberapa langkah di atas, selanjutnya Anda dapat lakukan langkah-langkah berikut untuk melihat cara kerja kode yang diberikan di atas:

1. Simpan kode HTML di atas sebagai file framework7_environment.html di folder root server Anda.
2. Buka file HTML ini sebagai http: //localhost/framework7_environment.html dan output ditampilkan seperti yang ditunjukkan di bawah ini.
3. Ketika Anda mengklik bilah navigasi, itu akan menampilkan kotak peringatan dengan pesan yang disesuaikan.

Kunjungi Web App di https://appkey.id/ dan jangan lupa nyalakan notifikasi agar tidak ketinggalan informasi terbaru.