The Latest

Preparing for a BlackBerry Workshop: Installing BlackBerry WebWorks tools!

On November 17, 2012, in BlackBerry, Geek Tips, HTML5, Windows, by aaroncajes

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!

On October 24, 2012, in BlackBerry, Geek Tips, HTML5, Personal Stuff, Smart DevNet, Web, Webgeek, Windows Phone, by aaroncajes

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

On October 18, 2012, in BlackBerry, Geek Tips, HTML5, Personal Stuff, by aaroncajes

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:

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

On October 16, 2012, in BlackBerry, Geek Tips, HTML5, Web, Windows, Windows Phone, by aaroncajes

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!

My|Phone A818 Review

On October 15, 2012, in Reviews, by aaroncajes

I wanted to try Android app development and was on a hunt to find the right android phone that could become my test device and at the same time my second phone. And recently i find out about the My|Phone A818.

My Phone

I’ve decided to buy the said phone, why? The price: For just Php. 3,999.

It’s REALLY affordable and when you own one, you’ll be surprised by its features!

So let’s say, i’ve convinced you to buy one…

The first thing you’ll touch when you buy this product is the box and it’s pretty sleek. You’ll just have to lift the box upwards and the first thing you’ll see is the actual phone.
My Phone

They offer three different colors: White, black and dark brown, and i bought the dark model. Which is quite elegant.
My Phone

Unboxing

Inside the box, you’ll see a battery, charger, ear piece, usb cable, a cd (pinoy content), and some manuals and a warranty certificate.

Now let’s get into the phone details.. At the back of the phone, there’s two sim card slots and a MicroSD reader. I’ve asked the sales rep and she said that this phone can accept up to 16GB MicroSD card. Not bad. (Take Note: MicroSD is sold separately.)

Once configured, you’ll see the My|Phone logo that will be animated after a little while.

Once done you’ll see an android robot widget to assist you on how to use your phone. It’s quite nice because it’s my first time to own an actual android device.

Battery Life & Internet Connection

This phone’s battery life is pretty impressive, it took almost 2 days before the phone losts its power on stand-by mode connected on wifi. I’ve also tried using this phone using cellular data connection (In fact, it can actually tether) on GPRS and EDGE.

Sound Quality & Accesories

I was amazed by this phone’s speaker. It’s pretty loud and the sound quality is great and it doesn’t have any buzzes or noise. In fact, it’s louder than an iPhone 4S. It also has a free earpiece and the sound quality is good.

I also bought a screen protector and a soft cover both cost at Php. 100.00. The soft cover is actually nice and comfortable on the hands and feels natural when you try to grip the phone.

Camera

Let’s talk about the camera..

The back camera has 3.2 Mega Pixel, which is fine for basic photography. I’ve tested the phone’s camera inside a room with fine lighting.
My Phone

I haven’t used the front-camera on an actual video call but here’s a sample image using the front-camera.

My Phone
Apps

Facebook & Skype is built-in, but not Twitter. So the first thing you’ll do is to launch Google Play – Android’s official application store. From there you can buy or download apps available for your device. (Some apps may not support your device, but don’t feel bad about it. There’s a lot of alternative apps out there. Feel free to explore! And did you know that there are 600,000 apps available in Google Play?)

It also has a built-in My|Phone exclusive app called “PINOY”… It has TONS of Filipino content like prayers, famous quotes, history facts, jokes and etc.

Verdict

From all the features you have read, for just Php. 3,999 PLUS a Filipino brand? Totally worth it! If you need an android phone but totally concern about your budget why not buy this phone?

Pagasa’s Color Coded Warning Signals in Metro!

On August 9, 2012, in Windows, by aaroncajes

I was inspired by Rappler.com‘s infographic material about Pagasa’s new Color Coded Warning Signals that i have decided to make a “Metro Style” based design….

In black…

…And in White.

Feel free to share it.

From Yalla Apps to Microsoft Dev Center

On August 8, 2012, in Windows Phone, by aaroncajes

In the past few days, I’ve been very active blogging about Microsoft’s soon to be released products like: Windows Phone 7.1/7.8 and exploring Windows 8 RTM.

Right now, this one is quite interesting for developers who are currently living in a country that App Hub has not supported in the past….

Yalla Apps – One of the notable Global Publisher Program partner is now giving away FREE ONE YEAR Microsoft Dev Center account for registered users whose country is supported for the said transition.

When you transition from Yalla Apps to Microsoft Dev Center you’ll get these new features:

1. Ability to submit unlimited ‘paid’ apps* and 100 ‘free’ apps directly
2. Ability to unlock 3 devices
3. Direct access to downloads, royalty, and crash reports
4. Ability to update account data
5. Country/region specific pricing
6. New reporting views
7. Simplified process for submitting apps
8. Submit apps to almost two hundred countries/regions
9. Can now have 10,000 beta testers
10. View all reviews in one place

That’s not all.. If you join Dev Center now, you’ll get…

Get free development tools, including a phone emulator to test your app
Explore code samples and all the information in our developer library
Read tips about selling your app
Review our policy guidelines and certification requirements
See tips and guidelines for creating apps that reflect the beauty of our design concepts
Create apps with trial options
Enable in-app purchasing, so customers can buy things within your app
Test your app with a real phone
Submit free and paid apps to the Store
Distribute your app around the world and set country/region-specific price tiers
Watch your progress and manage your apps in a personalized dashboard
Ask questions, share advice, or talk with other Windows Phone developer

Plus, take note that by agreeing to create an account on Dev Center. Yalla Apps will move the apps you have published today with Yalla to your new Dev Center Account. This means that you will get…
1. Have access to all of yours apps in Dev Center.
2. Retain your existing app users for updates
3. Retain reviews for your apps.
4. Retain star ratings.

Based on my experience, you have to the same email address of your Yalla Apps account on your Microsoft Dev Center account. AND most importantly.. YOU HAVE TO USE INTERNET EXPLORER (9 or 10) WHEN REGISTERING A NEW ACCOUNT OR ELSE PAYMENT BINDING ON PAYPAL WILL NOT BE PROCESSED!

Nonetheless, i’m pretty much happy about what happened here. i believe this will attract local filipino developers who are interested in developing apps for the Windows Phone platform.

What do you think about this bold move? Let me know in the comment section!

IMPORTANT NOTE: Yalla Apps will send you an e-mail (If you are applicable for this transition). I advise you to read that and follow it line by line as it will help you make things more smoothly.

LINK: Yalla Apps has published an official blog post about this transition.

If you have any questions about this post or just want to say hi! You may want to follow me on twitter: @aaroncajes.

Should i support Windows Phone 7.1/7.8?

On August 7, 2012, in Uncategorized, by aaroncajes

Let’s stop about Windows Phone 8 buzz for a second and think about this question:

“Should i support Windows Phone 7.1/7.8 even after Windows Phone 8 has been released?”

Well.. My answer is… It depends, really!

I’ll ask you another question…

Should i rewrite my app to support awesome NFC feature? OR Rewrite my game to awesomeness graphic hungry nativity?

If your answer is YES.. Then you should rewrite your apps for Windows Phone 8. But if your answer is NO.. Then your current windows phone apps will still be running smoothly even on a Windows Phone 8 device!

You can, however write a separate app for Windows Phone 8 devices. It’s really a matter of choice! But if your app doesn’t need NFC or any new Windows Phone 8 hardware features.. Then you are free to support Windows Phone 7.1/7.8. Not a bad choice if you need a higher target impact.

In the end, you, as a developer has an option to decide. So ARE YOU still going to support Windows Phone 7.1/7.8? Let me know in the comments section!

Compilation of Windows 8 RTM facts [On Progress]

On August 7, 2012, in Uncategorized, by aaroncajes

Hello!

I recently got a copy of Windows 8 RTM so i decided to install it via Virtual Machine FIRST rather than installing it on my main work machine. I DO NOT have an activation key, but i’m honest enough to have a legal copy of Windows 8 in the future, this post is for pure exploration of Windows 8 awesomeness!

So… Let’s get this thing started!

If you’re following me on twitter, then you might have read my early Tweets for Windows 8 Facts. But for those who are not following me just yet, i have compiled all of my Windows 8 RTM facts right here…

Aug 6: 11:19pm :

“Windows 8 RTM Facts: IE 10′s “DO NOT TRACK” feature is automatically “ON” if you have selected “Express” set-up.”

Aug 6: 11:20pm :

“Windows 8 RTM Facts: If you have not activated your Windows 8.. You can’t customize your PC. I haven’t see the 30-day trial counter msg tho.”

August 7: 11:09am :

“Windows 8 RTM Lock screen! http://twitpic.com/age34f“

August 7: 11:17am :

“Windows 8 RTM Fact: Skydrive is built-in and Metrofied! #win8fact”

August 7: 11:18am :

“Windows 8 Fact: Windows Store has a new logo! But i can’t still find the search box… “

August 7: 11:41am :

Windows 8 has a built-in Maps.. Still powered by Bing (Not Nokia Maps).. #win8facts http://twitpic.com/agef4g

August 7: 1:10pm :

Bing on Windows 8 is really big. Hahaha. #win8facts http://twitpic.com/agf8ri

August 7: 2:08pm :

Interesting: You can get a new Windows 8 license + download for <$70! + pay more if you want the actual DVD! #win8facts pic.twitter.com/qEQvmhlb

August 8: 11:06am :

[Video] Windows 8 Set-Up Screen. https://www.youtube.com/watch?desktop_uri=/watch%3Fv%3DvZ0rg4fwRZc%26feature%3Dyoutu.be%26a&a=&feature=youtu.be&v=vZ0rg4fwRZc&gl=PH

Developing Story…

If you have any questions, please do send me an email at aaroncajes [at] outlook.com or mention me on twitter @aaroncajes.

WebGeek DevCup: More than just a Hackathon!

On July 22, 2012, in Webgeek, by aaroncajes

Up for an awesome challenge? Can you build a website within a limited span of time? Got that oh-la-la feeling when it comes to the crowd? Yep? yes? YES! Alright! Join this awesome WebGeek event called the WebGeek DevCup! I won’t do the talking this time, let me quote the details below…

On August 25, 2012, WebGeek Philippines will be bringing you the WebGeek DevCup, an all-day hackathon extravaganza that will give rise to the most creative and most skillful team to deliver the best web application.

Just form a duo, trio? or if you’re bold enough, go solo to be able to participate in the hackathon. Registered participants only need to bring their own laptop and development tools (pre-packaged libraries, widgets, and frameworks) and they’re good to go! The organizers will be providing the internet connection, power, space, food, and drinks.

In this day-long hackathon, each team will be given six hours to develop a web application based on the theme to be given that day. Presentations will be delivered from 8:00 PM to 10:00 PM. During this time, teams are expected to have accomplished a web app that will either be fully or partially functional.

If the web app is not finished by the allotted time, the team should be able to explain how they would implement the technology for the unfinished parts, and how they intend to implement it technologically. Incomplete parts or projects may be represented by wire-frames or other plan documents. Five minutes is allotted for the judges’ questions about each app. Deliberation will commence after the presentations, and those who emerge victorious will be handsomely rewarded starting at 11:00 PM.

The web apps will be evaluated according to technical complexity, user experience, social relevance, and originality. The panel of judges consists of seasoned gurus in the field of web application development.

It will be a battle of innovation and creativity, and a day full of fun and challenges!

And this competition will be judged by: Bryan Bibat and Miguel Paraz. Both are experts, and only the highest quality output shall be picked from these two awesome people!

So if you want to join, visit this link here and register now!

What is WebGeek?

WebGeek is a community that acts as a venue for Filipino Geeks, Developers and Designers. A community in which we can all grow, thrive, and of course have a little fun along the way!

Learning by example is a wonderful way to receive the knowledge you need to advance yourself in whatever web endeavors you may aspire to. Receiving instruction from your peers can also be a much easier way to learn. It is often from like‐minded individuals that we can see things in each others work that others may miss.

Resources: