Writing Mirror API & Native Apps for Google Glass Slides

Posted by on Feb 28, 2014

From Confoo 2014:

Writing Mirror API and Native Apps for Google Glass from Jean-Luc David
Read More

Installing Samsung Gear Manager on Google Nexus

Posted by on Nov 22, 2013

Samsung-Galaxy-Gear

On release day,  I purchased a Samsung Galaxy Gear smart watch – and subsequently found out that it:

I own a Galaxy Nexus (that I received at Google IO), and I was determined to make Gear Manager work on my phone. This forum on XDA Developers had some very useful information. Here are the three steps I used to successfully install Gear Manager on a Google Nexus & activate my watch:

  • One of the key considerations is that the Galaxy Gear uses Bluetooth 4.0 (aka Bluetooth Low Energy) to communicate with the phone. The Galaxy Nexus supports Bluetooth 4.0, but only on Jelly Bean (Android 4.3.1). The stock OS on a Galaxy Nexus is Ice Cream Sandwich (Android 4.0). I had to upgrade my phone to Jelly Bean to get it to communicate with my watch – I used the CyanogenMod Installer to painlessly do the upgrade (note – the installer requires Windows, the Android SDK, and Samsung Android drivers for your target devices).
  • Once that was done, the next step involved installing Gear Manager. If you try to download a copy of the Gear Manager .apk & install it on the Google Nexus, you’ll likely get an “SDK Not Supported” error and see that 0/19 components of the Gear Manager components have been installed. How do you get around this problem? The trick involves installing all the required components individually before installing Gear Manager – you can download the extracted files here (then be sure to install GR.GearManagerStub.apk). Once the components are in place, you can then install the Gear Manager APK. You’ll notice that you won’t be able to install SAWeatherProvider_signed.apk and SAMusicProvider_signed.apk. I haven’t tested this completely, but I’m sure you can get the weather notifications working if you install the Galaxy S4 Launcher (TouchWiz) with the weather widget on your Google Nexus (Gear Manager apparently uses this component to transmit the weather to the watch).
  • Finally, you need to pair your watch to the phone. Don’t use the Gear Manager to do the pairing initially, use the native Bluetooth settings on Android. Pairing the watch to the phone may require a few tries before you are successful. You may need to reboot the watch, un-pair/re-pair multiple times in order to get it to “catch”. Once your phone pairs successfully with the watch, Gear Manager will launch and you’ll be in business.

Gear Manager is semi-functional on the Google Nexus. You can modify watch faces, set the time, do basic configuration. If you click on Settings or Samsung Apps, chances are that the Gear Manager will freeze up and crash. Weather and Music won’t work out of the box – I’ll keep experimenting to see if I can fix some of these issues. In my next blog post, I’ll explain how to sideload apps on the Galaxy Gear. Cheers!

Read More

Integrating Facebook SSO On The iPhone Using Titanium

Posted by on Oct 19, 2013

10374556214_3873f94e03
If you’re developing native iOS app with Appcelerator Titanium, chances are that you may want to integrate with Facebook. In the past, you had to invoke a modal window that brought up a web view with the mobile login screen. It’s not documented very well on the Appcelerator website, but there is also a way of integrating directly with the Single Sign On (SSO) functionality via the Facebook iOS app (if the user has it installed). I’ll describe it here on this blog post.

The first step involves creating a new app ID for your application on Facebook.com. Simply navigate to the Facebook Developer website. Click on the “Apps” link on the top right of the screen, then click on the “+ Create a new app” button. Once the app has been created, make note of the 12-digit App ID/API Key – you’ll be using it a lot while configuring your project.

The second step involves editing your tiapp.xml file (usually found at the root of your Titanium project). You’ll find a section in the XML that has a guid and properties. Add the following property (substituting the x’s with your Facebook App ID):

<property name="ti.facebook.appid">xxxxxxxxxxxxxxxx</property>

At the end of the tiapp.xml file, you’ll notice a section for <modules/>. Substitute it with the following lines of code (to include the Facebook module in your project). Note that the native Facebook module is only officially supported in Titanium SDK 3.1 and above:

<modules>
<module platform="iphone">facebook</module>
</modules>

After performing these steps, you can save and close tiapp.xml. The third step involves including your Info.plist file in the root of your project, and modifying it as shown below. By modifying the CFBundleURLTypes, CFBundleURLName, and CFBundleURLSchemes, the Facebook app will be able to navigate back to your app once the authentication is complete.

First, build your Titanium project. Once the build is complete, go into the build folder of the project and copy the Info.plist file into the root of your Titanium project. Now you need to edit the Info.plist file (as shown below). Under CFBundleURLName, include the namespace of your project (which should be found in your tiapp.xml file). Under CFBundleURLSchemes, include the official name of your app and a string that starts with fb and your Facebook App ID (as shown below):

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>app.demo.com</string>
<key>CFBundleURLSchemes</key>
<array>
<string>yourappname</string>
<string>fbxxxxxxxxxxxxxxxx</string>
</array>
</dict>
</array>

The final step involves completing your Titanium app. In your app.js file, include the following:

Titanium.UI.setBackgroundColor('#ffffff');
var fb = require('facebook');
fb.appid = "xxxxxxxxxxxxxxxxxx";
fb.permissions = ['publish_stream'];
fb.forceDialogAuth = false;

Substitute the x’s with your Facebook App ID. Be sure you set the forceDialogAuth to false – if you set it to true, it will force the undesirable modal window to pop up. Setting it to false will force the authentication to happen in the Facebook app (as shown in the top image of this blog post). Now let’s include event handlers to pop up modal windows and confirm whether we have been authenticated or not. Note that the event handlers are attached directly to the Facebook object, and not to the Facebook button:

fb.addEventListener('login', function(e) {
if (e.success) {
alert('Logged in');
}
});

fb.addEventListener('logout', function(e) {
alert('Logged out');
});

Lastly, let’s create a window for our app, attach a Facebook button, and launch our application (as shown below):

var win = Titanium.UI.createWindow({
title:'MyApp',
backgroundColor:'#ffffff'
});

var fb_button = fb.createLoginButton({
bottom: 50,
style: fb.BUTTON_STYLE_WIDE
});

win.add(fb_button);
win.open();

Hope these instructions are useful – cheers!

 

 

 

 

 

Read More

Pro Tip: Fixing “This Webpage Has A Redirect Loop” Error in PHP

Posted by on Oct 15, 2013

post-image

If you encounter this error on your PHP site (in Google Chrome), chances are that your server administrator or hosting company set up restrictions on certain folder permissions. For example, your site root folder may be set to CHMOD 777 (means anyone can read and write to your website, a bad idea). If you update the permissions on your folders to 755 or 644, it could fix the problem.

Read More

How To Get ADB To Recognize Your Recon Goggles (Or Any Android Device)

Posted by on Oct 14, 2013

goggles

I just started developing apps for the Recon HUD Goggles (http://developers.reconinstruments.com). After updating the Android SDK, tried to get ADB (Android Debug Bridge) to recognize the device after plugging in via USB (and enabling USB debugging by clicking Settings > Advanced > USB Debugging on the goggles). Recon runs on a modified version of Android OS version 4.1. No matter what I tried, ADB could not detect the goggles (see below).

$ adb devices
List of devices attached

By default, ADB does not automatically detect all Android devices under the sun. The fix involves updating the adb_usb.ini file in your Android user directory with the vendor ID of your device. But how do you uncover the vendor ID? Plug in the goggles to your computer using the USB cable, and type in the following command in Terminal:

$ system_profiler SPUSBDataType

You’ll get a list of all the USB devices attached to your computer (including the goggles). Here is the output relating to my pair of goggles:

Snow2:
Product ID: 0xd109
Vendor ID: 0x2523
Version: 2.16
Serial Number: xxxxxxxxx
Speed: Up to 480 Mb/sec
Manufacturer: Recon_Instruments
Location ID: xxxxxxxxxxx / x
Current Available (mA): 500
Current Required (mA): 500

You’ll notice the Recon vendor ID code in my case is 0×2523 (yours might be slightly different depending on your brand of HUD glasses or goggles). Make note of it and type in the following command to make sure the an adb_usb.ini file has been generated:

$ android update adb

Now you have to edit your adb_usb.ini file. Here is the path:

/Users/<name>/.android/adb_usb.ini

Once you’ve got the .ini file open in your favorite text editor, include the vendor ID (as shown below):

# ANDROID 3RD PARTY USB VENDOR ID LIST -- DO NOT EDIT.
# USE 'android update adb' TO GENERATE.
# 1 USB VENDOR ID PER LINE.
0x2523

In order for ADB to recognize these changes, you’ll need to restart it. Type in the following commands in Terminal:

$ adb kill-server
$ adb start-server

Now ADB should be able to see the goggles. Type in “adb devices” in Terminal and you should see output similar to what’s shown below (indicating that the device has been recognized).

$ adb devices
List of devices attached
273335905 device

You can now deploy your own .apk based-apps to the googles. Here are the commands to make it happen:

$ adb -d install YourApp.apk
$ adb reboot

Hope this helps not only developers working with Recon, but also if you are generally having trouble getting ADB to recognize your new Android devices. Good luck!

Read More

Free Photo and Icon Resources For Developers

Posted by on Sep 23, 2013

There are times when you’re working on a website or a mobile app and need to find photos, icons, and fonts to realize the design. Here are a few of my favorites (the above image was found on Unsplash):

 Photos

  • Unsplash (http://unsplash.com) – created by my good friends at Ooomf in Montreal. 10 free high-resolution photos per day, beautiful imagery for a website.
  • Microsoft Design Gallery Live (http://dgl.microsoft.com) – royalty free images you can use (as long as you have a license for Microsoft Office)
  • MorgueFile (http://www.morguefile.com) – Free reference images for comps and designs.

Icons

Fonts

Do you have any other great image & font resources? Tweet them over to @jldavid.

Read More

Pro-Tip: Downloading All Photos From a Twitter Profile

Posted by on Sep 12, 2013

twitter_large

There may be circumstances where you would want to download your own Twitter photos, or from someone you know. Here is a quick and easy way to download all of a Twitter user’s photos in seconds. For this tutorial, you will need:

Here are the steps:

  1. Install Brew
  2. Install & Launch Google Chrome
    1. Open Settings (Right Command + Comma)
    2. Click on History > Clean Browsing History
    3. Select “Empty The Cache”
    4. Go to the desired Twitter profile (for example, https://twitter.com/britneyspears)
    5. Click on “Photos and Videos” on the left. In the example above, the link leads to: https://twitter.com/britneyspears/media/grid
    6. Scroll down until all the images have appeared onscreen. They will gradually come in as you scroll.
    7. Open a new tab and type “chrome://cache”
    8. Copy all the links that start with https://pbs.twimg.com/media/ into a plain text file. Remove the ones that don’t start with pbs.
    9. Do a search & replace in the text file – replace all in”jpg:large” and “jpg:thumb” in the text with “jpg”
    10. Do another search in the text fie – replace all instances of “jpg:large” with jpg (this will pull all the large photos)
    11. Save your text file in an empty folder – for example: britney.txt
  3.  Install WGET & Download the Twitter Images
    1. Open Terminal & navigate to your new folder via command line.
    2. In Terminal, type in the following line of code: brew install wget
    3. Then type this (substituting britney.txt with your text file name): wget -i britney.txt
  4. Fix, Prepend & Finish
    1. Install & Launch NameChanger
    2. Navigate to your folder, and change all instance from “.jpg:large” to “.jpg”
    3. Prepend a name (such as “britneyspears-” or “britneyspears_”
    4. You’re done!
Read More