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.

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

Looking for partner(s) to join for techstars.org program

[Open Letter]

Well, I’ve been working on a hi-tech startup offering a tablet PC based B2B application for quite some time now. Since I don’t have any funding at the moment therefore I’m looking for funding as well as interesting people in my business. Fresh out of thedifferenceengine, I’m all too excited to apply for techstars but for that I need a partner with a good match of tech and entrepreneurial skills. Furthermore, I’m willing to offer founder’s equity for joining. [Remember, the deadline for techstars is 1-JUN-2010]

I’ve figured out the architecture and the technologies behind it: Flex4/Air2 as front end, Scala as backend and No-SQL (probably) as a data store. The application may also be available as SaaS offering, in a cloud, some time in the future.

For that I need someone who has 3+ years of experience in enterprise software development: Whether he has worked in .NET or Java, it doesn’t matter, but what matters is his ambition to learn to do enterprise application integration, preferably with CRM or payroll systems, in a far efficient and elegant manner. I mean doing it through RESTful concurrent Scala!

Scala is a new kid in the block but it has garnered great reputation after twitter and linkedin chose to migrate their core technology to this new JVM-based language. It supports elegant multi-core concurrency language features apart from providing a very clean syntax.

Another person, who may be of an interest to me, would be a Flex desopler (designer/developer) who is also an expert in designing UX (user experience) for consumer applications.

I myself have worked heavily on enterprise software and business intelligence projects too. Mostly, Java and Applet based technology but I kept myself updated with what’s going on out there and what’s hip throughout my career. I’ve been advising various startups and also coming up with business plans ever since I graduated. However, this is the first time I’m out seeking funding 🙂

So anyone with ambitions, authorization to work in UK and willingness to take the risks in order to change the world is welcomed!

sim4biz[at]gmail[dot]com


Share

Change in blogging pattern

After a long break, I’m back. In the meantime, I immigrated to a new country, changed a couple of jobs, working on a new business plan and refreshed myself for new challenges in life.

With this post, I’m changing the pattern of my blogs; from long well written and 3/4 blogs a year to short quick blogs with enough meat to justify a post 🙂

So here I am.

I’m a big IntelliJ Idea fan but as a startup, I need to be able to do quick edits, configurations here and there and quick feedback loops for the changes. Therefore, I’m going with an old favorite editor, Notepad++, and added a little macro that can compile/run java programs.

1) Press F6

2) type

npp_switch Main.java
cd ..\..\..\
javac -sourcepath src -classpath classes;lib\*.jar src\com\myfirm\*.java -d classes
java -classpath classes;lib\*.jar com.myfirm.”$(NAME_PART)”

[N.B. dont forget to press <enter> after every command]

3) Press Save… and name the script java_runner

4) Invoke by Ctrl-F6 on any class of the same project

Job’s done!

Assumptions:

1) It requires that all java source files are placed with src/com/myfirm directory

2) The directory classes is already created at the level of src directory

3) There is a class that ends with a name Main

4) The required libraries are placed in the lib directory

5) All java etc environment variables are set properly

6) Notepad++ menu Plugins–>NppExec [Save all files on execute, Follow $(CURRENT_DIRECTORY)] are checked

Cheers!