Malay

Tutorial AngularJS

Aplikasi AngularJS

AngularJS - Aplikasi Cuaca

Hai sana, bintang-bintang pemrograman masa depan! Hari ini, kita akan melangsungkan sebuah perjalanan menarik untuk menciptakan sebuah aplikasi cuaca menggunakan AngularJS. Jangan khawatir jika Anda belum pernah menulis sebaris kode sebelumnya - saya akan menjadi panduan ramah Anda dalam petualangan ini, sama seperti yang saya lakukan untuk ribuan murid selama tahun-tahun mengajar saya. mari kita lipatkan lengan dan masuk ke dalam!

AngularJS - Weather Application

apa itu AngularJS?

Sebelum kita memulai membangun aplikasi cuaca kita, mari kita bicarakan tentang 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 menciptakan aplikasi single-page dinamis dengan mudah.

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 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 tinggal!"

Langkah 2: Buat Aplikasi Kita

Sekarang, mari kita buat file app.js kita:

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

Baris ini seperti mengatakan, "Hai, AngularJS! Mohon buatkan 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 mensahkan 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()">Dapatkan 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 telah mengambil data.
  5. {{}} adalah cara kita menampilkan data dari $scope di view.

Menyusun Semua Bagian

ini 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()">Dapatkan 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 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 pun, teman-teman! Kita telah membangun sebuah aplikasi cuaca sederhana tapi berfungsi menggunakan AngularJS. Ingat, belajar pemrograman seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan frustasi jika Anda belum mengerti segalanya segera. Terus mencoba, terus mengoding, dan terutama, terus bersenang-senang!

Ini tabel yang menggabungkan konsep AngularJS utama yang kita gunakan:

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

Selamat coding, semua orang! Ingat, setiap ahli pernah menjadi pemula. Terus terus saja, dan sebelum Anda sadari, Anda akan menjadi pembangun aplikasi yang menakjubkan. Sekarang, pergilah dan taklukkan dunia pemrograman!

Credits: Image by storyset

Tutorial Sebelumnya:
AngularJS - Kongsi Aplikasi
Tutorial Seterusnya:
AngularJS - Aplikasi Pemasa