Responsive Web Design - Jump Start

Android Development

Philippine IT careers and Trends

Philippine IT Careers and Trends from John Mark ジョンマーク

Installing PhoneGap/Cordova from Scratch

If you're going to develop mobile apps using web technologies such as HTML, CSS and Javascript. Then this is the right place for you to begin with.

Easy tiger! for some good reason I feel you are in hurry to start things recklessly (e.g. you're gonna Google it find phonegap.com and then read all tutorials, hey Sherlock I just told you, you are already in the right place), but you gotta know what you need to know first.

OK, what is phonegap and cordova? both are tools with the same framework that will allow you to use web technologies in developing platform independent mobile apps, when i say platform independent it means you don't have to worry about the Operating System; iOS, android, windows 8 etc. The term Phonegap and Cordova are used interchangeably and there's a confusion between them that I will totally wreck right now (yeah the accent, I know!). Despite of so many complex explanation out there here’s my enlightening idea about it; “Phonegap is also Cordova with additional features from Adobe”. I don’t think I should explain more on this since it won’t matter anymore once we start installing Phonegap using nodes (that I’ll explain later).

Phonegap has richer features so I’m going to discuss Phonegap in this blog;

Requirements:
I assume you have nothing installed on your computer related to web development you must also know how to use cmd prompt

Here's the Steps

1ST MAJOR STEP: Installing a globalize JDK (refere to the corresponding images while following the steps)

1. Install the latest JDK from Java JDK
2. The file jdk-7<version>-windows-i586-i.exe is the JDK installer for 32-bit systems. The file jdk-7<version>-windows-x64.exe is the JDK installer for 64-bit systems. If you downloaded either file instead of running it directly from the web site, double-click the installer's icon. Then, follow the instructions the installer provides. The installer may ask you to reboot your computer. When finished with the installation, you can delete the downloaded file to recover disk space.
3. Set the PATH variable permanently, add the full path of the jdk1.7.0\bin directory to the PATH variable. Typically, this full path looks something like C:\Program Files\Java\jdk1.7.0\bin. Set the PATH variable as follows on Microsoft Windows (take note that there are minor difference of steps if you are using windows 8, now if you're using windows XP, wait, what!?):
   

   

1. Click Start, then Control Panel, then System.Click Advanced, then Environment Variables.
2. From the Desktop, right-click My Computer and click Properties.
3. Click Advanced System Settings link in the left column.
4. In the System Properties window click the Environment Variables button.
5. Select the Path variable from the System variables section.
6. Select the Edit button.
7. Add the location of the bin folder of the JDK installation for the Path variable 
8. in System Variables. The following is a typical (depending on your jdk version) value for the Path variable:C:\Program Files\Java\jdk1.7.0\bin;C:\WINDOWS\system32;C:\WINDOWS;


• NOTE: we are refering to "Path" in the System Variables not "PATH" in the User Variables
• NOTE: It is very important that you must insert "C:\Program Files\Java\jdk1.7.0\bin" in the beginning (pinaka umpisang umpisa) of the variable value then terminate it with ";" otherwise it will affect your compilation of phonegap apps and will lead to java not being found refer to this image below
  
9. Click OK, OK and OK

2ND MAJOR STEP: installing globalize SDK

1. Download the SDK ADT bundle from SDK ADT Bundle
   
   
   
   
   
   
2. Choose between 32 bit or 64 bit leave check "I have read.."
   
3. Unpack upack the ZIP file (named adt-bundle-<your_platform>.zip) and save it to an appropriate location, such as a "Development" directory in your home directory.
4. Open the unpacked directory and you should see the contents, something like this;
   
5. Now, open the SDK folder inside the unpacked zip adt bundle and check if the folders "tools" and "platform-tools" are there.
6. Copy and take note of their directory path, put it in a notepad or where ever you want to insert
   it, for example I will insert the following directory path in a notepad
• D:/directory_of_your_unpacked_zip/adt-bundle-<your_platform>/sdk/tools
• D:/directory_of_your_unpacked_zip/adt-bundle<your_platform>/sdk/platform-tools
7. Let's add some changes to your system variables again
   
   
1. From the Desktop, right-click My Computer and click Properties.
2. Click Advanced System Settings link in the left column.
3. In the System Properties window click the Environment Variables button.
4. Select the Path variable from the System variables section.
5. Select the Edit button.
6. You need to add the path to your Android SDK platform-tools and tools directory. In my example I will use the two directories in step 5 as the directory the SDK is installed in. Append the following text into the text box labeled "Variable value"
• note: in appending variable value ";" sign indicates a terminator of a value therefore put ";" sign then paste your directory path at the end
7. Click OK, OK and OK

3RD MAJOR STEP: Installing a globalized Apache Ant (/bin)

1. Download Apache ant zip archive binary distribution from Apache-Ant.zip or from Apache Ant
2. Extract the file
3. Put it in a directory
4. Copy the bin directory path, w/c looks like C:/apache-ant-1.9.3/bin
5. Just like the other 2 major steps in this tutorial add its directory in the System Variables, this time it's Ok where ever you want to insert it, just make sure it's terminated by ";" sign if it's not in the end of the Variable Value.
   

4TH MAJOR STEP

1. Install node.js from node.js
2. Choose if you want 32 or 64 bit windows installer msi (if you're using windows)
3. Double Click the installer and just install following your IT instinct
4. Open cmd and type npm something must happen when you do it refer to the image below
   

FINALLY YOU ARE READY TO INSTALL PHONEGAP! YIPPEEE Clap! Clap!

1. Warning: You must have an internet connection!
2. open cmd prompt and type npm install -g phonegap (no need to worry about directories just type it!)
• Note: -g means 'global' meaning it will install phonegap as a global variable so you can call "phonegap" command anytime anywhere in your cmd prompt
3. You will see IP adresess during installation this is an indication that phonegap is installing properly
4. When done, type phonegap in your cmd prompt and you should see something like below
   
5. If you have plans on exploring how to use it (since you installed it!) understand how CLI works here's the link CLI for Phonegap

Emulating your android project directly in Cherry Mobile and MyPhone Devices

One of the sufferings of Cherry and MyPhone device users/developers when developing an android app is directly debugging their projects on their phone. Since there is no available downloadable OEM USB driver on http://developer.android.com/tools/extras/oem-usb.html for this kind of phones, I will discuss on how to do it using PDAnet+

Requirements for this tutorial:
You are using Eclipse for your Android project
You already know how to develop android apps like hello world
You know how to use AVD (aka emulator)
You know how to use cmd prompt

1. Download the PDAnet+ from http://pdanet.co/a/ 

2. Install it!

just continue

click next just continue do not cancel any dialog box that will appear i did not include all the dialog boxes in this blog

click next just continue

Select others (if your are not sure) click ok just continue

click install

3. Don’t skip, instead, connect phone on your PC via USB, but make sure you enable "USB debugging" on your phone

click install

4. Follow instructions, install pdanet+ your phone (I assume you know how to install apk on your phone or it may be installed automatically so relax) then click OK

5. Your installation is now successful, un-check display incoming SMS and click finish.

no need to activate anything on your phone now let’s go to android debug bridge (adb)

6. Now let’s proceed to our ADB to check whether our phone is successfully connected in our ADB via PDAnet+. Look for your adb.exe file. To go there the adb tools is located in the [android-sdks]/platform-tools directory.

7. Copy the directory path then open cmd then go to that path via the cmd.

8. In the cmd, type the command “adb devices”. A list of connected devices will appear and you must see your phone in the list. In my case S120 is my device here

10. Now let’s run your project on your phone, go to your project and just click run a Device chooser will prompt you where to run your app.

11. Choose your device. In my case -> S120

"the end" galingan mo! :)

anyway thanks to one of my students where i got this idea..

Mali Ba? Ang Maging Ma Pang Husga?

ung mga katagang "wag tayong mapang husga", "wag kang mapang husga" hindi ba't hinuhusgahan na din ng mga katagang ito mga taong nang huhusga at ang mga taong maaring hindi naman pala talaga nanghuhusga sa iba. At ang post na ito; hindi ba to nanghuhusga sa mga taong gagamit at gumagamit ng mga katagang yan, suma tutal sino ba talaga ang mga taong may karapatan na mag sabi ng mga katagang binanggit? sa tingin ko wala.. dahil lahat tayo ay may kanya kanyang paraan kung pano huhusgahan ang isang tao o bagay, sa salita man o sa gawa..

image from quoteswave.com

True Beuty