SlideShare ist ein Scribd-Unternehmen logo
1 von 97
한양대학교 셔틀시스템
셔틀콕 개발기
나 윤 환 | 한양대학교 ERICA 컴퓨터공학
발표자 소개
나 윤 환 | 디발자 혹은 개자이너
한양대학교 ERICA 컴퓨터공학 14학번
디자인공학 융합전공
Microsoft Student Partner
삼성 소프트웨어 멤버십 25-2기 수료
Google Developer Group 천안 & 아산 전 대표
fb.com/nayunhwan
instagram.com/nayunhwan
yunhwan.na@studentpartner.com
셔틀콕 | 셔틀을 콕 하다
아직도 몰라?
셔틀콕에 다 있어
한양대학교 ERICA 셔틀버스 시간표, 식단, 날씨,
페달로, 페이스북 등 다양한 정보를 한 곳에서 확인해봐
한양대학교 홍보 책자 기재
한양대학교 ERICA 점유율 30% (Android 기준)
일주일 평균 Request 100,000건
어떻게 만들게 되었나요?
불편해서
언제 만들었나요?
대학교 1학년 신입생
만든 기간은?
일주일 쯤..?
초보 개발자의 삽질 이야기
지금 시작합니다
셔틀콕 ver 1.0
진짜 내 소프트웨어를 만들다
Android? iOS?
Java
Windows, Linux, Mac 개발 가능
개발자 등록비용 USD 25.00
내가 안드로이드 유저
Swift, Object – C
Mac에서만 개발 가능
개발자 등록비용 연 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’ or
Http POST ‘myServerURL/message’
Response
더 나은 Bot을 구축하기 위해서
Heroku에서 Microsoft Azure로 서버를 이전
Bot 서비스 | Microsoft Azure
with
Cognitive API
Bot 서비스 | Cognitive API
Vision Speech Language Knowledge Search
From faces to feelings,
these APIs allow your
apps to understand
image and video
content.
Hear and speak to your
users with APIs that filter
noise, identify speakers,
and more.
APIs that allow your app
to process natural
language and learn how
to recognize what users
want.
Tap into rich knowledge
amassed from the web,
academia, or your own
data.
Make your apps more
intelligent with the
power of Bing APIs, A
single call accesses data
from 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
yunhwan.na@studentpartner.com
감사합니다
http://softcon.symflow.com/

Weitere ähnliche Inhalte

Was ist angesagt?

K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
jinwook shin
 
JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰
Kenu, GwangNam Heo
 

Was ist angesagt? (20)

최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기
 
WEB Front-End 개발과정 살펴보기
WEB Front-End 개발과정 살펴보기WEB Front-End 개발과정 살펴보기
WEB Front-End 개발과정 살펴보기
 
[133]awair 케빈조
[133]awair 케빈조[133]awair 케빈조
[133]awair 케빈조
 
PHP Slim Framework with Angular
PHP Slim Framework with AngularPHP Slim Framework with Angular
PHP Slim Framework with Angular
 
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)
 
HTML5 & Hybrid App Trends
HTML5 & Hybrid App TrendsHTML5 & Hybrid App Trends
HTML5 & Hybrid App Trends
 
Overview
OverviewOverview
Overview
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강 [토크아이티] 프런트엔드 개발 시작하기 저자 특강
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
 
Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)
Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)
Fast campus 안드로이드 앱 개발 프로젝트 CAMP (Fastground)
 
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
 
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
2016 W3C Conference #8 : IONIC으로 하이브리드 앱 개발하기, 사례와 시사점
 
BEM을 깨우치다.
BEM을 깨우치다.BEM을 깨우치다.
BEM을 깨우치다.
 
JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰JavaScript 2014 프론트엔드 기술 리뷰
JavaScript 2014 프론트엔드 기술 리뷰
 
하이브리드 앱_개발_개요
하이브리드 앱_개발_개요하이브리드 앱_개발_개요
하이브리드 앱_개발_개요
 
모바일 크로스플랫폼 비교 - 월간슬라이드 4월
모바일 크로스플랫폼 비교 - 월간슬라이드 4월모바일 크로스플랫폼 비교 - 월간슬라이드 4월
모바일 크로스플랫폼 비교 - 월간슬라이드 4월
 
모바일앱개발 교육자료
모바일앱개발 교육자료모바일앱개발 교육자료
모바일앱개발 교육자료
 
포트폴리오 김규하
포트폴리오 김규하포트폴리오 김규하
포트폴리오 김규하
 

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

Open source engineering - 0.1
Open source engineering - 0.1Open source engineering - 0.1
Open source engineering - 0.1
YoungSu Son
 

Ähnlich wie 한양대학교 셔틀시스템 셔틀콕 개발기 (20)

목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
Portfolio
PortfolioPortfolio
Portfolio
 
Android Developer JeongJaeyun
Android Developer JeongJaeyunAndroid Developer JeongJaeyun
Android Developer JeongJaeyun
 
my activities before getting a job
my activities before getting a jobmy activities before getting a job
my activities before getting a job
 
2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummit2018 GDG 인천 DevFest GoogleAndroidDevSummit
2018 GDG 인천 DevFest GoogleAndroidDevSummit
 
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
200819 NAVER TECH CONCERT 07_신입 iOS 개발자 개발업무 적응기
 
Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.
 
GDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's NoteGDG DevFest Busan 16" Android Nougat Developer's Note
GDG DevFest Busan 16" Android Nougat Developer's Note
 
Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1Project anarchy로 3 d 게임 만들기 part_1
Project anarchy로 3 d 게임 만들기 part_1
 
Open Jig Ware
Open Jig WareOpen Jig Ware
Open Jig Ware
 
[Tech meet up] 2018 프론트엔드 트렌드&인사이트
[Tech meet up] 2018 프론트엔드 트렌드&인사이트[Tech meet up] 2018 프론트엔드 트렌드&인사이트
[Tech meet up] 2018 프론트엔드 트렌드&인사이트
 
Open source engineering - 0.1
Open source engineering - 0.1Open source engineering - 0.1
Open source engineering - 0.1
 
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
HTML5 관점에서 2015년 웹 앱 개발 동향과 사례 및 2016년 발전 방향 저...
 
React native development
React native developmentReact native development
React native development
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
반응형 웹 디자인
반응형 웹 디자인반응형 웹 디자인
반응형 웹 디자인
 
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
[네이버오픈소스세미나] egjs-view360 개발기 - 김희재
 
구글앱엔진 스터디
구글앱엔진 스터디구글앱엔진 스터디
구글앱엔진 스터디
 
응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
 
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
Adobe Dreamweaver CS5.5 를 이용한 HTML5 개발
 

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