SlideShare a Scribd company logo
1 of 8
Download to read offline
Create Your First "Native" Mobile
App with JavaScript + PhoneGap
Steve Phillips / @elimisteve
SBHX
2013.12.18
The Plan
● Intro to PhoneGap
○

Create native-ish mobile apps using web technologies

● Example app: Encrypted Anti-TODO List
○

Store encrypted list on untrusted server, create new list items and
query from phone

● Writing this simple app inspired a more general solution:
CrypTag
Phone Gap
● “PhoneGap is a free and open source framework that
allows you to create mobile apps using standardized
web APIs for the platforms you care about.”
● Advantages
○ Speed of development
○ Code reusability
○ Use familiar technologies (if you do web dev)
Phone Gap (2)
● Disadvantages
○ No native-looking UI elements
■ See Titanium Mobile, Trigger.io, Steroids.js
●

(Actually, don’t see Titanium Mobile; it sucks)

○ Performance

● Installation
○ Out of scope of this brief talk
○ See http://phonegap.com/install/
■

Talk to me if you need help or join #sbhackerspace on FreeNode
by visiting http://irc.sbhackerspace.com in your browser
Example App: Encrypted Anti-TODO
● Let’s see some code!
○ Will post to GitHub soon

● Front end
○ PhoneGap (JS)

● Back end
○ Python on AppFog using Flask microframework
■ Don’t use AppFog, either
■ App does down, doesn’t start back up like
Heroku, GAE, etc
Next Step: CrypTag
● Encrypted, Taggable, Searchable Web Storage
● How is it searchable and encrypted?
○ Not full search; can query by tag
■ App ideas: notes, bookmarks, more

● “Then the server stores the tags in plaintext?”
○ Nope; client stores mapping between tags
(“snowden”) and a random hex string (“b6a27d9”)
○ Server only ever sees the random strings
Closing Points
● WebTech Wednesday in 2014
○ Nodebots? Docker? Ansible? D3? pandas?

● TA3M: Techno-Activism 3rd Mondays
● Google Group
○ http://gg.sbhackerspace.com

● SBHX IRC channel
○ #sbhackerspace on FreeNode
○ Visit http://irc.sbhackerspace.com

● Exercism.io
Contact
● Email
○ elimisteve@gmail.com or
○ steve@tryingtobeawesome.com

● GitHub
○ github.com/elimisteve

● Twitter
○ @elimisteve

● FreeNode
○ elimisteve or elimisteve1

More Related Content

What's hot

Seminar on Web Application
Seminar on Web ApplicationSeminar on Web Application
Seminar on Web Application
Vinodh Ram
 
Django course final-project
Django course final-projectDjango course final-project
Django course final-project
Udi Bauman
 

What's hot (20)

BSides Rochester 2018: Dave Kukfa: BinDbg: Easy Windows Debugging for Binary ...
BSides Rochester 2018: Dave Kukfa: BinDbg: Easy Windows Debugging for Binary ...BSides Rochester 2018: Dave Kukfa: BinDbg: Easy Windows Debugging for Binary ...
BSides Rochester 2018: Dave Kukfa: BinDbg: Easy Windows Debugging for Binary ...
 
Lately in php - 2019 May 4
Lately in php - 2019 May 4Lately in php - 2019 May 4
Lately in php - 2019 May 4
 
Test Driven Development (TDD) with Windows PowerShell
Test Driven Development (TDD) with Windows PowerShellTest Driven Development (TDD) with Windows PowerShell
Test Driven Development (TDD) with Windows PowerShell
 
PUG ROMAGNA - Alternative a Magento2
PUG ROMAGNA - Alternative a Magento2PUG ROMAGNA - Alternative a Magento2
PUG ROMAGNA - Alternative a Magento2
 
Behaviour Driven Development Hands-on
Behaviour Driven Development Hands-onBehaviour Driven Development Hands-on
Behaviour Driven Development Hands-on
 
How to approach building GUIs using PyQT
How to approach building GUIs using PyQTHow to approach building GUIs using PyQT
How to approach building GUIs using PyQT
 
Seminar on Web Application
Seminar on Web ApplicationSeminar on Web Application
Seminar on Web Application
 
Chicago Salesforce Saturday - Tools Presentation
Chicago Salesforce Saturday  - Tools PresentationChicago Salesforce Saturday  - Tools Presentation
Chicago Salesforce Saturday - Tools Presentation
 
Django course final-project
Django course final-projectDjango course final-project
Django course final-project
 
Last Month in PHP - September 2016
Last Month in PHP - September 2016Last Month in PHP - September 2016
Last Month in PHP - September 2016
 
Speed in Four Quarters :: A Technique to Compare Web Page Performance
Speed in Four Quarters :: A Technique to Compare Web Page PerformanceSpeed in Four Quarters :: A Technique to Compare Web Page Performance
Speed in Four Quarters :: A Technique to Compare Web Page Performance
 
Update on the open source browser space (16th GENIVI AMM)
Update on the open source browser space (16th GENIVI AMM)Update on the open source browser space (16th GENIVI AMM)
Update on the open source browser space (16th GENIVI AMM)
 
WordPress News and #SaigonWordPress 2015 - Saigon WordPress - Jan 17, 2015
WordPress News and #SaigonWordPress 2015  - Saigon WordPress - Jan 17, 2015WordPress News and #SaigonWordPress 2015  - Saigon WordPress - Jan 17, 2015
WordPress News and #SaigonWordPress 2015 - Saigon WordPress - Jan 17, 2015
 
Coding Google... you can do it!
Coding Google... you can do it!Coding Google... you can do it!
Coding Google... you can do it!
 
How to integrate PWA solutions successfully (hosting)
How to integrate PWA solutions successfully (hosting)How to integrate PWA solutions successfully (hosting)
How to integrate PWA solutions successfully (hosting)
 
Frogans Technology - A new frontier for publishing content on the internet 20...
Frogans Technology - A new frontier for publishing content on the internet 20...Frogans Technology - A new frontier for publishing content on the internet 20...
Frogans Technology - A new frontier for publishing content on the internet 20...
 
"The working architecture of NodeJs applications" Viktor Turskyi
"The working architecture of NodeJs applications" Viktor Turskyi"The working architecture of NodeJs applications" Viktor Turskyi
"The working architecture of NodeJs applications" Viktor Turskyi
 
[WSO2Con USA 2018] Chipping Away at Technical Debt with WSO2
[WSO2Con USA 2018] Chipping Away at Technical Debt with WSO2[WSO2Con USA 2018] Chipping Away at Technical Debt with WSO2
[WSO2Con USA 2018] Chipping Away at Technical Debt with WSO2
 
Montreal.rb ruby debugging basics - march 20th 2012
Montreal.rb   ruby debugging basics - march 20th 2012Montreal.rb   ruby debugging basics - march 20th 2012
Montreal.rb ruby debugging basics - march 20th 2012
 
Engineering Frontends
Engineering FrontendsEngineering Frontends
Engineering Frontends
 

Viewers also liked

Govoluntr cct
Govoluntr cctGovoluntr cct
Govoluntr cct
Young Han
 
talk-ta3m-crypto-tools-workshop
talk-ta3m-crypto-tools-workshoptalk-ta3m-crypto-tools-workshop
talk-ta3m-crypto-tools-workshop
Steve Phillips
 
Hack Attack! An Introduction to Penetration Testing
Hack Attack! An Introduction to Penetration TestingHack Attack! An Introduction to Penetration Testing
Hack Attack! An Introduction to Penetration Testing
Steve Phillips
 

Viewers also liked (7)

Govoluntr cct
Govoluntr cctGovoluntr cct
Govoluntr cct
 
Anthony’s Halloween Spooktacular
Anthony’s Halloween SpooktacularAnthony’s Halloween Spooktacular
Anthony’s Halloween Spooktacular
 
talk-ta3m-crypto-tools-workshop
talk-ta3m-crypto-tools-workshoptalk-ta3m-crypto-tools-workshop
talk-ta3m-crypto-tools-workshop
 
Introducing Cloakcast
Introducing CloakcastIntroducing Cloakcast
Introducing Cloakcast
 
CrypTag: Building Encrypted, Taggable, Searchable Zero-knowledge Systems
CrypTag: Building Encrypted, Taggable, Searchable Zero-knowledge SystemsCrypTag: Building Encrypted, Taggable, Searchable Zero-knowledge Systems
CrypTag: Building Encrypted, Taggable, Searchable Zero-knowledge Systems
 
Hack Attack! An Introduction to Penetration Testing
Hack Attack! An Introduction to Penetration TestingHack Attack! An Introduction to Penetration Testing
Hack Attack! An Introduction to Penetration Testing
 
The Outcome Economy
The Outcome EconomyThe Outcome Economy
The Outcome Economy
 

Similar to Create Your First "Native" Mobile App with JavaScript + PhoneGap

Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneurs
Rodrigo Gil
 

Similar to Create Your First "Native" Mobile App with JavaScript + PhoneGap (20)

Phonegap - Girl Geek Sydney
Phonegap - Girl Geek SydneyPhonegap - Girl Geek Sydney
Phonegap - Girl Geek Sydney
 
PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010PhoneGap Talk @ Sencha Con 2010
PhoneGap Talk @ Sencha Con 2010
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Development
 
Voxxed days Vilnius 2015 - Android Reverse Engineering Lab
Voxxed days Vilnius 2015 - Android Reverse Engineering LabVoxxed days Vilnius 2015 - Android Reverse Engineering Lab
Voxxed days Vilnius 2015 - Android Reverse Engineering Lab
 
Magento 2 performance profiling and best practices
Magento 2 performance profiling and best practicesMagento 2 performance profiling and best practices
Magento 2 performance profiling and best practices
 
Tools and libraries for common problems (Early Draft)
Tools and libraries for common problems (Early Draft)Tools and libraries for common problems (Early Draft)
Tools and libraries for common problems (Early Draft)
 
Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneurs
 
Develop Android/iOS app using golang
Develop Android/iOS app using golangDevelop Android/iOS app using golang
Develop Android/iOS app using golang
 
What is PhoneGap?
What is PhoneGap?What is PhoneGap?
What is PhoneGap?
 
Sidiq Permana - Building For The Next Billion Users
Sidiq Permana - Building For The Next Billion UsersSidiq Permana - Building For The Next Billion Users
Sidiq Permana - Building For The Next Billion Users
 
PyConUK 2014 - PostMortem Debugging and Web Development Updated
PyConUK 2014 - PostMortem Debugging and Web Development UpdatedPyConUK 2014 - PostMortem Debugging and Web Development Updated
PyConUK 2014 - PostMortem Debugging and Web Development Updated
 
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Introducing chrome apps (ogura)
Introducing chrome apps (ogura)
 
Mobile Apps by Pure Go with Reverse Binding
Mobile Apps by Pure Go with Reverse BindingMobile Apps by Pure Go with Reverse Binding
Mobile Apps by Pure Go with Reverse Binding
 
Cross-Platform Mobile Development with PhoneGap-Vince Bullinger
Cross-Platform Mobile Development with PhoneGap-Vince BullingerCross-Platform Mobile Development with PhoneGap-Vince Bullinger
Cross-Platform Mobile Development with PhoneGap-Vince Bullinger
 
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
Matteo Manchi - React Native for multi-platform mobile applications - Codemot...
 
CodeMotion tel aviv 2015 - android reverse engineering lab
CodeMotion tel aviv 2015 - android reverse engineering labCodeMotion tel aviv 2015 - android reverse engineering lab
CodeMotion tel aviv 2015 - android reverse engineering lab
 
Bodin - Hullin & Potencier - Magento Performance Profiling and Best Practices
Bodin - Hullin & Potencier - Magento Performance Profiling and Best PracticesBodin - Hullin & Potencier - Magento Performance Profiling and Best Practices
Bodin - Hullin & Potencier - Magento Performance Profiling and Best Practices
 
Getting Started With Django
Getting Started With DjangoGetting Started With Django
Getting Started With Django
 
MobSecCon 2015 - Burning Marshmallows
MobSecCon 2015 - Burning Marshmallows MobSecCon 2015 - Burning Marshmallows
MobSecCon 2015 - Burning Marshmallows
 
Meteor
MeteorMeteor
Meteor
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 

Create Your First "Native" Mobile App with JavaScript + PhoneGap

  • 1. Create Your First "Native" Mobile App with JavaScript + PhoneGap Steve Phillips / @elimisteve SBHX 2013.12.18
  • 2. The Plan ● Intro to PhoneGap ○ Create native-ish mobile apps using web technologies ● Example app: Encrypted Anti-TODO List ○ Store encrypted list on untrusted server, create new list items and query from phone ● Writing this simple app inspired a more general solution: CrypTag
  • 3. Phone Gap ● “PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.” ● Advantages ○ Speed of development ○ Code reusability ○ Use familiar technologies (if you do web dev)
  • 4. Phone Gap (2) ● Disadvantages ○ No native-looking UI elements ■ See Titanium Mobile, Trigger.io, Steroids.js ● (Actually, don’t see Titanium Mobile; it sucks) ○ Performance ● Installation ○ Out of scope of this brief talk ○ See http://phonegap.com/install/ ■ Talk to me if you need help or join #sbhackerspace on FreeNode by visiting http://irc.sbhackerspace.com in your browser
  • 5. Example App: Encrypted Anti-TODO ● Let’s see some code! ○ Will post to GitHub soon ● Front end ○ PhoneGap (JS) ● Back end ○ Python on AppFog using Flask microframework ■ Don’t use AppFog, either ■ App does down, doesn’t start back up like Heroku, GAE, etc
  • 6. Next Step: CrypTag ● Encrypted, Taggable, Searchable Web Storage ● How is it searchable and encrypted? ○ Not full search; can query by tag ■ App ideas: notes, bookmarks, more ● “Then the server stores the tags in plaintext?” ○ Nope; client stores mapping between tags (“snowden”) and a random hex string (“b6a27d9”) ○ Server only ever sees the random strings
  • 7. Closing Points ● WebTech Wednesday in 2014 ○ Nodebots? Docker? Ansible? D3? pandas? ● TA3M: Techno-Activism 3rd Mondays ● Google Group ○ http://gg.sbhackerspace.com ● SBHX IRC channel ○ #sbhackerspace on FreeNode ○ Visit http://irc.sbhackerspace.com ● Exercism.io
  • 8. Contact ● Email ○ elimisteve@gmail.com or ○ steve@tryingtobeawesome.com ● GitHub ○ github.com/elimisteve ● Twitter ○ @elimisteve ● FreeNode ○ elimisteve or elimisteve1