Home Authors Posts by Namila

Namila

Namila
2 POSTS 0 COMMENTS
Interested in anything related to IT, Microsoft Lover. Undergraduate at Faculty of IT, University of Moratuwa.

4617

After a long break from my first post, I would like to explain in this post how to get public events from a public Facebook page into an ASP.net MVC application without having to login to Facebook. I hope having a basic understanding about Asp.Net MVC will help you to understand this article quite well.

First let’s create an ASP.net MVC application in Visual Studio (I am using 2012 version in this post), go to File=> new=>project and you will be able to see the list of project Templates available, I will use “Asp.net MVC 3 Web Application” template under “web” category (Figure 1). Give a Name and the location for your application and click ok.

NewProject

 Figure 1

Then you will be prompted to select one of the sub templates available under Asp.net MVC3

subTemplate

Figure 2

Select “Internet Application” template and set the “view engine” as “Razor” (Figure 2) and click ok. After a while you will get a fresh MVC application.

FreshMVC

 Figure 3

Now hit F5 to start debugging on the newly created application

welcometoASP

 Figure 4

If you can see the screen on Figure 4 we are good to proceed further  :)

In order to get the Events from a Facebook page, you must possess a Facebook Application, since the app token of that application will be used to authorize your request. Go to https://developers.facebook.com/  and go to the “Apps” section(Figure 5)

Apps

Figure 5

From there click “Create New App” and create a new Facebook Application (Figure 6).

CreateNewApp

Figure 6

And make sure its “Sandbox Mode” is disabled under “Basic Info” heading.

sandbox

Figure 7

Then we need to get the “App token” of our newly created application, go to tools section from the menu bar and from the set of tools in the right side of the page select “Access Token tool” (Figure 8)

AccessTokenTool

Figure 8

From there you can get the “App Token” for the newly created application (Figure 9)

AppToken

Figure 9

Next, in order to refer to our public Facebook page we need its Facebook Id. The Facebook Id of the page can be taken easily by providing the url of the page to this website (Figure 10)

http://findmyfacebookid.com/

FacebookIdFinderFigure 10

Now we have all the components require to make the request for the events. Use the following format to make the request

https://graph.facebook.com/{0}/events?access_token={1}&limit={2}&after=1&fields=owner,name,description,cover,id

Replace the content as follows

{0}= Id of your Facebook Page

{1}= App Token of your application

{2}= Maximum number of events to be received

Under “fields” parameter you can specify the required details about the event, using the phrases in the Facebook Graph API

https://developers.facebook.com/docs/graph-api/reference/event/

ex:

https://graph.facebook.com/566125203483000/events?access_token=1459623080931717|QlAXMsfKQ0YO9i3iZwFsyb5cGbQ&limit=2&after=1&fields=owner,name,description,cover,id

If we call this url inside a browser we will receive a JSON result like this ( Figure 11).

JSONResult

Figure 11

Now we have received the Data we need, as the next step let’s see how this data can be formatted and displayed inside our MVC application.

First we have to prepare our model, a JSON string like this can be easily converted into a collection of C# object using “Newtonsoft.Json” Library. In order to install this package right click on the “FacebookEventApplication” solution in “Solution Explorer” and go to “Manage Nuget Packages”. In the package manager window select the “online” category and search for “Newtonsoft” in the search box. Then select the result “Json.Net” and click “install”.

Nuget

Figure 12

After installing Newtonsoft JSON, let’s write our model class. Write click on the project go to add=> class. Select “C# class” template and give a name for your model class (Figure 13)

New class

Figure 13

First add a using statement for Newtonsoft,

using Newtonsoft.Json;

Then create properties which correspond to the fields in the JSON result we got, markup each property with the respective name in the JSON string (Figure 14). A Dictionary property has been used for “CoverInformation” since the “cover” field in the JSON result has some sub fields.

Newmodel

Figure 14

Now we are ready to make the call for the Json result inside the Index method of our Home Controller.

newhome

Figure 15

First we should create a WebClient object(line 18).  The WebClient class is used to send or receive data from a URI. Then the url which we used in Figure 11 to get JSON data is defined as downloadUrl. Then we need to create a URI object, URI class is used to represent a URI. And the URIKIND is defined as absolute since we are giving an absolute address. After creating the URI we can start downloading the events details by calling the DownloadString method in the myWebClient object while passing the URI as an argument. If we observe the JSON result we receive in Figure 11, we can see that the JSON object we receive has several properties and the property which we need is the Array called “data”. So in order to separate that array easily, first let’s create a JObject from the “downloadedJsonResult” which is a string. Then in line 30 we have selected the “data” property of that object and assigned it to a JArray. Both JObject and JArray are classes provided by NewtonSoft JSON library. The next step would be deserializing this JSON array into a list of “FacebookEvent” objects. It is done in line 32. After getting the “listOfFacebookEvents” list we pass this list into our view.

Next we have to define a view to display this data. Since we are using the Index Action Method in the HomeController which was already in the default template, a view corresponding to this action method is already available.  Right click on the “Index” word in the Index action (Figure 16)  and Select Go To View

gotoview

Figure 16

Add the following Code to the view Body

ViewContent

Figure 17

Here using a foreach loop we iterate through the list of FacebookEvents which we passed into the view at the controller. We use Html.Display to generate a label to display the name of the each event. And after that we have to use an anchor tag which allows the users to browse to that particular event on Facebook. The “href” property of the anchor tag has been assigned with the url of the particular Facebook event. Finally we have added an image tag to display the cover photo of the event. The CoverInformation property we defined in our FacbookEvent class is a dictionary, we need to take the “source” element of that dictionary by passing “source” into square brackets.

Then we can press F5 and see the functionality of our MVC application

eventDisplay

Figure 18

We can click on the “Go To Event” link of a particular event and navigate into that event on Facebook.

SampleEventTwo

Figure 19

I hope you have understood my explanation on getting Facebook Events details into an ASP.net MVC application without logging to Facebook, and I hope it will be useful for you all. Please express your views, questions on this post since they help me a lot to make my future posts much beneficial for you all !. See you again soon with another article.

Happy Coding!

35870

Hello everyone! Welcome to my very first article on diGit. In this article, we will look at how to perform Optical Character Recognition (OCR) in C#.

For this we will use Puma.net library which makes our task much easier. You can download it from CodePlex, which hosts Open Source Projects.

After downloading, run the downloaded file and install it in your machine. I will illustrate this to you by using a small WPF application. After installing Puma .Net go to the “Assemblies” folder in the installation location. Usually they are in C:\Program Files (x86)\Puma.NET\Assemblies (in a 64-bit machine).

You should see three DLL(Dynamic-Link Library or .dll) files as follows.

Figure (a)

Figure (a)

Next go to the properties of the”COM Server” folder which resides at C:\Program Files (x86)\Puma.NET

Go to the security tab and click edit.

Figure (b)

Figure (b)

And make sure you have given full control for the current user.

Next open Visual Studio (I am using 2012 version) and go to File=> new=> project

Figure (c)

Figure (c)

Under “Windows” category choose “WPF Application” and under “Name” give a name for your application and click  OK.

 Right click on your project and select “Add Reference” and go to “Browse” section.

Figure (d)

Figure (d)

Click on “Browse” and locate the” Puma.Net.dll” file which resides in C:\Program Files (x86)\Puma.NET\Assemblies  (in 64-bit machine) and click OK.

Right click on your project  and select “Rebuild”.  After rebuild completes right click on the project again and select “open folder in file explorer”. Go to Bin => Debug and you must  have  “Puma.Net.dll” , and “puma.interop.dll” files inside that folder. From the location in figure (a) you must copy “dibapi.dll” file into this location. Now your Debug folder must have the following content:

Figure (e)

Figure (e)

Now go to “MainWindow.xaml ” in our WPF Application and create an interface like the following by simply using the items in the toolbox.

Figure (f)

Figure (f)

The first  File Selector is used to select the source image file. We can get the output of the OCR as a string or we can directly write it into a file. The second file selector is used to select the destination file for the second scenario.

So now let’s look at the code written in event handlers.

 First let’s consider the click event of the “Select Source” button.

Figure (g)
Figure (g)

Here I have created an object from the “OpenFileDialog” class which helps us to locate the source image that we use to read. The “ShowDialog()” method in this class will open a file chooser window and it returns a boolean value which indicates whether a file has been selected or not. And I have taken the path of the selected file using the “FileName” property and set it into the first TextBox in Figure (f).

Now let’s consider the actions caused by the click event of the “Read to screen” button

Figure (h)
Figure (h)

Here we are creating an object from the “PumaPage” class and we have to pass the path of the source image file which we got in the previous step into the constructor of this object. And then we can set the output format we want (line 54), and set the language which is used in the source image(line 55). Using the “RecongnizeToString()” method we can take the output of the reading into a string. I have applied that string into a “TextBlock”  in our MainPage.xaml. Finally I have called the “Dispose()” method so this PumaPage object will be disposed allowing another PumaPage object to get hold of the source image file.

Here is the code under “SelectDestination” button

Figure (i)
Figure (i)

This has a similar functionality as the “Select Source” button in Figure (g) and it will let us select the destination file where we would like to save the output if we plan to save it in a file. And that path is assigned to the Second TextBox in the MainWindow.xaml page. 

Click event in the “Read to File” button

Figure (j)
Figure (j)

The functionality of this event is similar to “read to screen” in Figure (h). Instead of the “RecongnizeToString()” method we must use the “RecognizeToFile()” method (line 85) and pass the path of the destination file which we got in the previous step, as a parameter.

Before running the application make sure to add a reference to the “System.Drawing” assembly by going to the Reference Manager in the same way we did in Figure (d). Under “Assemblies” section select “FrameWork” and select “System.Drawing ” as shown in below and click OK.

Figure (k)

Figure (k)

This is the image which I will use for recognition:

Figure (l)

Figure (l)

Now let’s run our application by clicking on “Start” button.

This is the result which I got by clicking the “Read to Screen” button after selecting the above source file through “Select Source” button.

Figure (m)

Figure (m)

And we can also use the “Read to File” button after selecting a destination file using the “Select Destination” button.

Figure (n)

Figure (n)

Here is the destination file after the operation:

Figure (o)

Figure (o)

There are some other properties under “PumaPage” class which can be set for much sensitive and thorough recognition, just play around with them a little bit and you will understand their usage and power in no time.

I hope you understood my explanation and learned something new. If you need any further clarifications, please feel free to contact me. And since this is my very first article I very much appreciate your feedback in order to make my future work much beneficial to you all!

Let’s meet again soon with another article.

Take care :)   Happy Coding!!