Archive for the ‘Web’ Category

I’m continuing my resolution to record as many of my programming and technical presentations as possible. I recently spoke at the inaugural Indy.Code() conference. It was excellent, with an incredible speaker line-up. I hope they, too, post some of their presentations online!

Watch the Video on YouTube

From the synopsis:

Should you write your app “native” or use a “cross-platform” solution like React Native, Xamarin, or NativeScript? The new wave of native-cross-compiling solutions provide significant cost savings, code reuse opportunities, and lower technical debt. Does wholly native, per platform development, still play a role in future mobile development? Let’s discuss together.

In this presentation, we’ll discuss:

  • The growth of native, hybrid, and cross-platform mobile development solutions
  • Cost analysis of multiple native and cross-platform apps
  • Considerations for each native and cross-platform solution
  • Lessons learned

Slides are available here: https://t.co/5iLhEoEfen

If you have any questions, I’m happy to answer them! Please email me or ask on Twitter.

 

The built-in Facebook OWIN provider in ASP.NET MVC can open your website to the benefits of logging in via the social networking behemoth. Still, it’s limited when it comes to pulling in profile details such as photo, birthdate, gender, and so forth. I recently implemented retrieval of those profile properties, and will explain how you can do it, too! I feel the obvious benefit is your users don’t need to manually type in their profile details, should you have similar fields in your system.

I’m assuming you’ve created and configured a Facebook app via Facebook’s Dev center, and won’t be going into that process in this article.

Determine Which Profile Fields You Need

Before we write any code, you need to know to which profile details you desire access. Facebook used to be relatively open. Not anymore! Now you need to ask permission for a ton of items, and many are no longer available. Make sure you check permissions at least every 3 months, otherwise you may find your granted permissions are no longer, well, granted, or even accessible.

Here’s a link to everything you can get: https://developers.facebook.com/docs/facebook-login/permissions/

In my case, to access the Profile photo, name information, and some other basic items, I chose:

  • public_profile
  • email
  • user_photos
  • user_about_me

I probably don’t need all these right now, but I may in the future. I figured I’d ask ahead of time.

Once you have your list, continue to the fun coding part…

Enable the Facebook Provider in Startup.Auth.cs

If you haven’t already, you’ll need to enable the Facebook provider via Startup.Auth.cs. Make sure you do this *after* any cookie authentication, so “normal” username/password logins are serviced before Facebook takes over. This should already be the case, as the default ASP.NET MVC template includes the many optional providers afterwards by default.

I suggest keeping the App ID and Secret in your config file – or at least out of code – so you can swap for differing environments as necessary. The code snippet below enables Facebook authentication, and specifies the profile fields for which we’ll be asking read permission:

You don’t have to use what I chose – it’s just what I needed for my particular case. Facebook *does* change allowed permissions and profile item visibility somewhat often. Stay on top of their developer changes – otherwise your site login may unexpectedly break.

// Enable Facebook authentication with permission grant request.
// Otherwise, you just get the user's name.
var options = new FacebookAuthenticationOptions();
options.AppId = ConfigurationManager.AppSettings["Facebook.AppId"];
options.AppSecret = ConfigurationManager.AppSettings["Facebook.AppSecret"];
options.Scope.Add("public_profile");
options.Scope.Add("email");
options.Scope.Add("user_photos");
options.Scope.Add("user_about_me");
app.UseFacebookAuthentication(options);

Install the Facebook NuGet Package

In order to easily get access to the Facebook data, I used the Facebook.NET library. It’s easy enough to install:

Install-Package Facebook

Note: I used version 7.0.6 in this example. You should be able to find the latest version and changelog at https://www.nuget.org/packages/Facebook/7.0.10-beta

Handle the Facebook External Login Callback in AccountController.cs

Once Facebook has been configured, all requests from your website will direct to Facebook, where it will ask permission, and, if granted, will redirect back to the ExternalLoginCallback action in the Account controller. It is here that I suggest you retrieve the data you’ve requested from Facebook. You’ll then modify the associated ExternalLoginConfirmation View with fields to correct or remove any information from Facebook, then continue with the account creation process on your website. That’s the part where you’ll populate the ApplicationUser entity, or whatever you decided to call it.

It’s relatively simple, as shown in the code below. The steps are as follows:

  1. Get the Facebook OAuth token with a simple HttpClient call
  2. Make the request for Profile details using the Facebook.NET library
  3. Optionally, download the Profile photo and save it somewhere

Yes, I could split this out – refactor as you see fit, and feel free to share any optimizations.

Below is the change to ExternalLoginCallback to grab the data from Facebook after the redirect:

ExternalLoginCallback Code

If you’d like to get the profile image, below is an example:

GetProfileImage Code

 

Moving Forward

I hope this article has helped answer your Facebook integration questions. If you would like additional details, please post in the comments, or message me on Twitter: @Auri

Thank you!

I went back and forth between my code and various Telerik and Stack Overflow demos of how the Kendo grid is supposed to refresh its datasource without reloading the entire grid. Finally, Telerik sent me a code example that included a function that’s not in their API documentation, but darn well should be. So, if you’re having the same issue I did, where you want to call read() on your grid’s datasource, but it simply isn’t working, here’s an example from Telerik that may help you.

The function: getKendoGrid()

Now, I keep my createDataSource() function around so I can swap out the data I’m paging. Their example uses some sample data, but you could simply use their example of creating a datasource to call your back-end JsonResult action in MVC and things can still work magically.

I hope this helps others Smile

<body>
  <div id="grid" />
  <script>
    function createDataSource() {
      return new kendo.data.DataSource({
        transport: {
          read: {
            url: "/echo",
            dataType: "json",
            method: "POST",
           
            // Simulate response
            data: {
              "json": JSON.stringify([{
                firstName: "John",
                lastName: "Smith",
                age: 25
              }])
            }
          }
        },
        pageSize: 10
      });
    }
   
    var ds = createDataSource();
   
    $("#grid").kendoGrid({
      dataSource: ds,
      autobind: false,
      scrollable: false,
      columns: ["firstName", "lastName", "age"]
    });
   
    $("#grid").getKendoGrid().dataSource.read();
  </script>
</body>
</html>

And here’s a colorized version:

image

Below are my notes from Day 1 of the CEATEC show in Makuhari, Japan.

SAM_8159

Sony Info-Eye + Sony Social Live

Sony showcased two unique social apps, Info Eye and Social Live, part of their Smart Social Camera initiative.

SAM_8244

Info Eye takes an image and analyzes it for different types of information, surfacing that information in different views. For example, take a photo of the Eiffel Tower and you are presented with different "views" of the data. The first view may be related photos of the French attraction, such as a view from the top, or the Eiffel Tower Restaurant. Change views and you’re presented with a map of Paris. Continue to the next view and see your friends’ comments on social networks about the attraction. It certainly is an innovative approach to automatically get benefits from simple photo taking – photos you normally wouldn’t look at again anyway.

A video is worth thousands of pictures, and you already know what those are worth:

And in case you simply want a picture:

SAM_8249

Social Live is like a live video feed, streamed from your phone to various social services. While the example of a live marriage proposal wasn’t so realistic, Social Live still has great consumer applications. For example, set a social live link on Facebook and your friends could view your video feed while you tour the Champs Elise in Paris, without your needing to initiate a Skype call. It’s similar to having a live broadcast stream ready to go at any time.

3D 4K Everywhere!

3D didn’t entice the world – again – so, why not re-use all that marketing material, swapping 4K for 3D? No, it’s not that bad, and 4K is beautiful, but it’s just too early, too expensive, as is almost every evolutionary technology like this. Just for fun I  made a collage of the various offerings. Component innovation is once again creating products at a pace greater than the consumers’ willingness to adopt.

4K_AutoCollage_12_Images

Tizen IVI Solutions at Intel

Intel had a sizeable display of Tizen OS based In-Vehicle Infotainment solutions at its booth. Apparently Intel had 800 developers working on Tizen while partnered with Nokia on the OS-formerly-known-as-MeeGo. The most interesting Tizen demonstration was Obigo’s HTML5-based IVI solution. On a related note, Samsung is apparently folding their Bada OS into Tizen. It will be interesting to see whether it makes any difference in the global mobile OS movement, still dominated by Android, then iOS, then Windows Phone.

SAM_8250

Obigo’s HTML5-based In-Vehicle-Infotainment Solution

Obigo’s solution is to automotive application development what PhoneGap is to standard mobile application development. Developers build widgets using HTML5 + JavaScript, accessing vehicle data and services via an abstraction layer provided by the Obigo engine. Apps in Obigo’s system are called widgets. Nothing appears to prevent Obigo from bringing this solution to Android, so look for that possibility on the various Android vehicle head units coming to market. Hyundai and Toyota will be the first integrators of the system.

SAM_8213

Apparently Japanese Car Insurance is Very Expensive

Another solution shown at the Intel Tizen display was a driving habits monitor capable of sending an email to your insurance company with said information. The goal would be to lower insurance rates. The solution was a hokey implementation at best, but at least I’ve learned insurance is expensive here as well.

Fujitsu Elderly Care Cloud

In an effort to keep Japan’s increasingly elderly population in touch with their families, Fujitsu has created a "Senior Cloud." The benefit to seniors will apparently be video and photo communication and sharing services with their family, alongside healthcare detail sharing services. I couldn’t get a demo, but it sounds like a good idea. For the next 10-20 years, anyway – by then, the "elderly" will have become the people who know how to do these things.

SAM_8221

ModCrew iPhone Waterproofing Coat

ModCrew displayed a nano-coating solution for iPhones (only), rendering your fruit phone washable.

clip_image001

clip_image002

Omron Basil Thermometer with DoCoMo Health Smartphone App

Omron has a unique line of basil thermometers, with pleasant shapes and colors, targeted (obviously) towards women. The devices, among other Omron health device solutions, can all transmit their data via NFC to phones and tablets. Using an app from NTT DoCoMo, health data can be consolidated and analyzed, and health advice can be provided.

clip_image003

All health components gather data to recommend healthy choices.

clip_image004

Huawei Phone with Panic Alarm

Chinese consumer and mobile electronics provider Huawei showcased their HW-01D feature phone with a built-in panic alarm. Targeted towards women, children, and the elderly, the device has a pull tab that sets off a loud, yet oddly pleasant, siren to scare away would-be perpetrators.

SAM_8252

Fujitsu Finger Link

Fujitsu’s Finger Link solution uses a top-mounted camera to convert physical objects to virtual objects, enabling you to organize and relate such items for later manipulation. For example, put 3 Post It notes down and they are converted to digital representations, automatically recognized as separate objects. Tap each related item and drag a line between others similar to the first. Tap a button on the projected interface and now they’re related, moveable, sharable, and more.

clip_image006

Fujitsu Sleepiness Detection Sensor

A hot item in vehicles displayed at CEATEC this year was detection of distracted driving. Fujitsu’s component detects eyes moving away from the road, a downward or upward motion possibly signifying the driver is drowsy. The component is for use by automotive integrators.

clip_image007

Fujitsu big data + open data quiet service, LOD utilization Platform

Fujitsu showcased an open LOD utilization platform for quickly and easily mining and analyzing the data from many Open Data sources all at once, visually. The back-end is using the SPARQL query language.

clip_image008

Mitsubishi 4K LaserVue

Mitsubishi showcased a prototype 4K Red Laser + LED backlit display, enabling a beautiful, beyond photorealistic video display. Standing in front of the reference unit, I actually felt like I was looking through a window – the colors were amazingly vivid and lifelike.

SAM_8267

clip_image010

Mitsubishi elevator skyscraper swap detection system

Mitsubishi also showcased a solution for preventing elevator stalls in swaying skyscrapers. Their sensor moves the elevator cart to a non-swaying or less-swaying floor to prevent service outages, keeping the elevators running as efficiently as possible, and giving you one less excuse to miss that meeting.

clip_image011

Mitsubishi 100Gbps optical transmission technology

Mitsubishi showcased a 100 gigabit/second inter-city optical interconnect solution, with a range up to 9000 kilometers.

clip_image012

Mitsubishi Vector Graphics Accelerating GPU

Who says you need multi-core ARM processors running over 1 GHz + powerful GPUs for beautiful embedded device interfaces? Mitsubishi sure doesn’t. They showcased a GPU running at a scant 96 MHz, accelerating vector graphics display at up to 60 frames per second. Incredibly responsive interfaces for elevators and boat tachometers were displayed. The target is rich user interfaces with incredibly low power consumption.

Related notes:

SAM_8265

Mitsubishi Rear Projection Display for Automotive

It’s no surprise Mitsubishi is proposing rear projection solutions for automotive – RP is one of the company’s strengths. What they propose is curved surfaces to provide an interface that matches the interior of the vehicle. Also possible is 3D-like interfaces, as shown below.

clip_image013

Sharp Frameless TV Concept

A display with no bezel? Sharp’s frameless concept showcases how beautiful such a solution would be. That it in the center.

clip_image014

Sharp Mirror Type Display

Also on display (ahem) was the Mirror Type Display, with a display built into a mirror. Have I said display enough times?

Pioneer Wireless Blu-ray Drive

That shiny new ultrabook is pretty svelte, isn’t it? What’s that? You want to watch a Blu-ray? That’s fine – just use Pioneer’s BDR-WFS05J solution to wirelessly connect to the Blu-ray drive across the room and stream the data over 802.11N, as long as it’s in its dock. The unit also supports USB 2 and 3. Ships at the end of September.

clip_image015

Toyota Smart Home HEMS Using Kinect

Toyota showcased a smart home energy management system (HEMS) using Kinect to interact with various residents.

Toyota Concept Vehicles

I don’t know much about the following one-person electric riders, but they looked cool, so enjoy the photos.

clip_image016

clip_image017

Clarion Smart Access + EcoAccel

Determining whether you’re driving Green, or "Eco" as they say in Japan, can be difficult. Clarion’s EcoAccel app, which runs on their Android-powered head unit, reads ODB2 sensor data to rate your Eco driving habits. It’s an entertaining way to enhance the eco-friendliness of your driving routine. The representative said there are no current plans to bring this product Stateside, but I’m hoping they change their mind. After all, ODB2 data is pretty easy to read, even if it’s not entirely standardized.

clip_image018

clip_image019

clip_image020

Mazda Heads Up Cockpit

While the HUD component is nothing to write home about, Mazda’s approach of keeping everything at eye level, while re-organizing the shift knob to also be easily manipulated was a welcome safe-driving-meets-ergonomics approach. Better yet, they will be shipping this in their Axela vehicles, meaning less expensive vehicles may be readily receiving technology to deter distracted driving. They call this the Heads Up Cockpit with a Concentration Center Display.

clip_image021

clip_image022

clip_image023

Mazda Connect System

Mazda also showcased the Mazda Connect system, enabling car communication and software components to be "easily" upgraded as new features are available. Whether this will be an insanely expensive solution, akin to Samsung’s upgradeable TV approach, remains to be seen.

It’s fascinating to see how some of the most innovative products are coming from what used to be one of the least innovative industries: automotive.