[Part 3] Aurelia.js - Membangun Aplikasi Pertama

Aurelia Javascript

Abdul Muttaqin

October 21, 2019

0

Aurelia, Javascript

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 oleh npm dan yarn.
  Secara sederhana, file package.json dapat diibaratkan seperti SOP yang akan diikuti oleh npm dan yarn 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.