AngularJS - Aplikasi LastFm: Membangun Aplikasi Penemuan Musik

Pengenalan

Hai, para pemula pemrograman! Hari ini, kita akan melangsungkan sebuah perjalanan menarik ke dunia pengembangan web. Kita akan membuat sebuah aplikasi penemuan musik menggunakan AngularJS dan API LastFm. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - saya akan mendampingi Anda setiap langkahnya, sama seperti yang saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. Ayo masuk ke dalamnya!

AngularJS - Lastfm Application

Apa Itu AngularJS?

Sebelum kita mulai mengoding, mari kita memahami apa itu AngularJS. Bayangkan Anda membangun sebuah rumah. AngularJS seperti kerangka dari rumah itu - itu menyediakan struktur dan dukungan untuk aplikasi web Anda. Itu adalah kerangka kerja JavaScript yang kuat yang membantu kita membuat aplikasi halaman tunggal dinamis dengan mudah.

Menyiapkan Proyek Kita

Langkah 1: Membuat Struktur HTML

Mari kita mulai dengan membuat struktur dasar aplikasi kita. Buka editor teks favorit Anda dan buat sebuah file baru bernama index.html. Berikut adalah apa yang kita masukkan ke dalamnya:

<!DOCTYPE html>
<html ng-app="lastfmApp">
<head>
<title>LastFm Penemuan Musik</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController">
<h1>LastFm Penemuan Musik</h1>
<input type="text" ng-model="artistName" placeholder="Masukkan nama artis">
<button ng-click="searchArtist()">Cari</button>
<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
</div>
</body>
</html>

mari kitauraikan ini:

ng-app="lastfmApp": Ini memberitahu AngularJS bahwa ini adalah elemen root dari aplikasi kita.
ng-controller="MainController": Ini menentukan controller mana yang harus mengelola logik untuk bagian ini dari aplikasi kita.
ng-model="artistName": Ini mengikat field input ke variabel artistName dalam controller kita.
ng-click="searchArtist()": Ini memberitahu AngularJS untuk memanggil fungsi searchArtist() saat tombol ditekan.
ng-if="artist": Ini hanya menampilkan informasi artis jika artis telah ditemukan.

Langkah 2: Membuat Aplikasi AngularJS

Sekarang, mari kita buat aplikasi AngularJS kita. Buat sebuah file baru bernama app.js dan tambahkan kode berikut:

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

app.controller('MainController', function($scope, $http) {
$scope.searchArtist = function() {
var apiKey = 'YOUR_LASTFM_API_KEY';
var apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=' + $scope.artistName + '&api_key=' + apiKey + '&format=json';

$http.get(apiUrl).then(function(response) {
$scope.artist = response.data.artist;
});
};
});

mari kitauraikan ini:

Kita membuat sebuah modul AngularJS bernama lastfmApp.
Kita menentukan sebuah controller bernama MainController.
Dalam controller, kita mendefinisikan fungsi searchArtist, yang membuat permintaan HTTP ke API LastFm.
Kita menggunakan $scope untuk membuat variabel dan fungsi tersedia bagi HTML kita.
Kita menggunakan $http untuk membuat permintaan API.

Memahami Konsep AngularJS

Sekarang kita memiliki aplikasi dasar kita disiapkan, mari kita masuk lebih dalam ke beberapa konsep AngularJS.

Modul

Dalam AngularJS, modul adalah wadah untuk bagian-bagian berbeda dari aplikasi Anda. Mereka membantu mengatur kode Anda dan menjaga kebersihan dan kekelolaannya. Dalam kasus kita, kita membuat sebuah modul bernama lastfmApp:

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

Controller

Controller adalah tempat kita mendefinisikan perilaku aplikasi kita. Mereka mengandung logik yang mendorong aplikasi kita. Dalam contoh kita, kita membuat sebuah MainController:

app.controller('MainController', function($scope, $http) {
// Logik controller disini
});

Scope

Scope adalah objek yang merujuk ke model. Mereka bertindak sebagai perekat antara controller dan view. Ketika kita menggunakan $scope dalam controller, kita membuat data tersedia bagi HTML kita:

$scope.artist = response.data.artist;

Direktif

Direktif adalah tanda pada elemen DOM yang memberitahu AngularJS untuk menambahkan perilaku khusus ke elemen DOM itu. Kita telah menggunakan beberapa direktif dalam HTML kita:

ng-app
ng-controller
ng-model
ng-click
ng-if

Memperbaiki Aplikasi Kita

Sekarang kita mengerti dasar-dasar, mari kita tambahkan beberapa fitur lain ke aplikasi kita.

Menampilkan Artis Serupa

Mari kita modifikasi HTML kita untuk menampilkan artis serupa:

<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
<h3>Artis Serupa</h3>
<ul>
<li ng-repeat="similar in artist.similar.artist">{{similar.name}}</li>
</ul>
</div>

Di sini, kita menggunakan direktif ng-repeat untuk mengulang melalui artis serupa dan menampilkan mereka dalam daftar.

Menambah Penanganan Kesalahan

Mari kita tambahkan penanganan kesalahan ke controller kita:

app.controller('MainController', function($scope, $http) {
$scope.searchArtist = function() {
var apiKey = 'YOUR_LASTFM_API_KEY';
var apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=' + $scope.artistName + '&api_key=' + apiKey + '&format=json';

$http.get(apiUrl).then(function(response) {
$scope.artist = response.data.artist;
$scope.error = null;
}, function(error) {
$scope.error = "Terjadi kesalahan. Silakan coba lagi.";
$scope.artist = null;
});
};
});

Dan mari kita tambahkan ini ke HTML kita:

<p ng-if="error" style="color: red;">{{error}}</p>

Kesimpulan

Selamat! Anda telah membuat aplikasi AngularJS pertama Anda. Kita telah menempuh banyak hal, dari menyiapkan struktur dasar hingga menambahkan fitur dan penanganan kesalahan. Ingat, belajar mengoding adalah perjalanan, dan setiap aplikasi yang Anda bangun memberikan Anda sesuatu baru untuk belajar.

Berikut adalah tabel yang menggabungkan konsep AngularJS utama yang kita pelajari:

Konsep	Deskripsi
Modul	Wadah untuk bagian-bagian aplikasi
Controller	Mendefinisikan perilaku aplikasi
Scope	Bertindak sebagai perekat antara controller dan view
Direktif	Memperpanjang HTML dengan atribut dan elemen khusus

Lanjutkan berlatih, terus bangun, dan terutama, terus bersenang-senang dengan pemrograman. Sebelum Anda mengetahui, Anda akan membuat aplikasi web kompleks dengan mudah. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Leaflet