Malay

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Terjemahan

Hai sana, bintang coding masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia AngularJS dan belajar membuat aplikasi terjemahan. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah demi langkah. Pada akhir tutorial ini, Anda akan memiliki aplikasi kecil yang keren yang dapat menerjemahkan teks antara bahasa yang berbeda. Bagaimana itu untuk menakjubkan?

AngularJS - Translate Application

Apa Itu AngularJS?

Sebelum kita masuk ke aplikasi terjemahan kita, mari kitaambil waktu untuk memahami apa itu AngularJS. Bayangkan Anda membangun sebuah rumah. AngularJS seperti kerangka yang membantu Anda mengatur dan mengorganisir rumah Anda secara efisien. Itu adalah kerangka JavaScript yang kuat yang membuat lebih mudah untuk menciptakan aplikasi web dinamis.

Menyiapkan Proyek Kita

Langkah 1: Sertakan AngularJS

Pertama-tama, kita perlu menyertakan AngularJS dalam proyek kita. Kita akan melakukan ini dengan menambahkan tag script ke file HTML kita:

<!DOCTYPE html>
<html>
<head>
<title>Penjemah Saya yang Menakjubkan</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Kita akan menambahkan konten aplikasi disini -->
</body>
</html>

Baris kode ini seperti mengundang AngularJS ke pesta kita. Itu mengatakan kepada browser kita untuk memuat pustaka AngularJS sehingga kita dapat menggunakan superpowernya.

Langkah 2: Buat Modul Aplikasi

Sekarang, mari kita buat aplikasi AngularJS kita. Kita akan melakukan ini dengan menambahkan tag script di akhir tubuh kita:

<body ng-app="translatorApp">
<!-- Konten aplikasi disini -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

Di sini, kita mengatakan ke AngularJS, "Hai, kita ingin membuat aplikasi yang disebut 'translatorApp'." Atribut ng-app di tag body seperti memberi tanda nama pada aplikasi kita sehingga AngularJS tahu di mana aplikasi kita berada.

Membangun Penjemah Kita

Langkah 3: Buat Controller

Dalam AngularJS, controller seperti otak operasi kita. Mereka mengelola data dan perilaku aplikasi kita. Mari kita buat salah satu:

<script>
var app = angular.module('translatorApp', []);

app.controller('TranslatorController', function($scope) {
$scope.inputText = '';
$scope.outputText = '';

$scope.translate = function() {
// Kita akan menambahkan logika terjemahan disini
$scope.outputText = "Proses terjemahan sedang berlangsung...";
};
});
</script>

Controller ini menyiapkan dua variabel (inputText dan outputText) dan fungsi translate. Berikan perhatian bahwa ini seperti wadah untuk input, output, dan proses terjemahan magis.

Langkah 4: Buat Antarmuka Pengguna

Sekarang, mari kita buat antarmuka sederhana untuk penjemah kita:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Penjemah Saya yang Menakjubkan</h1>
<textarea ng-model="inputText" placeholder="Masukkan teks untuk diterjemahkan"></textarea>
<button ng-click="translate()">Terjemahkan</button>
<p>{{ outputText }}</p>
</div>

<!-- Tag script disini -->
</body>

mari kitauraikan ini:

  • Kita gunakan ng-controller untuk menghubungkan HTML kita ke controller.
  • ng-model="inputText" mengikat textarea ke variabel inputText.
  • ng-click="translate()" mengatakan ke AngularJS untuk menjalankan fungsi translate saat tombol diklik.
  • {{ outputText }} menampilkan nilai outputText.

Menambahkan Fungsionalitas Terjemahan

Langkah 5: Integrasi API Terjemahan

Untuk membuat penjemah kita benar-benar bekerja, kita perlu menggunakan layanan terjemahan. Untuk contoh ini, kita akan menggunakan MyMemory Translation API yang gratis. Kita perlu membuat permintaan HTTP, jadi mari kita tambahkan layanan $http ke controller kita:

app.controller('TranslatorController', function($scope, $http) {
$scope.inputText = '';
$scope.outputText = '';
$scope.fromLang = 'en';
$scope.toLang = 'es';

$scope.translate = function() {
var url = "https://api.mymemory.translated.net/get?q=" + $scope.inputText + "&langpair=" + $scope.fromLang + "|" + $scope.toLang;

$http.get(url).then(function(response) {
$scope.outputText = response.data.responseData.translatedText;
}, function(error) {
$scope.outputText = "Ups! Ada yang salah.";
});
};
});

Controller yang diperbarui ini sekarang termasuk pilihan bahasa dan membuat permintaan ke API terjemahan saat fungsi translate dipanggil.

Langkah 6: Perbarui Antarmuka Pengguna

Mari kita perbarui HTML kita untuk termasuk pilihan bahasa:

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>Penjemah Saya yang Menakjubkan</h1>
<select ng-model="fromLang">
<option value="en">Inggris</option>
<option value="es">Spanyol</option>
<option value="fr">Perancis</option>
</select>
<select ng-model="toLang">
<option value="en">Inggris</option>
<option value="es">Spanyol</option>
<option value="fr">Perancis</option>
</select>
<textarea ng-model="inputText" placeholder="Masukkan teks untuk diterjemahkan"></textarea>
<button ng-click="translate()">Terjemahkan</button>
<p>{{ outputText }}</p>
</div>

<!-- Tag script disini -->
</body>

Kesimpulan

Selamat! Anda telah membuat aplikasi terjemahan sederhana tapi fungsional menggunakan AngularJS. Mari kita ringkaskan apa yang kita pelajari:

  1. Kita mengatur aplikasi AngularJS
  2. Kita membuat controller untuk mengelola perilaku aplikasi kita
  3. Kita membangun antarmuka pengguna menggunakan direktif AngularJS
  4. Kita integrasi API terjemahan untuk memberikan fungsionalitas nyata

Ingat, belajar mengoding adalah perjalanan. Jangan khawatir jika beberapa bagian terlihat membingungkan pada awalnya - dengan latihan, itu akan mulai masuk akal. Terus mencoba, terus belajar, dan sebelum Anda sadari, Anda akan membuat aplikasi yang lebih kompleks dan menarik!

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

Konsep Deskripsi Contoh
Modul Kontainer aplikasi angular.module('translatorApp', [])
Controller Mengelola perilaku aplikasi app.controller('TranslatorController', function($scope) {...})
Scope Menghubungkan controller ke view $scope.inputText = ''
Direktif Memperluas HTML ng-app, ng-controller, ng-model, ng-click
Ekspresi Menampilkan nilai {{ outputText }}

Selamat coding, dan semoga perjalanan terjemahan Anda bebas bug dan penuh pengajaran!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Aplikasi Troli
Tutorial Seterusnya:
AngularJS - Aplikasi Carta