快快樂樂利用 PhoneGap 打造屬於自己的 App

•

2 recomendaciones•2,445 vistas

ericpi Bi

Tecnología

快快樂樂利用 PhoneGap
打造屬於自己的 App

ericpi
MOPCON/KSDG

About ericpi
•  KKBOX S.RDC Manager
•  KSDG organizer
•  MOPCON 2012/2013
•  Linux/FreeBSD, Node.JS, PHP lover

What is PhoneGap?
•  Mobile Development Framework
–  developed by Nitobi
–  Hybrid: develop App with HTML5/CSS/Javascript
–  Cross-platform App

•  Nitobi was acquired by Adobe
•  Open source project: Apache Cordova

Why PhoneGap?
•  HTML5/CSS/Javascript
•  Cross-platform: Android, FirefoxOS, iOS, Windows
Phone..
•  Apple’s approval
•  Adobe support many services/contributors

PhoneGap Benefits
•  Android, FirefoxOS, iOS, Windows Phone.. scaffold
•  SMS, Address book, Camera, Notification, GPS…
native API wrapper
•  Cross-domain access

PhoneGap principle

Web
App(HTML5/CSS/JS)
PhoneGap
Javascript
binding
WebView

PhoneGap
NaDve

Wrapper

Adobe PhoneGap Build
•  https://build.phonegap.com/

•  Online PhoneGap build service
•  Github integration
•  Keep away from Windows 8 VS express

快快樂樂建立App
•  DEMO
–  http://goo.gl/DTbZmd

•  Source
–  http://goo.gl/DK1cQT

Create a jqm-designer app
•  Export jqm code
– index.html, css, js

•  Add PhoneGap include code into index
–  script type=text/javascript src=phonegap.js/script

•  Create config.xml
–  https://raw.github.com/KSDG/PhoneGap-Sample/master/config.xml

•  Zip index.html config.xml css/js
•  Upload PhoneGap Build

The PhoneGap Native Feature
•  Which feature you need?
–  http://docs.phonegap.com/en/edge/index.html#API%20Reference

•  Modify config.xml for feature permission
– https://build.phonegap.com/docs/config-xml

•  Define deviceready listener
•  Create your feature code

Some Tips
•  Use script src remote url
•  Important: deviceready event
•  Async issues
•  Different platform
– Configuration
– UI management

WP App 競賽 MOPCON 特別版!
•  http://goo.gl/BsjBVn

•  直接贈送MOPCON
VIP!
•  免費提供開發者帳
號
•  三支 Nokia Lumia
1020!
•  行動電源抽獎

官方網站
http://mopcon.org/

粉絲群
https://www.facebook.com/mopcon

Thanks

Más contenido relacionado

La actualidad más candente

Angular js and phonegap uniteFITC

讓你的 Web App 跟 Native 一樣使用經驗 - PhoneJSericpi Bi

Phonegap/Cordova vs Native ApplicationMuhammad Hakim A

Getting started with the Ionic FrameworkAnuradha Weeraman

Deep dive phonegapArun Kumar

Hybrid mobile and IonicLiju Pillai

Glorium Technologies HighlightsVlad Makarov

Hybrid mobile application with IonicMaulik Bamania

Apache Cordova, Hybrid Application Developmentthedumbterminal

Pender presentation 2.0 PhoneGap

Ionic Framework - Intro to Hybrid Mobile Application DevelopmentMax Kaplan

Developing cross platform mobile applications with phone gap for windows phoneColin Eberhardt

Hybrid vs native mobile development – how to choose a tech stackJacques De Vos

BLUG 2013 - Mobile Application Delivery - Choices, choices, choicesRené Winkelmeyer

Hybrid Apps with Angular & Ionic FrameworkCihad Horuzoğlu

Retour d’expérience sur Couchbase par James NocentiniCocoaHeads France

IONIC - Hybrid Mobile App DevelopmentMalan Amarasinghe

TYPO3 CON 2019Macopedia

HeadlessdrupalcordovaappUniMity Solutions

Workshop on Hybrid App Development with Ionic FrameworkAayush Shrestha

La actualidad más candente (20)

Angular js and phonegap unite

讓你的 Web App 跟 Native 一樣使用經驗 - PhoneJS

Phonegap/Cordova vs Native Application

Getting started with the Ionic Framework

Deep dive phonegap

Hybrid mobile and Ionic

Glorium Technologies Highlights

Hybrid mobile application with Ionic

Apache Cordova, Hybrid Application Development

Pender presentation 2.0

Ionic Framework - Intro to Hybrid Mobile Application Development

Developing cross platform mobile applications with phone gap for windows phone

Hybrid vs native mobile development – how to choose a tech stack

BLUG 2013 - Mobile Application Delivery - Choices, choices, choices

Hybrid Apps with Angular & Ionic Framework

Retour d’expérience sur Couchbase par James Nocentini

IONIC - Hybrid Mobile App Development

TYPO3 CON 2019

Headlessdrupalcordovaapp

Workshop on Hybrid App Development with Ionic Framework

Similar a 快快樂樂利用 PhoneGap 打造屬於自己的 App

Future of MobileBrian LeRoux

PhoneGapDoncho Minkov

Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGapNick Landry

Cross platform mobile application developmentwebprogr.com

HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones

Developing Windows Phone 8 apps using PhoneGapAmar Mesic

Building Mobile Apps with Cordova , AngularJS and IonicKadhem Soltani

Creating Next-Generation ADF Mobile ApplicationsBrian Huff

«I knew there had to be a better way to build mobile app»FDConf

Making the Mobile Web Native with PhoneGapRoy Clarkson

Mobile apps with Umbraco and PhonegapTheo Paraskevopoulos

Mobile Enablement And IntelligenceRashmika Nawaratne

I knew there had to be a better way to build mobile appsAlius Petraška

Hybrid app developmentHarshul Shah

Cross-platform App with PhoneGap - Henri MägiMobileMonday Estonia

PhoneGap/PhoneGap Build - Amsterdam Adobe CampMihai Corlan

Mobile app development Luke Summerfield

Mobeers waterloo-2011Brian LeRoux

Introduction to Cross-Platform Hybrid Mobile App DevelopmentÖzcan Zafer AYAN

fdocuments.in_apache-cordova-overview.pptxssuserd27db6

Similar a 快快樂樂利用 PhoneGap 打造屬於自己的 App (20)

Future of Mobile

PhoneGap

Building Mobile Cross-Platform Apps with HTML5, jQuery Mobile & PhoneGap

Cross platform mobile application development

HTML5 is the Future of Mobile, PhoneGap Takes You There Today

Developing Windows Phone 8 apps using PhoneGap

Building Mobile Apps with Cordova , AngularJS and Ionic

Creating Next-Generation ADF Mobile Applications

«I knew there had to be a better way to build mobile app»

Making the Mobile Web Native with PhoneGap

Mobile apps with Umbraco and Phonegap

Mobile Enablement And Intelligence

I knew there had to be a better way to build mobile apps

Hybrid app development

Cross-platform App with PhoneGap - Henri Mägi

PhoneGap/PhoneGap Build - Amsterdam Adobe Camp

Mobile app development

Mobeers waterloo-2011

Introduction to Cross-Platform Hybrid Mobile App Development

fdocuments.in_apache-cordova-overview.pptx

Más de ericpi Bi

20160521 社群實務及組織協作ericpi Bi

20151127 kh gov-data-trainingericpi Bi

MOPCON 2015 introericpi Bi

20150630 kca big-data-with-cloud_outputericpi Bi

高雄市戶政資料視覺化 - 使用 C3.jsericpi Bi

MOPCON 2014 - 堅持在濁水溪以南的夢想ericpi Bi

KSDG BaaS Introericpi Bi

KSDG LT: 6分鐘node.JS就上手ericpi Bi

數位創業最好的技術顧問 - 技術社群ericpi Bi

前端也能變全端ericpi Bi

AWS vs Azureericpi Bi

MOPCON introericpi Bi

KSDG meet-up #1ericpi Bi

COSCUP 2010 - node.JS 於互動式網站之應用ericpi Bi

MOPCON 2012 - 網路服務從 K 到 Mericpi Bi

KSDG web course #1 - git: 從零開始 - 如何利用版本控制提升網站開發團隊效益ericpi Bi

Más de ericpi Bi (16)

20160521 社群實務及組織協作

20151127 kh gov-data-training

MOPCON 2015 intro

20150630 kca big-data-with-cloud_output

高雄市戶政資料視覺化 - 使用 C3.js

MOPCON 2014 - 堅持在濁水溪以南的夢想

KSDG BaaS Intro

KSDG LT: 6分鐘node.JS就上手

數位創業最好的技術顧問 - 技術社群

前端也能變全端

AWS vs Azure

MOPCON intro

KSDG meet-up #1

COSCUP 2010 - node.JS 於互動式網站之應用

MOPCON 2012 - 網路服務從 K 到 M

KSDG web course #1 - git: 從零開始 - 如何利用版本控制提升網站開發團隊效益

Último

Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda

Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani

TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc

How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes

Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada

Time Series Foundation Models - current state and future directionsNathaniel Shimoni

Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3

Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3

Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein

Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda

The State of Passkeys with FIDO Alliance.pptxLoriGlavin3

Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan

What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina

Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3

From Family Reminiscence to Scholarly Archive .Alan Dix

Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes

Decarbonising Buildings: Making a net-zero built environment a realityIES VE

So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda

How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe

快快樂樂利用 PhoneGap 打造屬於自己的 App

1. 快快樂樂利用 PhoneGap 打造屬於自己的 App ericpi MOPCON/KSDG

2. About ericpi •  KKBOX S.RDC Manager •  KSDG organizer •  MOPCON 2012/2013 •  Linux/FreeBSD, Node.JS, PHP lover

3. What is PhoneGap? •  Mobile Development Framework –  developed by Nitobi –  Hybrid: develop App with HTML5/CSS/Javascript –  Cross-platform App •  Nitobi was acquired by Adobe •  Open source project: Apache Cordova

4. Why PhoneGap? •  HTML5/CSS/Javascript •  Cross-platform: Android, FirefoxOS, iOS, Windows Phone.. •  Apple’s approval •  Adobe support many services/contributors

5. So.. It’s just a webview app?

6. And why not WinJs.. blah

7. PhoneGap Benefits •  Android, FirefoxOS, iOS, Windows Phone.. scaffold •  SMS, Address book, Camera, Notification, GPS… native API wrapper •  Cross-domain access

8. PhoneGap principle Web App(HTML5/CSS/JS) PhoneGap Javascript binding WebView PhoneGap NaDve Wrapper

9. Today is Windows Phone day

10. Windows 8 Visual Studio Express…

11.

12. I am Mac user……

13. Why PhoneGap? •  HTML5/CSS/Javascript •  Cross-platform: Android, FirefoxOS, iOS, Windows Phone.. •  Apple’s approval •  Adobe support many services/contributors

14. Adobe PhoneGap Build •  https://build.phonegap.com/ •  Online PhoneGap build service •  Github integration •  Keep away from Windows 8 VS express

15. 快快樂樂建立App •  DEMO –  http://goo.gl/DTbZmd •  Source –  http://goo.gl/DK1cQT

16. Get your github url

17. Create Project with Adobe Build

18. Setup App Download

19. Deploy to your WP devices

20. Create a jqm-designer app •  Export jqm code – index.html, css, js •  Add PhoneGap include code into index –  script type=text/javascript src=phonegap.js/script •  Create config.xml –  https://raw.github.com/KSDG/PhoneGap-Sample/master/config.xml •  Zip index.html config.xml css/js •  Upload PhoneGap Build

21. The PhoneGap Native Feature •  Which feature you need? –  http://docs.phonegap.com/en/edge/index.html#API%20Reference •  Modify config.xml for feature permission – https://build.phonegap.com/docs/config-xml •  Define deviceready listener •  Create your feature code

22. Some Tips •  Use script src remote url •  Important: deviceready event •  Async issues •  Different platform – Configuration – UI management

23. WP App 競賽 MOPCON 特別版! •  http://goo.gl/BsjBVn •  直接贈送MOPCON VIP! •  免費提供開發者帳號 •  三支 Nokia Lumia 1020! •  行動電源抽獎

24. 官方網站 http://mopcon.org/ 粉絲群 https://www.facebook.com/mopcon Thanks

快快樂樂利用 PhoneGap 打造屬於自己的 App

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 快快樂樂利用 PhoneGap 打造屬於自己的 App

Similar a 快快樂樂利用 PhoneGap 打造屬於自己的 App (20)

Más de ericpi Bi

Más de ericpi Bi (16)

Último

Último (20)

快快樂樂利用 PhoneGap 打造屬於自己的 App