Framework7 adalah framework open source dan gretongan untuk mobile HTML untuk perangkat iOS dan Android
Tutorial Framework 7 for Hybrid Mobile Aps – Tutorial Mobile Application. Framework7 adalah framework open source dan gretongan untuk mobile HTML. Ini digunakan untuk mengembangkan aplikasi seluler hybrid atau aplikasi web untuk perangkat iOS dan Android. Tutorial ini akan mengajarkan kepada saya dan Anda Framework7 dasar dan juga akan membawa Anda melalui beberapa konsep yang terperinci.
Framework7 adalah kerangka HTML untuk membangun aplikasi iOS dan Android dan satu dari sekumpulan open source library dan solusi dari iDangero.us yang ditulis oleh Vladimir Kharlampidi.
Ada netizen yang menghabiskan sebagian waktunya untuk mengevaluasi framework7 baru-baru ini dan terkejut saat melihat bahwa sekarang solusi mobile hybrid apps ini sudah mendukung Desain Material dan juga beberapa komponen baru. Jika Anda mencari kerangka aplikasi seluler untuk mulai membuat aplikasi hibrida yang indah dengan cepat, Anda harus mencoba untuk memeriksa solusi framework yang satu ini. Ini tidak bergantung pada kerangka kerja tertentu selain kerangka manipulasi DOM milik sendiri (DOM7), yang seperti versi jQuery yang dioptimalkan untuk seluler. Namun, bisa juga digunakan bersamaan dengan framework lain seperti Angular, React etc jika diinginkan.
Audience
Dalam tutorial mobile application hybrid ini telah dipersiapkan bagi para pemula untuk membantu memahami framework7. Setelah menyelesaikan tutorial ini, Anda akan menemukan diri Anda berada pada tingkat keahlian yang moderat di Framework7 dan dari sini Anda bisa membawa keahlian diri Anda ke tingkat berikutnya.
Prasyarat
Framework7 didasarkan pada bahasa pemrograman HTML5 dan JavaScript, jadi jika Anda memiliki pemahaman dasar tentang pemrograman JavaScript dan HTML5 maka akan menjadi hal yang menyenangkan untuk mempelajari framework7.
Fitur Framework7
- View Management / Navigation Support - view adalah kumpulan halaman dengan navigasi, history dan settingnya sendiri
- Page-level events
myApp.onPageInit('list', function (page) {...})
- Library FastClick built-in untuk menangani klik delay untuk touch UI's
- Mudah, sintaks yang familiar bagi siapa saja yang akrab dengan jQuery untuk memulai dengan cepat
- Framework agnostik - bisa digunakan dengan mesin React, Angular dan engine templating lainnya seperti Handlebars
- Sebagian besar widget / komponen pra-style. Beberapa contoh tercantum di bawah ini tapi lihat aplikasi wastafel dapur mereka untuk iOS dan Android untuk melihat semuanya per platform dengan komponen-komponen berikut ini :
- Search Bar dengan penyaringan internal
- Layar login
- Popups
- Overlays dan pickers
- Master / Detail Split Views
- Panel Samping (kiri / kanan dengan pilihan transisi)
- Browser Foto
- Tampilan pesan teks
- Banyak pilihan Daftar (daftar media, daftar kontak, daftar sortable, daftar virtual)
- Swipeouts (item daftar swipe untuk menghapus dll)
- Akordeon
- Tab
- Preloader (pemintal)
- Tombol Aksi Mengambang
- Kartu-kartu (Cards)
- Chips (Desain Material)
- Formulir Komponen
- Tarik-untuk-refresh
- Built-in Layout Grid system
<div class="row"><div class="col-50">50%</div><div class="col-50">50%</div></div>
- Dapat disesuaikan
- Tema dan skema warna
- Banyak pilihan untuk menangani berbagai skenario dengan mudah (yaitu: menyembunyikan navbars dan toolbar pada scroll dll)
- Fleksibel Router - Load halaman dari template, menggunakan Ajax, inline atau secara dinamis melalui api router yang fleksibel
mainView.router.load({url: 'list.html'});mainView.router.load({template: Template7.templates.listTemplate,context: resp.results});
- Performant
- Animasi dan transisi css berakselerasi hardware
- Lazy loading support
<div data-background="path/to/image.jpg" class="lazy">
- Dukungan daftar virtual
- Menggunakan gulir asli
- HTML dapat dikonfigurasi untuk pemuatan halaman lebih cepat
- Memiliki Style seperti Bootstrap
- API plugin
- Memperluas framework dan membagikannya dengan community. Sudah termasuk banyak plugin berguna yang tercantum di situs mereka seperti layar selamat datang / tutorial, daftar gulir terindeks, Panel 3D, keyboard kustom tambahan dan banyak lagi.
- Ikon - termasuk beberapa icon standart (menu, search), namun Anda bisa menggunakan font atau library ikon apapun seperti Font Awesome atau Ionicons. Lihat template starter di noodl.io untuk contoh penggunaan ikon.
- Dokumentasi bagus, contoh visual, aplikasi pemula dan dukungan forum yang hebat, seringkali oleh pembuat framework7 nya sendiri.
Untuk mempelajari bersama lebih lanjut mengenai framework7, berikut ini point-point yang perlu kita ketahui untuk menguasai framework7 untuk mengembangkan aplikasi mobile hybrid.
- CORE
- Get Started
- Dom7 - Custom DOM Library
- App HTML Layout
- RTL Layout
- Initialize App / App parameters
- Views
- Pages
- Page Callbacks
- NAVIGATION / ROUTER
- API
- Ajax Pages
- Dynamic Pages
- Inline Pages (DOM Cache)
- Linking Between Views
- COMPONENTS
- Accordion / Collapsible
- Autocomplete
- Buttons
- Calendar / Datepicker
- Cards
- Chips / Tags
- Content Block
- Data Table
- Floating Action Button
- FORMS
- Form Elements
- Checkboxes and Radios
- Smart Select
- Disabled Elements
- Form Data
- Form Storage
- Ajax Form Submit
- Infinite Scroll
- Layout Grid
- Lazy Load
- LIST VIEW (TABLE VIEW)
- List View
- Contacts List
- Media List View
- Swipeout
- Sortable List
- Virtual List
- MODALS / OVERLAYS
- Modal
- Popup
- Popover
- Action Sheet
- Login Screen
- Picker Modal
- Messages
- Message Bar
- NAVBARS & TOOLBARS
- Layout types
- Navbar
- Dynamic Navbar
- Sub Navbar
- Toolbar
- Tab Bar
- Hide Bars On Scroll
- Notifications
- Photo Browser
- Picker
- Preloader Indicator
- Progress Bar
- Pull to Refresh
- Search Bar
- Side Panels
- Status Bar overlay
- Swiper Slider
- Tabs
- Timeline
- ICONS
- Icons
- Framework7 Icons Cheatsheet
- STYLING
- Color Themes
- Hairlines
- TEMPLATE7
- Getting Started
- Templates Auto Compilation
- Template7 Pages
- FAST CLICKS
- Fast Clicks
- Active State
- Tap Hold Event (Long Tap)
- Touch Ripple (Material)
- UTILITIES
- Device API
- Support API
- PLUGINS API
- Plugins API
- CUSTOM BUILD
- Custom Build
Untuk lebih memahami point-point di atas, maka silahkan anda terus mengikuti artikel-artikel seputar tutorial framework7. Dengan belajar bersama dan menuliskannya, ini merupakan usaha dalam mengikat ilmu ke dalam ingatan.
Apabila anda merasa bahwa tulisan ini bermanfaat bagi anda, silahkan share artikel ini sebanyak-banyaknya.
Refference :
tutorial mobile app, android app development tutorial, tutorial android development, tutorial ios development, hybrid application
