Indonesia

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Translate Aplikasi

Halo sana, bintang coding masa depan! Hari ini, kita akan memulai perjalanan yang 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-langkah secara bertahap. Pada akhir panduan 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 mendalam 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 kerja JavaScript yang kuat yang membuatnya mudah untuk membuat 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 kita di sini -->
</body>
</html>

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

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 di sini -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

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

Membangun Penjemah Kita

Langkah 3: Buat Controller

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

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

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

$scope.translate = function() {
// Kita akan menambahkan logika terjemahan di sini
$scope.outputText = "Terjemahan dalam proses...";
};
});
</script>

Controller ini menyiapkan dua variabel (inputText dan outputText) dan fungsi translate. Pihak ini adalah seperti wadah bagi input, output, dan proses terjemahan yang 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 di sini -->
</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 ditekan.
  • {{ 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 API Terjemahan MyMemory 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 ini yang diperbarui sekarang termasuk pemilihan bahasa dan membuat permintaan ke API terjemahan saat fungsi translate dipanggil.

Langkah 6: Update Antarmuka Pengguna

Mari kita perbarui HTML kita untuk memasukkan pemilihan bahasa:

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

<!-- Tag script di sini -->
</body>

Kesimpulan

Selamat! Anda baru saja membuat aplikasi terjemahan sederhana tapi berfungsi menggunakan AngularJS. Berikut adalah ringkasan singkat 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 mengkode adalah perjalanan. Jangan khawatir jika beberapa bagian tampak membingungkan pada awalnya - dengan latihan, itu akan mulai membuat sense. Tetap ber eksperimen, tetap belajar, dan sebelum Anda menyadari, Anda akan membuat aplikasi yang lebih kompleks dan menarik!

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

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

Semoga Anda menikmati pemrograman, dan may your translation adventures be bug-free and full of learning!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Aplikasi Keranjang
Tutorial Selanjutnya:
AngularJS - Aplikasi Chart