Category Archives: Geek Tips

The beauty and art of ensuring quality – The lessons learned about RaincheckPH

“Quality is not an act, it is a habit.” – Aristotle

The christmas day is almost near and i’m actually writing this blogpost, the day after we had our christmas party at Voyager Innovations Inc. But in my case, it’s my first christmas party in a corporate world.

And that has nothing to do with quality. But in the last few weeks, the whole team behind RaincheckPH is hard at work ensuring that the app will NOT just work, but the goal here is to ensure that the app has to be stable, information displayed are accurate and should delight the user when they use it.

It might be easy to say that, specially on a blogpost like this but it’s really not. Delivering high quality software is a matter of working harmoniously with different people who shares the same vision with the whole team. I’ve learned a lot since then and i would love to share you the lessons learned while doing Q.A at RaincheckPH.

Don’t settle for less, do what it is right.

Doing Q.A needs a lot of patience. I mean it A LOT. The task itself is repetitive, and you don’t end with just one try. If you think that there is something wrong, report it. Don’t assume that the user will not notice it because eventually, they will.

It’s easy to discuss the smallest things discovered by YOU, rather than discussing the fault with the team coming from the END USER. Because what you will ship today will be judged according to “stars” coming from different users all over the country – or even the whole world.

Be the first user, over and over again.

I’ve been testing RaincheckPH on my personal test devices. In my case, i have two Android phones with one running Gingerbread (Android 2.3) and one running Jelly Bean (4.1) and i can say that ever since i’ve been involved on this project, i’ve been carrying two phones. My BlackBerry Z10 and my Jelly Bean phone (that was actually intended for testing apps but ended up as my second phone).

Why?

Because i wanted to “Feel” that i am the user, even if i am aware of what to do from the first place. I always wanted to experience that amazing feeling of excitement and curiosity, the way a user feels when he downloaded a new app. And i always wanted to feel that way over and over again when testing a certain app.

Be inspired

My inspiration would be the future. It may sounds funny, but think about it. You are working on app that will touch the lives of a million user. Who knows? It may change the way they look at technology. It may change their lifestyle. The way they navigate from day to day – and it all starts with YOU.

There are other ways to get inspired. But it’s only you who will discover it.

And lastly,

Enjoy

Because being inspired alone will not work. Because in reality, what you enjoy today will be your hobby tomorrow.

I hope you learned something new today! Go ship great apps and change the world!

Answering some Firefox OS Questions

(Photo from the Mozilla Philippines Community Facebook Page)

There’s been a lot of questions around Firefox OS development and that’s okay because a lot of developers are interested to build or port their apps on the platform. Also, not only developers are excited, but also consumers who believe that Firefox OS is the next big thing. This post aims to help you find answers, it may not be complete but i think the most essential things are covered.

If you’re a consumer, this is the best site to know more about Firefox OS: https://www.mozilla.org/en-US/firefox/os/faq/

And if you’re a developer seeking for answers about the platform based on my own experience with the platform:

What IDE or SDK do i need in order for me to make a Firefox OS app?

You don’t need to install heavy IDEs or SDKs just to make a Firefox OS app. Just use Firefox now and install the Firefox OS Simulator (Surprisingly, it’s a browser add-on!) and use your favourite text editor and you’re good to go!

What programming language do i need to use in order for me to develop a Firefox OS app?

If you know how to make  a website and you’re familiar to HTML, CSS and JavaScript, then you are good to go on exploring the platform! But if not, you have to get a good knowledge and the right foundation by learning first the trinity of web development.

Also, by making your site/apps running on multiple screen, you have to make it responsive.

How do i get started on making apps for Firefox OS?

I made a list of useful articles you can explore and read on: http://www.aaroncajes.com/?p=387

How can i monetize my Firefox OS app?

You can set your app as a paid app or use the in-app payments API and sell your app for free. It really depends on your app’s business model.

 Where can i get support?

Join the Mozilla Philippines Development Group on Facebook.

Subscribe to the B2G Mailing List.

Follow and ask @MozHacks on Twitter.

 

More FAQS! Here’s one quoting from: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_FAQ

What is Firefox OS?

It is a new mobile operating system built entirely using open web standards. It allows for every device function (calling, messaging, browsing, etc.) to be developed as an HTML5 application which can access the underlying capabilities of a phone (only available to native apps on other ecosystems).

How do I get a developer preview phone?

You can buy one on the Geeksphone website or if you are a Mozilla Rep you can request a Keon.

If I don’t want to buy a phone, can I still develop an app for Firefox OS?

Absolutely! You can test out your app on Android (using Marketplace for Firefox) or on your desktop using the Firefox OS simulator.

How does it compare to the final phone?

We are working with several partners to bring the phone to the general consumer market. We’ll have more information about those devices later.

Where can I download Firefox OS to try on my own phone?

See Building and installing Firefox OS.

How can I test my app on Firefox OS?

On Android or using the Firefox OS simulator.

What is the full list of device APIs?

Are you looking to standardize then?A large number of device APIs will be supported in the initial implementation of Firefox OS. A complete list can be found at https://wiki.mozilla.org/WebAPI#APIs.Standardisation is ongoing.

Are your device APIs being standardized for cross-platform use?

Yes, the APIs are the result of working with several partners and vendors and a few of them have already ended up in other platforms. Almost every technology company has the problem of enabling Web Apps to access the hardware that end users have and our implementations are a good starting point to make this happen for more platforms.

 

Transfer your iPhone or Android data to your BlackBerry Z10, Q10 device

I was having a problem transferring my existing contacts from my iPhone to my BlackBerry Z10. BlackBerry Link won’t sync my contacts so i have to find a better alternative… Then i discovered “Device Switch

I couldn’t describe it better than their official description:

Device Switch provides a fast and easy way to transfer contacts and calendar entries from one device to another without the need for a PC or Mac.

Simply download and run the Device Switch app on both devices, ensure they are both connected to the same WiFi network and follow the on-screen prompts.

Device Switch supports the following features:

  • Contacts transfer (including contact photos, birthdays, etc.)
  • Calendar transfer (including recurring entries)
  • Duplicate prevention
  • Fast and reliable transfer over WiFi

Surprisingly, they have an app for BlackBerry 10. Free. Same goes with iOS and Android. Imagine the time i saved. So if you’re planning to switch from your iPhone or Android phone  to a BlackBerry 10 device, this app is a must. We should all thank “Media Mushroom Limited” for making this useful app. Cheers! :)

Remote Emulate Firefox OS/Android device on your Windows/Mac/Linux

Today i was preparing for a talk on saturday that i suddenly realised that i need to beam my phone screen to any projector using a computer connected with a Firefox OS powered device. So out of curiosity and a little research, i have successfully remote emulated my Geeksphone Keon to my Mac.

You can do the same on a computer running Windows, Linux and Mac and some Java. Here’s how:

1.) Open Terminal/CMD and check if your system recognizes your device by typing: adb devices

2.) If full_keon appeared on the screen then your computer recognises your Keon device. Now type: javaws <androidscreencast.jnlp file> on the terminal/CMD.

That should do the trick! Enjoy!!!

Note: Your device must be on the homescreen. It will be easier for you to check if the same method also works for you.

BBM Video using your BlackBerry PlayBook to BlackBerry Z10/Q10

I’ve been playing around with my BlackBerry Z10 and got curious if PlayBook can “Video Call” my Z10 and it turns out it actually works!

If you own a BlackBerry PlayBook before, you may have seen the “Video Chat” app. You will be needing that app to call any BlackBerry Z10/Q10 users. Here’s a video demo of this experiment:

How it works:

1.) Using your PlayBook, find the “Video Chat” app

2.) You need to ask your friend’s Z10/Q10’s BBM pin

3.) Put the BBM pin on the text input and press “Call”

Please take note that i recommend that both parties must be connected to a Wifi network. I haven’t really tried if this feature works if a certain Z10/Q10 phone is connected under  cellular network

I’m sure you may now able to enjoy BBM Video using your PlayBook! It’s really awesome that it actually works just fine. Also take note that “Screen Share” doesn’t work on PlayBook-Z10 BBM Video. Well not yet, maybe BlackBerry will implement “Screen Share” on PlayBook on future updates? :)

If you have any further questions in mind, please feel free to ask in the comment section below. :)

Preparing for a BlackBerry Workshop: Installing BlackBerry WebWorks tools!

Usually when attending a “Technical” Workshop and or seminar, you have to have your tools installed in order for the event speaker at a certain seminar to save time from technical things and more time for the awesome part, which is coding (or hacking, or whatever you prefer).

This guide will show you how to use install BlackBerry WebWorks tools on your computer. I assume you’re using Windows. Luckily, if you’re using other platforms like: Mac or Linux, BlackBerry has a deeper yet easy to learn technical guide here:

(for Mac) https://developer.blackberry.com/html5/downloads?os=mac#blackberry10

(for Linux) https://developer.blackberry.com/html5/downloads?os=linux#blackberry10

Also,

I also assume that you’re computer is running on Windows 8 (64-Bit), because a lot of people (On my experience) are using the same type of machine but others can easily follow this guide.

1.)  Installing tools for BlackBerry 10

Simulators & Emulators

BlackBerry WebWorks has TWO testing software: The browser based extension (which is Ripple Simulator, take note: RIPPLE not NIPPLE lol) and the other one is a full featured Virtual Machine Emulator. Both emulator/simulators are useful at their own unique way.

Ripple is the best simulator when it comes to testing your apps U.I by just refreshing the browser. (Think of it like a design mode, but on a browser) While the

VM Simulator works best if you want to emulate your application on a real O.S without having to own a real PlayBook tablet and finally,

Owning a PlayBook Tablet/BB10 Alpha Device (A & B): The best way to test your apps. No questions asked. LOL

How to install Ripple Simulator

Ripple is a web based extension used for testing WebWorks apps. Like the real web browser in BB10/PlayBook it uses the same rendering engine: WebKit. So if you’re not using Google Chrome, you need to use it now.

1.) Download Google Chrome

2.) Download the Ripple Emulator

3.) Open Chrome > Open this link: chrome://chrome/extensions/ > Check the “Developer mode” checkbox > Drag & Drop Ripple to Chrome wait until a modal box appears and then drop, there will be a long time of pause that usually takes 2-3 minutes and then voila! Ripple has been installed)

============================

How to install the BB10/PlayBook  Emulators:

General rule:

These emulators are both Virtual meaning they run simultaneously with your current Operating System. This emulator is somewhat heavy compared to Ripple but still useful if you want to test your apps “Virtually” So here are the steps you need to install this emulator:

Step 1: Download VM Player (It’s free and LEGAL lol)

Step 2: Download and Install the emulators:

Download BlackBerry 10 Dev Alpha Beta 3

Download for PlayBook (The emulator is included in the SDK, so you don’t have to :) )

 Setting up the Simulator:

Step 1: Launch the VM Player

Step 2: Install the BB10 Simulator

Step 3: Open the BlackBerry10Simulator.vmx from where you installed the simulator.

(For the PlayBook, it’s located at: C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK for TabletOS x.x.x.x\bbwp\blackberry-tablet-sdk\BlackBerryPlayBookSimulator-x.x.x and look for BlackBerryPlayBookSimulator.vmx)

Important Note: IF you’re experiencing Java related errors when opening the .exe files you need to download the 32-Bit version of JDK. I repeat: INSTALL THE 32-BIT VERSION AND NOT THE 64-BIT VERSION.

You can download the JDK here.

After installing the JDK, you have to update your environment variables, here’s how:

1.) go to Control panel > Systems and Security >System

2.) On the left side click the “Advanced system settings”

3.) (A new window will appear) Click the “Environment Variables”

4.) (A new window will appear… Again) Look for “System Variables” and click “new”

Variable Name: JAVA_HOME

Variable Value: YOUR 32-BIT JAVA FOLDER HERE. (Example: C:\Program Files (x86)\Java\jdk1.7.0_09)

Take Note: JDK != JRE. So you have to be careful.

Find the “path” variable and insert this code at the end of the long list of strings in the path’s var value: %JAVA_HOME%\bin;

Click OK and OK.

To test if you have the latest JDK: Open cmd.exe on run. Type: java -version

If the response has the same version of JDK you have installed and configured then you’re doing it right.

 Also an Important Note: If you’re using Windows 8 PRO all the installers (event the BlackBerry 10/PlayBook SDK’s) must be in Compatibility mode to Windows 7 and has administrative privileges.

========================

Installing the BlackBerry 10 & PlayBook SDK

Step 1: Download BB10 SDK

No sweat! But… If you want to install the PlayBook SDK you have to do these:

1.) Download Adobe Air SDK (You can get it here https://developer.blackberry.com/air/download/)

2.) Download the BlackBerry PlayBook SDK

When installing the P.B’s SDK you have to point Adobe Air’s SDK. That’s important because the installation will NOT proceed if it’s not pointed at Air’s SDK.

 

What about IDE’s? Well you can download Eclipse Classic or just use Notepad++

That’s it! I hope you can use this as a guide to install these important tools. These instructions will help the speaker save more time and focus more on the important topics to be discussed on that day. You can also play with the tools you’ve just installed by following BlackBerry’s awesome documentation for WebWorks available right here.

Questions? Comments? Please write a comment below. :)

Get ready to hack at 4SQ HackDay Philippines!

We cannot deny that the mobile era is here. It’s what Steve Jobs said that we now heading towards to a “Post-PC era“. But what does it mean? It means people are now shifting from their laptop/desktop lifestyle to tablet lifestyle. But that doesn’t mean people are now selling their new and shiny MacBook Pro’s or Powerbooks, but in fact, they are adapting a new kind of device that would help them consume information.

It’s a Mobile thing, isn’t it?

A Smartphone is designed to be fast, fluid and handy. People love their smartphones because of that. When designing a smartphone app, developers should prioritize the consumer’s needs. Remember, they are always on the go so your app should too.

A tablet, on the other hand is designed for consumers who wants to consume data on a big screen. It’s like a smartphone, but users are not always on a hurry. When designing for tablets, always think about how your app will look like on that big handy screen. Users are meticulous and they demand a better experience on their device. It’s what they paid for.

What about tools and things like that?

Usually, a mobile platform allows devs to build apps on native. But today, majority of Mobile platforms are now offering their web tools to web developers. Popular mobile companies like BlackBerry, Firefox OS, Nokia, Windows 8 are now changing the game with HTML5.You can also use Apache Cordova to build cross platform HTML5 apps.

Now, which is better? Native or Web? Seriously. It’s all about your personal preferences and or experience. Use the tools you feel comfortable with. But if you’re not happy with the results. Go and try the other.

Come and Join 4SQ HackDay PH 2012!

 (WebGeek DevCup. Photo by When In Manila)

Smart DevNet and WebGeek invites all mobile app developers to test their skills in this awesome and one of a kind hackathon event. All you have to do is develop a mobile app on the foursquare API. Develop your mobile app within nine hours and let us see what you’re capable of.

It’s your chance to hack that next big thing! If you want to know more about this event, you can visit the official site: http://hackday.webgeek.ph/

Fixing the nasty UX “Swipe” bug on WebWorks based apps

If you have been developing HTML5 based apps for the BlackBerry PlayBook (or BlackBerry 10 Smartphone), you may have encountered this bug. I just simply call it the “Swipe” bug because when you swipe your index finger from the top to the middle of the screen the whole “container” swipes down and lo! A nasty grey canvas appears and then returns to its normal position after a short time.

Let me show you a sample of this bug, all of the screenshots below are available for download on the App World. So let me use my app as my first example:
My holy Rosary

My Holy Rosary – The app where you can pray the rosary on your playbook looks nice and beautiful but not until you drag your index finger downward and this will be the result of that action:
My holy Rosary

Or if you feel like playing the app, you might want to drag it upwards and this will happen next:
My holy Rosary

I KNOW that feeling bro. That beautiful app has turned into a rubber band toy where your users might get annoyed while reading a certain long paragraph or text within your app.

No, it’s not just my app. Let me show you another example:

MMDA for PlayBook. A useful app that shows traffic information in the metro looks amazing from here.

Don’t just drAG THAT FINGER DOWN! NOOooooooooo…

That “Told ya so…” comes in.  But wait… What’s that? Why did that happened?

Mr. Browser, what have you done?

If you’re a proud owner of an BlackBerry PlayBook Tablet or that sleek looking dev alpha device, you might have used that built-in browser (I dunno, maybe it’s one of your favorites, too) But did you know, you can reproduce the same glitch on an ordinary website?

Let me show you an example.

This innocent looking news site will be pwned….

 


..pwned.

But why?! Because WebWorks based apps are no different from websites, thus the same browser rendering will be applied! *Dun dun dun dun*

So, you ask me. How do we fix this once and for all?

Think Mobile. A tablet is a mobile device. It’s not a full fledged computer nor it would be classified as a smartphone. It’s a tablet. Though sometimes you would see it renders some websites  in desktop mode, but that doesn’t mean your device is a desktop computer. Again, It’s a tablet and it has a 1024 x 768 resolution. Once the browser engine has sensed that the page it will load is bigger than its current resolution, it will show you half of the page and once you scroll it down, like an ordinary website, the whole page will move just for the sake of rendering the whole content.

The solution: Have a Master container!

And that Master container must be designed to be static-fluid. Static-Fluid, eh? Let me explain it to you: Static, in a sense that the width and height of your Master container MUST BE EQUAL to the device’s width & height. Fluid because we don’t know if RIM would release a 10″ BlackBerry PlayBook. But just in case the rumors were true, and one day RIM would release one, at least we know that our app would beautifully scale to that bigger canvas. You would hold that 10″ tablet with pride, knowing our app works perfectly. Damn i want one.

The Second container would hold our main content. But don’t forget to include overflow: hidden!

In code (Feel free to explore!) :

HTML:

<div id=”master-container”>

<div id=”second-container”> <!– !!! THIS WHERE THE AWESOMENESS COMES IN!!!  –></div>

</div>

 

CSS:

#master-container

{

width: 100%;

height:100%;

padding:0;

}

#second-container

{

overflow:hidden;

}

I also made an app that works perfectly on BlackBerry Smartphones & tablet and it doesn’t have this glitch because it uses the same pattern.

Meet WebGeek Feeds. An app that was made for just 5 minutes using BlackBerry App Generator and it works perfectly smooth!

I also assume that this idea would also works with the upcoming BlackBerry 10 O.S. And also, you can find inspiration using bbUi.js. :)

That’s it! Hope you learned something from this lightning post, Feel free to explore WebWorks and Let me know if you have any concerns, ideas and more in the comments section below! :)

You can follow me on twitter: @aaroncajes

A touch of Responsive Web Apps

The “Touch” Revolution

When the first iPhone was announced, Steve Jobs also announced to developers that they don’t need to learn a new language just to make apps because the iPhone can run “Web Apps” or a.k.a “Web 2.0″ and stated that you can use the available web technologies to make apps. (Yes, the first iPhone doesn’t have an app store either) that runs on Safari. But things changed when Apple officially announced an official SDK to make “Native Apps” and also the rise of the “App Store” revolution and everything changed since then.

The HTML5 Revolution

But…

Steve doesn’t like flash. And said that “New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too).” thus the beginning of the “HTML5″ revolution.

It’s 2012 and years after the first iPhone was released the web has grown and a lot of companies supported HTML5. But it didn’t stop there.

Then came PhoneGap created by Nitobi which then was acquired by Adobe. So What is PhoneGap? I let Wikipedia do the talking:

It enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of device specific languages such as Objective-C.[7] The resulting applications are hybrid, meaning that they are neither truly native (because all layout rendering is done via web views instead of the platform’s native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs).

(Other than PhoneGap, there are lots of tools that does the same thing which i will not mention, but you can google it.)

And a lot of companies like Mozilla, Microsoft, Nokia and BlackBerry now supports web technologies to make native web apps.

Let me highlight these words: “Web” + “Apps” + “Browser”

Building Web Apps is no different from building a website. If you know how to build your website using HTML5 and know responsive web design then you’ll have to adjust to the platform you want to work on. But if you haven’t, you might want to open your favorite search engine and start learning now. :)

Seriously, learning a new language is hard but it’s harder when you try to code without understanding what that code actually does for you. One effective way  is to learn and write code. Understand first and apply. Trust me, it’s easier to code when you know what to do.

And a little motivation should do the trick!

Don’t forget JavaScript!

JavaScript is the programming language made not just for the web but also for all the devices that runs a browser. A LOT of platform uses JavaScript just to operate a certain task like Firefox OS, BlackBerry’s WebWorks and WebOS heavily relies on that, so you have to understand and learn JavaScript!

Explore. Make. Deliver.

Explore new technologies, frameworks and other stuff that could help you deliver that next big thing! Make the best choice and focus. Deliver!

Windows Phone SDK 7.1.1 is HERE!

Today, i have downloaded and installed Windows Phone SDK 7.1.1, so what’s new? Well, here are the list of improvements included in the said SDK…

  • The Visual Studio IDE is patched to enable selection from a list of emulators, and launching it (note that the WPSDK can only support connecting to one at a time, though)
  • The Windows Phone [512 MB device] emulator image is updated to use build 8773
  • A second, new emulator device image is included, allowing you to emulate running your app on a 256 MB device
  • The Microsoft Advertising SDK is updated to the latest version (previously only available as a separate install), which fixes some issues devs were encountering at runtime
  • IntelliSense now supports specifying the 512 MB device requirement in your manifest file, should you choose to opt your app out from running on the new 256 MB devices
  • Language support is again consistent both in the IDE (the 7.1.1 Update supports all 10 of the WPSDK 7.1 languages) and in the emulator OS (Malay and Indonesian have been added)

 

So as you see, there are lots of great improvements from 64-bit Windows Phone emulator to the most up-to-date Assemblies for Windows Phone. Some of the updates are available to use on selected WP countries, but for those countries who AREN’T supported YET, you may still develop apps and submit it through Yalla Apps or any other Microsoft’s Global Publisher Program partners.

The Microsoft Windows Phone developer blog posted a neat set of instruction and guidelines to follow, you may want to read it here. Most of the instructions and updates are listed there, so i encourage you to read all of it, step by step and don’t just dive in, to get the most out of Windows Phone App development.

Enjoy developing Windows Phone 7 apps! :D

You might find these links useful:

Optimizing Apps for Lower Cost Devices

Best practice tips for delivering apps to Windows Phone with 256 MB