SlideShare a Scribd company logo
1 of 30
Lost smart
Tag
7조
김 소 현 * 김 유 리 * 손 영 범 * 최 주 원
김 소 현(18)* 김 유 리(18) 손 영 범(18) 최 주 원(16)
1. BLE 통신 구현 1. 웹서버 설계 및 구현 1. Vue.js front-end 설계 및 구현 1. 비콘 서치
2. Firebase 설계 및 구현 2. Firebase 웹 DB 작성 2. 웹 서버 연동 2. 비콘 동작 법 분석
3. S/W 알고리즘 설계 3. Firebase 호스팅 및 배포 3. Database 설계 3. 비콘 내부 분석
4. APPLICATION 제작 4. 문서 작성 4. Api 도메인 구현
4. 문서 작성
5. 문서 작성 및 수정 5. 문서 작성
역할 분담
CONTENTS
01 CONTENTS 1
분석하기
02 CONTENTS 2
설계하기
03 CONTENTS 3
구현 및 테스트
설계하기 구현 및 테스트
분석하기
대형 놀이공원, 해수욕장 등 가족 여행지에서 미아 발생이 빈번함.
설계하기 구현 및 테스트
분석하기
시간이 지나면 실종 아동의 증거를 찾기 힘들고 사람들의 제보에 의존해야 함.
설계하기 구현 및 테스트
분석하기
해가 거듭 될수록 실종 아동이 늘고 있음을 볼 수 있음.
구현 및 테스트
설계하기
분석하기
작품 소개
분실 방지 스마트 태그(Smart-tag)는
놀이공원에 입장하는 고객을 대상으로 모바일 어
플과 비콘을 이용한 위치 정보를 제공한다. 어플을
설치하고 블루투스를 통해 태그를 연결하여 위치
를 기록하고 지도로 태그의 위치를 알 수 있다. 또
한 블루투스를 켜두면 주변에 있는 비콘의 신호를
가져와 비콘의 대략적인 위치를 확인 할 수 있어
아이를 찾고자하는 사람에게 도움을 줄 수 있다.
스마트 태그는 놀이공원 내에서 미아, 혹은 분실물
발생 시 어플을 통해 해당 위치를 확인 할 수 있어
분실을 방지해주는 서비스를 제공해준다.
구현 및 테스트
설계하기
분석하기
시스템 구성도
구현 및 테스트
설계하기
분석하기
DB
전송
전송
전송, 요청
응답
API서버
웹브라우저
사용자
어플
전송
응답
요청
• 서버로부터 받은
데이터를 저장.
• 저장된 데이터를
서버로 전송
• 사용자의 요청에 응답
(로그인, 데이터 요청 등)
• 스마트폰에서 전달받은
데이터를 DB로 전송
웹서버 구조도
구현 및 테스트
분석하기 구현 및 테스트
설계하기
안드로이드
-회원이 아닌 비회원이 로그인을 하게 되면 회원가입이 필요하다는 문구를 출력한다.
-회원가입 창으로 넘어가 회원가입을 하는데 존재하는 아이디면 존재한다는 문구를
띄워 주고 존재하지 않은 아이디면 가입이 완료된다.
-메뉴 페이지로 가면 BEACON메뉴와 게시판 메뉴, 홈페이지, 위치 전송 메뉴로 나뉜
다.
-BEACON 메뉴를 선택하면 위치정보에 동의하냐는 팝업이 뜨고 동의해야지만 앱을
사용할 수 있다.
위치 전송
-동의를 하고 난 뒤 언더바의 Scan 항목을 누르면 주변 BLE를 5초간 탐색한다.
-내가 등록하고하는 Beacon을 선택하면 서버에 Beacon의 Mac주소가 추가 되었다는
문구를 출력한다.
-서버에 Beacon을 추가 했다면 채널이 생성되었다는 문구가 나온다.
-Users 항목을 누르면 내가 연결한 Beacon의 Mac주소를 볼 수 있다.
-GPS 항목을 누르면 현재의 위도와 경도를 가져와 준다.
-Map 항목을 누르면 가져온 위도, 경도에 위치를 지도로 표시해준다.
-좌표를 누르면 구글 지도로 넘어가 현재 내 위치에서 비콘의 위치의 경로를 알려준다.
-게시판에 찾고자하는 tag name을 올리면 그 것을 보고 사용자들과 관리자가 도움을
줄 수 있습니다.
-위치 전송 메뉴로가 전화번호를 입력하면 1분 주기로 위치정보가 입력한 전화번호로
전송된다.
구현 및 테스트
분석하기 구현 및 테스트
설계하기
Node.js
- 서버에 연결 시 구글 계정으로 인증하는 기능을 구현하였다.
- Firebase 실시간 데이터베이스를 이용하여 서버에 전송할 임의의 위
치 데이터를 저장하고 이를 시뮬레이션으로 확인하였다.
- Firebase호스팅을 통해 서버로 웹사이트 배포를 진행하였다.
- firbase 프로젝트에 회원 정보를 저장된 회원 정보를 확인할 수 있다.
구현 및 테스트
분석하기 구현 및 테스트
설계하기
Vue.js
- 서버와 연결 된 웹 실행 로그인 화면이다.
- 탐색된 비콘 개체의 mac 값과 위치 정보를 좌표로 나타내어준다.
- 서버를 동해 저장 된 비콘의 정보 값을 기반으로 지도상의 비콘 태그의 위치 정보를
나타내어 준다.
- 앱과 마찬가지로 게시판을 활용할 수 있다.
- DB에서 저장된 데이터 값을 반영하여 현재 회원가입한 회원 수, 사용 중인 태그 수
출력, 안드로이드에 게시판에 올라온 글을 받아와 메인페이지에 출력하고 데이터 값
출력, 수정 버튼은 글 작성자와 관리자만 사용 가능하며 누를 시 상태 초기화가 이루
어진다.
- 등록한 태그에 대한 정보를 보여준다.
- 사용자 데이터를 보여주어 정보와 상태를 확인할 수 있다.
기대 효과
- 비콘에서 위치 값을 알려주기 때문에 미아 발생률을 낮춰줄 수 있다.
- 다방 면으로 치매 노인, 자동차, 물건 등 넓은 범위로 활용이 가능하다.
- 앱에 비콘을 등록함으로써 앱을 통해 쉽고 빠르게 잃어버린 물건의 위치
를 볼 수 있다.
시연 영상
작품 소개 : https://youtu.be/Pus3zqcqnBg
App : https://youtu.be/DkCZE7k0Z9w
Node : https://youtu.be/Gu1xgeuANRI
Vue : https://youtu.be/D1xAYtjbQrE
Lost smart
Tag
-
감사합니다.

More Related Content

Similar to Lost smart tag 소개

2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현kdh24
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료JinHyuck Churn
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a jobDeo Kim
 
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트Dae Kim
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오Haegyun Jung
 
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time DatabaseFirebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database승빈이네 공작소
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1bingoori
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, VueGunhee Lee
 
Web devmobile 8회열린세미나
Web devmobile 8회열린세미나Web devmobile 8회열린세미나
Web devmobile 8회열린세미나Pumsuk Cho
 
웹사이트기획 및 관리
웹사이트기획 및 관리웹사이트기획 및 관리
웹사이트기획 및 관리봉조 김
 
Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스WebFrameworks
 
Man's community(Man's)
Man's community(Man's)Man's community(Man's)
Man's community(Man's)송 준일
 
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blogSue Hyun Jung
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론Hankyo
 

Similar to Lost smart tag 소개 (20)

Parallel diary
Parallel diaryParallel diary
Parallel diary
 
2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현2조 프로젝트 보고서 김동현
2조 프로젝트 보고서 김동현
 
7. html5 api
7. html5 api7. html5 api
7. html5 api
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
 
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
모바일 게임과 앱을 위한 오픈소스 게임서버 엔진 프로젝트 CloudBread 프로젝트
 
9조 발표
9조 발표9조 발표
9조 발표
 
정해균 포트폴리오
정해균 포트폴리오정해균 포트폴리오
정해균 포트폴리오
 
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time DatabaseFirebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
Firebase for web (웹개발을 위한 파이어베이스) 3 Real-Time Database
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
9조 발표
9조 발표9조 발표
9조 발표
 
어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
Web devmobile 8회열린세미나
Web devmobile 8회열린세미나Web devmobile 8회열린세미나
Web devmobile 8회열린세미나
 
웹사이트기획 및 관리
웹사이트기획 및 관리웹사이트기획 및 관리
웹사이트기획 및 관리
 
Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스Meteor를 통해서 개발하는 웹어플리케이션 서비스
Meteor를 통해서 개발하는 웹어플리케이션 서비스
 
Man's community(Man's)
Man's community(Man's)Man's community(Man's)
Man's community(Man's)
 
Portfolio
PortfolioPortfolio
Portfolio
 
좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog좋은교사운동 워크숍05 sn_son_blog
좋은교사운동 워크숍05 sn_son_blog
 
01.모바일 프레임워크 이론
01.모바일 프레임워크 이론01.모바일 프레임워크 이론
01.모바일 프레임워크 이론
 

Lost smart tag 소개

  • 1. Lost smart Tag 7조 김 소 현 * 김 유 리 * 손 영 범 * 최 주 원
  • 2. 김 소 현(18)* 김 유 리(18) 손 영 범(18) 최 주 원(16) 1. BLE 통신 구현 1. 웹서버 설계 및 구현 1. Vue.js front-end 설계 및 구현 1. 비콘 서치 2. Firebase 설계 및 구현 2. Firebase 웹 DB 작성 2. 웹 서버 연동 2. 비콘 동작 법 분석 3. S/W 알고리즘 설계 3. Firebase 호스팅 및 배포 3. Database 설계 3. 비콘 내부 분석 4. APPLICATION 제작 4. 문서 작성 4. Api 도메인 구현 4. 문서 작성 5. 문서 작성 및 수정 5. 문서 작성 역할 분담
  • 3. CONTENTS 01 CONTENTS 1 분석하기 02 CONTENTS 2 설계하기 03 CONTENTS 3 구현 및 테스트
  • 4. 설계하기 구현 및 테스트 분석하기 대형 놀이공원, 해수욕장 등 가족 여행지에서 미아 발생이 빈번함.
  • 5. 설계하기 구현 및 테스트 분석하기 시간이 지나면 실종 아동의 증거를 찾기 힘들고 사람들의 제보에 의존해야 함.
  • 6. 설계하기 구현 및 테스트 분석하기 해가 거듭 될수록 실종 아동이 늘고 있음을 볼 수 있음.
  • 7. 구현 및 테스트 설계하기 분석하기 작품 소개 분실 방지 스마트 태그(Smart-tag)는 놀이공원에 입장하는 고객을 대상으로 모바일 어 플과 비콘을 이용한 위치 정보를 제공한다. 어플을 설치하고 블루투스를 통해 태그를 연결하여 위치 를 기록하고 지도로 태그의 위치를 알 수 있다. 또 한 블루투스를 켜두면 주변에 있는 비콘의 신호를 가져와 비콘의 대략적인 위치를 확인 할 수 있어 아이를 찾고자하는 사람에게 도움을 줄 수 있다. 스마트 태그는 놀이공원 내에서 미아, 혹은 분실물 발생 시 어플을 통해 해당 위치를 확인 할 수 있어 분실을 방지해주는 서비스를 제공해준다.
  • 9. 구현 및 테스트 설계하기 분석하기 DB 전송 전송 전송, 요청 응답 API서버 웹브라우저 사용자 어플 전송 응답 요청 • 서버로부터 받은 데이터를 저장. • 저장된 데이터를 서버로 전송 • 사용자의 요청에 응답 (로그인, 데이터 요청 등) • 스마트폰에서 전달받은 데이터를 DB로 전송 웹서버 구조도
  • 10. 구현 및 테스트 분석하기 구현 및 테스트 설계하기 안드로이드 -회원이 아닌 비회원이 로그인을 하게 되면 회원가입이 필요하다는 문구를 출력한다.
  • 11. -회원가입 창으로 넘어가 회원가입을 하는데 존재하는 아이디면 존재한다는 문구를 띄워 주고 존재하지 않은 아이디면 가입이 완료된다.
  • 12. -메뉴 페이지로 가면 BEACON메뉴와 게시판 메뉴, 홈페이지, 위치 전송 메뉴로 나뉜 다. -BEACON 메뉴를 선택하면 위치정보에 동의하냐는 팝업이 뜨고 동의해야지만 앱을 사용할 수 있다. 위치 전송
  • 13. -동의를 하고 난 뒤 언더바의 Scan 항목을 누르면 주변 BLE를 5초간 탐색한다. -내가 등록하고하는 Beacon을 선택하면 서버에 Beacon의 Mac주소가 추가 되었다는 문구를 출력한다.
  • 14. -서버에 Beacon을 추가 했다면 채널이 생성되었다는 문구가 나온다. -Users 항목을 누르면 내가 연결한 Beacon의 Mac주소를 볼 수 있다. -GPS 항목을 누르면 현재의 위도와 경도를 가져와 준다.
  • 15. -Map 항목을 누르면 가져온 위도, 경도에 위치를 지도로 표시해준다. -좌표를 누르면 구글 지도로 넘어가 현재 내 위치에서 비콘의 위치의 경로를 알려준다.
  • 16. -게시판에 찾고자하는 tag name을 올리면 그 것을 보고 사용자들과 관리자가 도움을 줄 수 있습니다.
  • 17. -위치 전송 메뉴로가 전화번호를 입력하면 1분 주기로 위치정보가 입력한 전화번호로 전송된다.
  • 18. 구현 및 테스트 분석하기 구현 및 테스트 설계하기 Node.js - 서버에 연결 시 구글 계정으로 인증하는 기능을 구현하였다.
  • 19. - Firebase 실시간 데이터베이스를 이용하여 서버에 전송할 임의의 위 치 데이터를 저장하고 이를 시뮬레이션으로 확인하였다.
  • 20. - Firebase호스팅을 통해 서버로 웹사이트 배포를 진행하였다.
  • 21. - firbase 프로젝트에 회원 정보를 저장된 회원 정보를 확인할 수 있다.
  • 22. 구현 및 테스트 분석하기 구현 및 테스트 설계하기 Vue.js - 서버와 연결 된 웹 실행 로그인 화면이다.
  • 23. - 탐색된 비콘 개체의 mac 값과 위치 정보를 좌표로 나타내어준다.
  • 24. - 서버를 동해 저장 된 비콘의 정보 값을 기반으로 지도상의 비콘 태그의 위치 정보를 나타내어 준다.
  • 25. - 앱과 마찬가지로 게시판을 활용할 수 있다.
  • 26. - DB에서 저장된 데이터 값을 반영하여 현재 회원가입한 회원 수, 사용 중인 태그 수 출력, 안드로이드에 게시판에 올라온 글을 받아와 메인페이지에 출력하고 데이터 값 출력, 수정 버튼은 글 작성자와 관리자만 사용 가능하며 누를 시 상태 초기화가 이루 어진다.
  • 27. - 등록한 태그에 대한 정보를 보여준다. - 사용자 데이터를 보여주어 정보와 상태를 확인할 수 있다.
  • 28. 기대 효과 - 비콘에서 위치 값을 알려주기 때문에 미아 발생률을 낮춰줄 수 있다. - 다방 면으로 치매 노인, 자동차, 물건 등 넓은 범위로 활용이 가능하다. - 앱에 비콘을 등록함으로써 앱을 통해 쉽고 빠르게 잃어버린 물건의 위치 를 볼 수 있다.
  • 29. 시연 영상 작품 소개 : https://youtu.be/Pus3zqcqnBg App : https://youtu.be/DkCZE7k0Z9w Node : https://youtu.be/Gu1xgeuANRI Vue : https://youtu.be/D1xAYtjbQrE