Variable | React Native
Sun, 29 Oct 2023
Inspirational journeys
Follow the stories of academics and their research expeditions
Install Framework7
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
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Color theme for statusbar (Android only) -->
<meta name="theme-color" content="#2196f3">
<!-- Your app title -->
<title>My App</title>
<!-- Path to Framework7 Library Bundle CSS -->
<link rel="stylesheet" href="path/to/framework7-bundle.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="path/to/my-app.css">
</head>
<body>
<!-- App root element -->
<div id="app">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Initial Page, "data-name" contains page name -->
<div data-name="home" class="page">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Awesome App</div>
</div>
</div>
<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<!-- Toolbar links -->
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
</div>
</div>
<!-- Scrollable page content -->
<div class="page-content">
<p>Page content goes here</p>
<!-- Link to another page -->
<a href="/about/">About app</a>
</div>
</div>
</div>
</div>
<!-- Path to Framework7 Library Bundle JS-->
<script type="text/javascript" src="path/to/framework7-bundle.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="path/to/my-app.js"></script>
</body>
</html>
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.
Tags:
framework7 tutorial frmaework7 crud framework7 install framework7 bahasa framework7 bahasa indonesia0 Comments
Categories
Recent posts
Type Data | React Native
Mon, 16 Oct 2023
Value & Variable Dart
Mon, 09 Oct 2023
Leave a comment