Saturday, October 15, 2016

Getting Started with Android Wearable App Development - Basics

The wearable device is really useful where you need to check updates on the go without unlocking your phone and swiping the notification at regular interval. But one may claim that it's too much to have a wearable and getting notifications instead checking your phone. The design and way it syncs with your handheld device are awesome and even more awesome when apps respond you based on contexts like location, temperature and other conditions.

Getting Started with Android Wearable App Development - Basics

Scope :

Android wearable application development is really a broad topic where as it's growing drastically. Even now recently Google announced inbuilt android play store, the keyboard for wearable and last year they introduced emoji and WiFi support for wearable apps. we will see about basics of Android wearable development and types to support existing apps.

Prerequisites : 

1) Knowledge on Basics of Android development

Design for wearable API :

Wearable is meant for checking updates on the go and quick replies. It's not same as your handheld device to show all available information to the user. It must be optimised to show the relevant and Updated data to the user in regular intervals.

For example : consider the Weather app, which shows you weather details for next seven days in single activity and it's data structure will be like 
  • Min temperature
  • Max temperature
  • Type of weather condition ( cloudy, sunny, rainy or moderate )
  • Atmospheric Pressure details
But your wearable app doesn't need such amount of data to be displayed on that small screen. so choose wisely which is more relevant data for the user to adapt Round or square wearable devices. In my opinion what I'll choose is
  • Today's Min Temperature
  • Today's Max Temperature
  • Type of Weather condition as Drawable ( Bitmap )
with time and date.

So, It's important to focus more on design and relevant data to the end user based on context.

Getting Started with Android Wearable App Development - Basics

Types of Wearable Development 

Basically, whenever your app shows notification in your handheld device it will automatically push to the wearable device at no cost of coding it. But when you need to support it extensively with actions, paging additional information as slider you should support it via notification App compat support library.

1) Notifications App compat support library.
2) Watch Face design and Data communication and syncing.
3) Extensively designing UI and installing an app in wearable.

Notification App compat : 

Notification App compat is all about extending support for existing notification in wearable devices without writing additional code for wearable. with notification app compat library you can simply create a notification for your device and wearable devices with additional options such as Actions, Quick reply intents etc.

Watch Face Design : 

Basically, watch face is nothing but just like your home screen with widgets but it can run only one app at a time, showing multiple data such as temperature, steps your while jogging, the heartbeat can be obtained through content providers or sensors. There are tonnes of watch face in play store. Watch face is considered as a home screen where you can check regular and frequent updates.

It has two modes namely ,

1) Ambient Mode
2) Normal Mode

In the Ambient mode, your watch tries to save battery by not allowing to update the screen frequently. you will get the chance to get updates in minutes basis. Most specifically your watch face should use Black and white pixel colour while in the Ambient mode to save energy by repainting the view now and then. you can't able to update second hand in the clock where it requires every second update.

In normal mode, you are allowed to use colours and drawable but that doesn't require high resource and frequent updates that make your watch face unresponsive sometimes.

When the user is using we can switch over to normal mode, where other times wearable will be going automatically to ambient mode after the speicific interval of time.( checked in Moto 360) 

Designing UI for wearable :

Designing extensively for Android wearable using layouts such box inset layout, grid view pager, Watch view stubs and a variety of layout is supported by support libraries. Data communication API, Message API is available with Wearable API that comes under google play services, which delivers and sync data between the handheld device and a wearable device.


So we just covered the basics of Android Wearable App development which is different from app development in terms of Design and types to support your app. I'll soon publish the post on these types to designing and work with these API for wearable apps.

Recently Google announced that Wearable major update 2.0 preview that doesn't require a phone to be connected always. you can use it wherever you go and sync via the cloud. we're eagerly waiting for stable SDK support and watch yet to be released early 2017. For now preview 2.0 is available at official Android developer site.

For bugs, hugs just comment below. in case any doubts drop me a mail, or chat wiht me in G+/ Facebook. share is care.

Friday, October 07, 2016

Facebook Account Kit Tutorial - Backend Verification using Node.js

Recently I have been developing secure production app using Facebook account kit for seamless authentication across mobile and web platform. Account kit is widely used in many apps such as Saavn and many other. I found that backend verification in Account kit for every request from mobile/ SPA should be handled manually by developers and no libraries available till date. so, I'm writing this post for Indie Game and mobile developers as a reference guide.

So what's Facebook Account kit all about ? 

It's seamless authentication method via OTP way to verify the user with Mobile Number and login into App without any passwords. Whereas it provides access token to verify the authenticated user in backend server without worrying about the access token generation, revocation logics. It's all about securing the access token and using it over HTTPS connection while connecting between your app and backend.

Facebook Account Kit Tutorial - Backend Verification using Node.js
Facebook Account Kit Tutorial - Backend Verification using Node.js

Prerequisites :

In this tutorial, we'll solely concentrate on Backend verification and authorising the legal request made by the apps.
  • Facebook Developer Account 
  • Good Knowledge on Node.js routeing
  • Rest API client
  • Good logical error handling skill

How Does Account Kit works ?

When the user signup using his mobile number, he would receive the OTP via SMS Carrier from facebook server. after authenticating OTP password, the account kit sdk gives you the long live Access token or Client side temporary exchange token(this depends on application).

  • With the received access token, securely post it your Mobile backend server (probably HTTPS to avoid man-in-the-middle attack)
  • with that access token you can call the Account Kit API end point to check that the access token is valid as well it provides you mobile number or E-mail
  • As response contains mobile number, you can identify the user and provide the user with the service appropriately.
  • Most important thing is you should pass the access token everytime from the client to the server in order to verify the authenticity of the user.

Getting Started :

You should have good knowledge in routeing technique since we are going to concentrate on Express.js, if you're beginner check out this link to learn more.

Concept :

Since we need to authenticate every request from the app that comes along with access token and others data we could write a middleware to authenticate the every request in the beginning before it executes the API code.

Middleware is nothing but a piece of code which is executed before each and every request entering our express routes. probably we need to write the Account kit verification code here and if it is a success we can make the request to propagate to the corresponding the function else just terminate the live request with authentication errors spitting.

Sample code : 

here is sample code to authenticate your mobile backend API end points. we use request module to send a get request to account kit server by providing the accesstoken in url param while if it responds with 200 status code, we are going to extract the mobile number else we are going to consider the request as failed on and informing to the client as error message. before trying this source code, in Facebook Developer dashboard turn off the App-secret required option and enable client access token flow.


That's it. this is base tutorial on verifying the backend for facebook account kit integrated development.
for any bugs/hugs comment below. For detailed source code and other information just comment below or mail me, chat with me in Google+ or facebook.share is care.