![#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](https://image.slidesharecdn.com/q7ze0mx1sry5cykxj92b-signature-223ebd71ea5eee347679d9822048bbb3eed8f207a80abc928c741b95707fd624-poli-151109194637-lva1-app6892/75/creating-mobile-apps-the-web-developer-way-7-2048.jpg?cb=1668557946)
Creating mobile apps the web developer way
•0 likes•372 views
Report
Share
Download to read offline
Get the latest slide from: https://docs.google.com/presentation/d/1BfMfE973DN6UumK6Aqlyg-iKWClA0fLyiigwzsAvrTw/edit?usp=sharing Think transitioning from web development to mobile app development ain't easy? That's what I thought. Here's my step-by-step guide on how to transition my web dev skills so that I can build mobile apps without the steep learning curve.
Recommended
More Related Content
What's hot
What's hot(20)
Viewers also liked
Viewers also liked(9)
Similar to Creating mobile apps the web developer way
Similar to Creating mobile apps the web developer way(20)
Recently uploaded
Recently uploaded(20)
Creating mobile apps the web developer way
- 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/
Editor's Notes
- 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.
- These are optional steps. Do these steps if you plan to use Polymer to build your web app.
- These are optional steps. Do these steps if you plan to use Polymer to build your web app.
- These are optional steps. Do these steps if you plan to use Polymer to build your web app.
- These are optional steps. Do these steps if you plan to use Polymer to build your web app.
- Here is my simpler one-page walkthrough of the same steps.