Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Monday, October 21, 2019

[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 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.
Aurelia First App Start

[Part 2] Aurelia.js - Environment Setup



di part ini temen temen sekalian akan belajar cara pemasangan aurelia ini , sudah jelas bukan kalo yang di butuhkan temen temen adalah Node-Js

.NoSoftware & Description
1
NodeJS dan NPM
NodeJS adalah hal yang paling penting untuk menjalankan aurelia

Step 1 - Download Aurelia Package

sebelum kita download package dsri aurelianya pastikan temen membuat folder baru terlebih dahulu dsn beri nama aureliaapp
C:\Users\username\Desktop>mkdir aureliaApp
Sekarang kita bisa mendownload packagenya di web resminya aurelia disini
Aurelia mendukung ES2016 dan TypeScript. disini kita akan menggunakan ES2016. Extract file yang di download tadi kedalam folder aureliaapp yang sudah kita buat tadi

Step 2 - Menginstall Web Server

pertama kita harus menginstall web server di node.js terlebih dahulu dengan mengetikan perintah seperti ini.
C:\Users\username\Desktop\aureliaApp>npm install http-server -g

Step 3 - Memulai Web Server

Untuk memulai web server temen temen cukup ketikan perintah seperti dibawah ini.
C:\Users\username\Desktop\aureliaApp>http-server -o -c-1
sekarang temen temen bisa lihat sendiri halaman awal dari framework aurelia ini
Aurelia Environment Setup Start


eitsss ini belum berakhir lho , masih panjang tahapan nya , makanya simak aja terus part part selanjutnya ya :)



Saturday, October 19, 2019

[Part 1] Belajar Aurelia.js - Pengenalan



Assallamualaikum warahmatullahi wabarakatuh 

Halo temen temen semuanya , temen temen disini pasti sudah pada tau dengan yang namanya Javascript 

Iyap , temen temen pasti sudah tau lah fungsi dan kegunaan nya seperti apa 

nah di kesempatan kali ini kita akan belajar tentang framework baru , sebenernya ga baru baru amat sih udah lama 
cuma mungkin kalian semua baru denger atau ada juga yang udah tau tapi gamau pake , karna sudah terbiasa dengan yang lama hehe

Oke deh langsung aja kita bahasa apa sih itu Aurelia-Js

Apa itu Aurelia?

Aurelia adalah framework front-end yang modern untuk membangun aplikasi browser, seluler, dan desktop.
selain itu, Aurelia-js ini berfungsi sebagai platform yang kuat untuk membangun browser, aplikasi desktop dan mobile, dan juga framework ini open source lho 
jadi kalian bisa mengembangkan kembali framework ini

Mari kita bahas apa saja sih keuunggulan dari framework ini ...

  • Berisi Modul JavaScript Modern
Aurelia.js sendiri berisi modul modul terbaru dan modern tidak seperti saudaranya yaitu react native atau angular . Setiap modul yang ditulis itu menggunakan ECMAScript (JavaScript) dan TypeScript (superset yang lebih aman dari JavaScript yang menambahkan pemeriksaan jenis waktu kompilasi). 

Semua modul ini dapat digunakan secara individual dalam semua jenis project JavaScript, termasuk Node.js.

  • Platform yang Kuat untuk Membangun Aplikasi
Modul modul yang ada di Aurelia sendiri itu fleksibel karna bisa digunakan untuk banyak hal , 
Jika kalian ingin  menciptakan pengalaman yang kaya dan menarik Aurelia lah pilihan nya , Aurelia sendiri mempunyai UI yang dinamis, routing, dan set plugins yang luas, Aurelia menyediakan serangkaian kapabilitas dan alat yang komprehensif untuk membangun pengalaman  front-end kalian 

  • Open Source
Sudah keren open source lagi , kalian kira kalo framework keren pasti ada lisensi tersendiri dan harganya relatif mahal. di Aurelia semuanya gratis dan Open Source di bawah Lisensi MIT, lisensi yang sangat permisif yang digunakan oleh banyak web populer saat ini. 


  • Dibangun di atas Standar Web Terbuka

Aurelia juga bukan hanya ditulis dengan ECMAScript, tetapi juga dirancang untuk menggunakan standar DOM. Aurelia menggunakan mengimplementasikan parser HTML khusus sendiri atau mengadopsi ekstensi JavaScript spesifik framework, dan memanfaatkan API DOM terbaru 

Untuk pembahasan kali ini cukup sekian , di tunggu saja part 2 nya ya :) 



Ads 970x90