한양대학교 셔틀시스템 셔틀콕 개발기

한양대학교셔틀시스템셔틀콕개발기

나윤환 | 한양대학교 ERICA 컴퓨터공학

발표자소개

나윤환 | 디발자혹은개자이너

한양대학교 ERICA 컴퓨터공학 14학번디자인공학융합전공

Microsoft Student Partner삼성소프트웨어멤버십 25-2기 수료Google Developer Group 천안 & 아산전대표

fb.com/nayunhwan

instagram.com/nayunhwan

[email protected]

셔틀콕 | 셔틀을콕하다

아직도몰라?셔틀콕에다있어한양대학교 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

아.. 뭐부터해야하지?

일단뭐든지만들고보자


No Server No Database No 개념


Splash View 날짜선택 View

요일선택 View 시간표 View


이제시간표를넣어야하는데..

아맞아학교에서배열을배웠지!


이러라고알려준게아닐텐데..

현재기기의시각가져오기현재시각에서시간배열중가장가까운

시간뺀시간출력

새로고침버튼이눌렸을때

셔틀콕로직

시간표가변경되었을때대책은?

아이폰사용자들은?

셔틀콕문제점

셔틀콕 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 Design Support Library가 없네?내가자동으로다운받아놔야지

dependencies {compile 'com.android.support:appcompat-v7:+’

}


하이브리드의첫걸음

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참조불가


외부 API를 사용하지못함

몇몇의외부 API들을사용할수있었지만,Server에서 CORS를허용하지않으면, Client에서처리할수가없음


서버에서허용하지않으면

근데.. 어떻게만들어야하지?

서버를만들어야겠다


셔틀콕 ver 3.0여러 Framework로 날개를달다

서버만들기 | 무엇을골라야할까

Single thread, 매우빠른속도,CPU 대기시간최소화, CPU 부하가적음.. 등

서버만들기 | Node js

Javascript로 서버를개발할수있다


5초 안에서버를만들수있다니..

Node.js + Express = ♡


$ express ServerName -e$ cd ServerName$ npm install$ npm start

서버준비끝, 참 쉽쥬?


jade? 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가 더빠르다고하나,새로운걸익히기싫다면 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 프로그래밍 | 비동기프로그래밍

너는또뭐야..?

비동기프로그래밍?


요청처리 1

요청처리 2

동기방식

요청처리 1

요청처리 2

비동기방식


Node js Event Loop 살펴보기

2. Next

Main Event Loop

요청 1 요청 2 요청 3 요청 N

1. Event 3. Callback


동기식프로그래밍코드


비동기식프로그래밍코드


내가매일 24시간켜놓고있어야하나?

서버는대충만들었는데이걸어떻게쓰지?

클라우드

클라우드

무엇이떠오르시나요?

클라우드

클라우드

SaaS PaaS IaaS

SaaS소비자

PaaS프랜차이즈

IaaS건물주

클라우드 | 카페창업에비교하기

클라우드

클라우드 | Heroku

일본기업아님;


무료

다른클라우드서비스들도무료로일정량을주긴하지만,Heroku는 카드정보조차요구하지않아안심


$ heroku app:create {AppName}$ heroku git:remote -a {AppName}$ git push heroku master

서버배포도 Git을 통해이뤄지기때문에간편하다


Front - End

이젠 Front-End를 한번더개선해볼까?

Back-End는 마무리된것같고,

Front - End | React vs Angular



취향존중

처리속도는 React가 더빠르다고하나,새로운걸익히기싫다면 Angular

(Angular js 1 기준)


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

그래서하고싶은말이뭔데?

“할 수 있다”

- 펜싱 국가대표 박상영

fb.com/nayunhwan

instagram.com/nayunhwan

[email protected]

감사합니다http://softcon.symflow.com/

Software

한양대학교 셔틀시스템 셔틀콕 개발기