Kimserey's blog

Transform your WebSharper web app into a Android mobile app with Xamarin.Forms WebView With WebSharper , it is easy and quick to build Single Page Applications (SPA) in F#. If you followed my blog, you must have noticed that I regularly post about WebSharper functionalities. Building a SPA using F# is one of the reason why I started to look into WebSharper. It is also the subject of one of the first blog post I wrote. https://kimsereyblog.blogspot.co.uk/2015/08/single-page-app-with-websharper-uinext.html Last week I covered how to build a cross platform mobile app with Xamarin.Forms and I showed how to deploy it to an Android VM. https://kimsereyblog.blogspot.co.uk/2016/05/setup-your-environment-to-build-android.html Today, I would like to show how to embed a SPA built with WebSharper in F# into a Xamarin.Forms WebView to quickly transform your web app into a mobile app . This post is composed by three parts: Build a simple SPA Build a Xamarin.Forms WebView Embed your SPA i

Understand the difference between Direct and Inline attributes in WebSharper In WebSharper, there are two keywords to bind JS code to our F# code - Direct and Inline . The documentation about the attributes can be found here http://websharper.com/docs/translation . I have demonstrated the use of it in previous blog posts: External JS library with WebSharper in F# Sort, drag and drop in UI Next with Sortable Although the documentation has some explanation about it, I still feel like it is pretty vague. So today I would like to give more explanation about the differences between Direct and Inline . This post is composed by three parts: What is Direct ? What is Inline ? Which one to choose and when? 1. What is Direct ? Even though WebSharper does a very good job to allow us to write JS code in F#, some functions are still better written in JS directly. That is where Direct comes into action. Direct allows us to create a placeholder functions which can be used anywhere

Setup your environment to build an Android app with Xamarin.Forms in F# From VMare Windows running on OSX Sometime setting up a development environment is enough to discourage developers to experiment certain platforms. Most of us (if not all of us) in .NET already heard of Xamarin. But to start working on Xamarin, you need to setup an Android VM and setup the IDE in order to deploy on the Android VM. And it gets worse if, like me, you run Windows on VMWare on OSX (and you want to code in F#). Few months back, Xamarin was kind of a no-no for indie development due to the pricing. But since it merged with Microsoft, it is now free! It means development with Visual Studio does not require a business license anymore and we can now develop Xamarin.Forms libraries in F# easily! Last week I started to explore Xamarin.Forms through Android. So before I forget how I setup the environment, I wanted to document it by sharing it with you in this post. How to start building Android app with Xa

Deploy your WebSharper selfhosted web app on Azure Last week I talked about how to read text from an image using a OCR library . I explained the whole process of creating the web app but I omitted to explain the deployment to Azure. So today I would like to fill this gap by showing you how I deployed the selfhosted web app on Azure. This web app makes use of the WebSharper selfhost template which is composed by a WebSharper sitelet mounted on a OWIN selfhost . What are the steps to deploy a web app on Azure? In order to make the web app available on internet, there are four steps to follow: Create default template WebSharper client server selfhost Bind to all interfaces Add urlacl (optional) Deploy to Azure 1. Create default template Websharper client server selfhost Go on github and find WebSharper’s releases and get the latest vsix (Visual studio extensions). https://github.com/intellifactory/websharper/releases Install it and you will have access to all Websharper t

Extract text from images in F# - OCR’ing receipts! Last week I talked about how I used Deedle to make some basic statistics on my expenses. Using my bank statements, I showed how to categorize, group, sum and sort expenses in order to have a better view on where the money goes. It was helpful but I realised that instead of checking each transaction from the bank statement, it would be better to track individual item purchased. A lot of expense trackers work this way. We need to input every expense one by one manually. It takes a lot of time which is why I always ended up not using them. I needed to find a faster way. Today I will share with you how I built a webapp which - takes an image and extract the text . You can view the site live here and the source code is available on my github here . I went through four phases before being able to build this prototype: Use Tesseract OCR - .NET Dont’ try to train Tesseract Use ImageMagick to clean the image and try again Boot up a