Google Place Picker Plugin for Xamarin Projects

It has been long since I have updated my blog, here is a new post for Xamarin community 🙂

You might have come across different needs for selecting location in your apps, and might have resorted of developing Custom Renderer in case of Xamarin.Forms app.

I have developed an open source plugin for Xamarin to make this process easier. If you are interested in helping me out to extend the plugin, you can start contributing here: https://github.com/muhaym/crossplacepicker

One line of code, you will get Google Place Picker in your application.

Let’s get into step:

Step 1: Install Nuget to all projects in solutions (ie. in Shared PCL and Platform Specific projects)

https://www.nuget.org/packages/Fantacode.Plugin.CrossPlacePicker/

Step 2: Sign up for Google Maps Key at https://developers.google.com/places/android-api/signup

Step 3:

Follow Platform setup guide from

https://github.com/muhaym/crossplacepicker#important-permission-and-setup-information

Step 4:

Wherever you require place picker, use

If you want to set initial map screen to specific bounds, use

If you face any issues, comment here, or in issues tracker at github https://github.com/muhaym/crossplacepicker/issues

Sample for this plugin used in and Xamarin.Forms project can be found here

https://github.com/muhaym/CrossPlacePicker/tree/master/samples/PlacePickerForms

 

Getting Started with Twitter Fabric – Digits in Xamarin.Android

Twitter have some awesome tools for saving developers time and boosting productivity. One such tool is Twitter Fabric. Fabric is a collection of tools like Crashlytics (Crash Reporting), Mobile Analytics, Digits and much more.

Sadly, their official SDK’s are not yet available for Xamarin, still, there is a Xamarin binding which works well. Thanks to Michel Moreira for this binding.

This binding is available as Nuget Package, so getting started with this plugin is so easy.

Steps to integrate Digits to your Xamarin.Android app.

Step 1: Get a Fabric Account (https://fabric.io)

Step 2: Sadly, for getting API Keys, you need Android studio. So make sure you have Android Studio Installed (just for the sake of API keys).

Step 3: In Android Studio, select Plugins-> Browse Repositories -> Search for Fabric Plugin, Install it, Restart the IDE.

Step 4: Start a Blank New Project with the name Intended for your Xamarin.Android project.

Step 5: Click on Fabric Icon in Android Studio, Login to Fabric with your account and select Digits from the kits listed.

Step 6: Create Digits Account, and get the API keys obtained from AndroidManifest.xml file and MainActivity.java.

Step 7: Build the project in Android Studio. Once the app is built from Android Studio, your app gets listed in Fabric Dashboard where you can customize the One Time Password message, and get all they API keys.

Step 8: Enough with Android Studio (make sure you copy the keys from AndroidManifest.xml and MainActivity.java

AndroidManifest.xml

<meta-data
android:name=”io.fabric.ApiKey”
android:value=”your-key-here”
/>

MainActivity.java

Step 9: Back to our awesome Xamarin, either in Visual Studio or Xamarin Studio. (I use VS)

Step 10: Open your project, Right Click your project in Solution Explorer and Select Manage Nuget Package.

Step 11: Search for Digits by Michel Moreira, and Install the package.

Step 12: Open your activity, in which you want Digits Authentication (in my case MainActivity.cs)

Step 13:  Paste the TWITTER_KEY and TWITTER_SECRET TO your MainActivity.cs

Also, paste the meta data information to AndroidManifest.xml under application node.

  <application android:label=”Fabric_Demo”>
<meta-data
android:name=”io.fabric.ApiKey”
android:value=”your-key-here”
/>
</application>

Step 14:  Initialize fabric in your OnCreate method.

Step 15: Inherit your MainActivity from  IAuthCallBack and implement the interface. (Which will add two methods namely Success and Failure to your Activity)

Step 16:  There are multiple ways to authenticate. You can theme your default button or have custom Authentication action from anywhere in the program.

Step 17: For example, you need to authenticate mobile number on a button click, just have  Digits.Authenticate(this);  in your button click event.

Step 18: If you want to have digits button, add

   <com.digits.sdk.android.DigitsAuthButton
android:id=”@+id/auth_button”
android:layout_width=”match_parent”
android:layout_height=”wrap_content” />

in your layout file.

and in your Main Activity, set the callback of the button to the current class.

Step 19: Handle Success and Failure methods. Success method will be called when your authentication using mobile number if verified and it will have the details in DigitsSession p0 variable or p1 gives the mobile number. Failure method will be called if the number cannot be authenticated or User cancels the process.

Step 20: Run and see it in action.

Skip Step 1 to 10 by requesting Twitter Fabrics team a Xamairn plugin 🙂 https://twitter.com/fabric

Shout out your suggestions, feedback and doubts in comment section below.

The Fabric Demo Solution can be downloaded from my Github

Credits: Michel Moreira‘s Fabric Binding for Xamarin.

Blindsist – Assisting Visually Impaired People using IBM Bluemix Visual Recognition

This blog post will cover how I developed Blindsist app for Xhacknight.

The app was developed using Xamarin.Forms, targeting 3 major platforms (iOS, Android and Windows Phone) same time.

Blindsist is a simple one page application. Objective of the application is taking a photo using Smartphone, The photo is then uploaded to IBM Bluemix using REST Api. IBM Bluemix returns the data in Json format, which will be parsed and spoken out using Native Text to Speech services.

Open a new Xamarin.Forms Portable Class Project.

Right click on the Project Blindsist (Portable), click Add new Item, Select Forms Xaml Page, name it ScanPage.xaml

Update the XAML content in ScanPage as below

What it basically does is create a Button Called “ScanButton” which on click trigger event handler called “ScanButtonClicked”.

Let us look to ScanPage.xaml.cs for C# code!

In the constructor ScanPage() write following Code.

For this to work, we have to add a awesome library developed by JamesMontemagno.

It can be found here https://www.nuget.org/packages/Xam.Plugins.TextToSpeech/

To install, right click project, Manage Nuget Package, Search for Xam.Plugins.TextToSpeech, install it in every individual projects.

So when the app starts up, It starts speaking introduction to visually impaired user.

Next is adding Button Clicked event. Just copy this code in your ScanPage.xaml.cs

Now right click your Portable class project, right click, add new item. Add new class file, name it Library.cs

Add following data members.

Now add a Member function GetImage() for Getting Image from Camera, The specialty of coming code is that it works in all 3 platforms with single code. Thanks to another library, which is available in Nuget. Search for Xam.Plugin.Media and install in every projects.

It will check whether Camera is available, if not available return a null object with error message embedded.

Else it will create a file, takes a photo from Camera and store as byte[] format, if file is OK, it returns the Image, with Image Url, and Image in byte[] format.

Now add a member function ProcessImage() to process the image by sending to Bluemix Watson Service.

Each line is commented for understanding what happens there. Atlast we get string bb with Json formatted data from IBM Bluemix with possible results in order of priority.

Now revisit ScanPage.xaml.cs, We have to add “GetPicture()” function on button click. Copy the following code.

Now string temp has the json data, we have to parse it to get the results. Add new class file called Classify.cs in PCL project.

Using http://json2csharp.com we can generate class required for parsing json data from IBM Bluemix service.

To parse json data, again there is a good library called NetwonSoft.Json, obtain it from Nuget, and add it to all projects.

Now we need a simple function to perform deserializing json data.

Create a static class Operations, and a function GetMatch()

Now back to ScanPage.xaml.cs, We have temp ready with Json string. Just pass it to Operations.GetMatch() to get the required data back. Add following codes to where you stopped earlier.

That’s all.. Try Building and running the project. If you face any errors it might be due to not adding Nuget Package mentioned in this post for all projects, or some other errors. Feel free to ask. Together we can build this project to perfection.

The project is in github, https://github.com/muhaym/Xamarin.Forms-Blind-Assist

Feel free to fork, modify, report errors, ask doubts and do whatever you want with the project for the sake of learning.

Please assist me to add Image Compression, because the image upload to Watson Service and getting response back is taking hell of time now.

 

Xamarin Students Offer

Hey Guys,

I have been long since I have blogged. Sorry for being away. I think I am the laziest person in this world.

Today I have something to share  with you guys.

Hope you all know about Xamarin, Xamarin is a cross platform mobile application development tool, Which lets you create applications for major platforms such as iOS, Android and Windows Phone. I will be blogging about developing cross platform application using Xamarin. So this tool is sooooooo costly that we students, or startup can’t afford.

Wait, But what if they want you to develop something great? Yea.. Xamarin is free for students, you can apply for a Students license which will let you develop iOS, Android application using Visual Studio or Xamarin Studio.

It is very easy to apply for Xamarin Student License.  Just mail your student ID card scanned copy or some document to verify that you are student to student – at – xamarin dot com.

For more details visit http://xamarin.com/student

Sit tight and we will start developing cross platform application from next post onward.