한국어

Programming

2018.10.12 22:02

메모장 앱 만들기

twin 주소복사
조회 수 81 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

메모장 앱 만들기

 
0. 준비하기
 

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이면 그림까지 출력한다.
 

  1. No Image 14Sep
    by twin
    2018/09/14 by twin
    Views 703 

    지도에 내 위치 표시하기

  2. No Image 26Mar
    by twin
    2017/03/26 by twin
    Views 512 

    앱인벤터 에뮬레이터 다운 설치

  3. [앱 인벤터2] 알람시계

  4. [앱인벤터2] Slider를 사용하는 타이머

  5. [앱 인벤터2] 위치센서와 문자 보내기, SOS 앱

  6. [앱인벤터2] 두 개의 스크린 사이의 값 전달, 구구단 예제

  7. [앱인벤터2] PasswordTextBox와 TinyDB를 사용한 PIN 번호 체크

  8. [앱인벤터2] 아날로그 시계 만들기

  9. No Image 14Sep
    by twin
    2018/09/14 by twin
    Views 208 

    [앱 인벤터2] 두더지 잡기 게임2

  10. [앱인벤터] 리스트를 이용하여 녹음이 되는 실로폰

  11. No Image 30Oct
    by twin
    2017/10/30 by twin
    Views 171 

    Korea SW 자료

  12. [앱인벤터] 예제 - 두더지 게임

  13. [앱인벤터] 위치센서 LocationSensor를 이용한 거리측정기

  14. 앱인벤터 아두이노 교재

  15. No Image 30Aug
    by twin
    2018/08/30 by twin
    Views 136 

    [앱 인벤터2] 우주선게임

  16. [앱인벤터2] Clock 센서, 디지털 시계

  17. 앱인벤터2 강좌 : 숫자 암기 게임

  18. No Image 30Aug
    by twin
    2018/08/30 by twin
    Views 95 

    [앱 인벤터2] 간단한 계산기

  19. [앱인벤터2 강좌] 만보기앱, Pedometer 센서

  20. [앱 인벤터2] 공튀기기

Board Pagination Prev 1 2 3 Next
/ 3