[124] 하이브리드 앱 개발기 김한솔
TRANSCRIPT
50 iOS
, DEVIEW2016 .
.100%
UI NHN Technology Services UI
Front-end
.
#1
? (Hurdle) -. , -. -.
-.
~
,
,
NATIVE VIEWVIEWVIEWNATIVE VIEWWEB VIEWHTMLHTMLWEB VIEW
2013
, (Single Webview App)
SKT
, .
3~4 .UI .
Fool, Low .* 2013 12
( )
+
View JavaScript Single Page Application RouterView
VIEWVIEWVIEW
+History +History
300ms (Single tap Double tap )
JavaScript fastclick.js / hammer.js
*:
JavaScript setInterval() / jQuery animate()16~21ms
CSS webkit-transition,17~27ms CSS webkit-transition translate3d ( )0~2ms * : http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser
Push Notification
InAppBrowser ( )Facebook SDK / Kakao SDK /
Device API
Push Notifications
?
2 , LCC Finder2015
Webview jQuery Single Page ApplicationCordova/PhoneGap(Single Webview App)
5
!
? 2015.08 ~ 2016.02
WebviewIonicFramework AngularJS Cordova/Phonegap
- ( 2 )- - Cordova CLI - Cordova/PhoneGap - SDK (Facebook, Twitter, Fabric )Cordova / (config.xml)
#2
?
iOS , . ~ ? ?
2016 2
.iOS . ( ) Objective-C . 1.
,
!
? UI Cordova/PhoneGap ? , Major Featured ? . ! ... ( ) Cool ! (?) ?
Cordova
cordova-plugin-camera cordova-plugin-file-transfer phonegap-plugin-push SDK cordova-plugin-facebook4 SDK cordova-plugin-kakaotalk cordova-plugin-x-socialsharing cordova-plugin-themeablebrowser cordova-plugin-customurlscheme
?OK GO..!
.Very easy, Very simple
Ionic Framework Framework UI Cordova / AngularJS (+ Live Reload )
$ionic prepare $ionic resources, $ionic serve --lab iOS/Android $ionic run -livereload
Framework Library .
, .
1
UI
AngularJS Directive
.directive('recipe', function() { return { restrict: E', replace: true, templateUrl: templates/_recipe.html', controller: function($scope, $element, $attrs) { /* Sources here */ } }})
HTMLJS
View Router View ./
/
View
50 2~3
Modal PageModalModalModalModalModal
?!
2
Sync , ,
Directive View
Angular $rootScope Level Sync Directive
id ,
Cordova/PhoneGap 30 API , ,
Cordova
1. ?2. 3. Reject 4.
1. multipart/form 1. File Transfer 2. API .1 2 3
CallbackCallback
3 ! ! !
UI
Placehold
{{ feedPreview.title }}
{{ feedPreview.content }}
REST API View listView detail
DOM , Flicking .( )
Indicator Flick .
5 iOS8 / iPhone 4S , * 5
, Resize Rulehttp://.../.../...image.jpg&rt=780http://.../.../...image.jpg&rt=480http://.../.../...image.jpg&rt=180 320px (6) 320px (5) CloudFront
CSS3 blur Up-scaling 1KB
Blur
40px
Gradient CSS3 gradient PNG24 Overlay
4 ~,
70% 1~2 (2 )
/ / , / / / (GIF)
VOC
CodePush
!
https://microsoft.github.io/code-push
A4
AngularJS Graph
Ionic ,
1file of Controllers1file of Services
controllers.js (1339 LOC)
Ionic
view, service, controller, directives
* : https://scotch.io/tutorials/angularjs-best-practices-directory-structure
Cordova config.xml
Hook Script info.plist
AngularJS ~ 70%
m.haemukja.com
Haemuk Visualizing
, PC ,
https://[email protected]/vitalhint_bucket/haemuk_visualizing.git
iCook
, AngularJS
http://icook.haemukja.comhttp://icook.haemukja.com/#/recipes/2636
#3
DELL , PC .
* : http://www.nowpug.com/review/79912* :
? ? ?
NOYESYES
NO
NO
YES
HTML/CSS/JavaScript UI ,
2016 2016 3 26 iOS 2016 7 26 2.0 2016 8 Featured App , / 12016 9 2016 9 2016 10 DEVIEW 2016
!
Q&A
Thank You