Phonegap Sencha Touch Pin Code feature

A couple of days ago, I added the Pin Code locking functionality in Diary Mobile mobile app. It required some tinkering with iOS Objective-C, Android Java and HTML5 javascript code.

First I added a code in the onReady function of Sencha Touch


Ext.setup({
  //...
  onReady: function() {
  //...
    appActive = function() {
      Util.logger('===app is now active in function====');
      showVerifyPinCB();
    };
  //...
}

The showVerifyPinCB() function displays the pin code panel in the form:

Pin Code/Lock screen

 

 

This screen is also reused as a setting up the pin code screen. Now comes the Objective-C code:

- (void)applicationDidBecomeActive:(UIApplication *)application { 
 // delay of 1ms ensures code will be executed in new stack trace 
 // that way, event listener can't block applicationDidBecomeActive 
 // and crash the app 
 NSLog(@"%@",@"applicationDidBecomeActive\n"); 
 NSString *fireActiveEvent = @"window.setTimeout(appActive, 1);"; 
 [self.webView stringByEvaluatingJavaScriptFromString:fireActiveEvent]; 
} 

As mentioned in the comments, it calls the javascript appActive function after a 1 nanosecond delay. This code is placed in the diary_mobileAppDelegate.m file.
Similarly, for Android the code to be placed in the class that extends DroidGap is:


public class DiaryMobile extends DroidGap
{
//...
    @Override
    public void onStart()
    {
      appView.loadUrl("javascript:window.setTimeout(appActive, 1);");
      super.onStart();
    }
//...
}

For me this got the job done and cleared a major hurdle of firing an event from Objective-C/Java and catching it from javascript. After that I just had to write up the code to enable/disable pin code and verify the pin code to unlock the screen.

BHS: Making of Diary Mobile

I started my job with Diary.com, a London-based startup, back in August 2010. Since then, I’ve worked on their webapp, which is based on Ruby-on-Rails, and spearheaded the development of Diary Mobile app in a platform agnostic way for faster releases to both the Apple AppStore and Android markets.

Diary Mobile was already a mobile app on the Apple AppStore before I joined. However, it was based on native Objective-C technology.

The old Diary Mobile:

agenda screen

events screen
todos screen

It used to look ok but there were subtle issues with this version. It simply was not robust in syncing the device data with the REST based server interface and vice versa. Moreover, the Objective-C developer was not committed with the startup on full-time basis causing major concerns for the fledgling startup.

At the time of my joining, a very cool designer also joined, and together we worked on a new HTML5, Phonegap & Sencha Touch based rewrite of the mobile app.

This rewrite took the same amount of time as the original development of the native Objective-C app. However, we focused really hard on optimizing the syncing part and also improving the overall experience for the end user.

The new Diary MobileHTML5, Phonegap & Sencha Touch

dashboard screen

events screen

notes screen

todos screen

settings screen

The results were encouraging with a lot of downloads. However, there are still rough corners that need addressing. I’ll be detailing the development in my upcoming posts.

HTML5 mobile application for App Store

I’d use the tools IntelliJ IDEA v 9, Android SDK v 2.2, PhoneGap v 0.9.1, ant v 1.8, ruby v 1.8.7 and java v 1.6.

http://phonegap.pbworks.com/Getting-started-with-Android-PhoneGap-in-Eclipse

On the last screen of the IntelliJ android project wizard take care of two things:

  • The package name that you mention and
  • Create “Hello World!” project, the Activity name

must be the same as the “package_name” and “name” of your application respectively when you created a phonegap blank project by running the droidgap script.

You may have to update the default android virtual device from “Select Run/Debug Configuration” drop down –> Edit Configurations –> Select appropriate Android Virtual Device from the drop down.

*Update

A lot of updates have occurred since I last wrote this post back in September  2010. I saved it as a draft to revisit with complete details. However, I got busy with my job and managed to launch a proper phonegap and Sench Touch application for both the iOS and Android platform – Diary Mobile.

Virtualization of SnowOSX on Windows 7

Why the Apple Mac OS X is important?

This question was never asked by the developer community for a number of years. However, with the recently discovered “gold rush” of mobile apps development, Mac OS X is relevant again.

Imagine an OS that allows development of all mobile platforms and is also lovely enough to brag in front of your girl friend!!!

Unfortunately, not every one can afford an expensive Mac Pro machine, especially not a developer who has just lost his job due to recession.

Well folks, Oracle Virtual Box comes to the rescue. Its free and let’s you install SnowOSX (hackintosh based on Mac OS X 10.6 Snow Leopard) on any Windows or Linux machine. The steps are simple and they are mentioned every where on the hackintosh websites like taranfx.com. It requires Intel VT-x or AMD-V enabled CPU, ideally 4 GB of RAM, 20 GB of free HD space and that’s it. After the SnowOSX is installed, you can go on to install Xcode with iPhone SDK and Eclipse with Android SDK. Try as many mobile SDK’s as you like, Mac OS X supports all of ‘em.

But be careful as it breaks nearly every Apple license agreement ;-)

Scala Lift simple build tool – sbt Cheat Sheet

Assumptions:

This Cheat Sheet assumes that

a) you have a basic understanding of java platform, maven build tool and IntelliJ IDEA.

b) you use windows platform for development

c) you use IntelliJ IDEA v9, java v1.6+, maven v2.2.1, git v1.7.1.1, scala v2.7.7, lift v2.0 and simple build tool v0.7.4

Install Java, maven, Git, IntelliJ IDEA and simple build tool and configure the PATH environment variable accordingly for all three:

Option 1:

Clone this repository with:

git clone git://github.com/dpp/lift_sbt_prototype.git

Then cd into lift_sbt_prototype and type:
sbt

At the sbt prompt, type:
update

Then:
jetty-run

Point your browser to:

http://localhost:8080/

Voila a running Lift app

Option 2:

1. Download simple-build-tool jar file from its official source:

http://code.google.com/p/simple-build-tool/

2. Create a script sbt.bat to launch sbt:

set SCRIPT_DIR=%~dp0
java -Xmx512M -jar “%SCRIPT_DIR%sbt-launch.jar” %*

if proxy is enabled then use:
java -Dhttp.proxyHost=myproxy -Dhttp.proxyPort=8080 -Dhttp.proxyUser=username -Dhttp.proxyPassword=mypassword -Xmx512M -jar “%SCRIPT_DIR%sbt-launch.jar” %*

To avoid frequent OutOfMemory errors, try modifying your sbt launch bat script to the following:
java -XX:+CMSClassUnloadingEnabled -XX:MaxPermSize=256m -Xmx512M -Xss2M -jar “%SCRIPT_DIR%sbt-launch.jar” %*

Note: Keep sbt-launch.jar and sbt.bat in a separate directory and not within scala installation directory.

3. First create the basic structure of Lift project using maven in windows:

mvn archetype:generate -U ^
-DarchetypeGroupId=net.liftweb ^
-DarchetypeArtifactId=lift-archetype-basic ^
-DarchetypeVersion=2.0 ^
-DarchetypeRepository=http://scala-tools.org/repo-snapshots ^
-DremoteRepositories=http://scala-tools.org/repo-snapshots ^
-DgroupId=com.myProject1 -DartifactId=myProject1

Note: -DarchetypeArtifactId can have one of the three values

- lift-archetype-blank

- lift-archetype-basic

- lift-archetype-jpa-basic

4. Then cd into myProject1 and run:
sbt

5. At the sbt prompt, type:

Project does not exist, create new project? (y/N/s) y
Name: myProject1
Organization: com.myProject1
Version [1.0]:
Scala version [2.7.7]:
sbt version [0.7.4]:

Note: Basically, you enter ‘y’ for yes or ‘s’ for starting a project from scratch (in our case we have already generated our project using maven)

6. Setup the project configuration. Your project configurations are defined at myProject1/project/build/myProject1Project.scala.

Create the directory:

project/build

7. Then create the /project/build/myProject1Project.scala file with the following:

import sbt._

class myProject1Project(info: ProjectInfo) extends DefaultWebProject(info)
{
val snapshots = ScalaToolsSnapshots
val lift = “net.liftweb” % “lift-mapper” % “2.0” % “compile”
val jetty6 = “org.mortbay.jetty” % “jetty” % “6.1.22” % “test”
val h2 = “com.h2database” % “h2″ % “1.2.134”
val servlet = “javax.servlet” % “servlet-api” % “2.5” % “provided”
val derby = “org.apache.derby” % “derby” % “10.2.2.0” % “runtime”
val junit = “junit” % “junit” % “4.7” % “test”

// required because Ivy doesn’t pull repositories from poms
val smackRepo = “m2-repository-smack” at “http://maven.reucon.com/public”
val nexusRepo = “nexus” at “https://nexus.griddynamics.net/nexus/content/groups/public”
}

For ~jetty, you will still have to hit return at the sbt prompt to restart jetty in order to see changes. To avoid this use:
override def jettyWebappPath  = webappPath

If you’re running with Jrebel (see near the end of the post), avoid unnecessary redeploys with:
override def scanDirectories = Nil

8. Then on the sbt prompt, run:

reload
9. Next on the sbt prompt, run:

update
10. Then on the sbt prompt, run:

~jetty-run

11. Point your browser to:

http://localhost:8080/

Note: Your app is running and accessible at this point

12. To use with IntelliJ IDEA,

a) install the scala and sbt plugin.

b) In Setting => Plugins give the path of sbt-launch.jar file.

c) Go to the “Before launch” options of a Run Configuration, uncheck “Make” and choose “Run SBT Action / test-compile”

d) Create a new IntelliJ IDEA project using Import Project from External Model => Maven

e) Add a Scala aspect to the project, employing Use Files. In Project Structure => Facets => Scala; point the plug-in to the myProject1/project/boot subdirectory where sbt downloaded your Scala

For further improvement in development life cycle:
a) Put libraries in myProject1/lib and sources in myProject1/src

b) On sbt prompt,

package

action will create a WAR file for when you are ready to deploy your webapp on a production server.

c) JRebel (formerly known as JavaRebel) is a plugin for the Java Virtual Machine that enables on-the-fly reloading of changes made to Java class files.

ZeroTurnaround provide a free JRebel license for developers using Scala.

Download and install JRebel from

http://www.zeroturnaround.com/jrebel/

In order to integrate JRebel into your build, first turn off automatic reloading in jetty in maven pom.xml by setting the scanIntervalSeconds value to 0:

<plugin>
<groupId>org.mortbay.jetty</groupId>
<artifactId>maven-jetty-plugin</artifactId>
<version>6.1.22</version>
<configuration>
<contextPath>/</contextPath>
<scanIntervalSeconds>0</scanIntervalSeconds>
</configuration>
</plugin>

Then add the following to your MAVEN_OPTS environment variable:

-noverify -javaagent:/path/to/jrebel/jrebel.jar

Following pages were accessed to consolidate this post:

http://www.assembla.com/wiki/show/liftweb/Getting_Started

http://www.assembla.com/wiki/show/liftweb/Using_Maven

http://www.assembla.com/wiki/show/liftweb/Using_SBT

http://code.google.com/p/simple-build-tool/wiki/Setup

http://code.google.com/p/simple-build-tool/wiki/RunningSbt

http://www.assembla.com/wiki/show/liftweb/Using_IntelliJ_IDEA_to_develop_Lift_applications

http://plugins.intellij.net/plugin/?idea&id=5007

Updates for Scala 2.8 will come soon. Feel free to leave your comments :-)

Share

Gaining momentum

Its a cruel world out. You need to take very quick and careful steps otherwise you’ll roll down the mountain on which you’re trekking.

I’ve decided to work on more than 1 startup at a time and see which one succeeds. Since the underlying technology is the same in my startups therefore I can afford to have them run at parallel. None of my startups are funded at the moment. Therefore, I’m also making sure that we get some paid projects based on the technical capabilities that we have developed.

We are currently working on following lines: wordpress, jQuery/AJAX, PHP, Sencha, Scala/Lift, NoSQL and a whole lot of APIs: Facebook, Twitter, Geolocation, you name it. So if you have any projects related to these technologies like custom website development and mobile HTML5 apps development, we’d be happy to help you achieve your desired goals.

Currenlty, we are a team of 2 highly dedicated developers working on the stuff mentioned above. We are also looking for equity holder partners with the skill set: a graphics designer/developer aka desolper and a marketing professional to work on an exciting startup based on tabletPC B2B app ;-)

I’d entertain applications at the email: sim4biz [at] gmail [dot] com

Startup brewing startup

Well, I like to be called an innovator. Entrepreneurship for me is a family thing. I wanted time to decide to take entrepreneurship as a career but fate plays its funny games some times.

This life, it seems, is too short for you to make a move from a well established career to a risky career of an entrepreneur. If you’re perturbed  by innovative ideas every now and then; I’d suggest you should try your luck in this line of business.

The name of the game is: key players at key positions. An innovative idea and a well-balanced team with brilliant past record is what angel investors and VCs seek. The current interest rate of 0.5% is proof enough that the pool of potential investors is huge. Seeking seed funding is not your goal.

You’re an innovator and you want to change the world with your inventions. Get a good idea and then pick a team or do it the other way around; its up to you. For the former adventure, there are plenty of places to seek a good team like Launch48 I recently attended.

I stumbled upon so many innovators and entrepreneurs at that event. I worked on somebody else’s idea and it was so much fun with you working on you own part and letting others work on their part.

I’m also looking for teammates for my startup slately; one techie/front-end guy and one business development guy are missing in the picture. I’m focusing all my energies on picking a super biz dev guy now as the startup I’m working on is majorly a sales business. I think, a person with primarily marketing but some sales experience with small/medium enterprise would be a good fit. Again, slately is a startup working on a tablet PC B2B application and we hope to go global in the coming years.

Things are moving fast and I’m talking to potential customers everyday. I hope to get to the point of signing a pre-order soon and from there life’d be a roller coaster ride!!!

Share

Follow

Get every new post delivered to your Inbox.