안녕하세요. 이지이지입니다.
이번 포스팅에서는 앱인벤터로 급식앱을 만들어보도록 하겠습니다.
급식앱을 만드는 방법을 알려드리는 데 의의를 두고 가장 단순하게, 디자인에는 신경을 쓰지 않았음을 알려드립니다.
| 사전 준비(NEIS OPEN API 인증키 발급) |
급식앱을 만들기 위해서는 '나이스 교육정보 개방 포털'에서 제공하는 정보를 사용해야 합니다.
그래서 먼저 나이스 교육정보 개방 포털에서 인증키를 발급 받도록 합니다.
1. 다음 링크로 이동해 메뉴에서 [활용가이드]-[인증키 신청]을 선택합니다.
2. 인증키 신청 화면으로 이동해 간단한 정보를 입력 후 [인증 키 발급 신청]을 클릭합니다.
인증키 발급은 신청과 동시에 발급이 됩니다.
3. [마이페이지]를 선택하면 언제든 인증키를 확인할 수 있습니다.
발급받은 인증키를 앱인벤터에서 사용하기 위해 다른 곳에 기록해 둡니다.
4. 상단 메뉴에서 [데이터셋]을 클릭합니다.
5. 데이터셋 중 [급식식단정보 API]를 클릭합니다.
6. 나이스 API에 요청할 정보를 확인합니다. 이 급식앱 예제에서는 다음과 같은 정보를 요청할 것입니다.
7. 급식을 조회하려는 학교의 시도교육청코드와 표준학교코드를 확인하기 위해 상단 메뉴에서 [데이터셋]을 선택합니다.
8. 데이터셋 중 [학교기본정보]-[Sheet]를 선택합니다.
9. 찾으려는 학교 정보를 입력 후 [검색] 버튼을 눌러 시도교육청코드와 표준학교코드를 앱인벤터에서 사용하기 위해 기록해둡니다.
※ 제대로 된 급식앱을 만들기 위해서는 학교도 선택가능해야 하므로, 학교기본정보 API와 급식 API를 동시에 사용해야 할 것입니다. 이 부분은 스스로 학습해보시기 바랍니다.
| 화면 구성 |
먼저 다음 aia파일을 내려받아 참고하시기 바랍니다.
예제 급식앱을 위한 화면 구성은 매우 간단합니다.
Non-visible components로는 Web 컴포넌트 1개. Clock 컴포넌트가 1개가 필요하며,
Clock 컴포넌트의 속성(Properties)은 필수는 아니나 모드 체크해제를 합니다.
TimeInterval은 아무 숫자나 적어도 상관없습니다.
| 블록 코딩 |
먼저 급식앱의 전체 블록코딩 화면입니다.
복잡해 보이긴 하나, 반복되거나 덩어리 진 것이 많은 것이지 난이도가 어려운 것은 아닙니다.
다음은 급식앱에 사용된 변수 블록입니다.
① 나이스 API로부터 받은 데이터를 저장할 변수입니다.
② 급식 메뉴를 저장할 변수입니다. (아침, 점심, 저녁 중 하나만 저장, ④와 비교)
③ 급식의 횟수를 저장할 변수입니다.
④ 급식 메뉴를 저장할 변수입니다. (아침, 점심, 저녁 모든 메뉴를 저장, ②와 비교)
⑤ 변수 DietString에 포함된 글자 중 한글이 아닌(ex. 숫자) 요소를 저장할 변수입니다.
(※ 뒤에 나오는 블록 설명을 참고하세요.)
⑥ 변수 DietString에서 저장되어 있던 요소 중 한글이 아닌 텍스트를 변수 removeList에 추가하고, removeList에 있는 문자를 나중에 삭제하게 됩니다. (※ 뒤에 나오는 블록 설명을 참고하세요.)
다음은 리셋 프로시저(함수)에 대한 블록입니다.
리셋 프로시저는 [급식 조회하기] 버튼을 클릭했을 때, 이전에 변수에 저장되어 있던 내용을 모두 초기화하는 것입니다.
따로 설명은 하지 않겠습니다.
다음은 [급식 조회하기] 버튼을 클릭했을 때 실행되는 블록입니다.
① [급식 조회하기] 버튼을 클릭했을 때
② reset 프로시저를 호출하여 이전에 변수에 저장되어 있던 데이터를 모두 초기화합니다.
③~⑧ 나이스 API에 요청할 정보를 입력합니다. (사전 준비의 6을 함께 참고하세요)
③ 급식 API의 URL 주소입니다. 마지막에 "?"를 반드시 첨가해야 합니다.
④ 나이스로부터 발급받은 여러분의 API 키를 입력합니다.
⑤ 요청 타입을 json으로 합니다. xml로 해도 되지만, 이 예제 앱에서는 json 타입으로 정보를 받아오겠습니다.
⑥ 급식 데이터를 검색할 학교의 교육청코드를 입력합니다.
⑦ 급식 데이터를 검색할 학교의 코드를 입력합니다.
⑧ 급식 데이터를 가져올 날짜를 오늘 날짜로 설정합니다.
⑨ ③~⑧의 정보를 나이스 API에 신청하여 가져옵니다.
다음은 나이스 API로부터 정보를 받았을 때, 실행되는 블록입니다.
① 나이스 API로부터 정보를 받았을 때
② 변수 DietData에
- json 형식으로 된 나이스 API로부터 받은 정보를
- 앱인벤터에서 사용할 수 있는 형식으로 변환하여 저장합니다.
③ 변수 mealCount에 검색하려는 학교가 하루에 몇 번 급식을 하는지 그 숫자를 저장합니다.
→ 키 list_total_count에 정보가 나타나 있습니다. 1이면 1식(보퉁 중식), 2이면 2식, 3이면 3식학교입니다.
get value at key path 블록은 지정된 경로에 해당하는 값을 불러오는 블록으로,
경로를 리스트로 만들어 지정합니다.
경로에 키가 있으면 텍스트로(키는 { }에 있습니다.)
리스트에 속해 있으면 index 번호를 써줍니다(리스트는 [ ]에 있습니다).
다음은 나이스 API로부터 받은 정보의 일부분입니다.
우리가 찾으려는 list_total_count를 찾기 위해서는
- 먼저 가장 상위 경로 키: mealServiceDietInfo
- 두 번째 경로: 리스트 [ ]에서 첫 번째에 있으므로 1
- 세 번째 경로 키: head
- 네 번째 경로: 리스트 [ ]에서 첫 번째에 있으므로 1
- 다섯 번째 경로 키: list_total_count
이런 경로를 따라가 마지막 list_total_count에 해당하는 값 1을 찾아오게 됩니다.
※ 나이스 API로부터 받아오는 정보를 확인해보고 싶으시면 아래 주소를 복사하여 인터넷주소창에 입력해보시기 바랍니다. 빨간색 부분(YOURAPI는 수정 필수, 나머지는 옵션)은 수정해 사용하세요~
https://open.neis.go.kr/hub/mealServiceDietInfo?KEY=YOURAPI&Type=json&pIndex=1&pSize=10&ATPT_OFCDC_SC_CODE=B10&SD_SCHUL_CODE=7010057&MLSV_YMD=20210706
※ 딕셔너리 블록에 대한 더 자세한 설명은 제 블로그의 이전 포스팅을 참고하시기 바랍니다.
앱인벤터 강좌 #2 딕셔너리(Dictionary) 블록
안녕하세요. 이지이지입니다. 이번 포스팅에서는 딕셔너리(Dictionary) 블록에 대해 알아보도록 하겠습니다. 딕셔너리(Dictionary)란? 딕셔너리는 키(key)와 값(value)으로 이루어진 데이터 구조를 말하
egeasy.tistory.com
④ 만약 변수 mealCount에 저장된 값이 0이라면, (그렇지 않다면 ⑥ 으로)
→ 공휴일 등의 이유로 급식 정보가 없는 것입니다.
⑤ 급식 메뉴의 결과를 보여주는 레이블들의 텍스트를 "등록된 급식메뉴가 없습니다."로 표현합니다.
⑥ (변수 mealCount에 저장된 값이 0이 아니라면,) 1부터 mealCount에 저장된 값까지 1씩 증가하며 do안의 블록을 실행합니다.
⑦ 변수 Menus에 리스트 안의 리스트 형식으로 [ [List1],[List2]... ] 메뉴를 저장합니다.
→ List1, List2...의 첫 번째 항목에는 급식 시간을 저장하게 됩니다. ex. 조식, 중식, 석식
→ MMEAL_SC_NM에 들어 있습니다.
→ List1, List2...의 두 번째 항목에는 급식 메뉴를 저장하게 됩니다. ex. 쌀밥 미역국, 자장면 계란국, 카레밥 김치
→ DDISH_NM에 들어 있습니다.
⑧ 1부터 mealCount에 저장된 값까지 1씩 증가하며 do안의 블록을 실행합니다.
⑨ 만약 Menus의 number번째 리스트에서 첫 번째 항목(급식 시간 이름)이 "조식"이라면,
⑩ 변수 DietString에 "조식"에 해당하는 메뉴를 저장합니다.
→ MenuSearch 프로시저에서 DietString의 형태가 조금씩 변화하게 됩니다.
※ 리스트 블록에 대한 설명은 제 블로그 이전 포스팅을 참고하시기 바랍니다.
앱인벤터 강좌 #1 리스트(List) 블록
안녕하세요. 이지이지입니다. 이번 포스팅을 시작으로, 앱인벤터 강좌를 하나씩 올리고자 합니다. 저 스스로 앱인벤터로 앱을 만들어가며, 어려웠거나 유용하게 사용했던 부분들을 위주로 최대
egeasy.tistory.com
⑪ MesuSearh 프로시저를 호출합니다(실행되게 합니다.).
⑫ 아침 메뉴의 텍스트를 변수 DietString에 저장된 값으로 표시합니다.
다음은 MenuSearch 프로시저에 대한 블록입니다.
나이스 API에서 가져온 정보에는 메뉴와 함께 각 메뉴 옆에 알러지 정보를 알려주기 위한 숫자가 포함되어 있습니다.
이 숫자를 없애기 위한 프로시저입니다.
(프로시저의 목적과 프로시저의 이름이 일치하지 않네요... ㅡㅡ;;;)
① 변수 DietString에 <br/>부분을 모두 <구분>으로 고칩니다.
→ <br/>은 HTML 태그로 줄바꿈을 하라는 것입니다.
② 1부터 변수 DietString의 글자 수만큼 1씩 증가하며 do안의 블록을 실행합니다.
③ 변수 Ascii에 변수 DietString의 number번째 숫자를 저장합니다.
④ 만약 변수 Ascii에 저장된 텍스트가 "가"보다 작거나 "힣"보다 크다면,
→ 텍스트를 비교한다는 것은 텍스트에 해당하는 아스키코드의 숫자를 비교하는 것입니다.
→ 아스키코드에서 한글의 첫 번째 글자는 "가"이고 마지막 글자는 "힣"입니다.
→ "가"보다 작거나 "힣"보다 크다면 한글이 아니라는 의미입니다.
⑤ 변수 removeList에 변수 Ascii에 저장된 값이 없다면,
⑥ 변수 removeList에 변수 Ascii에 저장된 값을 추가합니다.
⑦ 1부터 변수 removeList의 개수만큼 1씩 증가하며 do안의 블록을 실행합니다.
⑧ 변수 DietString에서 변수 removeList의 number번째 해당하는 항목을 모두 공백으로 바꿉니다.
⑨ 변수 DietString에서 "구분"으로 되어 있는 텍스트를 모두 "<br>"로 바꿉니다.
→ <br/>과 <br>은 같습니다.
→ lbl_BreakMenu, lbl_LunchMenu, lbl_Dinner의 속성(Properties)에 HTMLFormat이 체크되어 있어야 합니다.
이상 앱인벤터로 급식앱 만들기에 대한 포스팅을 모두 마치겠습니다.
디자인적 측면이나, 모든 학교까지 검색할 수 있는 기능은 과제로 남겨두겠습니다.~~~
댓글