There was an email earlier this year about a change in declarations from my employer. You can’t just drop receipt on someone’s desk anymore, but since we are in a digital era, we should make a picture of it and send it by mail. That sounds fair. But that would require me to remember the constraints, like letting know for which client it is and to which address I should send it to. So I decided that it needed automation.

Because some coworkers have iPhones and some have Android, I decided to go for this approach:

architecture

Xamarin Forms (Android, iOs) post a picture of a receipt to Azure Functions in the Azure cloud which sends it to Sendgrid. (Because Azure Functions cannot send mail)

Here are the steps I took to make a simple camera app:

1. File, new project, new Xamarin Forms project (no web api)

2. Add new project to solution (Azure Functions)

3. Add the nuget package ‘Xam.Plugin.Media’ to the shared/main xamarin project

4. Add UI code:



        

5. Add code to cs (code behind file)

I had three class variables (type string) filePath, filename, url (url to your azure function) I forgot that the emulator is a vm so you can’t use the localhost if you are testing the Azure Function but you should use your LAN ip.


private async void takePhoto_Clicked(object sender, EventArgs e)
{
	if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
	{
		await DisplayAlert("No Camera", ":( No camera avaialble.", "OK");
		return;
	}
	filename = DateTime.Now.ToString("yyyyMMdd-") + Guid.NewGuid() + ".jpg";

	var file = await CrossMedia.Current.TakePhotoAsync(new StoreCameraMediaOptions
	{
		PhotoSize = PhotoSize.Medium,
		Directory = "Sample",
		Name = filename
	});

	if (file == null)
		return;

	filePath = file.Path;

	image.Source = ImageSource.FromStream(() =>
	{
		var stream = file.GetStream();
		file.Dispose();
		return stream;
	});
	sendPhoto.IsEnabled = true;
}

private async void sendPhoto_Clicked(object sender, EventArgs e)
{
	HttpContent fileStreamContent = new StreamContent(File.OpenRead(filePath));
	fileStreamContent.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") { Name = "file", FileName = filename };
	fileStreamContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");

	using (var client = new HttpClient())
	using (var formData = new MultipartFormDataContent())
	{
		formData.Add(fileStreamContent);
		var response = await client.PostAsync(url, formData);
	}
}

6. add `await CrossMedia.Current.Initialize();` in the android project in the mainactivity.cs just below the OnCreate call

7. add this code to the azure function:


string imageBase64;

using (var ms = new MemoryStream())
{
	file.CopyTo(ms);
	var fileBytes = ms.ToArray();
	imageBase64 = Convert.ToBase64String(fileBytes);
}

string sendgridApiKey = "api-key-here";

var client = new SendGridClient(sendgridApiKey);
var from = new EmailAddress("mymailaddress@partech.nl", "JP Hellemons");
var subject = "Declaraton from app";
var to = new EmailAddress("mymailaddress@partech.nl", "JP");

var msg = MailHelper.CreateSingleEmail(from, to, subject, "plain msg", "html version");
msg.AddAttachment(file.FileName, imageBase64, "image/jpeg", "attachment");
var response = await client.SendEmailAsync(msg);

return new OkObjectResult("");


8. of course make a free account at sendgrid and just follow the tutorial/docs for adding the nuget package to the Azure Function.


Next post will contain a link to the Azure Active Directory for authenticating so that not everybody will send in receipts on my behalf.

Good luck!

Post on LinkedIn

To keep kids entertained, people from all over the world put a teddy bear in their window so that kids can spot them during a walk.

I don’t know the origin. It’s in Canada, USA, New Zealand, UK etc. It’s also in my hometown so I decided to make an app for it.

People made a Facebook group with a google form to submit the teddy bear and an URL with all bears on google maps.

I thought that I had to get access to the Google spreadsheet containing the data, but it seems that it would not hold that much info if we take a look at the entry form and the maps data. In Google maps you can download a KMZ file which is a zipped KML (Keyhole Markup Language) It’s XML. Here is the full KML:

full-kml

So there is a web link in it to get the live data. I used the webclient to pull it in and read it and tried to make pins out of it.

My first step was to add the Xamarin.Forms.Map Nuget package and the SharpKml.Core

Here is the full code:


private void AddMap()
{
	var map = new Map(MapSpan.FromCenterAndRadius(new Position(51.697815, 5.303675), Distance.FromMeters(10000)));

	using (var client = new WebClient())
	{
		var kmz = KmzFile.Open(client.OpenRead("https://www.google.com/maps/d/u/0/kml?mid=1kedGv2twtsWmzgxRpZcu5hr-qpE77plL"));
		Kml kml = kmz.GetDefaultKmlFile().Root as Kml;

		if (kml != null)
		{
			foreach (Placemark placemark in kml.Flatten().OfType())
			{
				Console.WriteLine(placemark.Name);

				var pin = new Pin()
				{
					Address = placemark.Address,
					Label = placemark.Name,
					Type = PinType.Place
				};
				map.Pins.Add(pin);
			}
		}
	}

	this.Content = map;
}

But the pins won’t show up (of course). Because I did not set the position. The real Kml contains data like this:

kml-detail

So as you can see there is no Latitude Longitude for the placemarks… So how does google maps work then? It seems that both Google Maps and Google Earth Geocode the address to get the lat lng. But that service unfortunately is not free. I tried to load the kml in Google Earth and export it, but that also does not add the latitude and longitude. I also thought that kml support for the map control could be used. So that I could just provide the kml to the map and have it sort it out, but that was build with monoandroid 9 instead of netstandard2.0 and would probably not fix the geocode issue.

I planned to make an app with no central backend. But because of geocoding, I would have to use a webapi or Azure Function to keep track of the “database” with all teddy bears and their corresponding lat lng. That would also lower the requests for geocoding if it would be moved from the phone (client) to the server.

But I’ve not found a good free geocoder

nominatim.openstreetmap.org does not work if I would provide the kml data. I think that I will come back to this one….


Good luck making your own KML/KMZ reading app!

Post on LinkedIn

Recently the Raspberry Pi 4 was announced, But I am currently using my rpi 3test_1 and want to run Rabbit MQ on it in Docker. So I used these two commands to get it to work and I just wanted to share it:


sudo rm /etc/apt/sources.list.d/docker.list;

curl –sL get.docker.com | sed ‘s/9)/10)’ | sh

If you would like to use Docker as a non-root user you should add your user to the docker group:

sudo usermod –aG docker pi

To get Rabbit MQ (which has arm container) on the pi with a management web interface run:

sudo docker run –d –hostname my-rabbit –name some-rabbit –p 15672:15672 –p 5672:5672 rabbitmq:3-management

Then get the ip of the docker container with (but since you added the ports in the previous command, this step can be skipped):

sudo docker inspect –f ‘{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}’ some-rabbit

Then you can launch a browser and go to http://thatipaddress:15672 and login with 'guest/guest'. If you did not lookup the ip of the container you can use the ip of the pi because you opened container ports when running it.


8850828555_df7c7bd300_b


Good luck!

Post on LinkedIn