You might also be interested in this: Create Docker images and upload them to Dockerhub

Set up a VPS with Hetzner

Hetzner often offers referral links with credit benefits for new customers. Of course, you can also use other providers, but Hetzner is attractively priced and offers solid services.

What is a VPS?

A Virtual Private Server (VPS) is a virtual server that is operated on a physical machine and acts as an independent server. It offers more control than classic shared hosting and is a cost-effective alternative to dedicated servers. Access is usually via SSH (Secure Shell), which allows us to control the server via the command line.

SSH access to the VPS

Once a VPS has been created, it is usually managed via a secure shell (SSH). SSH is a protocol that enables encrypted connections to remote servers. The following command is used to connect to the server:

ssh root@<IP-Server>

If an SSH key has been stored, authentication can be carried out using public key authentication, which is more secure than a password.

Create a server at Hetzner

1. After logging into the Hetzner Cloud, we navigate to “Projects” and create a new project.
2. Select “Add server” and can configure an instance.
3. The cheapest model is often sufficient to start with. However, I recommend activating the option for an IPv4 address, as purely IPv6-based setups often cause compatibility problems.

Setting up a domain

To access the application later under your own domain, you must register a domain and link it to the server.

Apply for a domain at Hetzner

1. Register a new domain or add an existing domain in the Hetzner ConsoleH.
2. To manage DNS entries, we need to activate DNS access.

Set name servers

The following name servers should be used:

helium.ns.hetzner.de. 
hydrogen.ns.hetzner.com. 
oxygen.ns.hetzner.com.

These new name servers offer better performance and flexibility compared to the old Hetzner name servers:

ns1.first-ns.de.
robotns2.second-ns.de.
robotns3.second-ns.com.

However, both nameserver variants are possible! The DNS changes take some time. However, we can use tools such as MXToolbox to check whether the changes have already taken place.

Connect the domain to the server

Now the IP address of the server must be linked to the domain:

1. Switch to DNS zones in the Hetzner Cloud.
2. Select the registered domain.
3. Create a new A-Record and enter the IPv4 address of the server.
4. If available, remove the IPv6 record (AAAA) to avoid compatibility problems.

You can also use MXToolbox to check whether the DNS changes have already been applied.

Set up Kubernetes

Kubernetes is a powerful orchestration tool for containers. I use k3s, a lean Kubernetes variant that is particularly suitable for smaller environments.

Install K3s on the server

Connect to the server via SSH and install k3s with the following command:

curl -sfL https://get.k3s.io | sh - 

The script installs k3s and starts the Kubernetes service. After installation, k3s can be checked with the following command:

kubectl get nodes

k3s comes with its own kubectl version, so that no separate installation is necessary.

Create YAML files for FE, BE, MySQL and Redis

To deploy our application, we need YAML files for:

• Frontend (Angular)
• Backend (NestJS)
• Database (MySQL)
• Session-Management (Redis)

A deployment file for the backend could look like this:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: backend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: backend
  template:
    metadata:
      labels:
        app: backend
    spec:
      containers:
        - name: backend
          image: dockerhub-user/backend:latest
          ports:
            - containerPort: 3000
---
apiVersion: v1
kind: Service
metadata:
  name: backend-service
spec:
  selector:
    app: backend
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: ClusterIP

What are deployments and services?

• Deployments manage the provision and scaling of containers.
• Services ensure a stable network connection between containers.
• ClusterIP means that the service is only accessible within the Kubernetes cluster.

Set up Caddy as a reverse proxy

A reverse proxy is required to ensure that incoming traffic is distributed correctly. K3s comes with Traefik by default, but I opted for a simpler solution: Caddy. I was really surprised how little guidance or documentation there is on Caddy in combination with Kubernetes.

Why Kubernetes with Caddy?

• Automatic Let’s Encrypt SSL certificates
• Simple configuration via Caddyfile
• Built-in load balancer

Remove Traefik

kubectl delete helmrelease traefik -n kube-system

Create Caddy Deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: caddy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: caddy
  template:
    metadata:
      labels:
        app: caddy
    spec:
      containers:
        - name: caddy
          image: caddy
          volumeMounts:
            - name: caddy-config
              mountPath: /etc/caddy/Caddyfile
      volumes:
        - name: caddy-config
          configMap:
            name: caddy-config
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: caddy-config
data:
  Caddyfile: |

    example.com {
        reverse_proxy backend-service:3000
    }

---
apiVersion: v1
kind: Service
metadata:
  name: caddy-service
spec:
  type: LoadBalancer
  selector:
    app: caddy
  ports:
    - port: 80
      targetPort: 80
    - port: 443
      targetPort: 443

Important: Since Let’s Encrypt has a rate limit, tests should first be carried out with staging certificates!

Conclusion

After these steps, the application is now running in a Kubernetes cluster on a Hetzner VPS and can be accessed via its own domain. The next step would be to set up an automatic CI/CD pipeline to deploy new versions without manual effort.

The post Deployment of a WebApp with Kubernetes and Caddy appeared first on Nerd Corner.

List of components

• Visual Studio (free)

Setting a pin on the Google Map an choose a starting point

Let’s start to put a few markers on the map. The code is pretty simple. In the “MainPage.xaml.cs” include the following using directive:

using Xamarin.Forms.GoogleMaps;

Then create a pin with position and label:

Pin one = new Pin ()
{
    Label = "Pin ONE",
    Position = new position (48.1390196, 11.5744422)
};
MyMap.Pins.Add (one);

“MyMap” is the name we have set in the “MainPage.xaml”.

The following code can be used to ensure that the map always opens at a specific starting point:

MyMap.MoveToRegion (MapSpan.FromCenterAndRadius (new Position (48.1390196, 11.5744422), Distance.FromKilometers (10)));

And this is how the app looks now:

Add new icons

I downloaded two alternative icons in order to replace the red Google standard pins. I have the “castle.png” and “beer.png” icon from the website icons8.com.

For iOS, we simply drag the two icons to the “Resources” folder in the iOS project. It should look like this:

For Android we drag the icons to the “drawable” folder under “Resources” in the Android project. For me it is unfortunately always the case that the “drawable” folder has to be created manually. Although, it is displayed normally in the Visual Studio folder structure, it actually doesn’t really exist if you search the folder on your computer. So create a new folder, where the really “drawable” folder should be and name it “drawable”. Restart Visual Studio and then add the two icons. It looks like this:

Extra step for Android users: Create a Bitmap class

iOS has a clear advantage here. You don’t have to do anything for Apple phones. iOS automatically renders the icons from the “Resources” folder. For Android, however, you have one extra step, but you are almost there.

Create a class in the ANDROID project, name it “BitmapConfig.cs” and copy the following code:

using DemoGoogleMapApp.Droid;
using Xamarin.Forms.GoogleMaps;
using Xamarin.Forms.GoogleMaps.Android.Factories;
using AndroidBitmapDescriptor = Android.Gms.Maps.Model.BitmapDescriptor;
using AndroidBitmapDescriptorFactory = Android.Gms.Maps.Model.BitmapDescriptorFactory;

public sealed class BitmapConfig : IBitmapDescriptorFactory
{
    public AndroidBitmapDescriptor ToNative(BitmapDescriptor descriptor)
    {
        int iconId = 0;
        switch (descriptor.Id)
        {
            case "castle":
                iconId = Resource.Drawable.castle;
                break;
            case "beer":
                iconId = Resource.Drawable.beer;
                break;
        }
        return AndroidBitmapDescriptorFactory.FromResource(iconId);
    }
}

You can create an extra case for each icon. We can then assign a case name to each pin on the map.

In the “MainActivity.cs” the Google Maps initialization also has to be changed a little bit. Add the following using directive and the new initialization code.

Using directive:

using Xamarin.Forms.GoogleMaps.Android

Initialization code:

var platformConfig = new PlatformConfig
{
    BitmapDescriptorFactory = new BitmapConfig()
};
Xamarin.FormsGoogleMaps.Init(this, savedInstanceState, platformConfig);

I got the idea for the “BitmapConfig.cs” from this post.

Last step: Add the custom icon pins in Google Maps app

From now on you can easily set the icon image for each pin on the Google Map:

Pin one = new Pin()
{
    Label="Pin ONE",
    Position= new Position(48.1390196, 11.5744422),
    Icon= BitmapDescriptorFactory.FromBundle("beer"),
    Type = PinType.Place
};

Each icon can be used as a Google Maps Pin with the following assignment:

Icon = BitmapDescriptorFactory.FromBundle ("NameOfTheCase")

Screenshots of the custom icon pins in Google Maps app

Download files

• Source Code Xamarin Forms Google Maps App with custom icon
• Icons
• BitmapConfig.cs AndroidManifest.xml MainActivity.cs

Please don’t forget to insert your Google Maps API Key in the source code.

The post How to add custom icon pins to Google Maps Xamarin App appeared first on Nerd Corner.

List of components

• Visual Studio (free)

Downloading the NuGet Package

Open Visual Studio and choose Mobile App (Xamarin.Forms). In order to use Google Maps, we have to integrate the corresponding NuGet package. Instead of the official version “Xamarin.Forms.Maps” by Microsoft, we use “Xamarin.Forms.GoogleMaps” by amay077. Please remember to install the NuGet package for each project. The “Xamarin.Forms.GoogleMaps” NuGet package by amay077 contains all functions of the official package and some additional ones. Among other things, you can easily replace the markers on the map with your own pictures.

All possible functions of the “Xamarin.Forms.GoogleMaps” NuGet package by amay077, to integrate Google Maps in an app, are described on GitHub: https://github.com/amay077/Xamarin.Forms.GoogleMaps

XAML code for the Google Map integration

Since the NuGet package is already installed, Google Maps can now be added to the XAML page. Open “MainPage.xaml” and add:

xmlns: gmaps = "clr-namespace: Xamarin.Forms.GoogleMaps; assembly = Xamarin.Forms.GoogleMaps"

Then we need the following XAML code to display the map:

    <Grid>
        <gmaps:Map x:Name="MyMap" MapType="Street" HasZoomEnabled="True" MyLocationEnabled="True" >
            <gmaps:Map.ItemTemplate>
                <DataTemplate>
                    <gmaps:Pin Icon="{Binding PinIcon}" Position="{Binding Position}"
                              Label="{Binding PinLabel}" />
                </DataTemplate>
            </gmaps:Map.ItemTemplate>
        </gmaps:Map>
    </Grid>

Get the Google API Key to integrate Google Maps in an app

Although we have the XAML code to integrate Google Maps in an app, an API key is required. Otherwise we won’t see anything. Obtaining the API key from Google is easy and quick.
Simply request the API key here: https://developers.google.com/maps/documentation/embed/get-api-key

Please note that the keys for iOS and Android are different.

Initialize Google Maps for Android

These are the final steps to display Google Maps in Android. Open the “MainActivity.cs” and add the following line in the “OnCreate ()” function:

Xamarin.FormsGoogleMaps.Init (this, savedInstanceState);

Next, go to “Properties” and select “AndroidManifest.xml”. We have to insert here the Google API key and grant the rights for GPS.

The is the place where you have to put the line with the meta-data for the Google Maps API Key:

<application android: label "Name of your app">Add here the meta-data</application>

This is the line with the meta-data for the Google Maps API Key:

<meta-data android: name = "com.google.android.maps.v2.API_KEY" android: value = "AddYourAndroidAPIKeyHere" />

Then the rights for the GPS have to be granted:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-feature android:name="android.hardware.location.gps" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" />
<uses-permission android:name="android.permission.CONTROL_LOCATION_UPDATES" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

Afterwards the “AndroidManifest.xml” looks like the screenshot here:

Initialize Google Maps for iOS

The initialization is easier for iOS. You just have to open the “AppDelegate.cs” and add the following line:

Xamarin.FormsGoogleMaps.Init ("AddYouriOSAPIKeyHere");

Start the app

The app is now ready to go. Press compile in Visual Studio, then it looks like this:

It is normal that the app chooses Rome as starting point. The next post shows how you can implement the starting point of the Google Maps app.

Sometimes it happens that the app does not automatically ask for the required rights and therefore it closes immediately after launching. This can be avoided by simply allowing GPS access in the settings or implementing a command to ask for the required rights.

Download files

• Source Code Demo Google Maps App
• ActivityMain.cs AndroidManifest.xml MainPage.xaml MainPage.xaml.cs

Please don’t forget to insert your Google Maps API Key in the source code.

The post How to integrate Google Maps in an App with Xamarin appeared first on Nerd Corner.

List of components

• Arudino Mega
• Breadboard
• 12V power supply
• 12V fan
• jumper cable
• 220 Ohm resistor
• NPN Transistor number: BC546B D6
• Bluetooth module HC-05 or HC-06

Wiring

For the wiring, we proceed analogously to our “fan control” post. The 12V power supply must be connected to the breadboard. We connect this – of the breadboard with GND of the Arduino (the short blue cable connection in the picture). Then we connect the + of the breadboard to Vin of the Arduino Mega (red cable between Arduino and breadboard).

If we would plug the 12V power supply into the socket now. Then our Arduino would already be powered. There is no additional power supply like USB required. The Vin pin of the Arduino automatically regulates the 12V of the power supply to 5V for the Arduino.

Now we plug the NPN transistor into the breadboard. We connect the base (B) to the 220 Ohm resistor and then to pin 13 (yellow connection in the picture). We connect the collector (C) of the transistor directly to the negative connection of the fan (black fan cable). The positive fan connector is connected to the + of the breadboard. We connect the emitter (E) of the transistor to the – of the breadboard.

In addition to these already known steps, we take the Bluetooth module and connect the ground of the module to the ground of the Arduino (black cable). VCC of the module must be connected to 3.3V of the Arduino (red connection). If there is no 3.3V connection, the 5V connection can also be used. TX of the Bluetooth module has to be connected to RX of the Arduino (orange cable). RX of the module has to be connected to TX of the Arduino (purple cable). This means TX to RX and RX to TX. Always the equivalent!

Important: While the Arduino code is being flashed on the Arduino, you have to unplug RX and TX. Otherwise the flash process won’t work!

Programming the Android Bluetooth classic app for Arduino

We program a pure Android app with an HC-05 or alternatively HC-06 Bluetooth module. These two are Bluetooth Classic Modules. You can not connect to Bluetooth 4.0 also called Bluetooth Low Energy (BLE). The code for BLE is very different. Below is the programming guide for a Bluetooth Android app build with Xamarin Android. All important files are also uploaded!

As development environment we use Visual Studio (it is free) for the Xamarin.Android app. In AndroidStudio, the process is analogous, but the code will be in Java and not in C#.

Click on “Create new project” and select “Android app (Xamarin)”. At First we add the Bluetooth permissions to the “AndroidManifest.xml” file:

<uses-permission android: name = "android.permission.BLUETOOTH" />
<uses-permission android: name = "android.permission.BLUETOOTH_ADMIN" />

Then we design the layout of the app in the “activity_main.xml” file. We need 2 buttons for “Connect” and “Disconnect” and a slider for speed control. For the slider we set the maximum value to 127 (android: max = “127”).

In “MainActivity.cs” we add “using Android.Bluetooth”, create a “BluetoothConnection” class and set our “activity_main.xml” file as the start page. A Bluetooth socket is created for the connection to the Arduino. We recommend to look at the source code which is attached to this post.

Essentially, we always send a byte to the Arduino. That means we can send numbers between 0 and 255. For the fan control, we take the range from 0 to 127. The Arduino doubles this value and thus regulates the fan, which also runs in a range between 0 and 255. The rest of the range between 128 and 255 can be used for further functions. That’s it, just compile the app and go to the next step!

Incidentally, the code for the app is based on this project here: https://www.instructables.com/id/3-LED-Backlight-Xamarin-and-Arduino-With-HC05/

Arduino Code

#define motorPin 13
int received; //for the received Byte
int fanSpeed = 127; //initial speed - must be a number between 0 and 255
void setup() {
  Serial.begin(9600); //for communication with the app
  delay(3000); // small delay
  pinMode(motorPin, OUTPUT); //define motor pin as output
  analogWrite(motorPin,fanSpeed); //set the initial speed of the fan
}
void loop() {  
  while(Serial.available()) 
  {
     received = Serial.read(); //received Byte    
     Serial.println(received); //if the arduino is connected to the PC, than you can check the received Byte
     switch (received)  //you can easily add new cases to customize your arduino
     {
        case 200:
            Serial.println("RESTARTED");
            break;
        default:
            if(received >0 && received <=127)
            {
              fanSpeed = (received*2); //app sends value between 0 and 127 - so we need to double it for the fan range between 0 and 255
              delay(10);
            }
            break;
     }  
  }
  analogWrite(motorPin,fanSpeed); //set the speed of the fan
}

Please do not forget to disconnect the RX and TX wires before flashing the Arduino and afterwards connect it again correctly (RX to TX and TX to RX)!

Since we have connected the base of the transistor to pin 13, we define it as “motorPin”. The fan speed can be controlled via the “fanSpeed” variable. At the beginning, we set “fanSpeed” to half the speed, i.e. 127. (Depending on the fan model, a certain minimum speed is necessary for the fan to start.)

We define a variable “received” in which we store the byte sent from the app. In the setup function we start the communication with “Serial.begin” and set the baud rate to 9600. Then we program a while loop in the loop function. The while loop becomes active whenever a byte is received. If the value of the byte is between 0 and 127, we double it and define it as our new fan speed “fanSpeed”. As soon as the while loop has ended, the new speed for the fan is set with “analogWrite (motorPin, fanSpeed);”

Screenshots of the Android Bluetooth classic App for Arduino

Please note, you have to go to the settings and connect to the Bluetooth module at first. Otherwise you won’t be able to connect to the Arduino with the app!

Download files

• Source Code Android App "FanControllerBluetooth"
• Arduino Code for the "FanControllerBluetooth" app
• Only MainActivity.cs AndroidMainfest.xml and activity_main.xml of the "FanControllerBluetooth" app

The post Android Bluetooth classic App for Arduino fan control appeared first on Nerd Corner.