Serta Mengambil Data Lokasi dari Geolocation API pada Browser
Persyaratan — Sebelum Memulai
- API Key Open Weather. Mohon dibuat dahulu akunnya ya, nanti akan mendapatkan API Key-nya.
- Browser/Peramban. Kalau gak punya nanti buka lamannya menggunakan apa dong? :)
- IDE. Boleh apapun, yang penting bisa tulis kodenya. Notepad juga boleh.
- Node. Versi 18/20 aja ya, kita coba pakai Vite + React kali ini.
- Sudah. Hehe…
Mempersiapkan Proyek
Nah, kita perlu siapin dulu nih proyeknya.
npm create vite@latest
- Jalankan perintah di atas.
- Isi nama proyek.
- Pilih “Vite + React + Typescript” atau sejenisnya, biar sama nih.
- Masuk ke foldernya, lalu jangan lupa “ npm install ” ya.
- Nah, ada tambahan, kita mau pakai axios. Jadi, ada tambahan perintah “npm install axios” , inget tidak pakai tanda petik.
- Kalau mau jalanin aplikasinya, “ npm run dev ”.
Eksplorasi dan Mengubah Kode
Nah, udah siap nih untuk ubah-ubah kodenya. Pelan-pelan aja ya.
Kita sekarang mempersiapkan kode untuk ambil lokasi kita dulu aja deh ya.
Geolocation API
Tambahin kode ini dulu di berkas App.tsx ya. Tulisnya sebelum function App().
interface Location {
latitude: number;
longitude: number;
}
function App() {
/** sengaja dipotong */
}
Nah, setelah itu kita perlu siapin state-nya dulu, state-nya akan kita pakai untuk memanggil API Open Weather ya.
function App() {
const [userLocation, setUserLocation] = useState<Location | null>(null);
/** sengaja dipotong lagi */
}
Udah siap aja nih. Yuk, kita sekarang buat fungsi yang akan memanggil Geolocation API dari browser ya.
function App() {
const [userLocation, setUserLocation] = useState<Location | null>(null);
const getUserLocation = () => {
// if geolocation is supported by the users browser
if (navigator.geolocation) {
// get the current users location
navigator.geolocation.getCurrentPosition(
(position) => {
// save the geolocation coordinates in two variables
const { latitude, longitude } = position.coords;
// update the value of userlocation variable
setUserLocation({ latitude, longitude });
},
// if there was an error getting the users location
(error) => {
console.error('Error getting user location:', error);
}
);
}
// if geolocation is not supported by the users browser
else {
console.error('Geolocation is not supported by this browser.');
}
};
/** sengaja dipotong lagi nih */
}
Oke, seperti ada yang kurang kalau gak ada yang menampilkan nilainya. Jadi kita sekarang bermain di bagian rendernya nih.
function App() {
/** sengaja dipotong, tapi ini kode tadi ya... */
return (
<>
<div>
<h1>Geolocation App</h1>
{/* create a button that is mapped to the function which retrieves the users location */}
<button onClick={getUserLocation}>Get User Location</button>
{/* if the user location variable has a value, print the users location */}
{userLocation && (
<div>
<h2>User Location</h2>
<p>Latitude: {userLocation.latitude}</p>
<p>Longitude: {userLocation.longitude}</p>
</div>
)}
</div>
</>
)
}
Cobain deh di browser. Kamu harusnya udah bisa menampilkan nilainya nih. Ini contoh aja ya.
Contoh Lat & Long
Wah, maaf ya disensor. Nanti ketahuan lokasinya. Hehe…
Memanggil Open Weather API menggunakan Axios
Sekarang bagian memanggil API Open Weather dengan axios nih.
Siapin dulu aja nilai yang ingin disimpan, kalau saya simpan cuaca sekarang aja deh. Oh iya, ini ada tambahan loading, ya biar ala-ala ada prosesnya.
function App() {
const [userLocation, setUserLocation] = useState<Location | null>(null);
const [currentWeather, setCurrentWeather] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(false);
/** sengaja dipotong lagi dan lagi, tapi ini kode tadi ya... */
}
Nah, kita tulis fungsi untuk mengambil datanya.
function App() {
/** sengaja dipotong lagi dan lagi, tapi ini kode tadi ya... */
const getWeather = () => {
setLoading(true);
setTimeout(() => {
if (!userLocation) {
setLoading(false);
return;
};
const apiKey = import.meta.env.VITE_API_KEY;
axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${userLocation.latitude}&lon=${userLocation.longitude}&appid=${apiKey}`)
.then((result) => {
setCurrentWeather(result.data.weather[0].main);
}).catch((err: Error) => {
console.error(err);
}).finally(() => {
setLoading(false);
})
}, 1000);
};
}
Sabar, ini masih belum loh. Sekarang kita siapin tombol untuk memuat cuacanya.
function App() {
return (
<>
<div>
<h1>Geolocation App</h1>
{/* create a button that is mapped to the function which retrieves the users location */}
<button onClick={getUserLocation}>Get User Location</button>
{/* if the user location variable has a value, print the users location */}
{userLocation && (
<div>
<h2>User Location</h2>
<p>Latitude: {userLocation.latitude}</p>
<p>Longitude: {userLocation.longitude}</p>
<button onClick={getWeather}>Get Current Weather</button>
{loading && (<div className='loader'></div>)}
{currentWeather && (<p>Current weather: {currentWeather}</p>)}
</div>
)}
</div>
</>
)
}
Eh iya, tadi belum memberikan css yang digunakan untuk “loader” ya. Ini contoh aja ya. Bebas aja mau pakai yang mana. Ini bisa kamu tambahkan di App.css ya.
/* HTML: <div class="loader"></div> */
.loader {
width: fit-content;
font-weight: bold;
font-family: sans-serif;
font-size: 30px;
padding-bottom: 8px;
background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
animation: l2 2s linear infinite;
}
.loader:before {
content:"Loading..."
}
@keyframes l2 {to{background-size: 100% 3px}}
Ashiap, sekarang mau coba? Belum. Jangan lupa tambahkan environment variable-nya. Bisa membuat file .env lalu masukkan nilai API Key-nya.
VITE_API_KEY=
Isi dengan key kamu ya.
Terus, terus? Yuk cobain lagi.
Cuaca Sekarang
Ini cuacaku. Bagiamana cuaca kamu?
Aplikasinya?
Saya sematkan di sini ya.
GitHub - berviantoleo/open-weather-exploration: Open Weather Example
Penutup
Terima kasih ya sudah membaca. Salam sejathera untuk kita semua. Semoga bermanfaat. Jika ada tanggapan, jangan sungkan. *Chheeeersss!
Photo by Andre Hunter on Unsplash
