Cara membuat aplikasi android dengan cordova dan framework7 Part 3 - Selamat pagi teman-teman ku, hari ini kita masih akan melanjutkan proses pembuatan aplikasi android dengan cordova x framework7. Setelah kita bisa membuild aplikasi dalam bentuk apk dan bundle agar bisa di install dalam virtual device maupun device android secara langsung yang telah kita pelajari dalam part sebelumnya. Kali ini kita akan mencoba untuk memasukan komponen-komponen yang kecil-kecil tapi perlu contohnya seperti assets. Baiklah yuk langsung saja.
Sebelum menambahkan assets dalam aplikasi, kita perlu untuk menambahkan icon terlebih dahulu karena kalau tidak icon aplikasi yang kita build akan diberikan gambar default dari cordova. kira-kira seperti dibawah ini.
Baca juga : Cara membuat aplikasi android dengan cordova dan framework7 Part 2 - build android, create keystore
Change Icon
Kali ini kita akan mencoba mnggantinya dengan gambar yang sudah kita buat di canva. Jangan lupa untuk menjernihkannya melalui aplikasi remini, hilangkan background melalui remove bg online, lalu mengompress ukurannya melalui tinypng.
- masukan asset dalam direktori root > res > icon.png
- insert kode <icon src="res/icon.png"/> dalam file config.xml
- cordova build android (di root untuk build ulang apk nya)
Lebih jelasnya silakan perhatikan gambar dibawah ini. Oya kamu juga bisa mengganti setiap deskripsi sesuai kebutuhanmu seperti dalam tag <description> <author> .
Untuk perubahannya silakan perhatikan gambar dibawah ini, saya menggunakan icon dengan kombinasi warna hitam dan #A435F0.
Insert Assets
Selanjutnya kita akan mencoba untuk menginsert assets image untuk bisa dipanggil dalam file vue yang nantinya akan sebagai page. Disini saya membuat satu page bernama splash-screen.vue sebagai tampilan awal ketika membuka aplikasi, saya juga bedakan direktorinya dari direktori default yang ada dalam root/src/assets/vue/pages.
- buat direktori uc di root/src/assets/vue/uc
- buat file splash-screen.vue dalam uc (first page on flow)
- buat file main-page.vue dalam uc (show after first page)
// splash-screen.vue
<template>
<f7-page @page:init='initPage()'>
<div class='icon' @click='$f7router.navigate("/main-page/", { transition: "f7-flip" })'>
<img src='static/icon.png'>
</div>
</f7-page>
</template>
<script>
let self
export default {
components: {},
created(){
self = this
},
methods: {
initPage(){
setTimeout(function(){
self.$f7.views.main.router.navigate('/main-page/', { transition: 'f7-circle' })
}, 500)
},
}
};
</script>
<style scoped>
.icon{
position: relative;
height: 100%;
background-color: #EDEDEB;
}
.icon img{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 26px;
}
</style>// main-page.vue
<template>
<f7-page>
<f7-navbar class='main-navbar'>
<f7-nav-left>
<img class='main-icon' src='static/icon.png'>
</f7-nav-left>
</f7-navbar>
</f7-page>
</template>
<script>
</script>
<style scoped>
.main-icon{
height: 35px;
margin-left: 5px;
border-radius: 100%;
background: white;
}
</style>
<style>
.main-navbar .navbar-bg{
background: #A435F0 !important;
}
</style>kira-kira seperti diatas coding untuk masing-masing filenya. Dalam coding bisa dilihat ada kode untuk menampilkan image <img class='main-icon' src='static/icon.png'>.
- Letakan assets file dalam root/src/static
Dalam template framework7 yang kita gunakan dalam cordova ini, setiap file yang akan kita insert harus dimasukan dalam direktori static yang lengkapnya seperti ini root/src/static yang setelah dibuild baik dalam web atau android akan masuk dalam root/www/static. Harus dari src karena jika langsung ke dalam www file tersebut akan langsung terhapus.
Routing
Berhubung diatas kita membuat 2 file maka dibutuhkan router path untuk menghubungkannya yang bisa kita buat dalam routes.js. Oya karena path awal dalam sebuah domain ada '/' maka kalian harus targetkan file untuk first page kalian di path tersebut. Jika kalian buka routes.js pertama kali dari template framework yang sekarang digunakan maka path '/' akan mengarah pada file home.vue
- Buka file routes.js
- Ganti target path '/' ke first page yang sudah dibuat
- Buat path sesuai keinginan (contoh ada pada koding dibawah)
- Gunakan kode $f7router.navigate atau self.$f7.views.main.router.navigate untuk navigasi ke path yang telah dibuat.
import Home from './assets/vue/uc/splash-screen.vue';
import MainPage from './assets/vue/uc/main-page.vue';
import AboutPage from './assets/vue/pages/about.vue';
import FormPage from './assets/vue/pages/form.vue';
import DynamicRoutePage from './assets/vue/pages/dynamic-route.vue';
import PanelLeftPage from './assets/vue/pages/panel-left.vue';
import ColorThemes from './assets/vue/pages/color-themes.vue';
import Chat from './assets/vue/pages/chat.vue';
import Vuex from './assets/vue/pages/vuex.vue';
export default [
{
path: '/',
component: Home
},
{
path: '/main-page/',
component: MainPage
},
{
path: '/about/',
component: AboutPage
},
{
path: '/form/',
component: FormPage
},
{
path: '/dynamic-route/blog/:blogId/post/:postId/',
component: DynamicRoutePage
},
{
path: '/panel-left/',
component: PanelLeftPage
},
{
path: '/color-themes/',
component: ColorThemes
},
{
path: '/chat/',
component: Chat
},
{
path: '/vuex/',
component: Vuex
},
];
Yak mungkin itu saja untuk dokumentasi kali ini semoga bermanfaat.
sumber : https://pinetools.com/syntax-highlighter
