Indonesia

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Grafik

Halo, para pemrogram yang bersemangat! Hari ini, kita akan memulai perjalanan menarik ke dunia AngularJS dan aplikasi grafik. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk mengantar Anda dalam petualangan ini. Jangan khawatir jika Anda baru belajar pemrograman - kita akan mulai dari dasar dan kemudian maju perlahan-lahan. Jadi, ambil secangkir kopi (atau minuman kesukaan Anda), dan mari kita masuk ke dalam!

AngularJS - Chart Application

Apa Itu AngularJS?

Sebelum kita mulai membuat grafik, mari kita pahami apa itu AngularJS. Bayangkan Anda sedang membangun sebuah rumah. AngularJS adalah seperti kerangka yang membantu Anda mengatur rumah Anda secara efisien. Itu adalah kerangka kerja aplikasi web depan berbasis JavaScript yang open-source, yang membuatnya mudah untuk menciptakan aplikasi single-page yang dinamis.

Fitur Utama AngularJS

Fitur Deskripsi
Two-way Data Binding Secara otomatis menyelaraskan data antara model dan view
Dependency Injection Membantu membuat komponen yang dapat digunakan kembali, dapat dipelihara, dan dapat diuji
Directives Memungkinkan Anda untuk memperpanjang HTML dengan atribut dan elemen khusus
Templates Menggunakan HTML dengan markup khusus sebagai template
MVC Architecture Mengikuti pola Model-View-Controller untuk organisasi yang lebih baik

Menyiapkan Aplikasi Grafik Kita

Sekarang kita sudah mempunyai pengertian dasar tentang AngularJS, mari kita siapkan aplikasi grafik kita. Kita akan menggunakan pustaka yang disebut Chart.js bersama dengan AngularJS untuk menciptakan grafik yang indah dan responsif.

Langkah 1: Sertakan File Yang Diperlukan

Pertama, kita perlu menyertakan AngularJS dan Chart.js dalam file HTML kita. Tambahkan baris berikut di bagian <head> dari HTML Anda:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>

Langkah 2: Buat Modul AngularJS

Sekarang, mari kita buat modul AngularJS kita. Dalam file JavaScript Anda, tambahkan:

var app = angular.module('chartApp', []);

Baris ini menciptakan modul AngularJS bernama 'chartApp'. Pahami ini sebagai membuat buku resep baru untuk petualangan membuat grafik kita!

Membuat Grafik Pertama Kita

Apakah Anda menunggu untuk melihat keajaiban visual? Mari kita buat grafik pertama kita - sebuah grafik batang sederhana yang menunjukkan popularitas bahasa pemrograman.

Langkah 1: Siapkan HTML

Dalam file HTML Anda, tambahkan yang berikut:

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
</div>

Ini menciptakan elemen canvas tempat grafik kita akan digambar. Direktif ng-app dan ng-controller menghubungkan HTML kita ke aplikasi dan kontroler AngularJS.

Langkah 2: Buat Kontroler

Dalam file JavaScript Anda, tambahkan:

app.controller('ChartController', function($scope) {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'],
datasets: [{
label: 'Popularity of Programming Languages',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});

Wah, itu banyak kode! Tetapi jangan khawatir, mari kitauraikan ini:

  1. Kita menciptakan kontroler bernama 'ChartController'.
  2. Kita mendapatkan konteks elemen canvas kita.
  3. Kita menciptakan objek Grafik baru, menentukan itu adalah grafik batang.
  4. Kita menyediakan data untuk grafik, termasuk label dan dataset.
  5. Kita menetapkan pilihan untuk grafik, seperti memulai sumbu y di nol.

Membuat Grafik Kita Dinamis

Grafik statis itu keren, tetapi grafik dinamis itu lebih keren! Mari kita modifikasi grafik kita untuk menggunakan data dari scope AngularJS kita.

Langkah 1: Perbarui Kontroler

Modifikasi kontroler Anda agar terlihat seperti ini:

app.controller('ChartController', function($scope) {
$scope.languages = ['JavaScript', 'Python', 'Java', 'C++', 'Ruby'];
$scope.popularity = [12, 19, 3, 5, 2];

$scope.updateChart = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: $scope.languages,
datasets: [{
label: 'Popularity of Programming Languages',
data: $scope.popularity,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
};

$scope.updateChart();
});

Di sini, kita telah memindahkan data kita ke variabel $scope dan menciptakan fungsi updateChart.

Langkah 2: Tambahkan Input Pengguna

Mari kita tambahkan beberapa field input sehingga pengguna dapat memperbarui data grafik:

<div ng-app="chartApp" ng-controller="ChartController">
<canvas id="myChart" width="400" height="200"></canvas>
<div ng-repeat="language in languages">
{{language}}: <input type="number" ng-model="popularity[$index]" ng-change="updateChart()">
</div>
</div>

Sekarang, saat Anda mengubah nomor di field input, grafik akan secara otomatis diperbarui!

Kesimpulan

Selamat! Anda baru saja menciptakan aplikasi grafik dinamis pertama Anda menggunakan AngularJS dan Chart.js. Kita telah menempuh banyak hal hari ini, dari memahami dasar-dasar AngularJS hingga menciptakan grafik interaktif.

Ingat, menjadi ahli pemrograman adalah seperti belajar memasak - itu memerlukan latihan, eksperimen, dan kesediaan untuk belajar dari kesalahan. Jadi jangan takut untuk bermain dengan kode, mencoba jenis grafik yang berbeda, atau menambahkan fitur baru.

Dalam tahun-tahun mengajar saya, saya telah melihat murid-murid dari pemula menjadi menciptakan aplikasi yang menakjubkan. Dengan keuletan dan kecurigaan, Anda akan dapat menciptakan visualisasi data yang kompleks dan indah dalam waktu singkat!

Terus coding, terus belajar, dan yang paling penting, bersenang-senang! Sampaijumpa lagi, selamat membuat grafik!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Aplikasi Terjemahan
Tutorial Selanjutnya:
AngularJS - Aplikasi Peta