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

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

나 윤 환 | 한양대학교 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.getEle-mentsByClassName("className"); document.getElements-ByTagName("input");

jQuery 적용 전

$("#divId");$(".className");$("input");

jQuery 적용 후

Hybrid Application | jQuery

Cross Origin Resource SharingCORS

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


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 understand

image and videocontent.

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 data

from billions of webpages, images, videos,

and news

Cognitive API

Bot 서비스 | Cognitive API

Request body Parse

텍스트분석

이미지분석

키워드일치

예외 처리

나이 측정

사진 판독 기계 번역

응답func-tion

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

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