[슬기로운 코딩생활] 앱인벤터로 10분만에 스마트폰 앱 만들기 - 18

#슬기로운 코딩생활

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

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

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


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

#블록코딩 방식으로 누구나 쉽게 앱을 만들 수 있습니다.

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

#스크래치 나 #엔트리 는 PC의 해당 프로그램 내에서만 실행을 해볼 수 있습니다.

#앱인벤터 는 코딩한 결과를 #스마트폰 에 앱으로 설치해 직접 사용해 볼 수 있기에 #코딩을 통한 #앱만들기 나 #코딩교육 에 가장 #최적화된프로그램 입니다.


이번 시간 목표 : 자주 이용하는 사이트를 쉽게 접속할 수 있는 나만의 웹브라우저 만들기 (2/3)

지난시간에 웹브라우저 디자인과 속성 설정이 완료되었습니다.

이번 시간에는 웹 브라우저 코딩으로 자주 이용하는 사이트에 접속하는 방법을 알아보겠습니다.


화면 디자인이 완료되었습니다. 기능 구현을 위해 [블록]을 클릭합니다.




먼저 주소를 입력해 원하는 사이트에 접속할 수 있도록 해보겠습니다. 블록 창 [접속]을 클릭 후 [언제 접속.클릭했을때 실 행] 블록을 뷰어 창으로 드래그&드롭합니다.




블록 창에서 [웹뷰어1]을 클릭 후 [호출 웹뷰어1.URL로이동하기] 블록을 뷰어 창 '언제 접속.클릭했을때 실행' 블록안으로 드래그&드롭합니다.




블록 창에서 [텍스트]를 클릭 후 [합치기] 블록을 뷰어 창 '호출 웹뷰어1.URL로이동하기' 블록에 연결합니다.


블록 창에서 [텍스트]를 클릭 후 [' '] 블록을 뷰어 창 [합치기] 블록 첫 번째 커넥터에 연결합니다.



드래그한 블록을 클릭해 [http://]를 입력합니다.

블록 창에서 [주소]를 클릭 후 [주소.텍스트] 블록을 뷰어 창 [합치기] 블록 두 번째 커넥터에 연결합니다.

블록 창에서 [네이버]를 클릭 후 [언제 네이버.클릭했을때] 블록을 뷰어 창으로 드래그&드롭 합니다.


블록 창에서 [웹뷰어1]을 클릭 후 [호출 웹뷰어1.URL로이동하기] 블록을 뷰어 창 '언제 네이버.클릭했을때 실행' 블록 안으로 드래그&드롭합니다.




블록 창에서 [텍스트]를 클릭 후 [' '] 블록을 뷰어 창 '호출 웹뷰어1.URL로이동하기' 블록에 연결합니다.




드래그한 블록을 클릭해 네이버 주소를 입력합니다.




뷰어 창 [언제 네이버.클릭했을때 실행] 블록에서 마우스 오른쪽 버튼을 클릭해 [복제하기]를 클릭합니다.




[언제 네이버.클릭했을때 실행] 블록에서 마우스 오른쪽 버튼을 클릭해 [복제하기]를 한번 더 클릭합니다.




복제된 첫 번째 '언제 네이버.클릭했을때 실행' 블록에서 [네이버]를 클릭해 [유튜브]로 변경합니다.




'언제 유튜브.클릭했을때' 블록 안의 텍스트 블록을 클릭해 유튜브 주소로 수정합니다.




복제된 두 번째 '언제 네이버.클릭했을때 실행' 블록에서 [네이버]를 클릭해 [신문]으로 변경합니다. '언제 신문.클릭했을때' 블록 안의 텍스트 블록을 클릭해 신문가게 주소로 수정합니다.




이번에는 주소가 포함된 수평 배치 레이아웃을 웹사이트에 접속되면 숨기고, 스마트폰 뒤로 버튼을 누르면 다시 나타나도록 설정해 보겠습니다. 블록 창에서 [웹뷰어1]을 클릭 후 [언제 웹뷰어1.PageLoaded 실행]

블록을 뷰어 창으로 드래그&드롭합니다.




블록 창에서 [수평배치1]을 클릭 후 [지정하기 수평배치1.보이기여부 값] 블록을 뷰어 창 '언제 웹뷰어1.PageLoaded 실행' 블록 안으로 드래그&드롭 합니다.




블록 창에서 [논리]를 클릭 후 [거짓] 블록을 뷰어 창 '지정하기 수평배치1.보이기여부 값' 블록에 연결합니다.




블록 창에서 [Screen1]을 클릭 후 [언제 Screen1.뒤로가기버튼을눌렀을때 실행] 블록을 뷰어 창으로 드래그&드롭합니다.




뷰어 창 [지정하기 수평배치1.보이기여부 값] 블록에서 마우스 오른쪽 버튼을 클릭 후 [복제하 기]를 클릭합니다.




복제된 블록을 '언제 Screen1. 뒤로가기버튼을눌렀을때 실행' 블록 안으로 드래그&드롭합니다. 복제된 블록에 연결된 논리 블록을 [참]으로 변경합니다.




블록 구성이 완료되었습니다. 앱 테스트를 위해 [빌드]- [Android App (.apk)]를 클릭합니다. 아이폰 사용자는 [연결]- [AI 컴패니언]을 이용합니다.




앱 빌드 작업이 진행됩니다. 앱 빌드가 완료되면 QR코드가 표시됩니다. PC 작업이 완료되었습니다.




스마트폰에서 [MIT AI2 Companion] 또는 [App Inventor] 앱을 이용해 제작 앱을 설치하거나 실행합니다. 설치가 완료되면 [지니인터넷]을 터치해 실행합니다. 상단 주소와 인터넷 접속 버튼을 보려면 스마트폰의 [뒤로]를 터치합니다.





주소 창이 나오면 [Y]를 터치해 유튜브 접속이 되는지 확인합니다. 인터넷 주소를 입력 후 [GO]를 터치해 입력한 사이트가 접속되는지 확인합니다.





이것으로 나만의 웹브라우저 블록코딩과 앱 설치 후 테스트가 완료되었습니다.

사이트는 만드는 분이 자주가는 사이트로 변경하거나 수정하면 되겠지요?^^



이번 시간은 여기까지 입니다.

다음에 더 재미있는 앱으로 뵈요^^




앱인벤터에 대해 궁금하시다면, 블록 코딩으로 앱 만들기가 궁금하시다면 아래 책을 추천합니다.


[▶ 이 책의 대상 독자]

- 코딩을 배우고 싶은 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분만에 스마트폰 앱 만들기 - 23
bakkas
3
2
0
일의 원칙을 지키는 사람이 위기에 강하다!
Marblerstory
11
10
0
[슬기로운 코딩생활] 앱인벤터로 10분만에 스마트폰 앱 만들기 - 20
bakkas
3
6
0
일한다는 것의 정의 2
Marblerstory
5
2
0
각세대별 "학교에서 체벌 있었어요?"물어본 결과.jpg
zatoichi
21
10
17
프로그래밍 원리.gif
ihatecocacola
37
7
0
GIF
기업별 반도체 매출 순위1989~
harang0610
42
11
7
GIF
내 폰이 뭔가 느려진 것 같음을 느끼는 갤럭시 유저 필독
nanmollang
33
55
1
[슬기로운 코딩생활] 앱인벤터로 10분만에 스마트폰 앱 만들기 - 17
bakkas
6
6
0
현대그룹이 인수한 보스턴 다이내믹스 근황
n0shelter
33
10
7
GIF
신종 퇴사 권고
CrisKwon
18
4
3
2018.3월 추천 데스크톱 견적! 사무용 ~ 프리미엄 총 7가지 소개
007overmen1
22
44
5
아이러니한 K-게임계 상황... 내 돈 내고 내가 쳐맞기...JPG
Voyou
19
4
2
[슬기로운 코딩생활] 앱인벤터로 10분만에 스마트폰 앱 만들기 - 12
bakkas
5
5
0
유튜브(Youtube) 영상과 자막 한방에 다운받기
bakkas
6
9
0
[부산IN신문] 쉽고 재미있는 소프트웨어 교육에 주력…교구 및 교육 콘텐츠 개발 기업 ‘I.O.Tech’ [동의대학교 BI ②]
busaninnews
10
2
1
내가 생각하는 프로그래머의 삶.txt
n0shelter
39
8
4
노트북 배터리 수명확인하는법, 이런 방법이?
007overmen1
22
49
0
[슬기로운 코딩생활] 앱인벤터로 10분만에 스마트폰 앱 만들기 - 28
bakkas
4
1
0
터키는 튀르키예! 우크라이나 수도 키예프는 어떻게 표기?
Marblerstory
7
4
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