SlideShare a Scribd company logo
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

PDF
Using twig as rendering system for your Joomla extensions
PDF
The working architecture of node js applications open tech week javascript ...
PDF
The JavaScript revolutions
PDF
Nimble - iOS dependency management
PPTX
Python for web development
PDF
WPE: Current Status and Future (Web Engines Hackfest 2018)
PDF
Patterns: The new Javascript framweork
ODP
Fscons future transports
Using twig as rendering system for your Joomla extensions
The working architecture of node js applications open tech week javascript ...
The JavaScript revolutions
Nimble - iOS dependency management
Python for web development
WPE: Current Status and Future (Web Engines Hackfest 2018)
Patterns: The new Javascript framweork
Fscons future transports

What's hot (20)

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

Viewers also liked (7)

KEY
Govoluntr cct
PPT
Anthony’s Halloween Spooktacular
PDF
talk-ta3m-crypto-tools-workshop
PDF
Introducing Cloakcast
PDF
CrypTag: Building Encrypted, Taggable, Searchable Zero-knowledge Systems
PDF
Hack Attack! An Introduction to Penetration Testing
PDF
The Outcome Economy
Govoluntr cct
Anthony’s Halloween Spooktacular
talk-ta3m-crypto-tools-workshop
Introducing Cloakcast
CrypTag: Building Encrypted, Taggable, Searchable Zero-knowledge Systems
Hack Attack! An Introduction to Penetration Testing
The Outcome Economy
Ad

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

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

Recently uploaded (20)

PDF
Machine learning based COVID-19 study performance prediction
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PPTX
Big Data Technologies - Introduction.pptx
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PPTX
Spectroscopy.pptx food analysis technology
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
PDF
Electronic commerce courselecture one. Pdf
PDF
Empathic Computing: Creating Shared Understanding
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PPTX
MYSQL Presentation for SQL database connectivity
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
Review of recent advances in non-invasive hemoglobin estimation
PPT
Teaching material agriculture food technology
Machine learning based COVID-19 study performance prediction
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Big Data Technologies - Introduction.pptx
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Reach Out and Touch Someone: Haptics and Empathic Computing
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Mobile App Security Testing_ A Comprehensive Guide.pdf
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
Diabetes mellitus diagnosis method based random forest with bat algorithm
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Spectroscopy.pptx food analysis technology
The Rise and Fall of 3GPP – Time for a Sabbatical?
20250228 LYD VKU AI Blended-Learning.pptx
Electronic commerce courselecture one. Pdf
Empathic Computing: Creating Shared Understanding
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
MYSQL Presentation for SQL database connectivity
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Review of recent advances in non-invasive hemoglobin estimation
Teaching material agriculture food technology

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