Monday, October 30, 2017

3 Steps to implementing Azure Blob Storage with adhoc SAS Tokens and Xamarin

I couldn't find a cohesive and updated example on how to use azure blob storage, so I created a working example. Well, mostly working. There are a few issues.

What you'll find there is an example that
  • runs against the local storage emulator (using the UWP client)
    • If someone has the time to find out how to connect the android emulator to the local storage emulator, kindly answer here
    • to connect to the local storage emulator from an android emulator, use the following connection string: "UseDevelopmentStorage=true;DevelopmentStorageProxyUri=http://10.0.2.2"
  • runs against the azure cloud storage
  • uses connection string with shared keys
  • uses an ad-hoc Shared Access Signature (SAS) token to provide limited time access to storage containers
  • bonus: generate and view pdf documents using Syncfusion packages.
For mobile clients (web or mobile apps), you're going to want to steer clear of using shared keys as a means of authenticating with azure storage. Unfortunately this is the mechanism that most of the samples are using.
The recommended way to connect to your azure storage account is by retrieving a temporary SAS Token from a secure service, and then using that token to send and receive blobs from azure storage.

logo

So lets get started.

Step 1: Understand how blob storage accounts work. You can simulate azure storage using the local emulator (although with the SAS Token scenario this currently isn't viable due to the lack of https support), or create an azure storage account and containers.

Step 2: Create a secure server endpoint to serve temporary SAS Tokens. You'll find a ASP.NET Core example in the linked github repo. See the this implementation for generating and returning a SAS Token. More documentation on SAS Tokens can be found here.
The example stores the shared key connection strings in the appsettings.json file. You can provide different appsetings.[ASPNETCORE_ENVIRONMENT].json files, and toggle which one to use in the Properties/launchSettings.json file. 

Step 3: Create a client that retrieves the SAS Token, and uses that to create a container which is used to upload and download blob content. In the code example, the AzureBlobStorageService class is responsible for all the heavy lifting. The create container method will analyze the storage settings, preferring SAS Token connections over connection strings that contain shared keys.

To switch between different kinds of usage, you can toggle the implementation of ICloudBlobStorageSettingsProvider in App.cs , or create your own implementation.

When using the local storage emulator, make sure to read through the documentation on getting the emulator service started and using the storage explorer to analyse storage content.

Chances are pretty good I may have missed something in the code, so if you spot it, be sure to log an issue or better yet, submit a pull request ;)

Happy Coding.

Looking for an up to date sample using MAUI? See new repo here (sans Azure function for SAS token)


Daily Links 30 Oct 2017


Time zone conversion in Xamarin Forms XAML using NodaTime

Azure Tips and Tricks Part 33 - Prevent Changes to Resources in Azure App Service

Using Azure Storage in ASP.NET Core

An Elasticsearch Tutorial for .NET Developers

Reducing apk size : A quick hack!

Visual Studio 2017 Update 4 makes it easy to modernize your desktop application and make it store ready

Get Fluent with the XAML Controls Gallery

Get Started with Azure IoT Technical Training for Developers

Transient Fault Handling in Xamarin.Forms using Polly

Validating User Input in Xamarin.Forms IV

Best Practices for Designing a Pragmatic RESTful API

Android Studio 3.0

5 Things to Love about GraphQL

Exploring GraphQL and creating a GraphQL endpoint in ASP.NET Core




Tuesday, October 17, 2017

Mobile App On-boarding with Xamarin Forms and Syncfusion

In my previous post, I talked about how awesome xamarin is for creating cross-platform mobile apps. I’ve been thinking a lot about customer on-boarding recently, so I thought I’d do another proof of concept app to illustrate it using xamarin.
As before, I prefer using real companies to illustrate the point. I’m a big fan of Highrise, and how they build product, so I thought they’d make a good candidate this time around, especially since they’re pretty transparent about their processes and value proposition, so it was pretty easy to generate content.
Here’s a quick walk-through the result:



So I’m not going to go into too much technical details here — if you want to check out the source code, check out the github repo. Instead I’m going to break down the app page by page:

The Splash Page

There’s nothing great about the android splash screen, except to note that it’s a 9-patch image, which scales and stretches no matter what orientation or screen size the device is.

The Welcome Page

This page is really the main point of doing the proof of concept. It’s the first thing potentially new customers will see, so it really needs to sell your value proposition. Highrise recently went through a jobs-to-be-done exercise with their customers, and came out with three main points, which you’ll now find on their homepage. So it makes sense to have this on the landing page, along with sign up / sign in options. (Here’s another example of this pattern from Charlin Agramonte). As in Charlin’s example, and this one, it’s a good idea to have some sort of movable media to draw the user’s attention. In this case I’m using the wonderfully cross-platform Lottie Animation Xamarin Bindings from Martijn van Dijk.


Points of interest on this page:
  • Xamarin Forms animation is used to sequentially animate the buttons and ‘more about highrise’ controls
  • the layout and logo image sizing is adaptive to the orientation of the device.
  • The Syncfusion Rotator control is used to automatically cycle through the value proposition animations
  • A ‘learn more’ link in case the user needs some more information before submitting credentials — such as pricing etc.

The Sign In / Sign Up Page

These pages are pretty basic. Keep it simple. Animations purposefully left out of this page as they would detract from the important info, which is the data entry.
Points of interest:
  • Making use of the floating label design pattern for data entry. This increases the available real estate when working with entry controls
  • The button animates in to draw attention to the text. Don’t worry — it doesn’t flash, that’s just the gif animation recycling :P
  • The logo becomes invisible when the device is in landscape mode to ensure enough real estate for the entry fields

The Landing Page

Okay, so the user made it through the signup process, but still has no idea (or at least very little) what the app can do. The idea conveyed here is to guide the user with visual queues, and get them to do the simplest action that is the main value proposition of the app. In this case it’s creating a contact.


One other thing I wanted to play around with was gamification. So once you’ve created that first contact, the app gives an immediate reward of unlocking your first achievement, along with links to other help topics and features the user may find useful.

The other thing to be aware of, is giving your users opportunities to share their app experience via social messaging. The Landing Page has a generic ‘I think Highrise is awesome’ share button in the toolbar, and each user achievement has a ‘I just achieved X with Highrise’ share link.

Some more links for related reading

Syncfusion Controls
I used the Rotator and ListView (with left and right swipe actions) controls for this project. I also added an animating radial menu control to the contact page, but it’s not working atm.
Have any thoughts on mobile app on-boarding? Feedback and share them in the comments.



Wednesday, October 11, 2017

Health Care Provider Booking Platform: Proof of Concept Cross Platform App using Xamarin and Syncfusion

So about a month ago, fueled by a conversation with a startup CEO, I decided to write a small app as a proof of concept for building an app that is cross platform, in a short period of time.

You can find the original Medium post here

Good stuff first: Demo Video Time :) 



You can find the source code on GitHub 

In there you'll find code for:

  • Using the geolocator plugin to find the current gps location. code
  • Launch the native device map with a location for directions. code
  • Store data in a sqlite repository. code
  • Schedule Picker control from syncfusion. code
  • Image Circle plugin. code
  • Some fade in animations on the login page. code
  • Syncfusion ListView control with swipe action templates. code
  • Share plugin to share content via registered apps like email and twitter. code
... and a bit more generic stuff like MVVM & Command pattern implementations ; navigation service ; dependency injection using Autofac etc.

Xamarin Forms really is a super productive, fully native and completely extensible option for cross platform mobile development :)




Daily Links 11 Oct 2017

Xamarin Test Box, the first local test server.

Creating an extension method for attaching key-value pairs to scope state using ASP.NET Core

Running xUnit Tests with VSTS

Little ASP.NET Core Book

Beautiful Xamarin – Facebook Clone in Xamarin.Forms

How to configure log4net on Azure App Service

Develop (and test) a dockerized, PostgreSQL backed, ASP.NET Core microservice in less than an hour

3 Reasons to Try Xamarin Previews in Visual Studio 2017

5 Common Pitfalls In Enterprise Mobile Development

Handling System Failures during Payment Communication

Bringing WebVR to everyone with the Windows 10 Fall Creators Update

Xamarin.Forms Updates

AUTHENTICATE USERS THROUGH FACEBOOK USING XAMARIN.AUTH






Friday, August 18, 2017

Xamarin Forms: Floating Label Entry View Control

Following on from some of my other posts on tweaking some controls for xamarin forms (like the ToolbarItem and GridView), I thought it would be handy to implement something along the lines of the floating label pattern as outlined here by Brad Frost.
Here’s a look at the output on Android, iOS and Windows:
Don’t get confused: there are labels on the UI to output the binding that the entry controls have – download the code and run the samples.
image
The idea was to have a single control that contained both the label and entry (the placeholder animates out into the label when text replaces the placeholder value)
Here’s what using the xaml looks like:
image
As per usual, you can check out all the source code here
In the future I hope to add some things like validation support. Other options are also perhaps some of the nifty image support that was recently posted by Charlin here
Happy Coding!

Daily Links 18 Aug 2017

Transient Fault Handling in Xamarin.Forms

Multiple Android builds on Xamarin Forms

Mobile Database Bi-Directional Synchronization with a REST API

Ethereum smart contracts in a nutshell for hackers

Managing Data in Microservices

Image Entry in Xamarin Forms

Xamarin Forms Async Task On Startup

Introduction to the ApiExplorer in ASP.NET Core

MOVE FAST, DON'T BREAK YOUR API

Insomnia: Free REST Client

The Visitor Pattern Explained

Web Applications with ASP.NET Core Architecture and Patterns guidance

Quick and Easy ASP.NET Identity Multitenancy

ASPNET-Core-2.0-Stripping-Away-Cross-Cutting-Concerns

GraphiQL in ASP.NET Core

The GitHub GraphQL API

Airbnb Javascript Style Guide

Exploring refit, an automatic type-safe REST library for .NET Standard

LiveXAML and Xamarin.Forms


Tuesday, July 11, 2017

Mobile Cross Platform Image manipulation with Xamarin (Android / iOS / Windows UWP)

There are some common image functions I tend to need a lot with mobile apps.
These are:
  1. Resizing images – usually with a specific size in mind
  2. Knowing what size and existing image is
  3. Converting an image between png and jpeg formats
I recently particularly needed these kinds of functions for including images in pdf documents (more on cross platform pdf generation here)
All the source code for the above can be found here, and the nuget package is available here.
All the code assumes images are in byte[] format – what you’d normally use for storing images in database repos etc.
As an aside – there’s a separate Xamarin Forms Value Converter nuget for binding a byte[] image to an ImageSource here
For all the code, you can choose to use the command interface, or the ImageTools interface, which wraps the functionality in explicit method calls.
     image

Resizing an Image

This is the most common requirement for image manipulation.
Images taken from disc, or using the camera are usually way to big to be included for wire transfers or light weight repo stores. Other usages are perhaps generating a pre-defined size thumbnail image.
IResizeImageCommand resizeCommand = DependencyService.Get<IResizeImageCommand>();  
ResizeImageContext context = new ResizeImageContext  { Height = 130, Width = 130, OriginalImage = image  };  
var resizeResult = await resizeCommand.ExecuteAsync(context);  
if (resizeResult.IsValid())  
{  
   image = resizeResult.ResizedImage;  
}  

Analyze an Image

Sometimes you just want to know what the dimensions of an image is, or what size it is, or in what orientation:
 var analyseImage = DependencyService.Get<IAnalyseImageCommand>();
var analyseResult = await analyseImage.ExecuteAsync(new AnalyseImageContext { Image = imageAsBytes });
if (analyseResult.IsValid())
{
   var imageWidth = analyseResult.Width.ToString();
   var imageHeight = analyseResult.Height.ToString();
   var orientation = analyseResult.Orientaion.ToString();
   var size = analyseResult.SizeInKB.ToString();
}

Convert an Image (Png and Jpeg support only)

I needed this recently because the pdf library I was using only supported jpeg files.
var imageTools = DependencyService.Get<IImageTools>();

var convertResult = await imageTools.ConvertImageAsync(new ConvertImageContext(Logo, ImageFormat.Jpeg));
if (convertResult.TaskResult == TaskResult.Success)
{
   ConvertedLogo = convertResult.ConvertedImage;
   ConvertedSize = ConvertedLogo.SizeInKB().ToString();
}
Here I’m using the ImageTools dependency – you could just as easily have used the command as in the first two examples.
…. I haven’t tested all the platforms extensively, so if you find a bug, feel free to log an issue on github, or better yet: a pull request with the fix.

Thursday, July 6, 2017

Generate pdf documents for iOS, Android & Windows UWP using Xamarin Forms and Syncfusion Essentials–Part 2

Part 1 of the post can be found here
There I talk about getting started, and generating a simple pdf invoice.

The updated source code is in the same repository here
Code of interest is in the GenerateInvoiceCommand, the PdfGenerator & PdfExtensions

Today, I’m going to be talking about generating line items for the invoice. Here’s a screenshot of the generated result on all three platforms:
image
    
With Syncfusion Essentials Pdf, there are two main options for this: PdfLightTable & PdfGrid

After having implemented both, I don’t really see why both exist – the effort and functionality is about the same for both options.
I can say though, that PdfGrid definitely seems the more stable of the two – I found a few bugs in PdfLightTable along the way.

A look at the result: PdfLightTable on the left, and PdfGrid on the right

imageimage

Some things to consider (included in the sample code above)

More documentation on pdf grid and light table can be found here

Adding data

Both types used direct data-source methodologies.

Grid:
image

LightTable:
image

Sizing columns to content

Unfortunately this isn’t as simple as it should be. Static widths are easy – content not so much.
I created extensions for both LightTable and PdfGrid here (currently LightTable doesn’t appear to work)
Currently we have to cycle through all the column data, and measure which is the longest text, and then set the width to the max content width, hence the need for data, page width and font used.

image

Styling the table

PdfGrid has some built-in styles, as well as customization
image

LightTable you can customize the same as with PdfGrid – I created an extension to apply the most common properties to mimic the built-in style of the PdfGrid
image

Paginating the data

This applies to both table types, although again, LightTable seems to have some trouble honoring the PageinateBounds property – which is needed to the table doesn’t render over any footer data.
image

Drawing the pdf document

image

simple enough.

There’s tons more functionality in syncfusion’s pdf library – go check it out.

Clone the repo and play around with the code - and log an issue if you find any bugs in there :)

And don’t forget syncfusion’s awesome community license that  offers their controls free for indie hackers and small businesses.

Tuesday, May 16, 2017

Xamarin Forms: GridView Control

So I was busy with my nightly dev sessions, building the next big startup product [read side-project], when I ran into what I thought was a fairly simple requirement:
I wanted to show a list of stuff in a template of an item that was in a ListView.
image
Turns out hosting a ListView inside a ListView doesn’t work out so well. Besides it being a rocket ship when I only needed a small car, it just doesn’t work. You see, the ListView has some sizing issues that doesn’t make it a great candidate for said scenario.
Now unless I’m missing something here (which is quite likely), I couldn’t really find any Xamarin Forms control that hosted a simple list of items, without needing properties like grouping, selecteditem etc.
After some searching on the interwebs, I came across this really simple example of what I needed from Chase Florell. (I’ve since happened upon this contribution by Daniel Luberda, which also looks pretty decent). It met my very basic requirement of a simple list of stuff, minus some handy bindings, so I set out to edit the code.
You can see the results (source code and sample project) here
Basically, you can create a tile-like layout with N many columns. The content of the “tiile” can be any template you like.
Sample Xaml:
image
The control also supports ItemTappedCommand, which will call a delegate and pass the selected data item as a parameter.
The default for MaxColumns is 1 – which will give you a simple list as illustrated at the top of the post. More columns will give you something like:
imageimage
I wouldn’t use this implementation for more than about 20 or so data items, as there is no cell recycling as you would get in a ListView, but for very basic scnenarios, I’ve found this simple implementation good enough.
As a side note, I’ve also moved the previously mentioned Bindable IsVisible ToolbarItem control to the linked repo, in addition to a few other very basic controls like an Editor that expands as you type, a ListView with ItemClickCommand and default RecycleElement mode, a floating label pattern Entry (pending), and a simple WrapLayout (which I’ve used in combination with an AddStringEntry to create a Tag List)  - which I’ll cover in subsequent posts as I find the time.
Note: FlexLayout & RelativeLayout are new controls coming in Xamarin Forms 3.
Xamarin FTW Smile

Saturday, March 11, 2017

Essential Visual Studio 2017 Tools & Extensions

Web Essentials 2017
Wrapper for many handy extensions such as File Nesting, Image Optimizer, Markdown Editor, Open Command Line & HTML Tools

Productivity Power Tools 2017
Another wrapper for extensions like Ctrl+Click GoTo Navigation, Power Commands for Visual Studio & Copy As Html

XAML Styler 
Format your XAML on save - consistent and readble XAML Style implementations

CodeMaid
Cleanup and format your code. Multiple language support

NUnit 3 Test Adapter
Run NUnit tests in Visual Studio
...also consider xUnit unit testing

Cloud Explorer for Visual Studio 2017
View your cloud resources, inspect properties, and perform key developer actions from within Visual Studio

ResXManager
Central access to all ResX-based string resources in your solution

..any other essential extensions you can't do without? Share in the comments below.





Saturday, March 4, 2017

Xamarin Forms: ToolbarItem with Bindable IsVisible Property

It's fairly typical for toolbar items to change depending on the state of the model that the view is bound to (quite another thing if it's considered good UX).

Unfortunately Xamarin Forms doesn't have an IsVisible property on it's ToolbarItem control, so I had to hunt for a sample implementation.

A found this handy thread on the Xamarin forums.
Basically create a custom control that inherits from ToolbarItem, add a bindable IsVisible property, and add /remove the toolbar items as the property changes.

I made some minor modifications, and added the source code here

Happy Coding :)



Daily Links 4 Mar 2017

The 12 Factor App

Building Single Page Applications on ASP.NET Core with JavaScriptServices

Realtime Databases with the Realm Mobile Platform

Penny Pinching in the Cloud: Running and Managing LOTS of Web Apps on a single Azure App Service

Xamarin Forms ListView Grouping

Xamarin.Forms Android Selected & Unselected Tab Colors

Xamarin Forms Tab Badge

Azure App Service Secrets and Web Site Hidden Gems

What is scope and closure in JavaScript?

Writing Jasmine unit tests in ES6

Getting Started With WebAssembly in Node.js

Parsing And Serializing Large Objects Using JSONStream In Node.js

Azure App Service Authentication in an ASP.NET Core Application