PPTX, PDF398 views

Creating mobile apps the web developer way

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.

Technology◦

Creating mobile apps the web developer way

1.
#devfest2015 #gdgkk Creating MobileApps 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.InstallPython (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.InstallPython (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: SetUp 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: SetUp 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: SetUp 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: SetUp 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: SetUp 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: SetUp 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: SetUp 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'llneed to be online so that Cordova can install dependencies where required cordova add platform android cordova build android
13.
#devfest2015 #gdgkk Errors ➔Already existas an archive ◆Workaround: delete the archive from the www folder ◆Source: Stack Overflow
14.
#devfest2015 #gdgkk Errors ➔Connection toserver 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 originalnotes
17.
#devfest2015 #gdgkk http://goo.gl/forms/2zh1 JA10ZZ Yes please
18.
*Coming soon to YouTube

Editor's Notes

#3 There are multitude of ways for us to move over from web development to mobile development. A majority of it requires us to re-learn a new language, such as Java (shivers). But what if I tell you that there is a way to use what skills you already have as a web developer, and transition rather seamlessly into a mobile developer, without learning different programming languages and without changing too much the way you’ve done apps on the web? This walkthrough shows you how to prepare your web dev environment so you can compile them into mobile apps. If you have a good understanding of using the AMP stack (Apache, MySQL, PHP), then you will be comfortable following these steps. To be honest, there are simpler ways to go about doing this. However, too many shortcuts may lead you to not understand the reasoning behind why we need to compile, what works behind the scenes, and so on. PhoneGap and Ionic are two such easy tools. You know what Apache does, what MySQL does, and what PHP does, right? That is why you chose an AMP stack like XAMPP or WAMP or LAMPP. I’m going at this with the same reasoning, too. Once you understand what Cordova does, what Android SDK does, what nodejs does, and so on and so forth, you should find it easier to identify the kind of full/easy package out there that would fit your need. What you must understand about mobile development is that you must have at least three minimum skills -- HTML5, CSS, and JavaScript. Those are all you need to make your first ever app. More importantly, your web app will be able to run offline, just like a native app.
#5 These are optional steps. Do these steps if you plan to use Polymer to build your web app.
#7 These are optional steps. Do these steps if you plan to use Polymer to build your web app.
#10 These are optional steps. Do these steps if you plan to use Polymer to build your web app.
#11 These are optional steps. Do these steps if you plan to use Polymer to build your web app.
#17 Here is my simpler one-page walkthrough of the same steps.

Creating mobile apps the web developer way

1.
#devfest2015 #gdgkk Creating MobileApps 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.InstallPython (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.InstallPython (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: SetUp 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: SetUp 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: SetUp 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: SetUp 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: SetUp 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: SetUp 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: SetUp 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'llneed to be online so that Cordova can install dependencies where required cordova add platform android cordova build android
13.
#devfest2015 #gdgkk Errors ➔Already existas an archive ◆Workaround: delete the archive from the www folder ◆Source: Stack Overflow
14.
#devfest2015 #gdgkk Errors ➔Connection toserver 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 originalnotes
17.
#devfest2015 #gdgkk http://goo.gl/forms/2zh1 JA10ZZ Yes please
18.
*Coming soon to YouTube

Editor's Notes

#3 There are multitude of ways for us to move over from web development to mobile development. A majority of it requires us to re-learn a new language, such as Java (shivers). But what if I tell you that there is a way to use what skills you already have as a web developer, and transition rather seamlessly into a mobile developer, without learning different programming languages and without changing too much the way you’ve done apps on the web? This walkthrough shows you how to prepare your web dev environment so you can compile them into mobile apps. If you have a good understanding of using the AMP stack (Apache, MySQL, PHP), then you will be comfortable following these steps. To be honest, there are simpler ways to go about doing this. However, too many shortcuts may lead you to not understand the reasoning behind why we need to compile, what works behind the scenes, and so on. PhoneGap and Ionic are two such easy tools. You know what Apache does, what MySQL does, and what PHP does, right? That is why you chose an AMP stack like XAMPP or WAMP or LAMPP. I’m going at this with the same reasoning, too. Once you understand what Cordova does, what Android SDK does, what nodejs does, and so on and so forth, you should find it easier to identify the kind of full/easy package out there that would fit your need. What you must understand about mobile development is that you must have at least three minimum skills -- HTML5, CSS, and JavaScript. Those are all you need to make your first ever app. More importantly, your web app will be able to run offline, just like a native app.
#5 These are optional steps. Do these steps if you plan to use Polymer to build your web app.
#7 These are optional steps. Do these steps if you plan to use Polymer to build your web app.
#10 These are optional steps. Do these steps if you plan to use Polymer to build your web app.
#11 These are optional steps. Do these steps if you plan to use Polymer to build your web app.
#17 Here is my simpler one-page walkthrough of the same steps.

Creating mobile apps the web developer way

Creating mobile apps the web developer way

Editor's Notes

More Related Content

What's hot

Viewers also liked

Similar to Creating mobile apps the web developer way

Recently uploaded

Creating mobile apps the web developer way

Editor's Notes