AngularJS - Aplikasi LastFm: Membangun Aplikasi Penemuan Musik

Pengenalan

Halo, para pemrogram yang sedang belajar! Hari ini, kita akan memulai sebuah perjalanan yang 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 bersama Anda setiap langkahnya, seperti yang telah 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 pahami apa itu AngularJS. Bayangkan Anda sedang membangun sebuah rumah. AngularJS seperti kerangka rumah itu – itu menyediakan struktur dan dukungan untuk aplikasi web Anda. Itu adalah kerangka JavaScript yang kuat yang membantu kita membuat aplikasi single-page dinamis dengan mudah.

Menyiapkan Proyek Kita

Langkah 1: Membuat Struktur HTML

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

<!DOCTYPE html>
<html ng-app="lastfmApp">
<head>
<title>LastFm Music Discovery</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 Music Discovery</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>

mariuraikan ini:

ng-app="lastfmApp": Ini memberitahu AngularJS bahwa ini adalah elemen root dari aplikasi kita.
ng-controller="MainController": Ini menentukan controller mana yang harus mengatur 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;
});
};
});

mariuraikan ini:

Kita membuat sebuah module AngularJS bernama lastfmApp.
Kita menentukan sebuah controller bernama MainController.
Dalam controller, kita tentukan 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, mari kita masuk lebih mendalam ke beberapa konsep AngularJS.

Modules

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

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

Controllers

Controllers adalah tempat kita tentukan perilaku aplikasi kita. Mereka berisi logik yang menggerakkan aplikasi kita. Dalam contoh kita, kita membuat MainController:

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

Scopes

Scopes 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;

Directives

Directives adalah tanda di DOM yang memberitahu AngularJS untuk menambahkan perilaku tertentu ke elemen DOM. Kita telah menggunakan beberapa directive di HTML kita:

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

Menambahkan Fitur ke Aplikasi Kita

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

Menampilkan Artis Serupa

Ayo 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 directive ng-repeat untuk melooping melalui artis serupa dan menampilkan mereka dalam daftar.

Menambahkan Penanganan Kesalahan

Ayo 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 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 meliputi banyak hal, dari menyiapkan struktur dasar hingga menambahkan fitur dan penanganan kesalahan. Ingat, belajar mengoding adalah perjalanan, dan setiap aplikasi yang Anda buat memberikan Anda sesuatu baru untuk belajar.

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

Konsep	Deskripsi
Modules	Wadah untuk bagian-bagian aplikasi
Controllers	Menentukan perilaku aplikasi
Scopes	Bertindak sebagai perekat antara controller dan view
Directives	Memperpanjang HTML dengan atribut dan elemen khusus

Terus latihan, terus bangun, dan terus bersenang-senang dengan pemrograman. Sebelum Anda tahu, Anda akan membuat aplikasi web kompleks dengan mudah. Selamat pemrograman!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Aplikasi Leaflet