0. 준비하기

0.1 앱인벤터 시작하기

0.2 앱 실행하기

1. 텍스트 입력이 가능한 메모장 앱 [예제다운로드]

• 목표 : 텍스트 입력이 가능한 메모장 만들기
• 추가기능 (UI)
  • User Interface > TextBox 추가
    • 이름 수정 : TextBox1 -> bodyTextBox
    • 속성 수정
      • Width : Automatic... -> Fill parent...
      • Hint : Hint for TextBox1 -> 본문을 작성합니다.
  • User Interface > Button 추가
    • 이름 수정 : Button1 -> resetButton
    • 속성 수정 Text : Text for Button1 -> Reset
  • 추가기능 (코드)
    • resetButton 을 누르면 bodyTextBox 의 글이 지워진다.
  • Designer > UI 구성

• Blocks > 코드작성

2. 저장이 가능한 메모장 앱 [예제 다운로드]

• 목표 : 제목과 본문 내용을 입력해서 저장되는 메모장 만들기
• 추가기능 (UI)
  • User Interface > TextBox 추가
    • 이름 수정 : TextBox1 -> titleTextBox
    • 속성 수정
      • Width : Automatic... -> Fill parent...
      • Hint : Hint for TextBox1 -> 제목을 작성합니다.
    • Layout > HorizontalArrangement 추가
      • 이름 수정 : HorizontalArrangement1 -> buttonArrangement
      • 속성 수정
        • AlignHorizontal : Left -> Center
        • Width : Automatic... -> Fill parent...
    • User Interface > Button 추가
      • 이름 수정 : Button1 -> saveButton
      • 속성 수정
        • Text : Text for Button1 -> Save
    • Storage > TinyDB 추가 (TinyDB는 non-visible components 임)
  • 추가기능 (코드)
    • 리셋버튼을 누르면, 제목과 본문 텍스트 박스의 내용을 모두 지운다.
    • 저장버튼을 누르면, 제목을 TinyDB의 Tag 값으로, 본문을 TinyDB의 Value 값으로 저장한다.
  • Designer > UI 구성

• Blocks > 코드작성
  • 리셋버튼을 눌렀을 때

• 저장버튼을 눌렀을 때

3. 목록을 볼 수 있는 메모장 앱 [예제 다운로드]

• 목표 : 저장된 메모 목록을 볼 수 있는 메모장 만들기
• 추가기능 (UI)
  • 목록보기 : button
  • 목록화면 : listpicker
  • 추가기능 (코드)
  • 앱을 실행하면 inputScreenLayout 만 보여주고, listScreenLayout 은 숨긴다.
  • 목록보기 버튼을 누르면 listScreenLayout 에 있는 listpicker 를 보여주고, inputScreenLayout 은 숨긴다.
  • 목록에서 메모 하나를 선택하면 입력 화면에 해당 메모의 제목과 내용을 보여줌
  • Designer > UI 구성
  • Layout > VerticalArrangement 추가
    • 이름 수정 : VerticalArrangement1 -> inputScreen
    • 속성 수정
      • Width : Automatic... -> Fill parent...
    • inputScreen 안에 titleTextBox, bodyTextBox, buttonArrangement 추가
  • Layout > VerticalArrangement 추가
    • 이름 수정 : VerticalArrangement1 -> outputScreen
    • 속성 수정
      • Width : Automatic... -> Fill parent...
  • User Interface > Button 추가
    • 이름 수정 : Button1 -> loadButton
    • 속성 수정
      • Text : Text for Button1 -> Load
  • User Interface > ListPicker 추가
    • 이름 수정 : ListPicker1 -> noteListPicker

• Blocks > 코드 작성
  • 목록보기(Load) 버튼 클릭했을 때

• 저장(Save) 버튼 클릭했을 때

• 목록에서 하나가 선택되었을 때

[문제점 3.1] 저장할 때 이미 저장된 제목이 겹친다면?

• 해결방안 : 메모를 저장할 때, 이미 저장된 제목이면 저장하지 않기.
• Blocks > 저장 버튼 코드 작성
  • 저장 버튼 클릭했을 때

4. 메모 삭제가 가능한 메모장 앱 [예제 다운로드]

• 목표 : 저장된 메모 목록 중에서 하나를 선택하면 삭제할 수 있다.
• 추가기능 (UI)
  • 삭제 : button
  • 추가기능 (코드)
  • 앱을 실행하면 삭제 버튼은 숨긴다.
    • 목록 화면에서 메모를 선택한 경우 버튼이 보이고 해당 메모를 삭제할 수 있음. 삭제한 후 목록화면을 갱신한다.
    • 리셋 버튼을 누르면 삭제 버튼이 안보인다.
  • Designer > UI 구성
  • Layout > Button 추가
    • 이름 수정 : Button1 -> deleteButton
    • 속성 수정
      • Text : Text for Button -> Delete
      • Visible : 체크 해제
    • Save 버튼과 Load 버튼 사이에 위치시킴

• Blocks > 코드 작성
  • 목록에서 제목 선택시 삭제 버튼 보이기

• 리셋 버튼을 눌렀을 때

• 삭제 버튼을 눌렀을 때

• 동작 확인
  • 새로운 메모 추가하기
  • 목록에서 제목 선택하기
  • 삭제 버튼 누르고, 삭제 되었는지 목록화면에서 확인하기

5. 메모 수정이 가능한 메모장 앱 [예제 다운로드]

• 목표 : 저장된 메모 목록 중에서 하나를 선택하여 수정할 수 있다.
• 추가기능 (UI)
  • Notifier (non-visible) 부품
  • Designer > UI 구성
    • User Interface > Notifier 추가
  • 추가기능 (코드)
    • 저장 버튼을 눌렀을 때,
      • 제목을 안 쓴 경우 경고창 보여주기
      • 새로운 메모인 경우, 그대로 저장하기
      • 수정한 메모인 경우, 기존 내용을 삭제한 후 저장하기
• Blocks > 코드 작성
  • 저장 버튼을 눌렀을 때

• 동작 확인
  • 제목을 작성하지 않고, 저장 버튼 눌러서 경고창 뜨는지 확인
  • 새로운 메모 추가하기
  • 목록에서 메모 선택하기
  • 다시 목록화면에서 기존 메모가 없어지고 새로운 메모가 추가되었는지 확인

6. 메모 작성 시간을 표시해주는 메모장 앱 [예제 다운로드]

• 목표 : 메모가 저장될 때 작성된 시간도 함께 저장해서 화면에 보여준다.
• 추가기능 (UI)
  • Click (non-visible) 부품
  • 작성시간 : Label
  • 시간 : Label
  • 추가기능 (코드)
  • 앱을 실행하면 삭제 버튼은 숨긴다.
    • 목록 화면에서 메모를 선택한 경우 버튼이 보이고 해당 메모를 삭제할 수 있음. 삭제한 후 목록화면을 갱신한다.
    • 리셋 버튼을 누르면 삭제 버튼이 안보인다.
  • Designer > UI 구성
    • TinyDB1 이름 수정
      • 이름수정 : TinyDB1 -> noteTinyDB
    • Sensors > Clock 추가
  • Layout > VerticalArrangement 추가
    • 이름 수정 : VerticalArrangement1 -> createTimeLayout
    • inputScreent 안에 buttonLayout 앞에 위치시킴
  • Layout > Label 추가
    • 이름 수정 : Label1 -> createdLabel
    • 속성 수정
      • Text : Text for Label -> Created :
      • createdTimeLayout 안에 위치시킴
  • Layout > Label 추가
    • 이름 수정 : Label1 -> timeLabel
    • 속성 수정
      • Text : Text for Label -> Time
      • createdTimeLayout 안에 createdLabel 오른쪽에 위치시킴

• Blocks > 코드 작성
  • 저장 버튼을 누르면 TinyDB에 본문내용과 현재시간을 리스트로 만들어서 저장하기

• 메모 목록에서 하나의 메모를 누르면 메모 내용과 함께 시간이 표시됨

[리팩토링하기1] [예제 다운로드]

• 메모장 앱 디자인
  • 제목 라벨 추가
    • titleLayout 추가
    • titleLabel 추가
    • titleLabel 옆에 titleTextBox 추가
    • 본문 텍스트박스 크기 변경
      • 속성
        • Height : Automatic -> 50 percent...

[리팩토링하기2] [예제 다운로드]

• 중복된 코드를 함수(프로시져)로 만들기
  • saveNotetoDB
    • title 과 body 값을 받으면 tinyDB1 에 현재 시간과 함께 저장함

• resetTextBox
  • titleTextBox와 bodyTextBox 의 값을 지움

7. 이미지를 불러와서 넣을 수 있는 메모장 앱 [예제 다운로드]

• 목표 : 기본 앨범에 저장된 이미지를 불러와서 메모장에 저장하기
• 추가기능 (UI)
  • 이미지 출력 : Image
  • 이미지 불러오기 : button
  • 이미지 목록 : ImagePicker
  • 추가기능 (코드)
    • 이미지 불러오기 버튼을 누르면 이미지 목록을 살펴볼 수 있음
    • 이미지 목록에서 하나의 이미지를 선택하면, inputScreen 에 있는 이미지 출력 칸에 보여줌
  • Designer > UI 구성
  • Layout > VerticalArrangement 추가
    • 이름 수정 : VerticalArrangement1 -> imageLayout
    • 속성 수정
      • Width : Automatic... -> Fill parent...
      • titleLayout 아래에 위치
    • User Interface > Image 추가
      • 이름 수정 : Image1 -> image
      • imageLayout 안에 추가
    • Media > ImagePicker 추가
      • 이름 수정 : ImagePicker1 -> imagePicker
      • noteListLayout 안에 추가

• Blocks > 코드 작성
  • 이미지 불러오기 버튼을 누르면 이미지 목록을 살펴볼 수 있음
  • 이미지 목록에서 하나의 이미지를 선택하면, inputScreen 에 있는 이미지 출력 칸에 보여줌
  • 리셋 버튼을 누르면 이미지 출력도 지우기

• 저장 버튼을 누르면 이미지도 저장되기

• 메모 저장 목록에서 메모를 선택하면 저장된 이미지도 화면에 출력하기

[문제점7.1] 저장할 때 이미지를 저장하지 않은 메모를 불러올 경우에는?

tinyDB에 저장된 값을 리스트로 저장한 다음,

리스트의 길이가 2이면 제목과 본문만 출력하고, 리시트의 길이가 3이면 그림까지 출력한다.

Created by janggoons@gmail.com