4급식알리미 웹앱, 코딩 초보도 뚝딱! AI로 만드는 급식 앱 지금 공개!

급식 알리미 웹앱 만들기! 🚀

오늘은 학교 급식 메뉴를 알려주는 웹앱을 만들어 볼 거야. 마치 급식 도우미처럼 말이지!

1. 급식 메뉴 확인하기 🧐

먼저 오늘 우리 학교 급식이 뭔지 알아봐야겠지? 네이버에서 '광희고등학교'를 검색해서 급식 정보를 찾아봤어.

• 오늘 메뉴: 삼겹살 김치 볶음밥, 바게트 가지 피자, 어묵국, 도라지오이 생채

이걸 웹앱으로 만들어 볼 거야!

2. AI로 웹앱 만들기 시작! 🤖

AI 도구인 '커서 AI'를 실행해서 웹앱 만들기를 시작했어.

• 먼저 프로젝트를 위한 폴더를 만들고, index.html, style.css 파일을 만들었지.
• AI에게 "오늘 급식을 알려주는 앱을 만들어줘"라고 요청했어.

처음에는 코드를 받았지만, 급식 정보가 제대로 나오지 않았어. 메뉴도 임의로 넣어놓은 것 같았지.

3. 디자인 개선! ✨

그래서 AI에게 디자인을 더 멋지게 만들어 달라고 요청했어.

• HTML, CSS 코드를 분리해서 만들고, 부트스트랩 같은 걸 활용해서 세련되게 만들어 달라고 했지.
• AI가 만들어준 코드를 적용했더니, 이전보다 훨씬 보기 좋아졌어!

4. 실제 급식 정보 가져오기! 🌐

하지만 여전히 실제 급식 정보가 나오지 않았어. 이걸 해결하기 위해 '나이스 급식 정보'라는 곳에서 정보를 가져오기로 했어.

• '나이스 교육 정보 개방 포털'에 들어가서 '급식 식단 정보'를 찾아봤지.
• 여기서 급식 정보를 가져오는 방법을 알아봤는데, 좀 복잡했어.

5. API 정보 파악하기 🔍

API 정보를 자세히 보니, 학교마다 고유한 코드가 있다는 걸 알게 됐어.

• t10 같은 건 교육청 코드, 9283 같은 건 학교의 행정 표준 코드였지.
• 이 코드들을 이용해서 특정 학교의 급식 정보를 가져올 수 있다는 걸 알게 됐어.

6. 우리 학교 정보로 URL 만들기 🔗

이제 우리 학교인 '광희고등학교' 정보를 찾아서 URL을 만들어 봤어.

• 경기도 교육청 코드는 j10, 행정 표준 코드는 7531110이었어.
• 오늘 날짜인 2024년 10월 23일 정보를 넣어서 URL을 만들었지.

이 URL로 접속해보니, 우리가 처음에 확인했던 급식 메뉴가 그대로 나왔어! 🎉

7. AI와 함께 코드 수정하기 ✍️

이제 이 URL을 이용해서 AI에게 코드를 다시 수정해 달라고 요청했어.

• "오늘 날짜에 해당하는 급식 정보를 가져오기 위해 API를 받아왔어. 이걸 활용해서 코드를 다시 수정해줘."라고 말이지.
• AI가 수정해준 코드를 적용하고 실행했더니, 드디어 오늘 급식 정보가 제대로 나왔어!

8. 오류 해결 및 완성! ✅

혹시 오류가 발생하면 어떻게 해야 할지도 AI에게 물어봤어.

• 오류 메시지를 그대로 붙여 넣고 해결 방법을 물어보는 과정을 반복했지.
• 이렇게 여러 번의 수정을 거쳐서, 이제 날짜가 바뀌면 자동으로 오늘 급식 메뉴를 보여주는 멋진 웹앱이 완성되었어!

만약 급식 정보가 없으면 "급식 정보가 없습니다"라고 표시되고, 오류가 발생하면 "급식 정보를 가져오는 중에 오류가 발생했습니다"라고 알려주는 기능까지 추가했지. 👍