The document outlines the steps to create a mobile app using web technologies. It involves installing various software packages like Python, Node.js, JDK, Android SDK, Bower and Cordova. Then creating a Cordova project, initializing Bower and downloading Polymer libraries. Finally, the project is compiled using Cordova to generate the Android application. Common errors faced and their workarounds are also mentioned.

1. #devfest2015 #gdgkk
Creating Mobile Apps the
Web Developer Way
Lorna Timbah
@webgrrrl
Community Manager, GDGKK

2. #devfest2015 #gdgkk
Steps
1 - Install A Bunch of Software
2 - Set Up Your Web Project
3 - Compile Your Web Project

3. #devfest2015 #gdgkk
Step 1:
Install
1.Install Python
(this walk-through uses Python 3)
2.Install nodejs, npm, and JDK.
3.Set the environment paths for
Python, nodejs, npm, and JDK.
4.Install Android SDK and update
to at least Android 4.4 or higher
(API 19).
5.Install Bower via npm:
npm install -g bower
6.Install Cordova via npm:
npm install -g cordova

4. #devfest2015 #gdgkk
Step 1:
Install
1.Install Python
(this walk-through uses Python 3)
2.Install nodejs, npm, and JDK.
3.Set the environment paths for
Python, nodejs, npm, and JDK.
4.Install Android SDK and update
to at least Android 4.4 or higher
(API 19).
5.Install Bower via npm:
npm install -g bower
6.Install Cordova via npm:
npm install -g cordova

5. #devfest2015 #gdgkk
Step 2:
Set Up
1.Create a Cordova project
2.Go to the www folder of the
Cordova project
3.Initialize Bower
4.Download Polymer
5.Preview via your preferred web
server

6. #devfest2015 #gdgkk
Step 2:
Set Up
1.Create a Cordova project
2.Go to the www folder of the
Cordova project
3.Initialize Bower
4.Download Polymer
5.Preview via your preferred web
server

7. #devfest2015 #gdgkk
Step 2:
Set Up
1.Create a Cordova project:
cordova create [projectname]
[packagename] [foldername]
e.g. cordova create polymertest
com.webgrrrl.polymertest
polymertest
2.Go to the www folder of the
Cordova project
3.Initialize Bower
4.Download Polymer
5.Preview via your preferred web
server

8. #devfest2015 #gdgkk
Step 2:
Set Up
1.Create a Cordova project
2.Go to the www folder of the
Cordova project:
cd polymertest/www
3.Initialize Bower
4.Download Polymer
5.Preview via your preferred web
server

9. #devfest2015 #gdgkk
Step 2:
Set Up
1.Create a Cordova project
2.Go to the www folder of the
Cordova project
3.Initialize Bower:
bower init
Answer all questions, and
press Enter to leave blank.
4.Download Polymer
5.Preview via your preferred web
server

10. #devfest2015 #gdgkk
Step 2:
Set Up
2.4. Download Polymer
If using Polymer Starter Kit,
make sure to combine the
Bower JSON file contents
If downloading from Github:
bower install --save
Polymer/polymer
bower install --save
Polymer/webcomponentsjs
bower install --save
Polymer/core-elements
bower install --save
Polymer/paper-elements

11. #devfest2015 #gdgkk
Step 2:
Set Up
1.Create a Cordova project
2.Go to the www folder of the
Cordova project
3.Initialize Bower
4.Download Polymer
5.Preview via your preferred web
server:
Python 3:
python -m http.server
Python 2.7:
python -m SimpleHTTPServer

12. #devfest2015 #gdgkk
Step 3:
Compile
1.You'll need to be online so that
Cordova can install
dependencies where required
cordova add platform android
cordova build android

13. #devfest2015 #gdgkk
Errors
➔Already exist as an archive
◆Workaround: delete the archive
from the www folder
◆Source: Stack Overflow

14. #devfest2015 #gdgkk
Errors
➔Connection to server was
unsuccessful
◆Workaround: copy index.html as
main.html. Redirect index.html
using JavaSript to main.html
◆Source:
https://www.robertkehoe.com/2
013/01/fix-for-phonegap-
connection-to-server-was-
unsuccessful/

16. #devfest2015 #gdgkk
https://goo.gl/4Phciu
My original notes

17. #devfest2015 #gdgkk
http://goo.gl/forms/2zh1
JA10ZZ
Yes please

18. *Coming soon
to YouTube