앱인벤터로 10분만에 스마트폰 앱 만들기 - 04


앱인벤터를 하면 코딩이 재미있어집니다.

앱인벤터를 하면 코딩이 즐거워집니다.

앱인벤터를 하면 코딩을 하고싶어집니다.

내가 만든 앱을 내 스마트폰에 설치하고 사용할 수 있습니다.

#블록코딩

내가 만든 결과물을 스마트폰에서 직접 확인할 수 있으니 이보다 더 좋은 코딩 프로그램은 없습니다.

#스크래치#엔트리

#앱인벤터#스마트폰#코딩 을#앱만들기#코딩교육#최적화된프로그램

이번 시간 목표 : 버튼으로 텍스트 및 이미지를 바꾸는 앱을 완성해 보겠습니다. (22)

지난시간에 진행한 화면 디자인에 이어 블록코딩을 추가해 앱을 완성해보겠습니다.



지난 시간에 완성한 앱 디자인에 이이서 블록 코딩을 완성해보겠습니다. [블록]을 클릭해 블록 에디터 화면으로 이동합니다.




첫 번째 버튼을 누르면 이미지 컴포넌트에 강아지 그림이 나오도록 설정해 보겠습니다. 블록 창에서 [버튼1]을 클릭 후 세부 블록 중 [언제 버튼1.클릭 했을때 실행] 블록을 오른쪽 뷰어 창으로 드래그&드롭합니다.




[이미지1]을 클릭 후 [지정하기 이미지1.사진 값] 블록을 뷰어 창의 '언제 버튼1.클릭했을때 실행' 블록 안으로 드래그&드 롭합니다.




공통 블록의 [텍스트]를 클릭 후 세부 블록 중 가장 상단의 [' '] 블록을 '지정하기 이미지1.사진값' 블록 오른쪽에 연결합니다.




드래그한 블록에 강아지 이미지의 파일명 [dog.jpg]를 입력합니다. 파일 이름은 대·소문자를 구분하므로 꼭 파일 이름을 확인 후 입력합니다.




뷰어 창의 블록을 복제하기 위해 [언제 버튼1.클릭했을때] 블록에서 마우스 오른쪽 버튼을 눌러 [복제하기]를 클릭합니다.




복제된 블록을 아래쪽에 배치 후 [버튼1]을 클릭해 [버튼2]로 변경합니다. [dog.jpg]를 클릭 해 [cat.jpg]로 수정합니다.




블록 구성이 완료되었습니다. 스마트폰에서 테스트를 위해 상단 [연결]을 클릭 후 [AI 컴패니언]을 클릭합니다.




잠시 기다리면 앱을 빌드 후 QR 코드가 나옵니다. 이것으로 PC에서의 설정은 완료되었습니다.




스마트폰에서 [MIT AI2 Companion] 또는 [App Inventor]를 터치해 실행합니다. 앱이 실행되면 [scan QR code]를 터치합니다.





카메라가 실행되면 컴퓨터의 QR 코드를 비춥니다. QR 코드가 인식되고 잠시 기다리면 앱 실행 화면이 나옵니다. 버튼이 정상적으로 동작하는지 확인하기 위해 [강아지보기]를 터치 합니다.





강아지 이미지가 표시되는 것을 확인할 수 있습니다. 두 번째 버튼이 정상적으로 동작하는지 확인하기 위해 [고양이보기]를 터치합니다. 고양이 이미지가 표시됩니다.



이번 앱은 여기까지 내용으로 완료하도록 하겠습니다.

앞으로 일상편의 앱, 사물인터넷 앱, 인공지능 앱까지 다양한 앱을 만들어보겠습니다.




[▶ 이 책의 대상 독자]

- 코딩을 배우고 싶은 Software 비전공 입문 독자

- 소프트웨어 교육 의무화로 소프트웨어 코딩을 배우고 싶은 학생

- 스마트폰 앱을 직접 만들어 사용하고 싶은 독자

- 사물인터넷과 스마트 센서를 활용한 앱을 만들고 싶은 독자

- 인공지능을 이해하고 관련 앱을 만들어보고 싶은 독자


[▶이 책에서 다루는 내용]

- 블럭코딩을 이용해 스마트폰에서 사용 가능한 앱 만들기

- 음성인식 기능을 활용한 음성을 텍스트로 받아적기

- 가족/지인 전화걸기 앱 만들기

- 언어 번역 앱 만들기

- 녹음기 앱 만들기

- 두더지 잡기 게임 만들기

- 나만의 인터넷 웹브라우저 만들기

- 여러 사이트 검색을 한방에 검색왕 앱 만들기

- 만보기 센서를 이용한 만보기 앱 만들기

- 방위 센서를 활용한 나침반 앱 만들기

- 가속도 센서를 이용한 응급상황 알리미 앱 만들기

- 근접 센서를 이용한 운동 앱 만들기

- 위치 센서를 이용한 내 위치찾기 앱 만들기

- 앱인벤터 확장기능으로 플래시 SOS 앱 만들기

- 인공지능을 이해할 수 있는 챗봇 앱 만들기

- 인공지능 이미지 분석 앱 만들기

- 인공지능 안면인식 앱 만들기

- Facemesh를 이용한 사진 꾸미기 앱 만들기


[▶도서 구매 링크]

─────────────────────────────────────────────

교보문고 : http://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791196027223

영풍문고 : https://www.ypbooks.co.kr/book.yp?bookcd=101159743

Yes24 : http://www.yes24.com/Product/Goods/108250143

알라딘 : https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=290859612

인터파크 : https://book.interpark.com/product/BookDisplay.do?_method=detail&sc.prdNo=354596048

─────────────────────────────────────────────


코딩 초보자분들이 재미있고 쉽게 배울수 있는 책입니다. 추천합니다^^!!

끝까지 읽어주셔서 고맙습니다^^


#코딩추천책

#코딩책추천

#앱인벤터책

#앱인벤터강좌

#블록코딩책추천

#앱인벤터추천도서

#코딩책

#사물인터넷

#사물인터넷책추천

#인공지능

#인공지능앱

#인공지능앱만들기

#쉬운코딩

#쉽게앱만들기

#처음코딩

#코딩강좌

IT 교육전문가 코딩, 소프트웨어, 사물인터넷 정보보안, 스마트폰 영상편집 등의 강의 및 출판을 전문으로하는 1인기업입니다.
Follow
Cards you may also be interested in
앱인벤터로 10분만에 스마트폰 앱 만들기 - 06
bakkas
1
5
0
앱인벤터로 10분만에 스마트폰 앱 만들기 - 08
bakkas
3
3
0
[소셜 캡처] 화물차에서 쏟아진 맥주 2,000병…"훈훈하게 마무리 지을 일 아냐"
newsway
7
3
0
아이러니한 K-게임계 상황... 내 돈 내고 내가 쳐맞기...JPG
Voyou
14
1
2
정말로 실생활에 유용한 것만 모아 놓은 윈도우 단축키 모음
nanmollang
103
227
2
에브리타운을 또 하나 만들었습니다. 몰랑이를 본 순간 이건 만들어야겠다는 생각을 했어요 ㅎㅎ 이번에는 만드는데 좀 오래 걸리긴 했지만 그래도 결과가 만족스러워서 좋습니다. 저도 몰랑이처럼 스케이트 타러 가고 싶어지네요
respectyou
81
6
8
상장하면 투자해야 할 한국의 유니콘 기업 6
visualdive
38
55
1
요즘 애새끼들 신종 학폭 범죄
CrisKwon
20
2
3
여행 끝! 여행사진과 동영상까지 깔끔하게 정리해 줄 꿀어플 모음
APPSAY
16
39
0
국민연금공단 경력증명서 발급방법 - 소요시간 30초
emona89
2
3
0
우리가 애플을 좋아하는 이유
visualdive
15
20
4
[슬기로운 코딩생활] 앱인벤터로 10분만에 스마트폰 앱 만들기 - 28
bakkas
4
1
0
죄와벌
crdlnd
3
1
0
띠용 저보고 뭘 하라구요...?!
awesomedaytoon
66
6
11
이사업체 여직원이 알려주는 엄청난꿀팁
yongbyeon
22
66
0
앱인벤터로 10분만에 스마트폰 앱 만들기 - 07
bakkas
1
6
0
애플워치 세대별 장단점 총정리.jpg
dokkebii
9
9
1
삭제해야하는 핸드폰 어플.jpg
nanmollang
96
89
13
각세대별 "학교에서 체벌 있었어요?"물어본 결과.jpg
zatoichi
21
9
17
‘이런 사람’과 일하게 해주는 회사, 무조건 입사하라
bookbanggu
32
40
0
4.7 Star App Store Review!
Cpl.dev***uke
The Communities are great you rarely see anyone get in to an argument :)
king***ing
Love Love LOVE
Download

Select Collections