<template>
	
	<!-- Start Header/Navigation -->
    <HomeButton />
    <!-- End Header/Navigation -->

	<div class="reveal" ref="revealRef">
      <div class="slides">
  
  
  
<section>
	<!-- <p class="pb-5 mb-5"> -->
		<h1>💻 앱인벤터로 어플 만들기</h1>
	<!-- </p> -->

	<table class="table caption-top table-borderless table-responsive card-1 p-4">
		<caption>엔트리에 많이 익숙한 학생, 핸드폰 반드시 지참</caption>
  <thead>
    <tr class="border-bottom">
      <th>
          <span class="ml-2"># 주차</span>
      </th>
      <th>
          <span class="ml-2">주제</span>
      </th>
      <th>
          <span class="ml-4">Action</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">1주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">부록. 구글 계정만들기</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">앱인벤터 소개</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">가속도 센서</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(23-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(2-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(4-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">2주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">음성변환, 음성인식</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">문자로, 소리로</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">사진찍기, 영상찍기</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(5-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(7-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(8-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">3주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">카메라와 음성, 녹음기</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">디지털시계, 달력과 시계</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(10-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(12-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">4주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">그림판, 번역기</span>
			</div>
			<div class="p-2">
				<span class="font-weight-bold">위치센서, 방향센서</span>
			</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(14-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(16-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">5주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">만보기, 공 튕기기</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">유튜브 연결</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(18-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(20-1)"></i>
			</div>
		</td>
	</tr>
	<tr class="border-bottom">
		<td>
			<div class="p-2">
				<span class="d-block font-weight-bold">6주차</span>
				<small>~월 ~일 ~시</small>
			</div>
		</td>
      	<td>
			<div class="p-2">
				<span class="font-weight-bold">자동카메라</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">바운스 게임</span>
        	</div>
			<div class="p-2">
				<span class="font-weight-bold">부록. 개인정보 보호 - 구글 기록 삭제하기</span>
        	</div>
		</td>
		<td>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(21-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(22-1)"></i>
			</div>
			<div class="p-2 icons">
				<i class="fa fa-share" @click="goSlide(36-1)"></i>
			</div>
		</td>
	</tr>

  </tbody>
</table>

</section>
<section>
	<h2 class="pb-5">0. 앱인벤터 소개</h2>
	<p>
		<h3>구글 계정을 만들어봅시다.&nbsp;&nbsp;<i class="fa fa-share" @click="goSlide(20-1)"></i></h3>
		<h3>앱인벤터에 가입해봅시다.</h3>
		<h3>어플은 핸드폰의 다양한 센서들을 사용할 수 있어요.</h3>
	</p>
</section>
<section>
	<h2 class="pb-5">0. 앱인벤터 소개</h2>
	<p>
		<h3>앱인벤터의 화면 구성을 알아봅시다.</h3>
		<h3>앱인벤터에는 디자이너와 블럭 란이 따로 있어요.</h3>
	</p>
</section>
<section>
	<h3 class="pb-4">1. 가속도센서</h3>
	<p>
		<h4>가속도 센서를 사용해볼까요?</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/01_cat.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>먼저 소리파일을 받아주세요.</h4>
		<h4>가속도센서 블럭을 사용해볼게요.</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 음성변환, 음성인식</h3>
	<p>
		<h4>음성을 텍스트로 변환해봐요.</h4>
		<h4>수평배치를 알아봅시다.</h4>
		<h4>부모요소에 맞추는 것은 무엇일까요?</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/02_voice1.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 음성변환, 음성인식</h3>
	<p>
		<h4>텍스트를 음성으로 변환해봐요.</h4>
		<h4>수직배치를 알아봅시다.</h4>
		<h4>가운데로 정렬해볼게요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/03_voice2.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">2. 문자로, 소리로</h3>
	<p>
		<h4>배운 내용을 활용하여 직접 만들어봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/04_voice_translation.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 사진찍기, 영상찍기</h3>
	<p>
		<h4>사진을 찍어 화면에 띄워봅시다.</h4>
		<h4>이미지와 카메라는 다른 기능이예요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/05_camera.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 사진찍기, 영상찍기</h3>
	<p>
		<h4>영상을 찍어 화면에 띄워봅시다.</h4>
		<h4>비디오 플레이어와 캠코더는 다른 기능이예요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/06_camcoder.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">3. 카메라와 음성</h3>
	<p>
		<h4>배운 내용을 활용하여 직접 만들어봅시다.</h4>
		<h4>알림도 띄워볼게요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/07_camera_voice.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 녹음기</h3>
	<p>
		<h4>녹음하고 재생해볼게요.</h4>
		<h4>녹음기와 플레이어는 다른 기능이예요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/08_recoding.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 디지털시계, 달력과 시계</h3>
	<p>
		<h4>시계를 화면에 표시해볼게요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/09_clock.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">4. 디지털시계, 달력과 시계</h3>
	<p>
		<h4>달력도 고를 수 있어요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/10_date_time.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 그림판</h3>
	<p>
		<h4>캔버스에 대해 알아봅시다.</h4>
		<h4>선이 그려진다는 것은 어떤 좌표들을 잇는 것일까요?</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/11_line_drawing.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">5. 번역기</h3>
	<p>
		<h4>번역 언어 코드를 검색해볼까요?</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/12_translation.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>번역기 기능이 좋아지면 어떤 세상이 될지 상상해볼까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 위치센서, 방향센서</h3>
	<p>
		<h4>위도와 경도는 무엇인지 검색해볼까요?</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/13_locationsensor.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>위치 센서는 어떨 때 쓰이고 있을까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 위치센서, 방향센서</h3>
	<p>
		<h4>나침반 이미지를 다운받아주세요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/14_directionsensor.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>나침반이 가운데 오게하려면 어떻게 해야할까요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">6. 만보기</h3>
	<p>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/15_pedometer.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>만보기는 어디에 사용되고 있나요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">7. 공 튕기기</h3>
	<p>
		<h4>공을 튕겨서 소리내어 봅시다.</h4>
		<h4>폴링에 대해 알아봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/16_bounce.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">8. 유튜브 연결</h3>
	<p>
		<h4>엑티비티 스타더와 웹을 사용해봅시다.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/17_youtube.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
	</p>
</section>
<section>
	<h3 class="pb-4">9. 자동카메라</h3>
	<p>
		<h4>말한 단어에 따라 자동으로 센서를 호출해봅시다.</h4>
		<h4>알람도 사용해보아요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/18_cameraAuto.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>문장 속에 해당 단어가 들어가도 동작하게 할 수 있나요?</h4>
	</p>
</section>
<section>
	<h3 class="pb-4">10. 바운스 게임</h3>
	<p>
		<h4>공과 이미지 스프라이트를 사용해 게임을 만들어요.</h4>
		<video controls height="500" width="808">
		<source src="/pure/AppInventor/19_bounceGame.mp4" type="video/mp4">
		<strong>Your browser does not support the video tag.</strong>
		</video>
		<h4>점수와 속도의 숫자가 변하게 하려면 어떻게 할까요?</h4>
	</p>
</section>

<section>
	<h2 class="pb-5">부록. 구글 계정만들기 1</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_01.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 2</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_02.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 3</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_03.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 4</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_04.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 5</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_05.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 6</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_06.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 7</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_07.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 8</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_08.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 9</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_09.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 10</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_10.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 11</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_11.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 12</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_12.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 구글 계정만들기 13</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/login_13.PNG" height="500px"/>
		</div>
	</p>
</section>

<section>
	<h2 class="pb-5">부록. 개인정보 보호 - 구글 기록 삭제하기 1</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/logout_01.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 개인정보 보호 - 구글 기록 삭제하기 2</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/logout_02.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 개인정보 보호 - 구글 기록 삭제하기 3</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/logout_03.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 개인정보 보호 - 구글 기록 삭제하기 4</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/logout_04.PNG" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 개인정보 보호 - 구글 기록 삭제하기 5</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/logout_05.png" height="500px"/>
		</div>
	</p>
</section>
<section>
	<h2 class="pb-5">부록. 개인정보 보호 - 구글 기록 삭제하기 6</h2>
	<p>
		<div class="row">
			<img src="/pure/AppInventor/google/logout_06.png" height="500px"/>
		</div>
	</p>
</section>

<section>
	<h1 id="toc_30">👏🏽</h1>
	<h2 id="수고하셨어요-o">수고하셨어요 ^o^</h2>
</section>


</div>
</div>


</template>


<script>
import HomeButton from "@/components/HomeButton.vue";

import Reveal from "reveal.js/dist/reveal.js";
import "reveal.js/dist/reveal.css";
import initializeReveal from "@/assets/js/revealSetup.js";

export default {
	components: {
		HomeButton: HomeButton,
	},
	data() {
		return {
			deck: null // ✅ 2. Reveal 인스턴스를 담을 변수 추가
		};
	},
	methods: {
		goSlide(number) {
			if (this.deck) {
				this.deck.slide(number);
			} else {
				console.error("Reveal 인스턴스가 초기화되지 않았습니다.");
			}
		},
	},
	mounted() {
		// ✅ 3. ref로 지정한 DOM 엘리먼트를 넘겨주고, 인스턴스를 this.deck에 저장합니다.
        this.deck = initializeReveal(this.$refs.revealRef, false);

		// ✅ 4. 전역 Reveal.addEventListener 대신 인스턴스의 on 메서드 사용
        this.deck.on('slidechanged', (event) => {
			console.log("Slide is now " + event.indexh);
		});

  	},	
	unmounted() {
        // ✅ 5. 여기가 핵심! 페이지를 벗어날 때 Reveal 객체를 메모리에서 완전히 파괴합니다.
        if (this.deck) {
            this.deck.destroy();
        }
    }
};
</script>

<style scoped>
/* @import url('@/assets/js/plugins/reveal-js/css/reset.css'); */
@import url('@/assets/js/plugins/reveal-js/css/reveal.css');
@import url('@/assets/js/plugins/reveal-js/css/theme/white.css');
@import url('@/assets/js/plugins/reveal-js/plugin/highlight/monokai.css');
@import url('@/assets/js/plugins/reveal-js/plugin/chalkboard/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/customcontrols/style.css');
@import url('@/assets/js/plugins/reveal-js/plugin/menu/menu.css');
@import url('@/assets/css/reveal-lecture.css');
</style>