MSIM4401/MODUL 4 4.
$ npm install -g @ionic/cli
…
…
…
+ @ionic/
[email protected] updated 1 package in 12.956s
$
Listing 4.1
Perintah Instalasi
Ionic
$ ionic start –list
ionic start –list
Starters for @ionic/vue (--type=vue)
name | description
tabs | A starting project with a simple tabbed interface
sidemenu | A starting project with a side menu with
navigation in the content area
blank | A blank starter project
list | A starting project with a
list
…
…
…
Listing 4.2
Perintah Memulai Proyek Baru
$ ionic start maskaApp tabs --type vue
✔ Preparing directory ./maskaApp in 1.14ms
✔ Downloading and extracting tabs starter in 1.23s
…
…
…
added 1718 packages from 1246 contributors in 189.507s
77 packages are looking for funding
run `npm fund` for details
Join the Ionic Community! 💙
Connect with millions of developers on the Ionic Forum and get access to live
events, news updates, and more.
? Create free Ionic account? No.
Your Ionic app is ready! Follow these next steps:
4.2 Dasar-Dasar Ionic Framework
- Go to your new project: cd ./maskaApp
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-re–--skip-confi–--copy
- Explore the Ionic docs for components, tutorials, and more: [Link]
- Building an enterprise app? Ionic has Enterprise Support and Features:
[Link]
Listing 4.3
Perintah Untuk Membuat Proyek
Baru Pada Folder maskaApp
$ cd maskaApp
$ ionic serve
> vue-cli-service serve
[vue-cli-service] INFO Starting development server...
[INFO] Development server running!
Local: [Link]
Use Ctrl+C to quit this process
[vue-cli-service] App running at:
[vue-cli-service] - Local: [Link]
[vue-cli-service] - Network: [Link]
[vue-cli-service] Note that the development build is not optimized.
[vue-cli-service] To create a production build, run npm run build.
[vue-cli-service] No. issues found.
[INFO] Browser window opened to [Link]
Listing 4.4
Masuk Pada Folder Proyek Baru
Dan Menjalankan Proyek Baru Pertama Kali
MSIM4401/MODUL 4 4.3
$ ionic serve
> vue-cli-service serve
[vue-cli-service] INFO Starting development server...
[INFO] Development server running!
Local: [Link]
Use Ctrl+C to quit this process
[vue-cli-service] App running at:
[vue-cli-service] - Local: [Link] [vue-
cli-service] - Network: [Link]
[vue-cli-service] Note that the development build is
not optimized.
[vue-cli-service] To create a production build, run npm
run build.
[INFO] Browser window opened to [Link]
[vue-cli-service] Issues checking in progress...
[vue-cli-service] No issues found.
Listing 4.5
Menjalankan Proyek
$ ionic serve --lab
> vue-cli-service serve
[vue-cli-service] INFO Starting development server...
> ionic-lab [Link] --host localhost --port 8200 --project-type
vue --app-name firstIonicApp --app-version 0.0.1
[vue-cli-service] App running at:
[vue-cli-service] - Local: [Link] [vue-
cli-service] - Network: [Link]
[vue-cli-service] Note that the development build is not optimized.
[vue-cli-service] To create a production build, run npm run build.
[vue-cli-service] Issues checking in progress...
[INFO] Development server running!
Lab: [Link]
Local: [Link]
Use Ctrl+C to quit this process
[INFO] Browser window opened to [Link]
[vue-cli-service] No issues found.
Listing 4.6
Menjalankan Proyek dengan Simulasi Web Browser (Android. iOS dan Windows)
4.18 Dasar-Dasar Ionic Framework
<template>
<ion-page> // <1>
<ion-header>
<ion-toolbar>
<ion-title>Tab 4</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen=”true”>
<ion-header collapse=”condense”>
<ion-toolbar>
<ion-title size=”large”>Tab 4</ion-title>
</ion-toolbar>
</ion-header>
<ExploreContainer name=”Tab 4 page” /> // <2>
</ion-content>
</ion-page>
</template>
<script lang=”ts”> import { IonPage, IonHeader, IonToolbar, IonTitle,
IonContent } from ‘@ionic/vue’;
// <3>
import ExploreContainer from ‘@/components/[Link]’;
export default { name: ‘Tab4Page’, // <4>
components: { ExploreContainer, IonHeader,
IonToolbar, IonTitle, IonContent, IonPage }
}
</script>
Listing 4.7
File [Link] (src/views)
…
…
…
<ion-tab-button tab=”tab3” href=”/tabs/tab3”>
<ion-icon :icon=”square” />
<ion-label>Tab 3</ion-label>
</ion-tab-button>
<ion-tab-button tab=”tab4” href=”/tabs/tab4”>
<ion-icon :icon=”star” /> // <1>
<ion-label>Tab 4</ion-label>
</ion-tab-button>
</ion-tab-bar>
</template>
MSIM4401/MODUL 4 4.21
<script lang=”ts”> import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon,
IonPage
} from ‘@ionic/vue’;
import { ellipse, square, triangle, star } from ‘ionicons/icons’;// <2>
export default { name: ‘Tabs’, components:
{
IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage
},
setup() { return { ellipse, square,
triangle, star,
}
}
}
// <3>
Listing 4.8
File [Link] (src/views)
…
…
…
path: ‘/tabs/’, component: Tabs, children: [
// <1>
4.6 Dasar-Dasar Ionic Framework
{
path: ‘’,
redirect: ‘/tabs/tab1’
},
{
path: ‘tab1’,
component: () => import(‘@/views/[Link]’)
},
{
path: ‘tab2’,
component: () => import(‘@/views/[Link]’)
},
{
path: ‘tab3’,
component: () => import(‘@/views/[Link]’)
},
{
path: ‘tab4’,
component: () => import(‘@/views/[Link]’)
}
// <2>
…
…
…
Listing 4.9
File [Link] (src/router)
…
…
…
const app = createApp(App)
.use(IonicVue)
.use(router);
[Link] = (err, vm, info) => {
// <1>
alert(err + “\nVM: “ + [Link](vm) + “\nInfo: “ + info);
}
[Link]().then(() => { [Link](‘#app’);
});
Listing 4.10
Potongan Dan Penambahan Listing File [Link] (src)
MSIM4401/MODUL 4 4.7
…
…
…
<p><ion-button color=”danger” @click=”dontClick”> Danger
// <1>
</ion-button></p>
<ExploreContainer name=”Tab 1 page” />
</ion-content>
</ion-page>
</template>
<script lang=”ts”> import {
IonPage, IonHeader, IonToolbar, IonTitle, IonContent
} from ‘@ionic/vue’;
import ExploreContainer from ‘@/components/[Link]’;
export default { name: ‘Tab1’, components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonCont
},
methods: { dontClick() {
throw new Error(“Jangan diklik”);
}
}
}
</script>
// <2>
Listing 4.11
Potongan Dan Penambahan Listing File [Link] (src/views)
4.26 Dasar-Dasar Ionic Framework
import { createApp } from ‘vue’ // <1>
import App from ‘./[Link]’ // <2>
import router from ‘./router’; // <3>
import { IonicVue } from ‘@ionic/vue’; // <4>
…
…
…
const app = createApp(App) // <5>
.use(IonicVue)
.use(router);
[Link]().then(() => // <6>
{ [Link](‘#app’);
});
Listing 4.12
Listing File [Link] (src)
<template>
<ion-app> // <1>
<ion-router-outlet /> // <2>
</ion-app>
</template>
<script lang=”ts”>
import { IonApp, IonRouterOutlet } from ‘@ionic/vue’;
import { defineComponent } from ‘vue’;
export default defineComponent({ // <3>
name: ‘App’, components: { IonApp, IonRouterOutlet
}
});
</script>
Listing 4.13
[Link] (src)
…
…
…
{
path: ‘/tabs/’, component: Tabs, children: [
{
path: ‘’,
redirect: ‘/tabs/tab1’
},
…
… // <1>
…
MSIM4401/MODUL 4 4.9
import axios from ‘axios’; // <1>
export default class EndPointAccess { theUrl: string; // <2>
constructor(url: string) { [Link] = url;
} // <3>
async getRes() { // <4>
const response = await [Link]([Link]); return response;
}
}
Listing 4.14
[Link]
<template>
<ion-page>
<ion-header :translucent=”true”>
<ion-toolbar>
<ion-title>Blank</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen=”true”>
<div id=”container”>
<p>Daftar User</p>
<p><ion-button @click=”ambilData”>Ambil data</ion-button></p>
<table class=”center”>
<tr>
4.10 Dasar-Dasar Ionic Framework
<th>id</th>
<th>Name</th>
<th>E-mail</th>
<th>Company</th>
</tr>
<tr v-for=”user in dataUsers” :key=”[Link]”>
<td>{{ [Link] }}</td> // <1>
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>
</table>
</div>
</ion-content>
</ion-page>
</template>
<script lang=”ts”>
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton } from ‘@ ionic/vue’;
import { defineComponent } from ‘vue’;
import EndPointAccess from ‘@/services/EndPointAccess’;// <2>
let resData: any; // <3>
export default defineComponent({
name: ‘HomePage’, data() {
return { dataUsers: null
}
},
methods: { ambilData() { // <4>
// <5>
resData = new EndPointAccess(‘[Link] [Link]()
.then((response: any) => ([Link] = [Link]))
}
},
components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButton
}
});
</script>
MSIM4401/MODUL 4 4.11
<style scoped> #container {
text-align: center; position: absolute; left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong { font-size: 20px; line-height: 26px;
}
#container p { font-size: 16px; line-height: 22px; color: #8c8c8c; margin: 0;
}
#container a {
text-decoration: none;
}
.center {
margin-left: auto; margin-right: auto;
}
// <6>
</style>
Listing 4.15
[Link]
4.12 Dasar-Dasar Ionic Framework
import { createRouter, createWebHistory } from ‘@ionic/vue-router’; import { RouteRecordRaw } from ‘
import Home from ‘../views/[Link]’// <1>
const routes: Array<RouteRecordRaw> = [
{
path: ‘/’, redirect: ‘/home’
},
{
path: ‘/home’,
name: ‘Home’, component: Home
}
]
// <2>
const router = createRouter({
history: createWebHistory([Link].BASE_URL), routes
})
export default router
Listing 4.16
[Link] (src/router)
