TUGAS 3
MATA KULIAH MSIM4401/
PEMOGRAMAN BERBASIS PIRANTI BERGERAK
Nama : Magdalena Ose
NIM : 042310951
Langkah-langkah :
1. Inisialisasi proyek vue: instalasi Vue CLI dengan perintah :
Npm install –g @vue/cli
2. Membuat proyek baru dengan nama : `crypto-app` dengan perintah :
vue create crypto-app
cd crypto-app
3. Instalasi Axios: Axios digunakan untuk melakukan request ke API dengan perintah :
npm install axios
4. Struktur proyek akan terlihat seperti ini :
crypto-app/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ └── CryptoList.vue
│ ├── views/
│ │ └── Home.vue
│ ├── App.vue
│ ├── main.ts
├── package.json
└── tsconfig.json
5. Modifikasi `main.ts`
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
6. Buat komponen `CryptoList.vue` : yang akan digunakan untuk menampilkan daftar
cryptocurrency
<template>
<div class="crypto-list">
<h1>Cryptocurrency List</h1>
<table>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Symbol</th>
<th>Price (USD)</th>
</tr>
</thead>
<tbody>
<tr v-for="crypto in cryptos" :key="crypto.id">
<td>{{ crypto.rank }}</td>
<td>{{ crypto.name }}</td>
<td>{{ crypto.symbol }}</td>
<td>{{ crypto.price_usd }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import axios from 'axios';
export default defineComponent({
name: 'CryptoList',
setup() {
const cryptos = ref([]);
onMounted(async () => {
try {
const response = await axios.get(https://api.coinlore.net/api/tickers/
);
cryptos.value = response.data.data;
} catch (error) {
console.error(error);
}
});
return {
cryptos
};
}
});
</script>
<style scoped>
.crypto-list {
font-family: Arial, sans-serif;
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px 12px;
border: 1px solid #ddd;
}
th {
background-color: #f4f4f4;
}
</style>
7. Modifikasi `Home.vue`: import dan gunakan komponen `CryptoList` di `Home.vue`
<template>
<div class="home">
<CryptoList />
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import CryptoList from '../components/CryptoList.vue';
export default defineComponent({
name: 'Home',
components: {
CryptoList
}
});
</script>
<style scoped>
.home {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
</style>
8. Sesuaikan Routing di `router/index.ts`
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;
9. Modifikasi `App.vue`
<template>
<router-view />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App'
});
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
10. Menjalankan proyek dengan menggunakan perintah :
npm run serve pada terminal direktori proyek tadi.
Aplikasi akan berjalan di http://localhost:8080.
