![[124] 하이브리드 앱 개발기 김한솔](https://cdn.slidesharecdn.com/ss_thumbnails/124-161023163714-thumbnail.jpg?width=560&fit=bounds)
![[133]awair 케빈조](https://cdn.slidesharecdn.com/ss_thumbnails/133awair-161023163323-thumbnail.jpg?width=560&fit=bounds)
![[토크아이티] 프런트엔드 개발 시작하기 저자 특강](https://cdn.slidesharecdn.com/ss_thumbnails/random-141024103422-conversion-gate01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to 한양대학교 셔틀시스템 셔틀콕 개발기 (20)
![[Tech meet up] 2018 프론트엔드 트렌드&인사이트](https://cdn.slidesharecdn.com/ss_thumbnails/2018-180129073840-thumbnail.jpg?width=560&fit=bounds)
![[네이버오픈소스세미나] egjs-view360 개발기 - 김희재](https://cdn.slidesharecdn.com/ss_thumbnails/naveropensourceseminar2nd-2-180227052727-thumbnail.jpg?width=560&fit=bounds)
한양대학교 셔틀시스템 셔틀콕 개발기
- 1. 한양대학교 셔틀시스템 셔틀콕 개발기 나 윤 환 | 한양대학교 ERICA 컴퓨터공학
- 2. 발표자 소개 나 윤 환 | 디발자 혹은 개자이너 한양대학교 ERICA 컴퓨터공학 14학번 디자인공학 융합전공 Microsoft Student Partner 삼성 소프트웨어 멤버십 25-2기 수료 Google Developer Group 천안 & 아산 전 대표 fb.com/nayunhwan instagram.com/nayunhwan yunhwan.na@studentpartner.com
- 3. 셔틀콕 | 셔틀을 콕 하다 아직도 몰라? 셔틀콕에 다 있어 한양대학교 ERICA 셔틀버스 시간표, 식단, 날씨, 페달로, 페이스북 등 다양한 정보를 한 곳에서 확인해봐 한양대학교 홍보 책자 기재 한양대학교 ERICA 점유율 30% (Android 기준) 일주일 평균 Request 100,000건
- 5. 불편서
- 6. 언제 만들었나요?
- 7. 대학교 1학년 신입생
- 8. 만든 기간은?
- 9. 일주일 쯤..?
- 10. 초보 개발자의 삽질 이야기 지금 시작합니다
- 11. 셔틀콕 ver 1.0 진짜 내 소프트웨어를 만들다
- 12. Android? iOS? Java Windows, Linux, Mac 개발 가능 개발자 등록비용 USD 25.00 내가 안드로이드 유저 Swift, Object – C Mac에서만 개발 가능 개발자 등록비용 연 USD 99.00 아이폰 없음
- 13. Android Application 시작 Hello Android Application
- 14. 아.. 뭐부터 해야 하지? 일단 뭐든지 만들고 보자 Android Application 시작
- 15. No Server No Database No 개념 Android Application 시작
- 16. Splash View 날짜 선택 View 요일 선택 View 시간표 View Android Application 시작
- 17. 이제 시간표를 넣어야하는데.. 아 맞아 학교에서 배열을 배웠지! Android Application 시작
- 19. 이러라고 알려준게 아닐텐데..
- 20. 현재 기기의 시각 가져오 기 현재 시각에서 시간 배열 중 가장 가 까운 시간 뺀 시간 출력 새로 고침 버튼이 눌렸을 때 셔틀콕 로직
- 21. 시간표가 변경되었을 때 대책은? 아이폰 사용자들은? 셔틀콕 문제점
- 22. 셔틀콕 ver 2.0 소프트웨어 유지 보수의 시작
- 23. Google I/O 2014 셔틀콕의 터닝포인트 2014년 6월 25일
- 24. Material Design Google의 새로운 디자인 가이드 공개 셔틀콕의 터닝포인트
- 25. 오.. 내 셔틀콕도 저렇게 이쁘게 만들고싶다 그런데 어떻게 저렇게 만들지? 셔틀콕의 터닝포인트
- 26. 처음으로 라이브러리 사용 안드로이드 5.0 미만의 디바이스에서도 Material Design을 사용하기 위해서는 Android Design Support Library를 사용해야함 셔틀콕의 터닝포인트
- 27. Android Design Support Library 이용하여 Material Design 적용 WebView Material Design 적용하기
- 28. Library? Gradle? 넌 누구니..? Android Studio와 Gradle
- 29. Good Bye, Eclipse! Hello, Android Studio! Android Studio와 Gradle
- 30. 편집과 빌드 둘 다 내가 할거야 Android Studio와 Gradle
- 31. 난 편집을 맡을게 그럼 난 빌드를 할게 Android Studio와 Gradle
- 32. 어? Android Design Support Library가 없네? 내가 자동으로 다운받아놔야지 dependencies { compile 'com.android.support:appcompat-v7:+’ } Android Studio와 Gradle
- 33. 하이브리드의 첫 걸음 Hybrid Application
- 36. 긴 DOM 형식의 javascript를 짧고 간결하게 사용할 수 있도록 도와주는 라이브러리 Hybrid Application | jQuery
- 37. document.getElementById("divId"); document.getElementsByClassName("className"); document.getElementsByTagName("input"); jQuery 적용 전 $("#divId"); $(".className"); $("input"); jQuery 적용 후 Hybrid Application | jQuery
- 38. Cross Origin Resource Sharing CORS Hybrid Application | CORS 문제
- 39. http://domainA/1.html http://domainA/2.html http://domainB/1.html참조불가 Hybrid Application | CORS 문제
- 40. 외부 API를 사용하지 못함 몇몇의 외부 API들을 사용할 수 있었지만, Server에서 CORS를 허용하지 않으면, Client에서 처리할 수가 없음 Hybrid Application | CORS 문제 서버에서 허용하지 않으면
- 41. 근데.. 어떻게 만들어야하지? 서버를 만들어야겠다 Hybrid Application | CORS 문제
- 42. 셔틀콕 ver 3.0 여러 Framework로 날개를 달다
- 43. 서버 만들기 | 무엇을 골라야 할까
- 44. Single thread, 매우 빠른 속도, CPU 대기시간 최소화, CPU 부하가 적음.. 등 서버 만들기 | Node js
- 45. Javascript로 서버를 개발할 수 있다 서버 만들기 | Node js
- 46. 5초 안에 서버를 만들 수 있다니.. Node.js + Express = ♡ 서버 만들기 | Node js
- 47. $ express ServerName -e $ cd ServerName $ npm install $ npm start 서버 준비 끝, 참 쉽쥬? 서버 만들기 | Node js
- 48. jade? ejs? 너넨 또 뭐니..? jade VS ejs 서버 만들기 | jade vs ejs
- 49. 서버 만들기 | jade vs ejs
- 50. <!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=/slideshow/ss-69346554/69346554/"script.js"></script> </body> </html> 서버 만들기 | jade vs ejs
- 51. 취향 존중 처리 속도는 jade가 더 빠르다고 하나, 새로운 걸 익히기 싫다면 ejs 서버 만들기 | jade vs ejs
- 52. Node js의 모듈을 사용해보자 간단하게 Facebook Feed를 가져올 수 있는 ’fb’모듈과 HTML을 Parse할 수 있는 ‘cheerio’ 모듈을 간단히 알아보자 Node js 모듈 사용하기
- 53. Node js 모듈 사용하기 | 모듈 설치 방법 Node js 모듈들은 npm을 통해서 간단하게 설치 가능 $ npm install {Module Name}
- 54. Node js의 fb 모듈을 이용해 Facebook Graph API를 사용하면 자신이 원하는 Page의 feed를 쉽게 실시간으로 받아 올 수 있다 Node js 모듈 사용하기 | ‘fb’ module
- 55. Facebook Graph API 사용하기 fb module을 이용하여 Access Token 인증 Feed를 가져오기 원하는 Page ID값 과 field값을 fb module을 통해 요청 Json으로 Data 리턴 Node js 모듈 사용하기 | ‘fb’ module
- 56. cheerio 모듈 cheerio 모듈을 이용하면 HTML page를 파싱할 때 jquery와 비슷한 방식으로 값을 파싱할 수 있다. Node js 모듈 사용하기 | ‘cheerio’ module
- 57. Node js 모듈 사용하기 | ‘cheerio’ module
- 58. 주의 이후 슬라이드에는 조금 어려운 내용이 들어있어, 더 집중해서 들어주시길 바랍니다.
- 59. Node js는 비동기 방식을 채택 따라서 function이 먼저 시작 되었다고, 다음 function을 처리할 때 값이 나와 있다는 보장이 없다. Node js 프로그래밍 | 비동기 프로그래밍
- 60. 너는 또 뭐야..? 비동기 프로그래밍? Node js 프로그래밍 | 비동기 프로그래밍
- 61. 요청 처리 1 요청 처리 2 동기 방식 요청 처리 1 요청 처리 2 비동기 방식 Node js 프로그래밍 | 비동기 프로그래밍
- 62. Node js Event Loop 살펴보기 2. Next Main Event Loop 요청 1 요청 2 요청 3 요청 N 1. Event 3. Callback Node js 프로그래밍 | 비동기 프로그래밍
- 63. 동기식 프로그래밍 코드 Node js 프로그래밍 | 비동기 프로그래밍
- 64. 비동기식 프로그래밍 코드 Node js 프로그래밍 | 비동기 프로그래밍
- 65. 내가 매일 24시간 켜놓고 있어야 하나? 서버는 대충 만들었는데 이걸 어떻게 쓰지? 클라우드
- 66. 클라우드 무엇이 떠오르시나요?
- 67. 클라우드
- 69. SaaS 소비자 PaaS 프랜차이즈 IaaS 건물주 클라우드 | 카페 창업에 비교하기
- 70. 클라우드
- 71. 클라우드 | Heroku 일본기업 아님;
- 72. 클라우드 | Heroku
- 73. 무료 다른 클라우드 서비스들도 무료로 일정량을 주긴 하지만, Heroku는 카드 정보조차 요구하지 않아 안심 클라우드 | Heroku
- 74. $ heroku app:create {AppName} $ heroku git:remote -a {AppName} $ git push heroku master 서버 배포도 Git을 통해 이뤄지기 때문에 간편하다 클라우드 | Heroku
- 75. Front - End 이젠 Front-End를 한번 더 개선해볼까? Back-End는 마무리된 것 같고,
- 76. Front - End | React vs Angular
- 77. Front - End | React vs Angular
- 78. Front - End | React vs Angular
- 79. 취향 존중 처리 속도는 React가 더 빠르다고 하나, 새로운 걸 익히기 싫다면 Angular (Angular js 1 기준) Front - End | React vs Angular
- 80. 2012
- 81. 22015
- 82. 과연 이 전쟁의 승자는? To be continue..
- 83. Bot 서비스 셔틀콕 Bot 서비스
- 84. Bot 서비스 My Server Http GET ’myServerURL/keyboard’ or Http POST ‘myServerURL/message’ Response
- 85. 더 나은 Bot을 구축하기 위해서 Heroku에서 Microsoft Azure로 서버를 이전 Bot 서비스 | Microsoft Azure
- 86. with Cognitive API Bot 서비스 | Cognitive API
- 87. 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
- 88. Request body Parse 텍스트 분석 이미지 분석 키워드 일치 예외 처리 나이 측정 사진 판독 기계 번역 응답 function Bot 서비스 | 로직
- 89. Bot 서비스 | 결과물
- 90. Database
- 92. Realtime & GUI Console Database | Firebase
- 94. Angular Js와 Firebase 둘 모두 Google이 운영하고 있는 환경이기 때문에 높은 호환성 제공 Database | Firebase
- 95. 그래서 하고 싶은 말이 뭔데?
- 96. “할 수 있다” - 펜싱 국가대표 박상영