Kimserey's blog

Authentication for WebSharper sitelet with Jwt token in F# Authentication is an important part of any Web applications. Today I will explain how we can create the essential modules required to authenticate a user. This post will be composed by four parts: 1. What is needed for authentication 2. Password encryption and storage 3. JWT token 4. OWIN auth middleware and WebSharper OWIN selfhost 5. Glue it all together 1. What is needed for authentication In this blog post we will see how to authenticate users with credentials userid and password. First, we will see how to store encrypted password and how we can verify credentials against the one contained in database. Then we will see how we can authenticate users while communicating between client (browser) and server with Jwt token. Lastly we will see how both glued together provide a reliable authentication story. 2. Password encryption and storage 2.1 Storage To store data I will be using Sqlite via Sqlite net pcl. If yo...

Create a Splash screen for your Xamarin.iOS app to be used with Xamarin.Forms project Few weeks ago I explained how we can create a splash screen for Android . Xamarin.Forms takes few seconds to load at each start so it is important to provide a feedback to the user when they click on our icon. The splash screen answers that by providing a way to show a loading screen. Today we will see how we can setup a simple splashscreen with an image centered and with a text label. This post will be composed by 3 parts: Create the splash screen Understand layout constraints Layout the splash screen 1. Create the splash screen When creating a Xamarin.Forms project, the iOS project gets created with a Launchscreen.Storyboard. Compared to Xamarin.Android, this screen is already configured to show until your app has been fully loaded in the background. Open the storyboard and the storyboard editor should appear. Our splash screen will be composed by an image with a simple text therefore dr...

Use FontAwesome on your Xamarin.iOS app with Xamarin.Forms Few weeks ago I explained how we could use FontAwesome from our Droid project, you can read the post here . Following the same idea, today I will explain how we can use FontAwesome on an iOS app with Xamarin.Forms. This post is composed by three parts: Import of font into iOS project Define custom renderer Use from Xamarin.Forms 1. Import of font into iOS project Import the font in .ttf format by placing it under Resources. It should then become a BundledResource. Next in Info.plist, add a new entry Fonts provided by application and add the path to the font from Resources folder in the values. Once you have done this, the font should be available to use. 2. Define custom renderer Similarly to the Droid project , we need to create a custom renderer and overwrite the following function: OnElementPropertyChanged(...) This function is called by Xamarin when the properties of the element change. For example when the ...

Get started with SQLite in from Xamarin.Forms Today I demonstrate how we can leverage sqlite to save data on mobile which can be useful for local application or to store cached data. In this post, I will show how we can use Sqlite from Xamarin.Forms in an Android application. This post will be composed by 3 parts: 1. Get Sqlite.net 2. Dependency service and database path 3. Use Sqlite from Xamarin.Forms 1. Get Sqlite The library that I always use is SQLite.net-pcl from praeclarum https://www.nuget.org/packages/sqlite-net-pcl/ .To not be confused with another SQLite.Net-PCL which is a fork of the original. To get started, simply install Sqlite in the Android project and in the Xamarin.Forms project. Once installed, Sqlite namespace should be accessible. And we should also have access to SqliteConnection . In order to start a connection, we need to provide a database path. The database path is platform specific. It is usually stored in a private folder of the application and is not...

Use Font Awesome from your Xamarin.Forms project Icons are important in mobile applications where space is limited. We use icon everywhere to convey action intent like + would be to add an item or a bin would be to delete one. There are two ways to add icons to our mobile app: with images with fonts Today we will see the second option - how we can add Font awesome to our Xamarin.Android project and how we can use it from Xamarin.Forms. This post will be composed by three parts: 1. Why Font Awesome 2. Add Font Awesome to the Droid project 3. Use with Xamarin.Forms 1. Why Font Awesome If you are familiar with Web development, you must have encountered Font awesome http://fontawesome.io/ . It is an icon font containing lots of icon for every type of usage. The advantaged of using a font is that we can leverage the text options, like text color or text size, to easily update the style of the icon to match our app. Let’s see how we can bring Font Awesome to the Droid pro...

Output logs in Console, File and Live stream for your WebSharper sitelet Logs are an important part of development. Extracting and analysing debug output and errors is very important especially when the web server goes live. In this post I will show how we can setup a Console target , a File target and a Live stream on a static HTML page using NLog . NLog is a log framework which can be configured to output logs on different “target”. https://github.com/nlog/NLog/wiki/Targets This post is composed by 4 parts: 1. Get NLog on your sitelet 2. Define a Console target 3. Define a File target 4. Define a Live stream target - WebSharper part 1. Get NLog on your sitelet First start by getting NLog and NLog.Configuration packages from nuget. This will install NLog package in your project and also add an xml configuration nlog.xml file with an xsd. To start logging, simply get the logger instance via let logger = LogManager.GetCurrentClassLogger() and start logging by using any o...

GIMP - Alpha channel, what is it? Few months ago I made a first introduction to GIMP - https://kimsereyblog.blogspot.co.uk/2016/09/gimps-primary-features.html - the post was oriented toward the toolbox and what features were available. Today I would like to share an explanation on what the alpha channel is and show you how you can outline text using the alpha channel. 1. What is the alpha channel The channels tab can be seen from the Layers view. There are 4 channels, Red, Green, Blue and Alpha. The alpha channel is used for transparency. Transparency means that when you export to .png, the transparent parts of your image will show whatever is underneath. This is very useful for apps icons or images for web design. When your layer does not have an alpha channel, its name should be bolded. When it has one it should not be bolded. Also when right click on the layer, Add alpha channel should be grayed out. Having an alpha channel allows us to add transparency to our image....