Indonesia

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Cuaca

Hai teman-teman, bintang coding masa depan! Hari ini, kita akan memulai perjalanan yang menarik untuk membuat sebuah aplikasi cuaca menggunakan AngularJS. Jangan khawatir jika Anda belum pernah menulis satu baris kode sebelumnya - saya akan menjadi panduan yang ramah bagi Anda dalam petualangan ini, sama seperti yang saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. mari kita roll up lengan dan masuk ke dalam!

AngularJS - Weather Application

Apa Itu AngularJS?

Sebelum kita mulai membuat aplikasi cuaca kita, mari kita bicarakan tentang AngularJS. Bayangkan Anda sedang membangun sebuah rumah. AngularJS seperti kerangka dari 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: Sertakan AngularJS

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

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>Aplikasi Cuaca Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Aplikasi kita akan berada di sini -->
<script src="app.js"></script>
</body>
</html>

Lihat ng-app="weatherApp" di dalam tag <html>? Itu memberitahu AngularJS, "Hey, ini tempat aplikasi kita hidup!"

Langkah 2: Buat Aplikasi Kita

Sekarang, mari kita buat file app.js:

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

Baris ini seperti mengatakan, "Hai, AngularJS! Harap buat aplikasi baru yang dinamakan 'weatherApp'." Mudah, kan?

Membangun Aplikasi Cuaca Kita

Langkah 3: Buat Controller

Dalam AngularJS, controller adalah tempat kita menempatkan perilaku aplikasi kita. Mari kita buat salah satu:

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

Wah, itu banyak! Mari kitauraikan:

  1. Kita membuat controller yang dinamakan 'WeatherController'.
  2. $scope adalah cara kita memindahkan data antara controller dan view.
  3. $http adalah cara AngularJS melakukan permintaan HTTP.
  4. Kita membuat fungsi getWeather yang akan mengambil data cuaca saat dipanggil.

Langkah 4: Buat View

Sekarang, mari kita perbarui HTML kita untuk menggunakan controller:

<body ng-controller="WeatherController">
<h1>Aplikasi Cuaca</h1>
<input type="text" ng-model="city" placeholder="Masukkan nama kota">
<button ng-click="getWeather()">Ambil Cuaca</button>

<div ng-if="weather.main">
<h2>Cuaca di {{weather.name}}</h2>
<p>Suhu: {{weather.main.temp}}°C</p>
<p>Deskripsi: {{weather.weather[0].description}}</p>
</div>
</body>

Ini apa yang terjadi:

  1. ng-controller="WeatherController" menghubungkan view kita ke controller kita.
  2. ng-model="city" mengikat input ke variabel $scope.city.
  3. ng-click="getWeather()" memanggil fungsi getWeather saat tombol ditekan.
  4. ng-if="weather.main" hanya menampilkan informasi cuaca jika kita sudah mengambil data.
  5. {{}} adalah cara kita menampilkan data dari $scope di view.

Menyempurnakan Penampilan

Langkah 5: Tambahkan Gaya

Mari kita tambahkan beberapa CSS untuk membuat aplikasi kita terlihat bagus:

<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
input, button {
font-size: 16px;
padding: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>

Menyusun Semua Bagian

Ini adalah file index.html lengkap kita:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>Aplikasi Cuaca Saya</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* CSS dari Langkah 5 berada di sini */
</style>
</head>
<body ng-controller="WeatherController">
<h1>Aplikasi Cuaca</h1>
<input type="text" ng-model="city" placeholder="Masukkan nama kota">
<button ng-click="getWeather()">Ambil Cuaca</button>

<div ng-if="weather.main">
<h2>Cuaca di {{weather.name}}</h2>
<p>Suhu: {{weather.main.temp}}°C</p>
<p>Deskripsi: {{weather.weather[0].description}}</p>
</div>
<script src="app.js"></script>
</body>
</html>

Dan ini adalah file app.js lengkap kita:

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

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

Kesimpulan

Dan begitu saja, teman-teman! Kita sudah membuat aplikasi cuaca sederhana tapi fungsional menggunakan AngularJS. Ingat, belajar mengoding seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan frustasi jika Anda belum mengerti segalanya segera. Tetap mencoba, tetap mengoding, dan terutama, tetap bersenang-senang! Sekarang, maju dan kuasai dunia coding! Ingat, setiap ahli pernah menjadi pemula. Tetap keras kerja, dan sebelum Anda sadari, Anda akan membuat aplikasi yang menakjubkan. Sekarang, pergi dan taklukkan dunia coding!

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

Konsep Deskripsi
ng-app Menentukan elemen root dari aplikasi AngularJS
ng-controller Menentukan controller untuk bagian aplikasi
ng-model Mengikat input ke variabel dalam scope
ng-click Mendefinisikan event klik
ng-if Menampilkan elemen secara bersyarat
{{}} Menampilkan data dari scope di view
$scope Memindahkan data antara controller dan view
$http Membuat permintaan HTTP

Selamat coding, semua orang! Ingat, setiap ahli pernah menjadi pemula. Tetap keras kerja, dan sebelum Anda sadari, Anda akan membuat aplikasi yang menakjubkan. Sekarang, pergi dan taklukkan dunia coding!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Aplikasi Berbagi
Tutorial Selanjutnya:
AngularJS - Aplikasi Timer