## RANCANG BANGUN WEBSITE PENCARIAN INFORMASI BERITA DAN CUACA DAERAH DI INDONESIA MENGGUNAKAN API DAN EXPRESS.JS
Muhammad Rafi Nahjan, Azhari Ali Ridha, Nono Heryana, Apriade Voutama Sistem Informasi, Universitas Singaperbangsa Karawang Jalan HS. Ronggo Waluyo, Karawang, Indonesia.
1910631250024@student.unsika.ac.id

## ABSTRAK
Perkembangan ilmu pengetahuan dan teknologi di zaman sekarang ini melaju dengan sangat pesat dan cepat menyebar ke seluruh penjuru dunia, salah satunya adalah perkembangan dalam bidang jaringan internet . internet sendiri dapat berisi apa saja, salah satunnya adalah website Penelitian ini bertujuan untuk membuat sebuah website yang menyediakan informasi terkini mengenai berita dan cuaca pada daerah-daerah di Indonesia. Penelitian ini mencoba  membangun sebuah website yang  mengintegrasikan  API NewsAPI dan API OpenWeatherMap untuk menyediakan  data  terupdate  mengenai  berita  dan  cuaca  pada  daerah-daerah  di  Indonesia,  pembuatan  sistem menggunakan bahasa pemrograman seperti PHP, HTML, JavaScript, dan express.js. Penelitian ini juga mengacu pada penelitian sebelumnya yang telah dilakukan terkait pembuatan website informasi daerah, namun penelitian sebelumnya memiliki beberapa kekurangan seperti dalam penginputan data manual dan pembaharuan data yang memerlukan intervensi manusia secara berkala. Penelitian ini bertujuan untuk menyediakan sebuah website yang menginformasikan berita dan cuaca terkini pada daerah-daerah di Indonesia. Penelitian ini berperan sebagai sarana penyedia informasi terkini mengenai suatu daerah dalam bentuk berita dan cuaca.
Kata kunci: Website, API, OpenWeatherMap, NewsAPI.

## 1. PENDAHULUAN
Perkembangan  ilmu  pengetahuan  dan  teknologi di zaman sekarang ini melaju dengan sangat pesat dan cepat  menyebar  ke  seluruh  penjuru  dunia,  salah satunya adalah perkembangan dalam  bidang  jaringan internet .    Dengan  berkembangnya internet maka mempengauhi  juga  perkembangan website .  Pada penelitian  ini,  penulis  mencoba  untuk  membuat website yang  dapat  menyediakan  informasi  daerah tertentu berupa berita yang bersumber dari API.
API  adalah  sebuah  antarmuka  yang  memiliki fungsi  sebagai  penghubung  atau  pembuat  koneksi antara  sebuah  aplikasi  dengan  aplikasi  lainnya,  atau antara server dan client. [1] API sendiri berperan untuk memberikan  data  terupdate  untuk website agar  dapat menampilkan data otomatis tanpa harus diinput secara manual  dengan  berkala.  Adapun  API  yang  dipakai sebagai  pembangun website dalam  penelitian  ini adalah NewsAPI dan API OpenWeatherMap. Dengan kedua  API  tersebut  diharapkan  dapat  memenuhi kebutuhan data pada website yang akan dibangun. Website ini dibangun dengan bahasa pemrograman  pada  umumnya  seperti  PHP,  HTML, javascript,  dan  juga  express.js.  Express.js  adalah sebuah  framework  dari  javascript  yang  digunakan untuk  memudahkan  dalam  kegiatan  penulisan  kode dan mempersingkat kode dengan fungsi yang terdapat didalamnya. [2] Jadi, dengan digunakannya express.js mempermudah  penulis  untuk  membangun website pada  penelitian  ini.  Adapun  tujuan  penelitian  ini adalah  untuk  Membuat website sederhana  untuk mengetahui  informasi  terkini  dari  suatu  daerah  yang diinputkan  namanya,  lalu  menampilkan  sebuah informasi berupa informasi cuaca dan berita yang ada pada  daerah  yang  sebelumnya  diinputkan.  Dengan
adanya penelitian ini diharapkan dapat menjadi sarana penyedia  informasi  terkini  yang  terjadi  pada  suatu daerah.

## 2. TINJAUAN PUSTAKA
2.1. System Development Life Cycle (SDLC) SDLC  ( Software  Development  Life  Cycle )  atau juga  dikenal  sebagai System  Life  Cycle adalah metodologi  pengembangan  perangkat  lunak  yang melibatkan  proses  pembuatan  dan  modifikasi  sistem, model, dan metode untuk memastikan pengembangan perangkat lunak yang berkualitas tinggi sesuai dengan tujuan  dan  persyaratan  yang  diinginkan.  Metodologi SDLC  membantu pengembang dalam  merencanakan, mengembangkan,  dan  memelihara  perangkat  lunak dengan  alur  kerja  atau  fase  terstruktur,  sehingga memungkinkan analisis terperinci dari setiap langkah dalam proses pengembangan [3].
Gambar 1. Tahapan SDLC
SDLC  adalah  siklus  yang  digunakan  untuk mengembangkan  sistem  informasi  dengan  tujuan efektif  memecahkan  masalah.  Ini  adalah  serangkaian tahapan pekerjaan yang bertujuan untuk menciptakan sistem  berkualitas  tinggi  sesuai  dengan  kebutuhan pelanggan  dan  tujuan  sistem.  SDLC  adalah  sebuah framework  yang  berisi  langkah-langkah  untuk pengembangan  perangkat  lunak  dan  rencana  lengkap untuk memelihara perangkat lunak.
2.2. Metode Waterfall Waterfall adalah model dalam Software Development  Life  Cycle  (SDLC)  yang  mengikuti urutan  tahapan  terpisah  secara  berurutan,  termasuk perencanaan, analisis kebutuhan, desain, implementasi,  pengujian,  dan  pemeliharaan.  Setiap tahap harus selesai sebelum tahap berikutnya dimulai, menciptakan  alur  seperti  air  terjun.  Keuntungannya adalah mudah dipahami dan memberikan struktur yang jelas,  tetapi  kurang  fleksibel  dan  tidak  sesuai  untuk proyek yang membutuhkan perubahan cepat [3].

## 2.3. Application Programming Interface (API)
API  adalah  antarmuka  yang  menghubungkan aplikasi atau server dengan fungsi untuk mengintegrasikan fitur tanpa perlu input data manual. Kepanjangan  API  adalah  Application  Programming Interface,  yang  berperan  sebagai  penghubung  antar aplikasi,  baik  dalam  platform  yang  sama  maupun berbeda,  memungkinkan  komunikasi  dan  integrasi fitur antara aplikasi [4].

## 2.4. Figma
Figma  adalah  alat  desain  web  yang  populer  di kalangan  desainer  UI/UX.  Figma  memungkinkan kolaborasi real-time, prototyping, pembuatan tata letak halaman,  pengaturan  komponen,  dan  konsistensi dalam  gaya  desain.  Ini  juga  mendukung  plugin  dan integrasi  dengan  alat  desain  lainnya,  menjadikannya alat  yang  berharga  bagi  desainer  dalam  menciptakan desain menarik dan fungsional.

## 2.5. Website
Website adalah salah satu aplikasi yang berisikan dokumen–dokumen  multimedia  di  dalamnya  yang menggunakan  protokol  HTTP  dan  untuk  mengakses menggunakan perangkat lunak (software) yang disebut browser [3].

## 2.6. Express.js
Express.js  adalah  kerangka  kerja  web  backend berbasis  Node.js  yang  ditulis  dalam  JavaScript.  Ini menyederhanakan pengembangan aplikasi web dengan  alat  dan  struktur  yang  diperlukan,  dengan keunggulan  kemudahan  penggunaan  berkat  sintaks yang  intuitif.  Express.js  juga  memiliki  middleware yang membantu dalam penanganan kesalahan, parsing data, dan otentikasi. Fleksibilitas adalah salah satu ciri khasnya,  memungkinkan  pengembang  memilih  dan mengintegrasikan komponen sesuai kebutuhan.
Ekosistem Node.js dan dukungan API kuat menjadikannya pilihan populer untuk backend aplikasi web  modern.  Express.js  adalah  kerangka  kerja  yang tangguh, ringan, dan fleksibel yang sangat cocok untuk pengembangan aplikasi web Node.js yang efisien dan dapat diperluas dengan mudah.

## 2.7. Penelitian Sebelumnya
Tabel 1. Penelitian Sebelumnya No. Penulis Judul Penelitian 1. Ahmad Rohman, Indra Yatini B Aplikasi Asisten Praktikum Menggunakan Node.js dan Database MomgoDB (Studi Kasus Lab STMIK Akakom) 2. Pande Gede Wipradnyana, I Made Arsa Suyadnya, Ni Made Ary Esta Dewi Wirastuti Aplikasi Prakiraan Cuaca Wilayah Bali Berbasis Android 3. Clinton Hatta Pradigi, Tintin Harlina, Solehatin Implementasi Express.js Untuk Membangun Rest API Website STIKOM PGRI Banyuwangi 4. Glenn Natanael Sofian,  Wahyu Kusuma  Raharja, Jalinas Perancangan Aplikasi Informasi Cuaca Berbasis Android  Menggunakan API  dan  JSON 5. Yulia Hapsari, Bella Adinda Putri, Samsuryadi. Sistem Informasi Cuaca Berbasis Desktop dengan Menggunakan Data Sensor dan BMKG

## 2.8. Perbandingan Dengan Penelitian
Sebelumnya Penelitian ini bertujuan mengembangkan sistem website yang  menyediakan  informasi  daerah  seperti berita  dan  cuaca  dengan  menggunakan  metodologi SDLC, terutama model Waterfall . Keunggulan utama penelitian  ini  adalah  penggunaan  API  untuk mengakses data terbaru, memastikan akurasi informasi.  Penggunaan  JavaScript  dan  framework Express.js  mempermudah  pengembangan  sistem dengan  kecepatan  dan  fleksibilitas  yang  tinggi. Dengan  pendekatan Waterfall ,  diharapkan  sistem website ini  akan  menjadi  sumber  informasi  daerah yang  terstruktur  dan  akurat  dengan  berita  dan  cuaca terkini.

## 3. METODE PENELITIAN
Metodologi yang digunakan dalam penelitian ini adalah  metode  Software  Development  life  cycle (SDLC)  dengan  model waterfall .  metode  ini  cocok untuk  pengembangan  sistem  penelitian  ini  karena pembuatan  dan  penggunaan  sistem  memakan  waktu yang relatif singkat, dan dengan metode ini diharapkan sistem  yang  dibuat  dapat  sesuai  dan  dapat  berfungsi dengan baik. Adapun tahapan-tahapan pada penelitian ini adalah sebagai berikut:

## Gambar 2. Alur metode penelitian

## 3.1. Perencanaan
Pada  tahapan  ini,  dilakukan  beberapa  proses diantaranya:
a.  Pengumpulan data penelitian.
b.  Analisis kebutuhan.

## 3.2. Perancangan
Pada  tahapan  ini  dilakukan  proses  desain  yang dibuat  untuk  menggambarkan  sistem  yang  akan dibuat, ada desain sistem yang dimuat dalam usecase diagram dan desain UI website yang menggambarkan tampilan website yang dibuat menggunakan figma.

## 3.3. Implementasi
Pada  tahapan  ini,  penulis  melakukan  kegiatan coding  atau  penulisan  kode  yang  bertujuan  untuk menerjemahkan  desan  yang  sebelumnya  dibuat menjadi  sebuah  sistem  yang  berfungsi  sesuai  dengan keinginan penulis.

## 3.4. Pengujian
Pada  tahap  terakhir  ini  peneliti  menguji  sistem website yang  telah  dibuat  menggunakan  Blackbox testing  yang bertujuan untuk mengecek  fungsi-fungsi dari website yang dibuat.

## 4. HASIL DAN PEMBAHASAN
Hasil  penelitan  ini  adalah  merancang  sistem website yang  berfungsi  sebagai  penyedia  informasi daerah pada perkotaan yang ada di indonesia. Aplikasi ini  diharapkan  dapat  membantu  usernya  dalam  hal penyedia informasi dan penelitian ini diharapkan dapat mengenalkan  API  sebagai  pengganti  database  dan mempermudah  pembuatan  sebuah  sistem.  Adapun nama dari website yang dihasilkan adalah LocWeatherNews. Selanjutnya dijabarkan juga tahapan penelitian ini.

## 4.1. Perancangan
Pada tahap  ini,  dilakukan  analisis  kebutuhan website atau  sistem  yang  akan  dibuat  agar  sesuai dengan apa yang direncanakan.
1. Kebutuhan Fungsional Tabel 2.  Kebutuhan Fungsional Actor Fungsi User Sistem dapat melakukan input nama kota Sistem dapat menampilkan data cuaca terkini pada kota yang diinputkan Sistem dapat menampilkan berita yang ada pada kota yang diinputkan Sistem dapat mengambil data cuaca dan berita yang bersumber dari API
Tabel  1. Menjelaskan  beberapa  fungsi  sistem yang  tersedia.  Pengguna  dapat  memasukkan  nama kota ke dalam sistem untuk melihat data cuaca terkini yang terkait  dengan kota tersebut, serta mendapatkan berita  terkini  yang  berkaitan  dengan  kota  yang  telah diinputkan. Sistem ini mengambil informasi cuaca dan berita  dari  sumber  yang  terhubung,  memberikan pengguna pengalaman interaktif dan informatif dalam mengakses  informasi  cuaca  dan  berita  kota  yang mereka minati.
2. Kebutuhan Non-Fungsional
Tabel 3.  Spesifikasi API No   API Penyedia Limit request 1 Cuaca OpenWeatherMap 1000/Hari 2 Berita NewsAPI 1000/Hari
Tabel  2.  Berisi  tentang  spesifikasi  API  yang digunakan  untuk  kebutuhan  system  yang  akan dibangun,  service  web  API  yang  digunakan  juga merupakan  paket free  to  use (yaitu  paket  yang digratiskan  oleh  pihak  penyedia  layanan  API,  jika request  lebih  dari  itu  maka  akan  dikenakan  tarif  per requestnya).

## 4.2. Perancangan
Pada tahap desain dalam penelitian ini, dilakukan perancangan  desain  arsitektur  perangkat  lunak  serta desain antarmuka pengguna (UI).
1. Usecase Diagram
Berisi  tentang  permodelan  untuk  kelakuan (behavior)  sistem  informasi  yang  akan  dibuat  dan mendeskripsikan  sebuah  interaksi  antara  satu  atau lebih aktor dengan sistem informasi yang akan dibuat [5].
2. Desain UI Desain interface sistem website yang akan dibuat dalam  penelitian  ini  bertujuan  untuk  memberikan gambaran  yang  jelas  tentang  fungsionalitas  sistem. Interface  ini  dirancang  agar  mudah  dan  sederhana, sehingga  pengguna  dapat  dengan  mudah  mengakses fungsi-fungsi  sistem.  Tata  letak  atau  layout  yang digunakan  disusun  dengan  cermat  untuk  memastikan aksesibilitas elemen penting. Selain itu, desain ini juga memperhatikan  penggunaan  elemen  visual  seperti gambar, ikon, dan grafik untuk meningkatkan estetika tampilan, memberikan kontribusi visual yang menarik, dan  memudahkan  pemahaman  informasi  oleh pengguna. Di bawah ini adalah contoh tampilan desain dari  sistem website yang  akan  dibuat  dengan menggunakan tools Figma.

## 1. Desain halaman search
Gambar 4. Desain SearchPage
2. Desain Halaman LocationWeatherNews
Gambar 5. Desain LocationWeatherNews

## 4.3. Implementasi
Dalam  tahap  implementasi,  tim  pengembang menggunakan  HTML  dan  JavaScript  sebagai  dasar untuk  membangun  sistem website yang  telah direncanakan.  HTML  digunakan  untuk  struktur halaman  web,  sedangkan  JavaScript  untuk  fungsi interaktif.  Mereka  juga  memanfaatkan  Express.js untuk  membangun  server  web  dan  Bootstrap  CSS
untuk  antarmuka  pengguna  yang  responsif.  Fokus implementasi  adalah  menerjemahkan  desain  menjadi kode  yang  berfungsi,  membangun  halaman  web, mengatur interaksi, menghubungkan dengan API, dan memastikan konsistensi dengan desain awal. Berikut adalah  hasil  dari  proses  coding  yang  dilakukan  oleh penulis:
Gambar 5. Screenshoot halaman SearchPage
Gambar 5. Screenshoot halaman LocationWeatherNews Dengan menggunakan kombinasi bahasa pemrograman HTML dan JS, bersama dengan library seperti  Express.js  dan  Bootstrap  CSS,  peneliti  dapat mengimplementasikan  rancangan  sistem website dengan  lebih  efisien  dan  memudahkan  dalam membangun antarmuka pengguna yang baik.

## 4.4. Pengujian
Pada  tahap  ini,  sistem  diuji  dengan  metode Blackbox  testing  yang  dilakukan  untuk  memastikan fungsionalitas  sistem  sesuai  dengan  kebutuhan pengguna  dan  persyaratan  yang  telah  ditetapkan sebelumnya  [6]. Adapun tujuan dari kedua pengujian ini  adalah  untuk  memastikan  bahwa  sistem  siap digunakan dan memenuhi harapan pengguna.
1. BlackBox Testing SearchPage
Tabel 4.  BlackBox Testing SearchPage Data masukan Hasil yang diharapkan User memasukan parameter berupa nama suatu kota di indonesia System akan menuju ke halaman LocationWeatherNews Page System menampilkan LocationWeatherNews Page yang berisi data lokasi tersebut yang bersumber dari API [  ] Diterima
2. BlackBox Testing LocationWeatherNews Page.
Tabel 5. BlackBox Testing LocationWeatherNews Page. Data masukan Hasil yang diharapkan Hasil Uji data Normal Parameter yang sebelumnya dimasukan pada form search page System akan menampilkan data yang sesuai dengan parameter yang sebelumnya dimasukan pada form search page Hasil Uji data Tidak Normal parameter nama kota yang sebelumnya dimasukan pada SearchPage salah / terjadi kesalahan pengetikan. Sistem akan tetap menampilkan halaman LocationWeatherNews Page, namun pada sectopm Respon system Hasil Uji Hasil Uji data Normal System menampilkan data yang sesuai pada section OpenWeatherMap dan NewsAPI dengan parameter yang sebelumnya dimasukan pada form search page
[  ] Diterima Hasil Uji data Tidak Normal
System menampilkan LocationWeatherNews Page tetapi pada section OpenWeatherMap berisi unknown location dan bagian data cuaca akan unidentified, untuk section NewsAPI akan berisi Not Found.
[  ] Diterima

## 5. KESIMPULAN DAN SARAN
Penelitian  ini  berhasil  menghasilkan  Rancang Bangun Website Pencarian  Informasi  Berita  Dan Cuaca  Daerah  Di  Indonesia  Menggunakan  API  Dan Express.Js yang telah dibuat dan diuji dengan metode SDLC model waterfall . Website ini berfungsi sebagai penyedia informasi terkini mengenai berita dan cuaca di  berbagai  daerah  di  Indonesia,  menggunakan  API seperti  NewsAPI  dan  API  OpenWeatherMap  untuk otomatis  mengupdate  data.  Dalam  uji  coba  oleh pengguna  (UAT), website ini  terbukti  membantu pengguna  dalam  mendapatkan  informasi  terkini mengenai  daerah  yang  mereka  minati,  mencakup cuaca dan berita, dan menjadi solusi yang efektif untuk kebutuhan tersebut. Penelitian selanjutnya diharapkan dapat membuat sistem atau menambah fitur yang tidak terdapat pada penelitian ini.

## DAFTAR PUSTAKA
[1] E. Novalia and A. Voutama, “Black Box Testing dengan  Teknik  Equivalence  Partitions  Pada Aplikasi Android M-Magazine Mading Sekolah,” Syntax   J.  Inform. ,  vol.  11,  no.  01, 2022, doi: 10.35706/syji.v11i01.6413.
[2] Y. Hapsari and B. A. Putri, “Sistem Informasi Cuaca Berbasis Dekstop dengan Menggunakan Data Sensor dan,” Pros. Annu. Res. Semin. 2017 Comput. Sci. ICT , vol. 3, no. 1, 2017.
[3] W.  S.  Dharmawan,  D.  Purwaningtias,  and  D. Risdiansyah,  “Penerapan  Metode  SDLC Waterfall Dalam Perancangan Sistem Informasi Administrasi  Keuangan  Berbasis  Desktop,” J. Khatulistiwa Inform. , vol. 6, no. 2, pp. 159–167, 2018, doi: 10.31294/khatulistiwa.v6i2.160.
[4] Y.  Kristina,  “Mengenal  Metode  SDLC  dalam Pengembangan
Software,” https://www.gamelab.id/news/1345-mengenal- metode-sdlc-dalam-pengembangan-software , 2022.
[5] A.  Yasinta  Permana  and  A.  Voutama, “Pemodelan  UML  Pada  Sistem  Penjualan Sembako Di Toko Amshop,” Inf. Manag. Educ. Prof. , vol. 7, no. 1, 2022.
[6] A. Rohman and I. B Yatini,  “Aplikasi  Asisten Praktikum Menggunakan NodeJS dan Database MongoDB,” J.  Teknol.  dan  Sist.  Inf.  -  STMIK AKAKOM Yogyakarta , 2016.