[App Inventor] 앱인벤터 다이어리/메모장 만들기 #8

---

"앱인벤터 다이어리"의 Screen6(비밀번호 입력화면)의

화면디자인 및 블록코딩은 이전 포스팅을 참고해주세요!

 

[프로젝트/App Inventor] - [App Inventor] 앱인벤터 다이어리/메모장 만들기 #7

[App Inventor] 앱인벤터 다이어리/메모장 만들기 #7

---

목차

1. Screen6_secret 비밀일기장
2. Screen6_secret Design
3. Screen6_secret Block
4. 전체 실행 영상 및 첨부파일

---

Screen6_secret은 유튜브 The Coding Bus 에서 참고하여 제작하였습니다.

 

Screen6_secret은 상단 텍스트박스에 일기를 입력하고 하단 텍스트박스에서 읽을 수 있습니다. 저장, 삭제 및 수정이 가능한 일기장입니다.

---

1. Screen6_secret 비밀일기장

Screen6_secret(비밀 일기장) 구성

---

2. Screen6_secret Design

하단 클라우드DB1은 Storage-CloudDB(저장소-클라우드DB), Notifier1은 User Interface-Notifier(사용자 인터페이스-알림)를 드래그앤드롭하면 됩니다.

컴포넌트

이름

속성

속성상세

	Screen6_Secret	AboutScreen	비밀일기장
		AlignHorizontal	Left:1
		AlignVertical	Top:1
		TitleVisible	false

VerticalArrangement (수직배치)	수직배치1	AlignHorizontal	Center:3
		AlignVertical	Center:2
		BackgroundColor	#efcfd2ff
		Height	Fill parent (부모요소에 맞추기)
		Width	Fill parent (부모요소에 맞추기)

Image	이미지1	Height	15 percent
		Width	20 percent
		Picture	password.png

Label	title	FontBold	true
		FontSize	30
		Height	Automatic(자동)
		Width	Fill parent (부모요소에 맞추기)
		Text	Secret Record
		TextAlignment	center:1

TextBox	입력	Height	25 percent
		Width	97 percent
		Hint	비밀일기를 작성해주세요.\n최대 21줄 작성 가능합니다.\n21번째 줄 이상은 확인할 수 없습니다.
		MultiLine	true

HorizontalArrangement (수평배치)	수평배치1	AlignHorizontal	Center:3
		AlignVertical	Center:2
		Height	Automatic(자동)
		Width	Fill parent (부모요소에 맞추기)

아래 표와 같이 Button을 수평배치 안에 3개 만듭니다. 저장, 수정, 삭제 순으로 3개 만들어줍니다.

Button	저장	BackgroundColor	#ef819bff
		FontBold	true
		FontSize	15
		Height	Automatic(자동)
		Width	Automatic(자동)
		Text	저장
		TextAlignment	center:1

TextBox	읽기	Height	40 percent
		Width	97 percent
		Hint	작성된 일기가 없습니다
		MultiLine	true
		ReadOnly	true

---

3. Screen6_secret Block

초기 설정

Screen6_secret이 실행될 때, 클라우드 DB1에 존재하는 값을 읽어온다.

저장

저장버튼을 클릭하면 상단 텍스트박스(입력)에 작성한 내용이 클라우드DB에 저장됩니다. 저장된 내용은 하단 텍스트박스(읽기)에 출력됩니다. 해당 텍스트박스(입력)는 빈칸이 됩니다. 

수정

수정버튼을 클릭하면 상단 텍스트박스(입력)에 클라우드DB에 저장된 값을 불러와 수정할 수 있도록 한다.

삭제

삭제버튼을 클릭하면 모든 텍스트박스를 빈칸으로 바꾸고 클라우드DB에 저장된 값도 모두 지운다.

데이터 변경 및

데이터가 변경될 때마다 해당 값을 record 변수에 저장해준다. 변경된 값을 하단 텍스트박스(읽기)에 출력해준다.

뒤로가기 버튼

스마트폰 하단 뒤로가기 버튼을 클릭하면 Screen2(메뉴화면)로 이동한다.

---

4. 전체 실행 영상 및 첨부파일

해당 앱은 아래 첨부파일에서 다운받아 앱인벤터에서 'Import project(.aia) from my computer' 또는 '내 컴퓨터에서 프로젝트(.aia) 가져오기'를 통해 실행해 볼 수 있습니다.

Project_diary.aia

0.48MB

 

아래 영상은 전체 실행 영상입니다! MIT AI2 Companion 앱을 통해 갤럭시 z플립3에서 실행하였습니다!

전체 실행 영상

이것을 마지막 포스팅으로 "앱인벤터 다이어리/메모장 만들기"는 끝났습니다!!