MSIM4401 - Tugas 3 / Indra Lingga Saputra - 043912294
Berikut jawaban saya untuk nomor 1
A. Source code pada folder src/services/EndPointAccess/index.ts
import axios from "axios";
export default class EndPointAccess {
theUrl: string;
constructor(url: string) {
this.theUrl = url;
}
async getRes() {
const response = await axios.get(this.theUrl);
return response;
}
}
B. Source code pada folder src/router/index.ts
import { createRouter, createWebHistory } from "@ionic/vue-router";
import { RouteRecordRaw } from "vue-router";
import HomePage from "../views/HomePage.vue";
const routes: Array<RouteRecordRaw> = [
{
MSIM4401 - Tugas 3 / Indra Lingga Saputra - 043912294
path: "/",
redirect: "/home",
},
{
path: "/home",
name: "Home",
component: HomePage,
},
];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
});
export default router;
C. Source code pada folder src/views/HomePage.vue
<template>
<ion-page>
<ion-content :fullscreen="true">
<div id="container">
<p><ion-button @click="ambilData">Refresh</ion-button></p>
<table class="center">
<tr v-for="item in dataUsers" :key="item.id">
<td>
<span class="top">Rank</span>
<span class="bottom">{{ item.rank }}</span>
</td>
<td style="text-align: left">
<span class="top">{{ item.name }}</span>
<span class="bottom">{{ item.symbol }}</span>
</td>
<td style="text-align: left">
<span class="top">USD</span>
<span class="bottom">{{ item.price_usd }}</span>
</td>
</tr>
</table>
</div>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonContent, IonPage, IonButton } from '@ionic/vue';
import { defineComponent } from 'vue';
import EndPointAccess from '@/services/EndPointAccess';
MSIM4401 - Tugas 3 / Indra Lingga Saputra - 043912294
let resData: any;
export default defineComponent({
name: 'HomePage',
data() {
return {
dataUsers: null
}
},
methods: {
ambilData() {
resData = new
EndPointAccess('https://api.coinlore.net/api/tickers/');
resData.getRes()
.then((response: any) => (this.dataUsers = response.data.data))
}
},
components: {
IonContent, IonPage, IonButton
}
})
</script>
<style scoped>
#container {
text-align: center;
#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;
}
MSIM4401 - Tugas 3 / Indra Lingga Saputra - 043912294
ion-button {
padding: 10px;
}
table {
width: 100%;
table-layout: fixed;
background-color: #fff2cc;
}
tr {
border: 2px solid #E5CC81;
border-bottom: thin;
padding: 5px;
}
span {
padding: 1px;
}
td {
padding: 2px;
margin-bottom: auto;
}
.top {
display: block;
font-size: smaller;
font-weight: 500;
}
.bottom {
display: block;
font-size: x-large;
font-weight: 500;
}
</style>
