Posts

Showing posts from May, 2016

Transform your WebSharper web app into a Android mobile app with Xamarin.Forms WebView

Image
Transform your WebSharper web app into a Android mobile app with Xamarin.Forms WebViewWith 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.htmlLast 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.htmlToday, 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 SPABuild a Xamarin.Forms WebViewEmbed your SPA in the Android app1. Bu…

Understand the difference between Direct and Inline attributes in WebSharper

Understand the difference between Direct and Inline attributes in WebSharperIn 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 SortableAlthough 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 in our code. During JS translatin, th…

Setup your environment to build an Android app with Xamarin.Forms in F#

Image
Setup your environment to build an Android app with Xamarin.Forms in F#From VMare Windows running on OSXSometime 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 Xamarin.Fo…

Deploy your WebSharper webapp on Azure easily

Image
Deploy your WebSharper selfhosted web app on AzureLast 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 selfhostBind to all interfacesAdd urlacl (optional)Deploy to Azure1. Create default template Websharper client server selfhostGo on github and find WebSharper’s releases and get the latest vsix (Visual studio extensions).https://github.com/intellifactory/websharper/releasesInstall it and you will have access to all Websharper templates from Visual studio.C…

Extract text from images in F# - OCR’ing receipts!

Image
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 - .NETDont’ try to train TesseractUse ImageMagick to clean the image and try againBoot up a OWIN selfhost WebSharp…