한양대학교 셔틀시스템 셔틀콕 개발기
TRANSCRIPT
한양대학교셔틀시스템셔틀콕개발기
나윤환 | 한양대학교 ERICA 컴퓨터공학
발표자소개
나윤환 | 디발자혹은개자이너
한양대학교 ERICA 컴퓨터공학 14학번디자인공학융합전공
Microsoft Student Partner삼성소프트웨어멤버십 25-2기 수료Google Developer Group 천안 & 아산전대표
fb.com/nayunhwan
instagram.com/nayunhwan
셔틀콕 | 셔틀을콕하다
아직도몰라?셔틀콕에다있어한양대학교 ERICA 셔틀버스시간표, 식단, 날씨,페달로, 페이스북등다양한정보를한곳에서확인해봐
한양대학교홍보책자기재한양대학교 ERICA 점유율 30% (Android 기준)일주일평균 Request 100,000건
어떻게만들게되었나요?
불편해서
언제만들었나요?
대학교 1학년신입생
만든기간은?
일주일쯤..?
초보개발자의삽질이야기
지금시작합니다
셔틀콕 ver 1.0진짜내소프트웨어를만들다
Android? iOS?
JavaWindows, Linux, Mac 개발가능개발자등록비용 USD 25.00
내가안드로이드유저
Swift, Object – CMac에서만개발가능
개발자등록비용연 USD 99.00아이폰없음
Android Application 시작
Hello Android Application
아.. 뭐부터해야하지?
일단뭐든지만들고보자
Android Application 시작
No Server No Database No 개념
Android Application 시작
Splash View 날짜선택 View
요일선택 View 시간표 View
Android Application 시작
이제시간표를넣어야하는데..
아맞아학교에서배열을배웠지!
Android Application 시작
이러라고알려준게아닐텐데..
현재기기의시각가져오기현재시각에서시간배열중가장가까운
시간뺀시간출력
새로고침버튼이눌렸을때
셔틀콕로직
시간표가변경되었을때대책은?
아이폰사용자들은?
셔틀콕문제점
셔틀콕 ver 2.0소프트웨어유지보수의시작
Google I/O 2014
셔틀콕의터닝포인트
2014년 6월 25일
Material Design
Google의 새로운디자인가이드공개
셔틀콕의터닝포인트
오.. 내 셔틀콕도저렇게이쁘게만들고싶다
그런데어떻게저렇게만들지?
셔틀콕의터닝포인트
처음으로라이브러리사용
안드로이드 5.0 미만의디바이스에서도Material Design을사용하기위해서는 Android Design Support Library를 사용해야함
셔틀콕의터닝포인트
Android Design Support Library이용하여Material Design 적용
WebView
Material Design 적용하기
Library? Gradle? 넌 누구니..?
Android Studio와 Gradle
Good Bye, Eclipse!Hello, Android Studio!
Android Studio와 Gradle
편집과빌드둘다내가할거야
Android Studio와 Gradle
난편집을맡을게 그럼난빌드를할게
Android Studio와 Gradle
어? Android Design Support Library가 없네?내가자동으로다운받아놔야지
dependencies {compile 'com.android.support:appcompat-v7:+’
}
Android Studio와 Gradle
하이브리드의첫걸음
Hybrid Application
Cross Platform
Hybrid Application
Hybrid Application
Web Hosting
긴 DOM 형식의 javascript를 짧고간결하게사용할수있도록도와주는라이브러리
Hybrid Application | jQuery
document.getElementById("divId"); document.getElementsByClassName("className"); document.getElementsByTagName("input");
jQuery 적용전
$("#divId");$(".className");$("input");
jQuery 적용후
Hybrid Application | jQuery
Cross Origin Resource Sharing
CORS
Hybrid Application | CORS 문제
http://domainA/1.html
http://domainA/2.html
http://domainB/1.html참조불가
Hybrid Application | CORS 문제
외부 API를 사용하지못함
몇몇의외부 API들을사용할수있었지만,Server에서 CORS를허용하지않으면, Client에서처리할수가없음
Hybrid Application | CORS 문제
서버에서허용하지않으면
근데.. 어떻게만들어야하지?
서버를만들어야겠다
Hybrid Application | CORS 문제
셔틀콕 ver 3.0여러 Framework로 날개를달다
서버만들기 | 무엇을골라야할까
Single thread, 매우빠른속도,CPU 대기시간최소화, CPU 부하가적음.. 등
서버만들기 | Node js
Javascript로 서버를개발할수있다
서버만들기 | Node js
5초 안에서버를만들수있다니..
Node.js + Express = ♡
서버만들기 | Node js
$ express ServerName -e$ cd ServerName$ npm install$ npm start
서버준비끝, 참 쉽쥬?
서버만들기 | Node js
jade? ejs? 너넨또뭐니..?
jade VS ejs
서버만들기 | jade vs ejs
서버만들기 | jade vs ejs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head>
<title>Hello jade</title><link rel="stylesheet" href="/stylesheets/style.css" />
</head><body>
<h1>Hello jade</h1><div>
<p>Welcome to jade</p></div><script src="script.js"></script>
</body> </html>
서버만들기 | jade vs ejs
취향존중
처리속도는 jade가 더빠르다고하나,새로운걸익히기싫다면 ejs
서버 만들기 | jade vs ejs
Node js의 모듈을사용해보자
간단하게 Facebook Feed를 가져올수있는 ’fb’모듈과HTML을 Parse할 수있는 ‘cheerio’ 모듈을간단히알아보자
Node js 모듈사용하기
Node js 모듈사용하기 | 모듈설치방법
Node js 모듈들은 npm을통해서간단하게설치가능
$ npm install {Module Name}
Node js의 fb 모듈을이용해 Facebook Graph API를 사용하면자신이원하는 Page의 feed를 쉽게실시간으로받아올수있다
Node js 모듈사용하기 | ‘fb’ module
Facebook Graph API 사용하기
fb module을 이용하여Access Token 인증
Feed를 가져오기원하는 Page ID값과field값을 fb module을 통해요청
Json으로 Data 리턴
Node js 모듈사용하기 | ‘fb’ module
cheerio 모듈
cheerio 모듈을이용하면 HTML page를 파싱할때jquery와 비슷한방식으로값을파싱할수있다.
Node js 모듈사용하기 | ‘cheerio’ module
Node js 모듈사용하기 | ‘cheerio’ module
주의
이후슬라이드에는조금어려운내용이들어있어,더 집중해서들어주시길바랍니다.
Node js는 비동기방식을채택
따라서 function이 먼저시작되었다고, 다음 function을 처리할때값이나와있다는보장이없다.
Node js 프로그래밍 | 비동기프로그래밍
너는또뭐야..?
비동기프로그래밍?
Node js 프로그래밍 | 비동기프로그래밍
요청처리 1
요청처리 2
동기방식
요청처리 1
요청처리 2
비동기방식
Node js 프로그래밍 | 비동기프로그래밍
Node js Event Loop 살펴보기
2. Next
Main Event Loop
요청 1 요청 2 요청 3 요청 N
1. Event 3. Callback
Node js 프로그래밍 | 비동기프로그래밍
동기식프로그래밍코드
Node js 프로그래밍 | 비동기프로그래밍
비동기식프로그래밍코드
Node js 프로그래밍 | 비동기프로그래밍
내가매일 24시간켜놓고있어야하나?
서버는대충만들었는데이걸어떻게쓰지?
클라우드
클라우드
무엇이떠오르시나요?
클라우드
클라우드
SaaS PaaS IaaS
SaaS소비자
PaaS프랜차이즈
IaaS건물주
클라우드 | 카페창업에비교하기
클라우드
클라우드 | Heroku
일본기업아님;
클라우드 | Heroku
무료
다른클라우드서비스들도무료로일정량을주긴하지만,Heroku는 카드정보조차요구하지않아안심
클라우드 | Heroku
$ heroku app:create {AppName}$ heroku git:remote -a {AppName}$ git push heroku master
서버배포도 Git을 통해이뤄지기때문에간편하다
클라우드 | Heroku
Front - End
이젠 Front-End를 한번더개선해볼까?
Back-End는 마무리된것같고,
Front - End | React vs Angular
Front - End | React vs Angular
Front - End | React vs Angular
취향존중
처리속도는 React가 더빠르다고하나,새로운걸익히기싫다면 Angular
(Angular js 1 기준)
Front - End | React vs Angular
2012
22015
과연이전쟁의승자는?
To be continue..
Bot 서비스
셔틀콕 Bot�서비스
Bot 서비스
My Server
Http GET ’myServerURL/keyboard’ orHttp POST ‘myServerURL/message’
Response
더나은 Bot을 구축하기위해서Heroku에서 Microsoft Azure로 서버를이전
Bot 서비스 | Microsoft Azure
withCognitive API
Bot 서비스 | Cognitive API
Vision Speech Language Knowledge Search
From faces to feelings,these APIs allow yourapps to understandimage and video
content.
Hear and speak to yourusers with APIs that filternoise, identify speakers,
and more.
APIs that allow your appto process natural
language and learn howto recognize what users
want.
Tap into rich knowledgeamassed from the web,academia, or your own
data.
Make your apps moreintelligent with the
power of Bing APIs, Asingle call accesses datafrom billions of web
pages, images, videos,and news
Cognitive API
Bot 서비스 | Cognitive API
Request body Parse
텍스트분석
이미지분석
키워드일치
예외처리
나이측정
사진판독 기계번역
응답function
Bot 서비스 | 로직
Bot 서비스 | 결과물
Database
Database | Firebase
Realtime & GUI Console
Database | Firebase
Database | Firebase
Angular Js와 Firebase 둘 모두Google이 운영하고있는환경이기때문에높은호환성제공
Database | Firebase
그래서하고싶은말이뭔데?
“할 수 있다”
- 펜싱 국가대표 박상영