Friday, May 31, 2013

Build PhoneGap Apps with Intellij IDEA


At this point I am assuming that you have Intellij IDEA all set up and can build an Android app and deploy it either to a device or the emulator. If you don't have that working - STOP. Don't go any further until all issues are resolved. Installing PhoneGap on top of a broken Android development environment won't solve the problem.

This part of the setup is pretty easy compared to the first part, setting up Android. All we need to do is download ant and PhoneGap, then add paths to all of our build tools.

  • Adding ant
    • Ant is a tool for building Java applications. It is a free download. Most non-PC systems come with ant already installed.
    • Download ant
    • Move the folder, apache-ant-1.9.1, where desired. I moved mine to the same directory as my Android SDK.
  • Adding PhoneGap
    • Download the latest version of PhoneGap, at time of writing it is 2.7.0.
    • Extract the zip file.
    • Move the folder, phonegap-2.7.0, where desired. I moved mine to the same directory as my Android SDK.
  • Setting up your path:
    • From the Desktop, right-click My Computer and click Properties
    • Click Advanced System Settings link in the left column
    • In the System Properties window click the Environment Variables button
    • Select the PATH variable from the System variables section
    • Select the Edit button
      • I find it easier to copy the current path from the textbox and paste into a text editor like Intellij IDEA or Notepad++
    • Add Paths to the following:
      • ~\android-sdk\platform-tools
      • ~\android-sdk\tools
      • ~\phonegap-2.7.0\lib\android\bin
      • %JAVA_HOME%\bin
      • %ANT_HOME%\bin
    • Note: Each entry in the path is separated by a semicolon ";"
    • Here is what my path looks like:
    • C:\Users\tmiles\Android\android-sdk\platform-tools;C:\Users\tmiles\Android\android-sdk\tools;C:\Users\tmiles\phonegap-2.7.0\phonegap-2.7.0\lib\android\bin;%JAVA_HOME%\bin;%ANT_HOME%\bin
    • Save the new path.
  • Create JAVA_HOME (Only if you haven't already)
    • In the System variables section click New...
    • For Variable name:, enter JAVA_HOME
    • For Variable value:, enter the path to the JDK. For me it is, C:\Program Files\Java\jdk1.6.0_45
    • Click OK
  • Create ANT_HOME
    • In the System variables section click New...
    • For Variable name:, enter ANT_HOME
    • For Variable value:, enter the path to ant. For me it is: C:\Users\tmiles\apache-ant-1.9.1
    • Click OK
    • Click OK to exit the Environment Variable window
    • Click OK to exit the System Properties window
  • Create a PhoneGap project
    • From the command line
    • Navigate to the parent folder where you wish to create your PhoneGap project
    • type:
      create <folder name> <package name> <project name>
    • example:
    • create testPG com.example.testpg TestPG
      • testPG is the name of the folder
      • com.example.testpg is the name of the package in reverse domain style
        • This must be all lower case with
      • TestPG is the name of the Project
  • Import the project into Intellij IDEA
    • Start Intellij IDEA
    • From the start box, select Import Project
    • Navigate to your project
    • Choose to "Create project from existing sources"
    • Click Next
    • Keep the same project name.
    • Click Next
    • Keep the same source files
    • Click Next
    • Keep the same libraries
    • Click Next
    • If necessary select the Java version and select the latest Android platform
    • Click Next
    • Keep the Android Manifest file
    • Click Finish
    • After a few minutes, your project will appear
  • Build your project
    • In the Run menu, choose Edit Configurations
    • Edit the current configuration, for me it is testPG
    • If you are going to deploy to a device, select USB Device under Target Device. Otherwise leave it set for emulator.
    • Set the SDCARD size to 512 MB
    • Click OK
    • Take a break, it will take a while for the emulator to spin up.
    • The right pointing green triangle to deploy your app
  • Congratulations, now you are ready to do PhoneGap development with Intellij IDEA.

Wednesday, May 29, 2013

Build Android Apps with Intellij IDEA






I am always amazed when I see devs still using Eclipse for Android or PhoneGap development. Yes, I understand that it is free, but so is Intellij IDEA's Community Edition, and it blows Eclipse away in every way you can measure. In fact, my favorite announcement of Google IO 2013, is that Google is going to switch from Eclipse to the Intellij based Android Studio for future Android development. See, I am not the only one who thinks this is a great IDE. Also, don't be fooled by the Android Developer Tools, ADT, it is simply a Google customized version of Eclipse. 

While I think it is no more difficult to install than Eclipse, it is usually the prerequisites that throw people off. So here are all of the instructions I could think of to install it on a Windows machine. For you Mac and Linux users, the basic steps except the USB Driver part, also applies to you. When I get a chance, I will write the instructions for Mac.

I've even included the instructions for installing a USB driver for an Android device. If you want to developer PhoneGap/Cordova apps for Android never fear, at the top of this post is a link to those instructions as well.

Download Java SE Development Kit 6 (NOT 8 or 7)


Don't freak out here. This is an old version of Java and yes the security warnings are scary, but they don't really apply to Java running on Android. 

Scroll down the page until you find the Java SE 6u45
Accept the license agreement
Click the download link for your system



Accept the license agreement
Download the proper package for your system
You don't need the documents or samples
Install the package
Validate the install by going to command window or terminal 
type "java --version"


The system should respond "java version 1.6.0_45"

Set the JAVA_HOME environmental variable
Windows Start
Right click "Computer"




Click "Properties"




Click Advanced system settings




Click Environment Variables
Under System variables
Click New...
In Variable name: enter - "JAVA_HOME"
In Variable value: enter - "C:\Program Files\Java\jdk1.6.0_45" or where ever you installed Java




Keep clicking OK until you've closed all of the dialog boxes


Install Android Developer Tools (not the bundle)








Install the package just for me (NOT Install for anyone using this computer)






Install Android SDK Manager stuff

Install the default packages (API 19)
Windows user need the USB drivers if you want to deploy to a device
Accept the license
Install the Android USB Driver (only needed if deploying to an Android device)
Connect your Android-powered device to your computer's USB port.
Right-click on Computer from your desktop or Windows Explorer, and select Manage.
Select Devices in the left pane.









Locate and expand Other device in the right pane.
Right-click the device name (such as Nexus S) and select Update Driver Software. This will
launch the Hardware Update Wizard





Select Browse my computer for driver software and click Next.


Click Browse and locate the USB driver folder. (The Google USB Driver is located in <sdk>\extras\google\usb_driver\.)























Click Next to install the driver.


Install Intellij IDE Community Edition



Click the "Download Community" button on the right
Install Intellij IDEA





Sunday, May 5, 2013

Node Development using Windows, WebStorm, and Heroku


INTRODUCTION

Heroku is a fantastic service which is perfect for cowboy developers like myself. "What so perfect?", you ask. Its supports a lot of languages, it is well implemented, and most of all for low levels of usage, it is free. Now before you go crazy, there is a limit to how much free time you get each month, but it is enough to set up a demo site and run it for free.  To find out how much it will cost, use Heroku's Price Calculator.


Getting going with Heroku on Mac/Linux systems is pretty easy, but it can be challenging on a Windows box. Why? Most of the tools used were developed for use on posix systems and Windows is not a posix system. But don't fret, it isn't difficult to get everything to play well with Windows, so long as you use the right tools.


INFO
SSH, or Secure Shell is a cryptographic network protocol for secure data communication. It allows your machine to establish a secure link with a remote server. It establishes trust between your box and your server. On Windows, ssh is not built-in, so it must be installed.

WARNING
Do not use PuTTY. PuTTY is a very popular SSH client Windows. TortoiseGit will offer to include it, DON'T. This is not a "diss" of PuTTY, but I could not get Heroku to work with it, but everything worked fine using the SSH client included with Git.

INSTALLATION:

  • Git for Windows
  • TortoiseGit
    • Download TortoiseGit 1.8.2.0 or greater
      (32 or 64 bits depending on your system)
    • Choose OpenSSH, Git default SSH Client
      (Don't use PuTTY)
    • Click Next until Finish
  • Create a SSH Key and User Credentials
    • Window key - R
    • cmd + Enter
    • ssh-keygen -t rsa -C "you@your-email-address.com"
      (Be extra safe and create a passphrase too)
    • git config --global user.email "you@your_email.com"
    • git config --global user.name "First Last"
  • Heroku
    • Click Login
    • Click Sign Up
    • Enter your email address
    • Click link in email sent by Heroku
    • Enter and confirm password
  • Heroku Toolbelt
  • Node.js
    • Click INSTALL to download
    • Click Next through Finish
    • Be sure to grant permission to app.
  • WebStorm
    • Download version 6.0 or greater
    • Choose the 30 day trial or bite the bullet and buy this great IDE
    • Create New Project
    • Give project a name
    • Make project type Node.js Express App
      (this process will take a bit)
    • Allow webstorm to install core Modules Source)
    • Test the app locally
    • Grant firewall permission to WebStorm (so it can use port 3000)
    • Go to your browser enter http://localhost:3000
    • Stop the app
    • Add a Procfile for Heroku, a single line which reads:
      web: node app.js
  • Deploy to Heroku
    • cmd
    • go to node1 directory
    • heroku login
    • give your credentials
      (Heroku should find your public key and upload it as well)
    • git init
    • git add .
    • git commit -m "init"
    • heroku create
      (This will create remote repo at heroku, where your app will deploy)
    • git push heroku master
      (This will deploy your app to heroku and start it, this may take a bit)
    • Test your site out in the browser
      (yourappname.herokuapp.com)
  • Use WebStorm to push to remote
    • Open WebStorm
    • You should receive an error for an unregister Git root
    • File -> Settings -> Version Control
    • Add Git as Version Control
      (From here on out you can use WebStorm's integrate Git support)
    • Click OK

SUMMARY
That it, all you have to do to start developing Node apps on Windows and deploy them to Heroku for free. If you are a command line commando, you don't need to install TortoiseGit. In fact, you can get along fine with just Git and WebStorm, but TortoiseGit can help you out

If you have any questions, just drop them in the comments. If you like this post, please +1 it.