Docker for beginners - presentation

~ Docker ~

I- Introduction
II- Docker presentation
III- A simple [MySQL / phpMyAdmin] docker example
IV- Docker in Windows, how to ?
V- Simple Docker glossary
VI- Links


I- Introduction


There are enough websites to introduce to you Docker in detail. This presentation will just remind you the key concepts of Docker. In my posts, I will always talk about Docker embedded in the Windows environment but I presume, all given information will also be valid for Linux and other OS.

So, what are we going to see in this post ?
As I said, we will remind the key concept of Docker, then we will list some common use cases and all the basic related commands. I will share some links at the end of the post if you want to go deeper with Docker. Let's go !


II- Presentation


Docker is 'just' a technology used to virtualize environments (named containers) in order to run specific applications. It acts like traditional virtual machine but it's much more lightweight. Take a look at the following diagram:
- Both VMs and containers will be installed on a (dedicated) machine. For Docker, we talk about a Docker machine.  In my case, I will use a Windows PC. Docker engine will (after being installed as we will see just after), comes in place of the traditional Hypervisor.

- Over the 'Docker engine' layer, we will setup containers. Containers are isolated spaces that contain only libraries used to execute wanted applications or services. So it's much more lightweight / easy to configure. You don't need to install a full OS anymore.

- In a container, you can install applications (like MySql) or services (like nodejs). To install wanted applications, you will surely use Docker images. There are already many available images on Docker hub website (see links at bottom).


III- A simple [MySQL / phpMyadmin] docker example


Scenario 1: using a MySQL database

Imagine, you are working on a project (a Windows one) that use a database like MySQL.
To setup / test your application you have several possibilities:

- you own a remote Linux server that you can use to install a MySQL instance on. So you have to configure your server, then install MySQL then you need to restore Dumps and configure it to be accessed from the outside.

- you can do the same with a cloud service like Azure

- or you can install on your Windows development machine, something like a WAMP server, then configure it.

You will need to do something like that:
Using a Linux Server (can be a Virtual Machine)


>> You can see that:
- you need to get access to a Linux server (it can be a virtual machine)
- there are many (traditional) steps to setup, configure, securize, backup your server and SQL instance.
- then your development environment must have access to this Linux server. Sometimes, it's not so obvious because of network configuration...

Here is what you can get with Docker:

Using Docker containers on Windows

>> Now you can see that you just need one environment:
- it's faster to setup
- but it's also faster to backup if needed
- Containers need less resources than a traditional VM.
- Pre requisite is to install Docker engine



Scenario 2: managing your Database with phpMyAdmin

Ok that's cool, but I need to manage my Database. In Docker, you still have several possibilities to do that, like on a real Linux server:
- using a batch composing your SQL commands
- or using a tool like phpMyAdmin

Using MySQL batch

docker exec -it expdb_db_1 mysql -u root -p




This simple command enables you to type your SQL Commands from a command prompt. Note how we connect to the 'MySQL container' using "docker exec"...


Installing a new container: PhpMyAdmin

But you can also install a new docker container with PhpMyAdmin !
It's really fast and  you just have to configure it to target the existing MySQL database.
Adding new container: PhpMyAdmin

And,  in a very few steps, we get access to our MySQL database using a new container:

phpMyAdmin container installed in a few clicks


IV- Docker in Windows, how to ?

Download Docker for Windows

Using Docker in Windows is pretty easy. The first step is to install Docker Engine on your machine. For that you can go directly here, every steps are well explained (package size about 500Mb):
>> https://hub.docker.com/editions/community/docker-ce-desktop-windows

Docker engine installed

Docker service running on Windows

Docker Hub

Then you can create an account on Docker Hub, the entry point for all your Docker's images:
>> https://hub.docker.com/




Getting started guide

Then follow this "Getting started" guide:
>> https://docs.docker.com/docker-for-windows/



Kinematic client to manage your containers

There is a Windows tool to manage your container. It's the Docker Toolbox called Kinematic:

Kinematic - Docker Toolbox


V- Simple Docker Glossary

Here are a few words you will always see going deeper into Docker.


Docker machine:
This is the host machine for the Docker engine. You will install your containers on this machine

Docker Image:
An image represent an application / service you want to install as a Docker container. Image embed minimum required libraries in order to make you application executable.

Container:
The container is an (configured) instance of a given image on your Docker machine.

Docker file:
This is a file grouping a set of commands needed to generate a container from a given Docker image.

Docker-compose:
It is a tool that you will surely use later, to define and execute multiple containers. These containers can "communicate" so Docker-compose also enables you to configure containers networks and volumes to store shared data.
When your compose file is set up, you just need one command to execute all of your configured containers.


More, more, more... here: https://docs.docker.com/glossary/


VI- Links


(FR) Good introduction: 
https://bacarybruno.me/docker-premieres-impressions/

Docker hub image repository: 
https://hub.docker.com/search?q=&type=image

Official Docker configuration:
https://docs.docker.com/get-started/

Kinematic (client to manage your containers):
https://kitematic.com/

Docker compose:
https://docs.docker.com/compose/



So that's it, now you can go deeper into Docker ! 😎💨

Understanding .NET Standard



If as me, you don't really understand all subtleties between .NET Core and .NET Standard, I suggest you to have a look at the following article.
It explains some history about .NET Framework and how .NET Standard is born.



Which version to use ?

For me, an important point to master for my own projects, is to know which platforms I can reach with a specific .NET Standard or .NET Core library. The following table illustrate the compatibility between each .NET implementation:




For instance,

  • - if you build a Xamarin Android v. 7.0 application, you could use versions 1.0 up to 1.6 .NET Standard librairies into your project


  • - or if you have a .NET Standard v. 1.4 library, you could only build Android  v. 7.0  applications ( not v. 8.0)


Intersting References about .NET Standard:

Xamarin blog: A brief history of .NET Standard

.NET Standard official website

.NET Standard, table version video

Convert shared or PCL project into .NET Standard one



Full Xamarin Documentation available on Microsoft.com


New 'Xamarin' menu available

If you are a Xamarin developer, you will be happy to know that the "full" Xamarin Platform's documentation is now available on microsoft.com website. This website looks really clear, so it should be easy to find what you need...

Microsoft documentation portal: https://docs.microsoft.com

If you select the "Xamarin" menu, you will be redirected to the following page:



This is the entry point to many chapters describing the platform like:
- technical / language documentation
- UI (with XAML) documentation

but you will also find:
- deployement tutorials
- mobile continuous delivery tutorials
- data / database articles
- code samples
- and so much more !


So let's go coding Xamarin !


Set your browser on Fire with P5.js



This post is made for those (like me) who like image processing, web development and maybe, for those who want to learn new programming technics...

- I will make you discover p5.js, a javascript library specialized in graphical creation for your web browser !

- I will also talk about the the Youtube channel "The Coding Train" presented by Daniel Shiffman. A lot of its videos are based on P5.js. It was for me a great source of inspiration and made me discover javascript (because I'm a newbie with JS...) So I'm pretty sure, you will learn a lot too...

- Finally I will present you my personnal example of what I did with P5.js. It's about an old retro fire effect (used in demoscene few years ago) :)


So let's begin with p5.js !


I- What is P5.js ?


a- Presentation

As I mentionned it previously, P5.js is a graphical Javascript library. With it, you will be able to make great effects in your web pages in a few minutes. 
This lib has been created by Lauren McCarthy (http://lauren-mccarthy.com/) in order to provide an educational tool used to understand graphical programmation basis.

Start here:
https://p5js.org/community/


b- And what can I do with this lib

This library is pretty simple to use. It is composed of the following main groups of functions:
- Drawing shapes and images. It includes the loading of 3D models !
- Managing colors (include saturation, brightness, contrast...)
- Functions to interact with your environment (including the listening off your hardware events like the mouse or the keyboard)
- some mathematical functions
- and other usefull tools...

You can have a look of all the API references here: https://p5js.org/reference/



c- Easy to start

If you are interested in playing with P5.js, it's super easy. You will find all you need on the website. Then you edit your code (javascript) in your prefered editor ! That's all.

You will also find additional libraries to get some sound / geolocation features / particles systems and much more ! Download only the one you need.




II- The coding train (youtube channel)

Now that you know about this tool, you are maybe wondering what you can do concretely...  The coding train is here to give you some ideas, (a lot of ideas !).

This Youtube channel is presented by Daniel Shiffman, a teacher that loves to teach :) He uses P5.js to implement a wide range of algorithms, from easy ones to complex ones like AI implentation and representation... Daniel is really clear and puts all its energy to make great tutorials. I presume you will like it too :)

If you are interested, I let you have a look to the channel:
https://www.youtube.com/user/shiffman/featured

Here are some of the tutorial video themes he made (but there is so much more !!):



Learn AI

More AI with Neural Networks
 

Make a Snake game in Javascript


Make retro effects (like a star field)


III- My sample, a retro fire effect !


For those who wonder how to implement a graphical effect, I will describe you my p5.js sample. It's a really simple sample but you will understand the key concepts of p5.js. 

I will share you the code, and for sure, you can play with it and improve performances or what you want.


a- Lib files

The first step is to download the library files. Then you should  make a new project folder with the following structure:

Your project folder

The child 'librairies' folder

b- sketch.js, draw your effect here

You will place all your code in this file. The 2 main methods needed by p5.js are the following:
- function setup ( )
- function draw ( )

The first one handle the page/effect initialization while the second is called several times per second to render the content. So here is the source code with all the steps commented:


// global parameters
var fireElemLenght  = 6;
var elemOpacity     = 255;

var fireLines   = [];
var fireWidth   = 0;
var fireHeight  = 0;

var nbColors    = 255;  // Nb Colors in the palette
var palette     = [];   // our color palette for the fire


// ======================================
// SETUP method 
// called 1 time during the page loading
// ======================================
function setup() {
  
  colorMode(RGB);
  createCanvas(800, 600);
  
  // 2D Fire: init size of fire
  fireWidth   = int(width / fireElemLenght);
  fireHeight  = int(height / fireElemLenght);
  print(fireWidth + ", " + fireHeight);
  
  // for each fire's 'lines'
  for(var i= 0; i<fireHeight; i++)
  {
    fireLines[i] = [];      // create the new line of fire pixels
    
    for(var x=0; x<fireWidth; x++)
      fireLines[i][x] = 0;  // Initialize to black
  }
  
  // generate fire colors palette
  initializePalette();
  
  // set black background
  background(0,0,0);
  noStroke();
}

// ======================================
// DRAW method
// called in the drawing process loop 
// ======================================
function draw() {
  
    // We clean the background each time
    background(0,0,0);
  
    // We generate a new base fire line (to make it 'move')
    initFireLine();
  
    // Compute the whole fire pixels
    fireGrow();
  
    // Display the result
    drawFire();
}

// ======================================
// > Initialize Palette mehtod
// You can update this process to change the fire colors
// ======================================
function initializePalette()
{
  // generate our 255 color palette
  // try to change colors composing the fire
  for(var i=0; i<nbColors; i++)
  {
    var val   = exp(i/10) - 1;

    var red   = map(val, 0, exp(7.5), 0, 255);
    var green = map(val, 0, exp(10), 0, 255);
    var blue  = random(50);
    
    if(green > 254) // check for colors range
    {
      red   = 255;
      green = 255;
      blue  = 255;
    }
    
    // check/erase for 'noisy' blue pixels
    if(red < 20 && green < 20)
    {
      red = green = blue = 0;
    }

    // add new color
    palette[i]  = color(red, green, blue, elemOpacity);
  }
}


// ======================================
// > initFireLine() method
// Make a new base fire line (randomly, to make the fire 'move' when it grows)
// Remark: Y axis is inverter on our screens ==> baseY = fireHeight-1
// ======================================
function initFireLine()
{
  // generate fire base (1st line) color ('randomly')
  for(var x=0; x<fireWidth; x++)
  {
    fireLines[fireHeight-1][x] = random(0,nbColors);
    fireLines[fireHeight-2][x] = random(0,nbColors);
    fireLines[fireHeight-3][x] = random(0,100);
  }
}


// ======================================
// > fireGrow() method
// Compute the whole fire, line by line. Start after the base line
// We compute each pixel color from its neighbors (a kind of median)
// It gives a blurry effect
// ======================================
function fireGrow(){
 
 // for each fire line
 for(var y=fireHeight-2; y>=1; y--)
 {

  // compute new fire color line 
  // based on the bottom & top lines
   for(var x=1; x<fireWidth-1; x++)
   {
       // Get neighbors colors
       var c1 = fireLines[y+1][x];
       var c2 = fireLines[y][x-1];
       var c3 = fireLines[y][x+1];
       var c4 = fireLines[y-1][x];
       var c5 = fireLines[y][x];

       // We make a 'median' color
       var newCol = int((c1 + c2 + c3 + c4 + c5) / 5) - 1;
       fireLines[y - 1][x] = newCol;
   }
 }
}


// ======================================
// > drawFire() method
// Drawing pass - to draw the fire from its computed matrix
//
// ======================================
function drawFire(){

  // foreach fire lines
  for(var y=fireHeight-1; y>0; y--)
  {
    // foreach pixel in the line
    for(var x=0; x<fireWidth-1; x++)
    {
      // get current pixel color index
      var idx = int(fireLines[y][x]);

      // check for color index limits
      if(idx<0) idx = 0;
      if(idx >= nbColors) idx = nbColors-1;
      
      // apply current pixel color
      fill(palette[idx]); 

      // Draw a square representing the current fire's pixel
      rect(int(x * fireElemLenght - (fireElemLenght / 2)),
          int(y * fireElemLenght + (fireElemLenght / 2)),
          fireElemLenght * 2 , 
          fireElemLenght * 2);
    }

  }

}


You should get something like that:










EMGU with Xamarin Forms guide [part 1]


I- Introduction, OpenCV and EMGU

Do you know OpenCV (Open Source Computer Vision Library: https://opencv.org/) ?  This open source library let's you work and play with images and videos with a lot of powerful image processing algorithms !  If you want some details, I suggest you to first navigate to the link above or search for 'OpenCV' on Google. 

Examples of OpenCV processing found on the web (filters, object detection, edges...):





EMGU is a .NET OpenCV wrapper. That means that you will be able to use OpenCV functionnalities in your .NET projects using C# for instance. EMGU is cross platform, so you will also be able to use it in your Xamarin projects ! That's great because there is no advanced image processing library in Xamarin.

In this article, we will talk about EMGU and list the steps to setup a Xamarin Forms project using EMGU. It may help you because, we must say that it's not a trivial task... 



II-What do I need to start ?

1- A licence please

The first thing you have to understand, is that you will need to purchase a commercial licence to use EMGU with mobile devices (so with Xamarin). You can refer to this page for all the details:
- http://www.emgu.com/wiki/index.php/Main_Page#Mobile_Devices



The website isn't so clear so here is the purchase link:
- http://www.emgu.com/wiki/index.php/Commercial_License_Purchase

2- iOS and Android libraries

Once you have purchased a licence, you will have access to a link where from you can download the libraries. In our case we need the iOS and Android libs.


As we will see in the next section, inside the extracted folders, you will find the source code but also:

  • - Needed Android libraries to be able to build your Xamarin Android projects
  • - Needed iOS DLL to be able to build your Xamarin iOS projects


Needed folder to build for Android:

Needed library to build for iOS:



III- Next, setup your Xamarin project to use EMGU


1- Create your project solution

First thing to do is to create a Solution for your project. In our example we will use Visual Studio to do this, but you can also try with VS for MAC. See picture below:



EMGU does not provides PCL library, that means that you will have to create a project with the "shared project" option instead of a "Portable Class Project". See picture below:



When asked, you should cancel the creation of Windows 10 projects (it's not in the scope of this article):


The base project will include:
- Shared project: you will put inside all your shared Pages for instance, or your shared services between iOS and Android
- Xamarin.Android project: you will put inside all your related Android services and classes
- Xamarin.iOS project: will contain all your iOS classes
- All EMGU Android / iOS needed libraries as we will see in the next chapter



2- Reference EMGU

When your empty Xamarin shared project is ready, you will have to make reference to EMGU component, for Android & for iOS projects.

- Notice that these process are not the same for Android & iOS !

2.a- Reference EMGU in your Android project

For Android, I think the best choice you have is to integrate the EMGU shared projects directly into your solution. Copy the Android projects that you extracted previously. Projects you need are listed below. In my example, I separate those projects in a specific solution folder called "EmguLib". 

Then you just have to reference those shared project from the Android one. Here is the organisation for Android:

Android: How to reference EMGU library

If you try to build the project now, you will surely have a compilation error:

"This package do not contain necessary binary for Xamarin Android App. Emgu CV for Android Commercial Licence is required. x86...."


Don't be afraid. We talked about it in the previous paragraph. You just have to copy / paste the "libs" folder from the android sources you downloaded to your project (at the same level as your EMGU shared projects that you reference). All will be good if you bought the licence :p



2.b- Reference EMGU in your iOS project

For iOS, it's a little bit "simpler" because you just have to copy one DLL library (specially compiled for iOS) and reference it into your iOS project. You can place it where you want into your solution hierarchy but take care the file is big ! (about 210 Mb).

File to reference in your iOS project (as seen in the previous paragraph):
--> EMGU.CV.World.iOS.dll

You should have something like that:




You are ready !


Steps below are not complicated, but there is no really helpful documentation about how to setup EMGU with XAMARIN FORMS. You can just try to inspect the sample projects. After playing around really shortly with EMGU, in a few line of code:

- I opened an asset image
- loaded it into a 'Mat' openCV object
- applied a Canny edge algorithm on it
- then displayed the image

Tada !

First step, load an image
Apply the 'Canny Edge Detector algorithm', and here is the result for Android & iOS:




It's only the begining. At this point, if you are new with OpenCV, you can try algorithms you want just to learn. On my side, new Xamarin Forms + EMGU articles will come, so  follow me ;) !





Xamarin Forms essential: FFImageLoading, manage your images


Discover 'FFLoadingImage' library

Today I want to make a quick presentation of a really good library for Xamarin Forms. This is the kind of library we would like to see more often on XF... This one is dedicated to image manipulation. It's called "FFImageLoading".

If I take time to make this presentation, it's because I think that we should use it in almost all our "basic" Xamarin Forms applications. When I say basic, I exclude Games or other specific apps. But in my mind, I suggest you to change all your traditional "<Image />" by "<FF:CachedImage />" in your apps.

Before to start, where to find it ?
On Github: https://github.com/luberda-molinet/FFImageLoading
On Nuget: https://www.nuget.org/packages/Xamarin.FFImageLoading


Main features

So what will you find using this library ? I will not explain all the details but the main interesting features of the library.

Multi-platform

The good point is that this library supports multiple platforms:

  • - All the xamarin platforms: iOS, Android, MAC, and Xamarin Forms 
  • - But also Windows (WinRT & UWP)

So you can use the library either in your XAML code or in your code behind. It's really flexible, ideal for Xamarin Forms projects.

Image cache system

The main feature provided by the library is a picture cache system. This system is pretty complete and you are able to customize it if you want (XAML and code behind). You can set cache keys to your images, you can set a lifetime and so on...

Thanks to the cache you can greatly improve performances of long lists for instance (with images in their data items). 

Here is a XAML example on how to use the 'CachedImage' control:

<!-- contact image -->
<FFImg:CachedImage 
  Source="{Binding ProfilePictureUrl}"
  LoadingPlaceholder="ic_loader.jpg"
  ErrorPlaceholder="profilemale.jpg"
  HorizontalOptions="Center" 
  CacheType="Memory"
  Margin="30,20,30,5"
  Aspect="AspectFit"
  DownsampleWidth="130"                                            
  >
 <FFImg:CachedImage.Transformations>
  <FFTr:CircleTransformation BorderHexColor="#FFFFFFFF" BorderSize="0" />
 </FFImg:CachedImage.Transformations>
</FFImg:CachedImage>


'CachedImage' used in long list for better performances:


Image loading and PlaceHolders

Thanks to "FFImageLoading" you can load images from different sources (from XAML or code-behind):

  • - from stream sources
  • - from file image sources
  • - or from Uri sources

But the user-friendly point is that you can specify temporary images for the loading process and in case of error.
For instance if you load an image from the web, it can take some times, so the temporary picture will be displayed instead. 
And if an error occurs when loading the image, the "Error placeholder image" will be displayed automatically. From a user point of view, it's really cool and now it costs nothing ;)


Download properties

When you want to display a FFImageLoading image , you can specify several usefull parameters (XAML and code behind).

  • - we already talk about cache parameters like "CacheDuration" property
  • - you can also specify "retry" parameters in case of errors like "RetryCount" to tell how many times you want to retry or "RetryDelay" to wait before retrying loading the image.
  • - But you can also specify download properties like "DownSampleWidth" or "DownSampleHeight" to specify a new size for the downloaded image

SVG / Gif support

A good point to notice too, is that the library support the SVG and Gif formats. So instead of loading traditionnal pictures, you can load a SVG image for a loading placeholder for instance.

If you are a good designer and replace your icons and simple pictures by SVG files, it can make you save size on your final app's packages !

Transformations

FFImageLoading offers "transformation" capabilities. That means that you can apply effects on images before to display it. These effects are of 2 kinds:

  • - image rendering effects, to apply some effects on colors
  • - or image clipping effects to make the image looks rounded, circle or cropped...
  • - AND you can also implement your own effect thanks to the provided "ITransformation" interface !

Some effects / transformations:


Optimizations

All these features look optimized (without any complicated setup for you) and I didn't really have any issue by using it. I just noticed a better user navigation thanks to the quick loading of images. So if you want to learn more about this library, I suggest you to follow the following links:

The Wiki:
https://github.com/luberda-molinet/FFImageLoading/wiki

How to use it in details (tutorial in video):
https://www.youtube.com/watch?v=eVA9C7Ik_AM