[Part 3] Aurelia.js - Membangun Aplikasi Pertama
Di part ini kita akan mengetahui apa saja , struktur dari dan bagaimana cara kerja aurelia ini , supaya temen temen nantinya akan faham alur dan cara kerjanya seperti ini
Struktur Folder
- package.json File
package.json
adalah file yang berisi keterangan dari project Javascript, seperti: judul project, deskripsi, versi, library yang dibutuhkan, dan script untuk mengeksekusi project. File ini akan dibutuhkan olehnpm
danyarn
.
Secara sederhana, filepackage.json
dapat diibaratkan seperti SOP yang akan diikuti olehnpm
danyarn
dalam membangun (build) project. - index.html adalah default file dan merupakan file paling penting bagi website. Tanpa file index.html, jika kita membuka website maka browser akan menampilkan file-file lain dalam bentuk tampilan folder bukan tampilan website sesuai design.
- config.js ini adalah file loader yang akan mengeksekusi script dengan cepat , jadi temen temen gabutuh waktu banyak untuk mengkonfigurasikan script secara satu per satu
- jspm_packages adalah direktori dari node.js module
- styles adalah folder yang berisi file file yang berguna untuk membuat web apps temen temen jadi lebih menarik file file tersebut merupakan css , sass , dll
- src adalah folder yang berisikan script mu sendiri
Source Files
Seperti yang sudah kita ketahui sebelumnya . src folder itu berisikan core file dari aplikasi temen temen. yang simple nya berisikan app.js dan app.html
contoh simple
app.js
export class App { message = 'Welcome to Aurelia!'; }
script ini akan menampilkan pesan dengan sintaks ${message}. Sintak ini merepresentasikan dan memasukan fungsi dan menampilkan nya kedalam sebuah template
app.html
<template> <h1>${message}</h1> </template>
Seperti di part 2 , kita akan menjalan kan web servernya dengan menggunakan perintahbini
C:\Users\username\Desktop\aureliaApp>http-server -o -c-1
Dan aplikasinya akan berjalan juga menampilkan pesan begini.