[Electron/일렉트론] VATSIM API를 활용하여 공항 전광판 만들기

 

코딩 일지: VATSIM 공항 전광판 개발

 

 

 

프로젝트 개요

이번 프로젝트는 일렉트론(Electron)을 사용해 VATSIM API를 연동한 공항 도착 전광판을 개발하는 것입니다. HTML, CSS, JavaScript를 사용하여 간단하면서도 직관적인 인터페이스를 구축했습니다.

 

GIT : https://github.com/yuukihj/VATSIM_AIRPORT_SIGN

GitHub - yuukihj/VATSIM_AIRPORT_SIGN: To show VATSIM AIRPORT SIGN,

 

개발 환경

• 프레임워크: Electron
• 프로그래밍 언어: HTML, CSS, JavaScript
• API: VATSIM API

개발 과정

1. 프로젝트 설정

Electron 환경을 설정하고, 기본적인 파일 구조를 구성했습니다. HTML, CSS, JavaScript 파일을 작성하여 기본적인 인터페이스를 구현했습니다.

2. VATSIM API 연동

VATSIM API를 통해 공항 도착 정보를 가져오는 기능을 구현했습니다. API 호출을 통해 실시간 데이터를 받아와서 화면에 표시할 수 있도록 했습니다.

fetch('VATSIM_API_URL')
    .then(response => response.json())
    .then(data => {
        // 데이터 처리 로직
    })
    .catch(error => console.error('Error:', error));

3. 인터페이스 디자인

CSS를 사용한 인터페이스를 디자인했습니다. 전광판의 디자인은 실제 공항의 도착 전광판을 참고하여 직관적으로 구성했습니다.  HTML만드는것과 동일하니까 너무 간편해서 편한것같아요.

.board {
    font-family: 'Courier New', Courier, monospace;
    background-color: #000;
    color: #fff;
    padding: 10px;
}

4. 기능 테스트

API 연동 및 인터페이스 기능을 테스트하여 버그를 수정했습니다.아직은 버그도 많고 코드가 약간 꼬인듯한 기분이....

결론

이번 프로젝트를 통해 실시간으로 업데이트되는 공항 도착 전광판을 구현할 수 있었습니다. 일렉트론으로 하니 다른언어에 비해 편리하며, VATSIM API를 활용한 데이터 연동도 성공적으로 마쳤습니다.