Category Archives: Web Applications

Welcome to my Blazing Pizza Store! ;)

Here’s how I built my Blazing Pizza Store with the awesome .NET Blazor framework… Oh and let me share a quick recap of the awesome knowledge I gained from it!

So recently I embarked on a journey to learn the latest awesomeness of .NET sphere, the Blazor framework, just so that I would be able to leverage some good old C# into the Web and get rid of having to code in JavaScript! :3 lol

Well I just love learning new stuff and building kickass stuff with .NET so obviously I’m loving it! I set up this repository up in my github just to encourage myself to follow up on every possible tutorial and learn of this Blazor awesomeness top to bottom.

Blazor-Playground repo:
UdaraAlwis/Blazor-Playground

That right there is where I’ll be continuously posting of my little self-learning journey into Blazor Framework.

However I came across this lengthy tutorial article through one of my colleagues, published by the .NET Foundation github, called the blazor-workshop!

BlazingPizza, the Blazor Workshop!

So this tutorial features building a Blazor Web Application from ground up for a Online Pizza Ordering shop, called Blazing Pizza! pretty catchy eh! 😉

Before this I had followed up on a few tutorials and video guides for self-learning Blazor bits, but man I gotta tell you this is the most comprehensive tutorial so far…

.NET Foundation, Blazor-workshop repo:
aka.ms/blazorworkshop

It features a step by step guidance on building a complete Blazor Web Application utilizing all the awesomeness it can offer, and it truly elevated my knowledge to another level! Hence I decided to share some of my learning experience with you guys…

Oh and I have published my finished project solution in github as well…

Udara’s Blazing Pizza Store:
UdaraAlwis/Blazor-Playground/BlazingPizzaApp

Published Web App:
https://blazingpizzaappudara.azurewebsites.net/

And I hosted the finished project in Azure as well! 😉

Feel free to try it out! 😀

Prerequisites?!

As for as some pre-requisites, of course you need some basic practice of HTML and CSS, having an idea of how these Web elements comes in together to form web pages and all, would definitely be helpful.

Its better to have a good overall knowledge of .NET programming with C#, as far as the language goes. Even though we’re going to be developing Blazor, it would some advantage if you had previous experience with ASP.NET, as I’ve seen similar elements.

I would not suggest you use this tutorial as your first ever Blazor try out, hence they provide us a pre-set up solution, with the basic Blazor Client UI and Backend API. So it could get confusing or overwhelming to figure it out at once. So its best if you first try out a few simpler demos from Microsoft docs, or a simple follow along Youtube tutorial, there are plenty out there.

Get started with ASP.NET Core Blazor
Build your first Blazor app

Then once you’re familiar with the project solution structure and all, you’re good to go!

Some Tips…

So I started off by copying their starter solution into my own repository, and from there I started following through the steps in the tutorial.

I would read through a given step, understand the objective of it and type the code all by myself. Sometimes I would even try to memorize the syntax and type it on accordingly to the understand I’ve got in that step.

It’s better not to copy paste the code to your own solution directly, I found typing the code by yourself is more effective in the learning curve, so that you get to familiarize with every little detail specially in the syntax.

Take plenty of intervals, for better productivity. This is a long tutorial, but it could be completed in a day, but its best to take some intervals in between to help clear up the exhaustion.

If a certain step is not clear, then you should complete it anyways, then move to the next step, and come back to it later until you get a clear understanding. Some times reading through a given step several times helped me understand better.

Learning journey!

This project BlazingPizza solution is a Blazor Client Side project hosted with ASP.NET, therefore it will be utilizing awesomeness of Web Assembly during the run time on client browser.

Components, Components everywhere!

Component-izing everything is the key in Blazor! Each page should be comprised of Component blocks, which has their own responsibilities separated, increasing the reusability of our code.

Layouts are also built as Components, where you inherit them component from LayoutComponentBase, such as in MainLayout.razor

@inherits LayoutComponentBase

They have a Body parameter where you will be placing the content in.

Dependency Injection!

@inject directive let’s your inject objects into your page that are registered in the DI container, such as,

@page "/"
@inject HttpClient HttpClient

Also you need to make sure those objects are properly registered in the DI, which is located in Program.cs

builder.Services.AddTransient(...);
...
builder.Services.AddScoped(...);

Parameterizing Components…

@code {
    [Parameter] public Pizza Pizza { get; set; }
}

[Parameter] attribute defines a parameters of a Component

Handle HTML Events..

You can specify which HTML event you want to handle using the corresponding HTML attribute in that and then specify the C# delegate you want called..

<li 
    @onclick="@(() => Console.WriteLine(special.Name))" .... >
</li>

Two way binding…

@bind directive lets you two-way bind a value between C# and HTML elements, also with @bind:event you can specify which element triggers the value change as follows…

<input type="range" min="@Pizza.MinimumSize" 
max="@Pizza.MaximumSize" step="1" 
@bind="Pizza.Size" @bind:event="oninput" />

Here we bind the value of <input> element to Pizza.Size, but it will change the value on the oninput event.

Component Event Handling!

You can define Events in a Component by creating EventCallback properties. Then Parent Component can subscribe to those events of a Child Component.

[Parameter] 
public EventCallback OnCancel { get; set; }

Then this Child Component’s elements can trigger it,

<button class="btn btn-secondary mr-auto" 
@onclick="OnCancel">Cancel</button>

And parents who are subscribed can get notified on up on it.

<ConfigurePizzaDialog Pizza="configuringPizza" 
OnCancel="CancelConfigurePizzaDialog" />

CancelConfigurePizzaDialog will be pointing to a method in C#.

Url Parameters into Components!

You can pass parameters into Components from the routing Url, as you see here in the @page directive we define the route along with the [Parameter] with the same name.

@page "/myorders/{orderId:int}"

@code {
    [Parameter] public int OrderId { get; set; }
}

Other parameter types such as string, bool, datetime and guid are supported.

Force Update UI!

Forcefully re-render a component by calling StateHasChanged() method which is built in function in Blazor.

This is handy when you don’t know exactly if the data has changed but wants to make sure its reflected in the UI.

Programmatic Navigation..

NavigationManager allows you to programmatically Navigate in your Blazor app.

@inject NavigationManager NavigationManager
...
...
NavigationManager.NavigateTo($"myorders/{newOrderId}");

AppState pattern…

Save the state of an object in the DI container,

builder.Services.AddScoped<OrderState>();

Saving the state will help you retain data during page navigation across components.

Data Validation!

Using Annotations on the data model you can easily implement Server side data validation. You can start by adding DataAnnotations validation rules onto the model classes.

public class Address
{
	public int Id { get; set; }

	[Required, MaxLength(100)]
	public string Name { get; set; }
	
	[Required(ErrorMessage = "Yo we need for sure!"), MaxLength(50)]
	public string City { get; set; }

	...	
}

This will be picked up by [ApiController] endpoints for validation in Server side.

Then for Client side validation, using EditForm component you can easily implement form validation in Blazor.

<div class="main">
    <EditForm Model="OrderState.Order.DeliveryAddress"  OnValidSubmit="PlaceOrder">
        
		... 

        <button class="checkout-button btn btn-warning" @onclick="PlaceOrder">
            Place order
        </button>
		
		<DataAnnotationsValidator />
		<ValidationSummary />
    </EditForm>
</div>

The above ValidationSummary, displays a basic list of errors, if you need something nicer then its better to decorate those <input> data fields with ValidationMessage instead.

<div class="form-field">
    <label>Name:</label>
    <div>
        <input @bind="Address.Name" />
        <ValidationMessage For="@(() => Address.Name)" />
    </div>
</div>

For better UX use Blazor built in components, such as InputText, InputCheckbox, InputDate, InputSelect, etc…

<div class="form-field">
    <label>Name:</label>
    <div>
        <InputText @bind-Value="Address.Name" />
        <ValidationMessage For="@(() => Address.Name)" />
    </div>
</div>

Authorization!

For enforcing Authorization in Server side, add the [Authorize] attribute on the API Controllers, which is provided by Microsoft.AspNetCore.Authorization namespace.

[Route("orders")]
[ApiController]
[Authorize]
public class OrdersController : Controller
{
    ...
}

This will make sure all incoming calls should be Authorized.

For the Client side we use AuthenticationStateProvider, which is provided by Microsoft.AspNetCore.Components.WebAssembly.Authentication package. Then to enable the authentication services for your Blazor Client, add a call to AddApiAuthorization in Program.cs

public static async Task Main(string[] args)
{
    ....
    // Add auth services
    builder.Services.AddApiAuthorization();
    ...
}

RemoteAuthenticatorView component orchestrates the authentication flow in the Blazor Client app. So to enable this make sure to add the Authentication.razor component.

@page "/authentication/{action}"

<RemoteAuthenticatorView Action="@Action" />

@code{
    [Parameter]
    public string Action { get; set; }
}

It handles all authentication actions such as register, login, profile, and logout.

We need to maintain the Auth state across the client app and inherit into child components, so let’s use CascadingAuthenticationState that wraps the Router of app.razor

<CascadingAuthenticationState>
    <Router AppAssembly="typeof(Program).Assembly" Context="routeData">
        ...
    </Router>
</CascadingAuthenticationState>

AuthorizeView will let you control displaying of elements based on the Auth state.

<AuthorizeView>
	<Authorizing>
		...
	</Authorizing>
	<Authorized>
		...
	</Authorized>
	<NotAuthorized>
		...
	</NotAuthorized>
</AuthorizeView>

Use the IAccessTokenProvider injected to the pages for acquiring an AccessTokens whenever you need to call the API.

var tokenResult = await TokenProvider.RequestAccessToken();
if (tokenResult.TryGetToken(out var accessToken))
{
	...
}
else
{
	NavigationManager.NavigateTo(tokenResult.RedirectUrl);
}

AuthenticationStateTask lets you check programmatically if the user is logged in or not. You can use it as a [CascadingParameter] in any page, thanks to the CascadingAuthenticationState that we added earlier.

[CascadingParameter] 
public Task<AuthenticationState> AuthenticationStateTask { get; set; }

Use it to access User.Identity.IsAuthenticated for checking the User’s Auth state.

protected override async Task OnInitializedAsync()
{
	var authState = await AuthenticationStateTask;
	if (!authState.User.Identity.IsAuthenticated)
	{
		NavigationManager.NavigateTo("authentication/login?redirectUri=/checkout", true);
	}
}

AuthorizeRouteView controls the direct access to routes based on Auth state

<CascadingAuthenticationState>
    <Router AppAssembly="typeof(Program).Assembly" Context="routeData">
        <Found>
            <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)">
                <NotAuthorized>
                    ...
                </NotAuthorized>
                <Authorizing>
                    ...
                </Authorizing>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            ...
        </NotFound>
    </Router>
</CascadingAuthenticationState>

You will lose state during redirection, specially in authentication flow, but you can preserve it by implementing RemoteAuthenticationState.

public class PizzaAuthenticationState : RemoteAuthenticationState
{
    public Order Order { get; set; }
}

You need to register it in the DI Services with AddApiAuthorization<PizzaAuthenticationState>() and update the Authentication.razor accordingly by replace the RemoteAuthenticatorView with RemoteAuthenticatorViewCore set up.

@page "/authentication/{action}"

<RemoteAuthenticatorViewCore TAuthenticationState="PizzaAuthenticationState"
    AuthenticationState="RemoteAuthenticationState"
    OnLogInSucceeded="RestorePizza"
    Action="@Action" />

@code{
    ...

    public PizzaAuthenticationState RemoteAuthenticationState { get; set; } = new PizzaAuthenticationState();

    ...
}

You can use the LogOutSucceeded in Authentication component to set the page to redirect to once the user logs out.

builder.Services.AddApiAuthorization<PizzaAuthenticationState>(options =>
{
    options.AuthenticationPaths.LogOutSucceededPath = "";
});

Javascript Interop!

Use IJSRuntime to invoke JavaScript functions from C# code.

await JSRuntime.InvokeVoidAsync
("javascript.functionname", param1, param2);

var result = await JSRuntime.InvokeAsync<bool>
("javascript.functionname", param1);

You can call void methods and even await for results as shown above.

Templated Components…

Using Razor Class Library you can create your own components library for your project solution.

Templated Components can be defined as those components that accepts body content as a parameter. You can create these to increase the reusability and build truly decoupled components.

Use a parameter of type RenderFragment which is a delegate type that the runtime has special handling for, to place content inside a Templated Component.

[Parameter] 
public RenderFragment ChildContent { get; set; }

You can also add multiple RederFragment parameters in a component. We can create a generic-typed component using the @typeparam directive, to support any type of data as follows, @typeparam TItem

[Parameter] 
public RenderFragment Loading { get; set; }
[Parameter] 
public RenderFragment<TItem> Item { get; set; }

and you can set the type and pass parameter content to the generic template by,

<div class="main">
    <TemplatedList TItem="OrderWithStatus" Loader="@LoadOrders">
        <Loading>Loading...</Loading>
        <Item Context="item">
            Status: @item.StatusText
        </Item>
    </TemplatedList>
</div>

PWA bits!

Easily set up PWA features (installable, offline, push notifications) for Blazor, with service-worker.js configuration.

Simply create a service-worker.js file in your Blazor Client’s wwwroot directory, and add the ‘install’ and ‘fetch’ event listeners inside. Then to enable it add a reference of it to the index.html file, beneath the other script elements..

<script>navigator.serviceWorker.register('service-worker.js');</script>

To make your Web app installable, add the manifest.json file in wwwroot directory, which will include app set up details. Then add the reference of it inside the <head> element in index.html

<link rel="manifest" href="manifest.json" />

Setting up Push Notification, first execute the Push Notification permission request from the user through JS script and acquire the NotificationSubscription object, which will provide you the following object filled with Url, P256dh and Auth properties.

You will be passing it over to the API endpoint to save it in the DB with the UserId attached in it. Then when you need to send push notification to your User from your API backend, retrieve the NotificationSubscription object from the DB and use WebPush to execute the broadcast.

var payload = JsonSerializer.Serialize(new
{
	message,
	url = $"myorders/{order.OrderId}",
});
await webPushClient.SendNotificationAsync(pushSubscription, payload, vapidDetails);

Then to display that push notification you need to set up ‘push’ event listener in your service-worker.js and additionally to handle the user click on notification, you can set up ‘notificationclick’ event listener in there as well.

self.addEventListener('push', event => {
...

self.addEventListener('notificationclick', event => {
...

You can generate your cryptographic keys for the push notification set up at https://tools.reactpwa.com/vapid and make sure to update the publicKey in both client and server, then privateKey in server along with the subject, mailto:bingo@bingomail.bingo

Publish to Azure!

To Publish to Azure, you need to create an App Service and a Hosting Plan of Basic tier or higher. Right click on Blazor Server project node -> Publish and follow through the wizard to create your Publish profile.

Before deploying you need to set up a signing key with Azure Key Vault for the IdentityServer. So create a new Key Vault -> create new Certificate (copy the Subject value for later use) -> go to your App Service -> TLS/SSL Settings -> Private Key Certificates (.pfx) -> Import Key Vault Certificate -> Select the imported certificate and copy its thumbprint -> go to Configuration in same App Service -> Add the new key WEBSITE_LOAD_CERTIFICATES and use the thumbprint as the value -> Ok

Then update the BlazingPizza.Server appsettings.json with the Certificate Subject name you configured, “Name”: “CN=BlazingPizzaCertificateUdara”

Publish the App! you’re all done! 😉

It’s go time!

So at the end of all that awesome learning experience, I had built myself a beautiful Blazing Pizza Store web app! 😀

Woot! woot!

Update to the Tutorial…

By the time I almost finished writing this post, they seemed to have updated the tutorial a little bit for the better, such as using the BaseAddressAuthorizationMessageHandler for acquiring access tokens and moving the whole logic to a separate OrdersClient, which will increase the reusability of the code for sure! 😀

Conclusion!

This BlazingPizza workshop tutorial was one of the most comprehensive step by step guide I ever followed for learning Blazor given my last few weeks into this awesome journey. I’m not much of a Web dev fella given my extensive Mobile dev background, but I gotta say I picked up a lot about .NET Web development bits in this tutorial, not only that a complete picture of the awesomeness of Blazor framework.

I hope my humble effort of sharing the new knowledge I gained in Blazor development helps out any fellow devs out there striving to learn new stuff!

Share the love! 😀 Cheers yol!

Programmatically access your complete Google Forms skeleton!

So you wanna load the content of your Google Forms programmatically? access all the questions, answer options, field types, submit ids and so on as you wish? 😉 Stick around!

Hope yol remember in my last blog post, SCRIPTfully scrape off your Google Forms Field Ids… I was sharing a neat little script I built to extract the Field identifier IDs from your Google Forms page, so that you can use them with ease for auto filling question answer fields or submitting data using REST API into your Google Forms! So this is the nest step in this series of Google Forms Hacks!

In this post we’re gonna load your Google Forms skeleton programmatically!

What does it mean?

Yes, instead of loading your Google Forms page on the typical web browser, why not load the bare bone content of it as you wish? By this I mean,

  • List of Questions (your question content…)
  • The types of Questions (Short Answer, Paragraph, Checkbox, etc)
  • Available Answer options (Multiple choice answer questions…)
  • Title and Description of your Google Form, etc…
  • And many more details you have added to your Google Form…

Once you get access to those bare bone content or the skeleton structure of your Google Form, then you can do all kinds of stuff with it…

Then  you can render it as you wish and present to your users, re-render it into a Web App or a Desktop app or even a Mobile App with your own custom layouts, filtering, and validations! 😀

So how we gonna do it?

Simply put, we gonna extract the skeleton or the bare bone structure from our Google Forms page. Now as you may have figured out there’s no official API or SDK to access Google Forms services programmatically, therefore we obviously have to hack our way around this!

We’re going to build a little a script which will load the HTML content of our Google Form and perform a magical algorithm to extract our Google Forms structure! All the questions, answer options, validation, and etc the whole deal… 😉

Backstory…

In my last post hope you remember how I shared about scraping through the HTML content of our Google Form page to extract Field identifiers which is used to submit answers or otherwise known as Field Answer identifiers.

Then along that same time I was experimenting with trying to extract the whole structure of the design the same manner. But filtering through the HTML tags to retrieve the complex structure of a given Google Forms Question-Answer field structure seemed quite hectic.

Jackpot!

So while I was  going up and down the HTML of the page, trying to find a better way to extract our Google Forms Question-Answer structure, I came across this interesting piece of script at the end of the page.

As you can see at the bottom there’s java script starting with “FB_PUBLIC_LOAD_DATA_ = [nulll…” with a strange pattern of the content, which I’m not sure what the purpose of it in this page, but you can surely find this in any Google Forms page. This specific script snippet seem to be holding the whole skeleton of our Google Forms page as you can see, it containing the Question Content, Answer Fields and so on!

So there’s our little treasure… 😉

Now finding this bit wasn’t enough at all, I had to figure out how  to parse this properly to extract the data that we’re looking for, as you can see it’s got a little unorthodox structure in its content. Now that’s the next challenge!

Let the hacking begin…

Now for this post also let’s use the same sample questionnaire Google Form that I created for last post’s demo.

https://docs.google.com/forms/d/e/1FAIpQLSeuZiyN-uQBbmmSLxT81xGUfgjMQpUFyJ4D7r-0zjegTy_0HA/viewform

So we’re going to load the HTML content of our Google Forms page, and then we’ll extract that mystery javascript code snippet, and parse the content of it to access the skeleton structure of our Google Forms!

Now first let me walk you through how to parse that mystery FB_PUBLIC_LOAD_DATA_  content! 😉 Let me warn you though, figure this out was no walk in the park but let me share the secret source with yol straight away.

Let me copy and paste it here from my sample Google Form and get started! Below you can clearly see how all the Questions along with Answers and Field identifiers in my sample Google Form are contained in this mystery code snippet.

var FB_PUBLIC_LOAD_DATA_ = [null,["Please fill up the following questions. You need to answer all the fields please! ;) ",[[122249536,"Hello there, this is question 1, could you answer?",null,0,[[1277095329,null,0]]],[1170747525,"Which one would you prefer as the answer from below?",null,2,[[995005981,[["Mango Peach",null,null,null,0],["Banana Plums",null,null,null,0],["Strawberry Pears",null,null,null,0]],1,null,null,null,null,null,0]]],[2147453523,"Well another question here wouldn't hurt now eh?",null,4,[[1155533672,[["Monkeys with hoodies",null,null,null,0],["Dogs with hats",null,null,null,0],["Cats with crowns",null,null,null,0]],1,null,null,null,null,null,0]]],[172187917,"How about this for a change?",null,3,[[1579749043,[["Running Banana",null,null,null,0],["Jumping Apples",null,null,null,0],["Rolling Pears",null,null,null,0]],1,null,null,null,null,null,0]]],[676251522,"What's the date would you like to be today?",null,9,[[815399500,null,1,null,null,null,null,[0,1]]]],[1280585510,"What time would it be right now? ",null,10,[[940653577,null,1,null,null,null,[0]]]]],null,null,null,[0,0],null,null,"Sample questionnaire!",48,[null,null,null,null,0],null,null,null,null,[2]],"/forms","Random Sample Questionnaire",null,null,null,"0",null,0,0,"","",0,"e/1FAIpQLSeuZiyN-uQBbmmSLxT81xGUfgjMQpUFyJ4D7r-0zjegTy_0HA",1];

In order to parse this into a known data structure you need to first remove the “var FB_PUBLIC_LOAD_DATA_ = ” and the “;” at the end if you notice carefully.

However by looking at the content you can make a guess that it should be some JSON based content structure.

So let’s use any online JSON parser tool and you should be able to see the formatted content as follows. ex: jsoneditoronline, codebeautify or jsonformatter

Now you get some readable structure yeah, where you are able to traverse through it’s content by expandable nodes array.

Pattern Recognition and Analysis!

Since we parsed the mystery content into a JSON Array tree, we can now traverse through the data easily and extract the specific data that we’re looking for.

Now since there’s no official documentation regarding the parsing of this data from structure, I guess we’re going to have to figure out ourselves, where to pick what data in this data tree and recognize the pattern.

So basically what we are going to be focusing on retrieving the following data,

  • Google Form Title, Description, Form ID
  • List of Question Fields

And in each question,

  • Question Field Text
  • Question Type
  • If submitting Answer is mandatory or not
  • Available answer list (Multiple answer selection)
  • Question Field Identifier (Field Id) or Answer Submission ID

Now that I believe comprises the complete structural skeleton of any given Google Form! 🙂

– General Google Form data

In the parent root you can see the Google Form Doc’s Name in the [3] index.

Then the Form Id in the index [14] of the array tree. And rest of the important bits seem to be in the [1] index node as you can see it has a lot of child nodes in it. Let’s look into that..

Now this index item seem to be containing a lot of information in child nodes. In its child node index [0] you can see the Description of our Google Form, and index [8] holds the Title.

Next the most important node, that is node index [1] which contains all the Question Fields data, and it looks like this.

Once you expand it you can view the List of child elements that represents the Question Fields in your Google Form!

Now you know you can easily access the Question fields by traversing [1][index of the question field]

Let’s try opening up a child node then! 😉

– Question Field data

Woot! Here you have it, the whole Question Field as expected, and specifically in this sample questionnaire, you can see how it shows all the details regarding the 1st Question Field.

Also notice the value I’m pointing to below, node [1][0][3] to be exact, that index holds the Question Type value “0”, which determines whether it’s a Short Answer, Paragraph, Dropdown, Checkbox field and so on. Then the second arrow, node [1][0][4][0][0], that right there is the unique Field identifier that we need to use when submitting answer to this question field. 😀 Thereby we could consider the value as Answer Submit Id as well.

Now that’s a single answer field, such as Short Answer and Paragraph Question field types in Google Form.

In the node [1][0][4][0][2] holds the value to determine whether Answer Required or not.

So how about we open up a child node of a Multiple Answer field?

Now below I’ve open up the node of a Multiple Answer selection Question Field.

– Multiple Answer Question Field data

Right here you can see in the Question Type value node it has number “2” as the value, which is what Multiple Answer Question Fields are denoted with.

Over here you get an extra child node underneath the Field identifier node as you recognized above.

This has a list of child nodes which as you can see holds the list of Answers Available for the Question Field.

So now we know how to load the list of Answers available for a given question, that we can traverse through.

Next let me dive a bit deep into Question Type identifier values..

– Hunt for Question Field types…

You already know Google Forms provide multiple types of Question Fields that can be added to your Google Form, and you saw above where to grab the Field type value. But how do you know which value maps to what type?

That’s why I had to run a trial and error recognition of trying to match those numeric values to the actual Field types, and I’ve finalized the list as follows…

  • Short Answer Field = 0
  • Paragraph Field = 1,
  • Multiple Choice Field = 2
  • Check Boxes Field = 4
  • Drop Down Field = 3
  • File Upload Field = 13

// File Upload – we’re not going to implement for this right now, because it needs user log in session implementation, a bit complicated. So let’s look into it later!

  • Linear Scale Field = 5
  • Grid Choice Field = 7

//Grid Choice – represents both: Multiple Choice Grid & Checkbox Grid

  • Date Field = 9
  • Time Field = 10

As you can see the assigning of the numeric values for the available types of Fields are not so straight forward and Google Forms tends to mix up or skips some mapping of the values without a proper order.  That’s why I mentioned it was a bit painful trial and error process.

Now we’ve walked through the recognition of the data pathways that we’re hoping to extract, let’s summarize our analysis as follows..

  • The most crucial node is index [1] which holds all the data we need
  • Although Google Form’s Id is in the root node [14]
  • Description is in the node [1][0]
  • Title is in the node [1][8]
  • All the Question Field data is in node [1][1]
  • We need to traverse through this child node list and fetch each item
    • Question Field Text is in  [1]
    • Question Field Type is in [3]
    • Question Field Id is in [4][0][0]
    • Question Field Answer required or not is in [4][0][2]
    • Multiple Answer Options are in [4][0][1]
    • Multiple Answer Options needs to be traversed and loaded
  • We need to create a mapping for numeric values of Question Field Types to readable values, Short Answer Field, Paragraph Field, Multiple Choice Field, etc.

So that’s the complete list of analysis that we have derived from this step, which we need to carry forward to our next level, that is implementing all this logic and retrieving the complete skeleton structure of your Google Forms page!

Let the coding begin!

So just like in the previous article, I’m going to use  dotnet and C# as the language for our little code snippet. And to parse HTML content, I choose HTMLAgilityPack. Then we need Newtonsoft.Json to perform our JSON data structure execution. Also I would be using a Console Project type in dotnet, pretty simple to begin with.

Given you have created the project and added the HTMLAgilityPack and Newtonsoft.Json to your dotnet project, let’s start by creating the model class

Enum mapping class for the Question Field Types that we identified before, so that we can easily cast our scraped out values in code.

Now you might say shouldn’t we create Model classes to represent Google Forms Fields and Google Form parent objects themselves, but I would rather keep that to a future post! 😉 let’s just try to keep things simple in this one!

Then let’s code the method that we’ll be executing the load our Google Form structure! I’m gonna be calling it ScrapeOffFormSkeletonFromGoogleFormsAsync() with a parameter passing in which will carry the URL link to a given Google Form! 😀

Let’s begin by adding the simple LoadFromWebAsync() using the HTMLAgilityPack, which will load the HTML content first.

Next let’s access the FB_PUBLIC_LOAD_DATA_  script content in our HTML doc.

As you can see we are filtering out the html nodes with the “//script” definition which contains “FB_PUBLIC_LOAD_DATA_” value in it. Then we load it into a variable fbPublicLoadDataJsScriptContent which of type string.

Next on, we gotta clean it up by removing the “var FB_PUBLIC_LOAD_DATA_ = ” and the “;” at the end if you notice carefully. So that we can parse the data to a JSON Array structure.

Now we’re ready to parse the content into a JSON Array using Newtonsoft.Json as below.

And also let’s access some basic data of our Google Form, such as Title, Description and the Form ID just like how we discussed in our pattern analysis of this array object structure. Then we load the most important index of the array [1][1] into arrayOfFields variable at the bottom.

Next on we are going to traverse through the list of field data indexes, but here I have added a special filter to identify if the given Field object is an actual Question or a Field placed as a Description Panel or an Image banner, which I have noticed people do to customize their Google Forms. In that case we ignore that object and move on to the next iteration.

There we are looping through each item in arrayOfFields and skipping off the filtered objects. As you can see above, we’re first loading the Field Question text value, then extracting the Question Type value, while using the Enum parser that we build before with mapping the readable Field Type values.

Speaking of accessing Answer Options List for Multiple Choice Questions, we’re handling that next in this code bit.

And we load it up to answerOptionsList object.

Then we load our next Values, Field Answer Submit ID and the value representing if the answer is required to submit or not, with a conversion to boolean which is true or false.

For the IsAnswerRequired value Google gives us “1” or “0” as the representation of true or false, so we need to do that mapping ourselves as you see above.

Then as the last stretch of our loop, let’s print it all out to the Console.

There now the data related to each field is now printed out to the Console nicely.

Let me share the full code snippet that puts it all together below. Strap your seat belts fellas its a long code snippet, therefore I’ll only put a link to it here! 😉

https://gist.github.com/UdaraAlwis/c338a9de4af4509ba0ff67e2c4f37f5c

Yeah click on that Gist link and view the full code snippet over at my Github!

You can use the above method in any of your dot net projects, as long as you have HtmlAgilityPack and Newtonsoft.Json nugets installed and imported in the code. Application is yours to imagine yo, just pass in your Google Forms link text to the method and you’re good to go!

Hit F5 and Run!

Now if you’re on Visual Studio, let’s just run this little snippet of magic eh! 😉

TADAAA! 😀

Here I’m using my simple demo Google Form link, passing it into the method in this little Console dotnet app, and you can see how it nicely loads all the question field data and all the information about my Google Form page.

Here’s a fun side-by-side comparison of programmatically accessing your complete Google Forms skeleton!

Pretty cool eh!

As far as my testing this little script works perfectly for any Google Form that contains the basic main types of Question Fields that are available in Google Forms as of this day!

Imagination is the limit yol! 😉

Well… That’s it!

Who would have thought the FB_PUBLIC_LOAD_DATA_ is such a mysterious yet awesome data snippet hiding in the rendered HTML content of a given Google Forms page! lol 😀

During my experimental research of cracking this mystery, I got some hints from the following python hacks that I derived the same logic into dotnet C# code.

https://gist.github.com/davidbau/8c168b2720eacbf4e68e9e0a9f437838

https://gist.github.com/gcampfield/cb56f05e71c60977ed9917de677f919c

Now keep in mind we do not have precise control whether Google will change these format and data structure patterns in future, so you gotta keep an eye out if you’re planning to use these hacks for a long term solid implementation. My suggestion would be to write up a series of Test cases (TDD yo!)

There you have it, the little magic script to programmatically accessing your complete Google Forms skeleton!

Share the love! 😀 Cheers!

SCRIPTfully scrape off your Google Forms Field Ids…

Y’all wanna scrape off the list of Field IDs of your Google Forms easily? yes programatically through a neat little script! Stick around y’all! 😉

So you remember my last blog posts about my journey of hacking around Google Forms, You may RESTfully submit to your Google Forms… and even in the one before, Let’s auto fill Google Forms with URL parameters… you might remember how crucial it was to hook up to the list of Field Identifiers in your Google Forms which you can use to Submit data to your Form using the REST API or even to populate the Auto filled data in the Form. Now that goes without saying this blog post is a follow up of the above two articles, therefore I would prefer if you took a sneak peak into those before continuing in this article.

So the way we retrieved the list of Field identifiers were by manually reading through the rendered HTML code and looking at the network traffic data. Specifically I introduced three methods as follows…

  • Method 1: Looking up page source HTML content.
  • Method 2: Inspecting HTML code of each field.
  • Method 3: Monitor the network traffic data.

So all those methods are completely manual, shouldn’t there be an easy way? Yes, I’ve been wondering that myself and I continued on experimenting…

Yes.. Scrape em off programmatically!

Wouldn’t it be easier if we could write a little script to retrieve the list of Field IDs in any given Google Form? Just scrape through the rendered HTML content and pick up the Field identifiers automatically! Oh think about how much time you could save! 😀

Well yes, that’s exactly what we’re going to do. Let’s build a simple script that could scrape off the list of Field IDs of your Google Forms without you breaking a sweat!

But to build the script you might have to break some sweat… 😉 Alright, so what this script is going to do is, given the link of a Google Form, it will load the HTML content of it, and scrape through it to find the elements that holds the Field Ids, filter them out and return the results! Quite straight forward eh! 😀

Let the hack begin…

Let’s use a dot net C# to write out script, and yes an absolutely biased choice given my favorite platform! lol But if you can grasp the process and idea behind each step you could easily reproduce the same script from any other language or framework!

It’s all about programming the our method of manually reading through the HTML code and figuring out the IDs, into a self executing code. This requires us understanding the pattern of which the HTML is rendered for each Field element in the Google Form, and I figured this out by repeatedly looking at the rendered HTML content. Once we understand the pattern and where to filter out the data that we need to scrape out, we can easily code it into our script.

Now for this post also let’s use the same sample questionnaire Google Form that I created for last post’s demo.

https://docs.google.com/forms/d/e/1FAIpQLSeuZiyN-uQBbmmSLxT81xGUfgjMQpUFyJ4D7r-0zjegTy_0HA/viewform

So now we got a Google Form, let’s start the little hack by finding the field IDs in the form…

Identify the Pattern..

Now this is the most crucial step, let me walk you through by simply looking into the rendered HTML content of our Google Form.

Now for me though it took a lot of trial and error steps to recognize how all different types of question fields are rendered in Google Forms, where by created a bunch of sample Forms and analyzed their HTML structure continuously, until I was sure. 😉

I’ve explained regarding this pattern in my previous blog post: Let’s auto fill Google Forms with URL parameters… in which I dive into detailed steps of finding the IDs of each question field in your Google Form. If you go through it and focus on the section “Method 2: Inspecting each field” you could easily understand what I’m about to dive into. Therefore let me keep things simple in this article just to avoid repetition. 😀

Assuming you’re using Google Chrome let’s begin, by right clicking on any of the question fields in your Google Form and go to -> Inspect Element menu option.

If you carefully take a look at the rendered HTML node of our Short Answer question Field, it’s actually “input” type element and you can see how the “name” property holds the ID for the Field “entry.1277095329”. Now let’s take another type of an Field, how about Multiple choice selection question Field? 😮

When you’re reading through the parent node of the radio button elements, you can see at the bottom there’s an “input” type element, that’s set to hidden, with the Field ID that we’re looking for. Then how about a Checkbox selection Field? Let’s try the same inspection and see for ourselves… 😉

Now the parent node of it is a bit differently structured, but you can see how it follows the same pattern, of having an “input” type element which holds the ID of the question Field.

Also something to notice is that the same exact child node is repeated in each parent div element containing the ID value. And then just above the child elements, you got another field which carries the same values, but with a “_sentinel” suffix in the “name” property, which sorta creates a repetition of data that needs to be filtered out. So this is something you need to keep in mind, that we will need to filter out in our script. 😀

Next let’s try out a Paragraph question Field of Google Forms, and try to analyze it.

Now this fella got a “textbox” type element rendered, which also includes the “name” property that holds the Field ID, and now we know another element that needs special filtering in our script! 😉

Finally all the other types of Questions Fields in Google Forms follows almost the same pattern of rendered HTML, therefore without further adieu let’s try to analyze the patterns which we seen behind those elements.

Analyze the Pattern…

Now in this step you need to be able to see the full picture of the whole pattern of which those Google Forms question Field elements are rendered in their HTML environment. So after analyzing all those different fields we could draw a few major analysis that we need to keep in mind when we’re thinking of scraping out the Field IDs from the HTML…

  • “input” elements holds the Field IDs in their “name” attribute
  • “textarea” is an exceptional element which is used by Paragraph question type
  • the Field ID value begins with “entry.” prefix in the “name” attribute
  • Checkbox Field elements renderes a repetition of its “input” nodes
  • Also Checkbox Filed generates an extra “input” element with “_sentinel” suffix in ID
  • repeated nodes with same values should be filtered out

Now keeping all those in mind we need to implement the logic into our script, or in other words we need to code the above logic and filtering as rules into our little script that’ll scrap out the HTML of our Google Form to retrieve the Field IDs automatically.

Let the coding begin!

Assuming that you’re already experienced in dotnet, I’m not going to be diving in to spoon feeding details here, and rather focus on the important bits of the code. We’re going be using dotnet and C# as the language for our crawler script. And we need a library that could parse HTML content, and traverse through those content programmatically. Therefore I choose HTMLAgilityPack which is a well known and stable HTML parser for dotnet projects.

So the project type that you’re going to implement is totally up to you, but for this demo I would be using a Console Project in dotnet, pretty simple to begin with.

Given you have added the HTMLAgilityPack to your dotnet project, let’s create the method definition with a string parameter that will represent the URL link of our Google Form that we need to scrape off and it will be returning the list of Field IDs of the given Google Form!

Oh and make sure to make it an async method, hence we will need that for our web call that’ll load the HTML content.

Let’s use the HtmlWeb class which allows us to load an HTML content from a given url string asynchronously.

There we’re executing the LoadFromWebAsync() upon the given Google Forms Link and load it into memory. Next we need to implement out first line of filtering on top of the HTML content that we loaded into memory.

There we’re scooping off the “input” and “textarea” elements from the HTML content,  into a List object of type IEnumerable<HtmlNode>, given the DocumentNode which contains all the HTML elements of the Google Form that we just parsed into memory.

Like I said before we’re basically implementing the logic that we learned in the Pattern Analysis step, therefore next we go on to the next layer of filtering.

There we’re filtering the list of data based on the predicament, that we retrieve all the HTML elements which contains the “entry.” prefix in their “name” attribute, thus securing out Field ID values. Then we exclude all the elements that contains “_sentinel” suffix in their “name” attributes which governs the cleaning up of Checkbox field element repetition.

As you see above we’ve singled out the HTML elements that we’re targeting. Next we gotta do some final clean up of our scraped nodes.

We need to clean up any existing duplicate elements in the list, therefore we’re gonna group similar items, and pick the first element into a list of type List<HtmlNode>, which will eliminate the repetition nodes probably caused by Checkbox fields.

And finally we’re going to access the each Node’s “name” attribute, load it into a List.

And return the results. Oh just an add-on I’m printing out the scraped off Field ID elements into the Console.

Let me share the whole script down here…

Let’s try it out shall we! 😉

Hit F5!

Now I’m gonna use the sample Google Form that I created for this demo, pass its URL link into this little script, and hit F5 in Visual Studio!

Look at that beauty! 😉 The complete list of Question Field identifiers in my sample Google Forms just like we expected.

As far as my testing this little script works perfectly for any Google Form that contains the basic main types of Question Fields that are available in Google Forms as of this day!

Well… That’s it!

Basically you can scrape off any data from a given HTML content as long as you understand the pattern of which the HTML rendered targeting the pieces of data that you’re looking for! Likewise there could be many different types of Google Forms that contains different types Question Fields even with custom content in them, but at the end they all follow a certain HTML rendering pattern, which is just a matter of figuring out.

I would like to remind you again, the reason I considered this as a “SCRIPT” is due to the possibility of converting the same HTML scraping steps into any other language or framework easily, as long as you understand the pattern of the rendered HTML of your Google Form!

Now keep in mind all these are simple hacks and tricks derived by careful observation of rendered HTML content of any given Google Forms page, and we do not have precise control whether Google will change these format and rendering patterns in future, so you gotta keep an eye out if you’re planning to use these hacks for a long term solid implementation.
My suggestion would be to write up a series of Test cases (TDD yo!) which would test for the above process flows to make sure they’re working as expected and notify you in case of any changes from Google. 😉

There you have it, the little magic script to scrape off the list of Field IDs from your Google Forms page!

Share the love! 😀 Cheers!

You may RESTfully submit to your Google Forms…

You wanna submit responses to your Google Forms in a REST-ful API call, or rather programmatically in code or easily from a Postman-like tool? Then you’re welcome to stick around here… 😉

So you remember my last post on my journey of hacking around Google Forms, trying to be a smart-ass eh! Let’s auto fill Google Forms with URL parameters… Oh yeah that one right there, well that was just the tip of the ice berg of me playing around with Google Forms! Let me share the next set of cool tricks I figured out here! 😀

This little trick of submitting data RESTfully to your Google form, could become very handy if you wanted to build your own improved custom UI for submitting data to your Google Form, along with your own validations for the fields or even to quickly populate a bunch of sample data from your Form for experimental reason. Them awesome possibilities are endless! 😉

Well.. Google Forms with RESTful ?!?

So during my adventures into messing around with Google Forms, I figured out that we can submit data into our Google Forms using their REST API endpoint! So how cool is that eh, we can directly post data into our form RESTfully, from whatever the medium you prefer, programmatically, or Postman like tool! 😉

So in this post lemme share that cool trickery bits with you…

Let the hack begin…

Now keep in mind unlike the last post, this is a bit advanced trick which requires some experience on HTML and web development, well it could easily help at least.

We’re gonna get the REST endpoint source of our Google Form, package our question-field-answer data into a request object and submit it to the REST endpoint directly, using Postman or Programmatically in code.

Now for this post also let’s use the same sample questionnaire Google Form that I created for last post’s demo.

https://docs.google.com/forms/d/e/1FAIpQLSeuZiyN-uQBbmmSLxT81xGUfgjMQpUFyJ4D7r-0zjegTy_0HA/viewform

Little sneak peak:

So now we got a Google Form, let’s start the little hack by finding the field IDs in the form…

Yes, you still gotta hook up the fields!

Remember in my last post I explained about the Fields in our Google Form having unique identifiers (or IDs) that we can use to attach data into for submission? well you still need em! 😛

Now for this you could still use the methods we discussed in the previous post to get the list of ID of the fields in your Google Form, but this time I’ll introduce some easier ways, since we’re moving to a bit advance trick…

Hooking up to the fields and Endpoint…

Keep in mind this requires a little bit experience in web dev! 😉 Basically we’re going to get the list of Field IDs by tracing the submission request call in our Google Form, which will also help us figure out the REST endpoint link.

So open up your Google Form in Chrome browser and open up developer tools by using the browser menu or on Windows click “Ctrl+Shift+I keys” in the keyboard.

Now to make the magic work, go to “Network” tab in the menu list which will allow us monitor the network trace that’s going to be sent from browser to Google Form submission REST endpoint.

Next, you need to fill up all the question fields in your Google Form and hit submit button. Carefully watch what happens in the developer console!

Yep a whole bunch of logs pops up, which shows you the traces of all the network calls that occurred in the last “Submit” button click. And in there the most important request log is the “formResponse” log as you seen above.

Click on formResponse log which will bring up all the details on it.

Now this is quite awesome, it will show you in 4 separate sections all the details about the Google Form submission data endpoint that just occurred.

https://docs.google.com/forms/d/e/1FAIpQLSeuZiyN-uQBbmmSLxT81xGUfgjMQpUFyJ4D7r-0zjegTy_0HA/formResponse

The Request URL is the endpoint we’re going to be using to submit our form data and the Form Data section is where you’ll find the list of field identifiers of your Google Form.

Now that your holy grail of list of field identifiers in bulk. So go ahead, highlight that chunk of text and copy it up to some notepad to be used later.

Now if you noticed the ID with the “entry.1155533672_sentinel” is something that you can ignore, since its a repeated field coming from the Check box question field in your Google Form!

Just like that you can easily extract the list of IDs of the fields in your Google Form! 😀

entry.1277095329: Bibimbap Turtles
entry.995005981: Banana Plums
entry.1155533672: Dogs with hats
entry.1579749043: Jumping Apples
entry.815399500_year: 2019
entry.815399500_month: 11
entry.815399500_day: 11
entry.940653577_hour: 00
entry.940653577_minute: 30

Now that’s the form data sample from my Google Form! 😉

Shove it up into a Postman!

Or any of the web dev tools you prefer to make a simple REST api call. Up to you! lol. Let’s create a POST call with our Google Forms submission API endpoint which we retrieved in the above step.

https://docs.google.com/forms/d/e/1FAIpQLSeuZiyN-uQBbmmSLxT81xGUfgjMQpUFyJ4D7r-0zjegTy_0HA/formResponse

Actually this URL you could easily make up using your Google Form publish url, just by replacing viewform with formResponse suffix.

So make sure to add the Body parameters of type x-www-form-urlencoded, and list out all the question field IDs and their values you’d like to inject in to the submission. Since then you need to apply header Content-Type as application/x-www-form-urlencoded which will enable our body parameters object.

Assuming you have set up all the body form fields properly, let’s fire it up! 😀

Fire it up!

Let’s go ahead and execute the REST posting! Hit “Send“, and bam!

You should get a successful 200 Status Code response with the above success message “Your Response has been recorded.” inside a whole bunch of HTML content and if you move to the “Preview” tab, you can see how the rendered UI being returned as well.

Now let’s say if you missed adding any specific field in the request body, that was already marked as “Required” in your Google Forms template, and you had hit “Send”. In that case it would return a bad request 400 Status Code with the error in HTML content, “This is a required question”, or with whatever the custom error message you configured your Google Form with.

Yeah you can even view in the Preview tab with the rendered HTML content.

Pretty neat eh! the same way it would behave in a browser environment you can duplicate in a RESTful environment such as Postman! 😀

Now let’s see how easy it is to push that into some code and execute this programatically!

Shove it up into a Code snippet!

Alright let’s shove that into a simple C# snippet where we could POST a simple HTTP request with the body parameters of our Google Form! Basically replicating the same execution as Postman you saw above! 😀

Above we’re using a simple dotnet HttpClient to execute our Google Form submission REST post call, by adding the body values dictionary into the request.

And then we’re printing the Status Code and the HTTP content response we get.

Hit F5!

If you hit F5 on the above code in Visual Studio, you should get the following.

We are successfully submitting our Google Form data to the REST endpoint and getting the success code, along with the usual HTML content, same as how got in Postman. 😉

Now let’s say if something went wrong, or you missed a required field in your request body,

It will show up the same error handling we got in Postman, as 400 Bad Request! And if you dive into the HTML content, you can see how the error message was also delivered back.

So now you know how to programmatically submit data to your Google Forms in code! 😉

Imagination is the limit yol! 😉

Well… That’s it!

It’s quite straightforward how Google has built these forms in such a simple manner for you to handle them easily as you wish. Kudos Google!

Now keep in mind all these are simple hacks and tricks derived by careful observation of html code and network traffic, and we do not have precise control whether Google will change these format and rendering patterns in future, so you gotta keep an eye out if you’re planning to use these hacks for a long term solid implementation.
My suggestion would be to write up a series of Test cases (TDD yo!) which would test for the above process flows to make sure they’re working as expected and notify you in case of any changes from Google. 😉

You can do all kinds of cool stuff with it! So there you have it, how you may RESTfully submit to your Google Forms!

Share the love! 😀 Cheers!

Let’s auto fill Google Forms with URL parameters…

Wanna auto fill and populate your Google Forms with data by injecting values from the URL itself? Then you’re at the right spot. 😉

So I happened to be playing around with Google Forms recently and came across this requirement to pre-populate some data in my Google Form, which led me to come across this simple solution to automatically fill data in the fields of the Google Form by injecting values in the URL targeting the required fields.

Google Forms, a secret?!

Google Forms are simply, nothing but just a list of fields where the user is required to enter data into and submit.

To my surprise when I was hacking around with it, I noticed that Google Forms allows us to attach URL parameters that could target the fields in the form, and pre-populate them with the given parameters. This is probably a not so well known fact, and works like a charm as long as you scrape out the unique identifiers of the fields.

but many types of Fields..?!

There are many different types of fields that could consist in a Google Form, Text fields, Multiple Choice, Check boxes, Drop down, Date and Time selection fields… and so on. But one thing in common among all those different types of fields is that they all have a specific unique identifiers that represents them, so as long as we nicely grab those unique IDs we’ve got the hook to attach values to them on the loading of the page! 😉

Let the hack begin…

For this simple hack I have created a simple Google Form with a bunch of fields in it to enter data and submit. Just another regular Google Form, containing several fields in different types, to demonstrate how to successfully pass values into them no matter the type of each field.

https://docs.google.com/forms/d/e/1FAIpQLSeuZiyN-uQBbmmSLxT81xGUfgjMQpUFyJ4D7r-0zjegTy_0HA/viewform

Little sneak peak:

So now we got a Google Form, let’s start the little hack by finding the field IDs in the form…

Hooking up to the fields…

In order to understand this little hack, you need to treat each question in the Google Form as a field of its own existence, which can be represented by a unique identification that we can use to call upon to attach data into it.

Now let’s try to hook up to the fields of our Google Form by looking up their IDs. There are few ways to hack around to find the IDs, whichever you’re most comfortable you may proceed with…

Method 1: Looking up page source HTML content

One way is to look into the HTML content of our Google Form and manually search for our field identifiers. So open up your Google Form in a web browser and right click on the page -> click on “View Source” option.

Then it will open up the HTML code of the page. Alright now we got the access to the HTML content of our Google Form, let’s hunt for our IDs of question fields. The IDs you’ll find are in the format of, entry.XXXXXXXXX.

So now we know the format of the IDs, let’s search for them using the suffix “entry.”, so click “Ctrl + F” on your keyboard, and type “entry.” which will then highlight all the ID values in the HTML content of the page.

Each and every one of those highlighted search results represents a field that you need to enter data into in the Google Form. If you just read through the surrounding content of those IDs, you’ll see that they’re mapping to each question field in our Google Form.

You can just take a note of the list of entry values popping up in that search result to prepare for our next step.

There’s also another way…

Method 2: Inspecting each field.

Right click on any field -> Click on “Inspect” option, which will open up the HTML code of the specific element that you focused on.

As an example, in the above Text field, when we inspect its HTML content, it shows the “input” element. If you carefully read the HTML code there, you can see how that node has a property called “name” which has the value “entry.1277095329” as you can see above. TADAA! there you have the ID of that specific field.

You can easily find all the identifiers or IDs of the Fields easily in either ways above, so go ahead with whichever you find easier. 😉

Oh, different types of field eh! 😮

So in Google Forms we have many different types of Question Fields that are provided,  such as Drop down selection fields or Check box selection fields, etc. Therefore something to keep in mind is that all those different types of fields, may have their IDs assigned to them differently, because their HTML content is differently structured and rendered.

As you can see above, in the Google Forms designer console, you can see the different types of Question Fields it provides for the users.

Let me show some examples which might help you to track down their IDs! 😉

How to find the ID of a Multiple Choice field?

So one of the tricky fields is the Multiple Choice field in a Google Form. You gotta right click -> Inspect element, where you’ll see a list of Radio button elements attached to the parent “div” element.

Then at the bottom of the parent “div”, you have a hidden “input” field with the ID that we are looking for, that we can use to target in our little hack! 😉

How to find the ID of a Drop down field?

Well this one is quite the same for previous one where you’ll the hidden “input” field at the bottom of the parent “div” element.

You can see in the HTML content how the checkbox options at the top of the list and the bottom containing the ID field with “entry.xxxxxxxx” similarly.

How to find the ID of a Check Boxes field?

Sam as before you have to inspect HTML content of each element of the Check boxes field to get the ID. This will be attached to the “div” as a hidden “input” field, being assigned the same ID for each Checkbox element in the question. Which sorta makes it easier for us to take out the Field ID just by inspecting a single Checkbox element in the question.

As you can see same ID value is assigned to each Check boxes field in the question. 😉 Easy peasy eh!

How to find the ID of a Date selection field?

Well this is a little unique, just go ahead right click to “Inspect” the element as usual in your Chrome. Here you’ll see somewhat similar to the above but with three hidden input fields.

There’s going to be three “input” hidden fields with the ID for each “Year”, “Month”, “Day” selection in a Date selection field. So you need to keep a track of those three IDs, “entry.xxxxxxx_year”, “entry.xxxxxxx_month”, and “entry.xxxxxxx_day” to send a complete data to fill the date selection field.

How to find the ID of a Time selection field?

This is very much similar to Date selection where as you got IDs assigned for “Hour” and “Minute” fields of a Time selection field.

But you need to keep in mind each of those two nodes are inside two separate parent “div” elements as shown above. Anyhow take a note of the “entry.xxxxxxx_hour”, and “entry.xxxxxxx_minute” fields above which are the IDs you’re going to require to set the values for your Time selection.

Well I assume that’s plenty of examples on how to hunt down the field identifiers in your Google Form. Any other given type of field should somewhat follow the same pattern with their hidden fields with the IDs, and it should be easy to figure out as long as you’re comfortable with reading simple HTML content!

Now according to my sample Google Form, following are the IDs of the fields available..

  • entry.1277095329
  • entry.995005981
  • entry.1155533672
  • entry.1579749043
  • entry.815399500_year
  • entry.815399500_month
  • entry.815399500_day
  • entry.940653577_hour
  • entry.940653577_minute

Off to next step then…

Then let’s fill the data…

Alright now we got all the field identifiers in our Google Form, next let’s move on to generating the URL that allows us to inject all those data into the fields. It’s actually quite easy as follows…

entry.xxxxxxxx1=This is answer 1

Given our Google Form link…

https://docs.google.com/forms/d/e/XxxxXXXxxxXXXx/viewform

We shall attach the all the field ID’s and their injected answers as follows…

https://docs.google.com/forms/d/e/XxxxXXXxxxXXXx/viewform?entry.xxxxxxxx1=This is answer 1&entry.xxxxxxxx2=This is answer2

We just have to pass the value assigning it to the question field ID, and attach it to the link of the Google Form. Navigating to the above link will present your Google Form with all the fields pre-filled with answers you parsed. More about it below..

Pass the values targeting the fields…

This is something you need to pay extra attention when it comes to the syntax of the URL, making sure to pass the proper field ID’s and their answers, and separating them properly in the URL without a mistake.

Let’s first take a look at how we’re assigning values to the list of fields in my sample Google Form…

  • entry.1277095329=Jumping Beans
  • entry.995005981=Banana Plums
  • entry.1155533672=Dogs with hats
  • entry.1579749043=Running Banana
  • entry.815399500_year=2019
  • entry.815399500_month=10
  • entry.815399500_day=28
  • entry.940653577_hour=03
  • entry.940653577_minute=04

Now those field IDs and their targeted answers should be merged into a URL. So let’s add the separation tag with ‘&’ and put them together accordingly.

https://docs.google.com/forms/d/e/1FAIpQLSeuZiyN-uQBbmmSLxT81xGUfgjMQpUFyJ4D7r-0zjegTy_0HA/viewform?
entry.1277095329=Jumping Beans&
entry.995005981=Banana Plums&
entry.1155533672=Dogs with hats&
entry.1579749043=Running Banana&
entry.815399500_year=2019&
entry.815399500_month=10&
entry.815399500_day=28&
entry.940653577_hour=03&
entry.940653577_minute=04

You can see how the fields value assigning nodes are separated with the ‘&’ separation to be merged into a single URL and the complete URL should be formed as follows…

https://docs.google.com/forms/d/e/1FAIpQLSeuZiyN-uQBbmmSLxT81xGUfgjMQpUFyJ4D7r-0zjegTy_0HA/viewform?entry.1277095329=Jumping Beans&entry.995005981=Banana Plums&entry.1155533672=Dogs with hats&entry.1579749043=Running Banana&entry.815399500_year=2019&entry.815399500_month=10&entry.815399500_day=28&entry.940653577_hour=03&entry.940653577_minute=04

Now if you click on the above link, it will show how my sample Google Form is pre-filled with all the answers I passed in the URL targeting each field.

Fire it up!

TADAAA! 😀 Pretty cool eh!

You can cross check with the values I have passed in the URL with the values that are auto-filled in the Google Form! 😉

Something about multiple choice fields…

One thing to keep in mind is that, when it comes to fields that you have to select values, such as Multiple choice fields, Drop down selection fields and so on, they need to be assigned with exact values already given in their list of answers. 😉 Otherwise the values injected will be ignored by the form, and rendered as empty. 😦

Well… That’s it!

You don’t have to set values for all your fields in the URL parameters, just include the ones you’re intending to fill up is enough. This could become very handy if you want to auto fill fields like “date and time fields” for the ease of your users or if you want to populate pre-set default values in your Form for your targeted users. Another aspect this could be handy is when you need an easy and quick way to generate some sample data from your Google Form submissions. 😉

So there you have it, how to easily pre-populate data in your Google Forms!

Share the love! 😀 Cheers!

Wanna easily create an awesome dummy data set ? ;)

So probably you are one of those developers who is looking for a dummy or fake data set for you application development, testing or populate a set of good-looking screenshots for your application ? Yep ! I have been there… 😉

This is something almost every developer had gone through in their lifetime, and most of the time they end up going through the burden of writing a whole bunch of scripts from scratch to populate the data set and so on…

Well, my story…

Sometime back I had the same exact requirement, where I wanted to populated a bunch of fake data for testing out one of my C# dot net applications, not just a few amount, but in big chunks, a whole bunch of dummy emails, address, names and so on. I was actually going to write a bunch of scripts to populate those data by myself, but I got lucky 😉

Behold…

Yes lucky enough I came across this awesome tiny library called Faker.NET Portable Edition ! 😀 So I thought of sharing about it and give it a shout out as it’s a truly great library for easily populating dummy data sets.

capture17

And you can check it out on nuget right here –
https://www.nuget.org/packages/Faker.Net.Portable

Faker.Net.Portable

This is by far one of the easiest and lightest libraries I have used for populating dummy data. This is actually based on the Ruby Faker gem (http://faker.rubyforge.org/) library according to their documentation. It fully supports the below versions of dot net, thereby goes on saying yes you could obviously use this for your Xamarin Forms projects just like I used to.

  • .NET framework 4.0,
  • Silverlight 5.0,
  • Windows 8,
  • Windows Phone 8.1,
  • Windows Phone Silverlight 8,
  • Xamarin.Android,
  • Xamarin.iOS,
  • Xamarin.iOS (Classic),
  • Mono 3.2.8

It’s very much lightweight as well so it wouldn’t be any burden for your application’s compilation size and also it’s pretty fast. 😉

You could check out their documentation and github repo right here –
https://github.com/AdmiringWorm/Faker.NET.Portable

capture19

And trust me it’s super easy to implement, simply add it from nuget or through DLLs to your project and start calling the methods right away… 😀 Some of its awesome uses are as follows,

Names – Create dummy names, not just names with random letters but actual real-human-readable names. You could even separate First Names, Last Names, Middles Names and so on.
https://github.com/AdmiringWorm/Faker.NET.Portable#names

Address– Yep, same goes for addresses as well, streets, cities, states, Zip codes, and even Latitudes and Longitudes… 🙂
https://github.com/AdmiringWorm/Faker.NET.Portable#addresses

Phone numbers – Not just some random numbers, but actual real-like phone numbers with actual area codes and so on.
https://github.com/AdmiringWorm/Faker.NET.Portable#phone-numbers

Company – Let’s you create Company names, Suffixes, Logos (yep with actual images), even fake motos with real words…
https://github.com/AdmiringWorm/Faker.NET.Portable#company

Avatar – Yes that is right actual dummy images, with defined sizes, and image formats of your choice… 😉 A very useful option for displaying profiles, contact lists and so on.
https://github.com/AdmiringWorm/Faker.NET.Portable#avatar

Business – Need to populate Business related data ? Credit card numbers ? expire dates ? You got it !
https://github.com/AdmiringWorm/Faker.NET.Portable#business

Internet – Let’s you easily populate almost all the internet related data such as, domain names, emails, MAC addresses, IPV4 IPV6 Addresses…
https://github.com/AdmiringWorm/Faker.NET.Portable#internet

Lorem Ipsum – Oh yeah, you are going to love this, no need to worry about populating large paragraphs with random words, you could do it very much easily with this library
https://github.com/AdmiringWorm/Faker.NET.Portable#lorem-ipsum

App – Need any dummy App Names ? Authors ? Version numbers to be generated ? Oh well not worry… A simple one method call away!
https://github.com/AdmiringWorm/Faker.NET.Portable#lorem-ipsum

So that’s it fellas, and I wanted to show you some insight to it from the VS Object Browser, and see how impressive it is from down below… 🙂

capture18

Almost all the types of dummy data you need to populate, right here, and not just random ones that doesn’t make any sense, but absolutely real-like dummy content for your applications.. 😀

I felt like this library hasn’t gotten enough coverage, therefore I thought of writing a small blog post giving credits for this and the developers of it. And most of all let this heard for the fellow developers out there, for I hope I may have saved your burden of populating dummy data for your awesome applications… 😉

Cheers folks ! Stay Awesome ! 😀

Call Asynchronous Methods and return Results within ASP Web API

So the other day my boss asked me to implement a few Azure Push Notifications related Web methods in one of our ASP Web API projects I had developed. Those Web methods were suppose to send Push Notification messages to the Azure Notification Hub, where as those notifications will be delivered to the User’s mobile devices.

When I started implementing I realized when calling the Azure Notification Hub using the Windows Azure Library, I realized there’s only Asynchronous calls available to communicate with the Notification Hub. It got me thinking, How on earth am I gonna call Asynchronous methods inside the ASP Web API (as I haven’t tried that before). Well, after a little bit of playing around I figured it out thanks to some documentations in ASP.NET website.

So here I am sharing the code I used for you all, if you ever come across such an implementation, how to call an Asynchronous methods inside the ASP Web API.

namespace YourNameSpace.Controllers
{
    [RoutePrefix("api/AsyncTest")]
    public class AsyncTestController : ApiController
    {
        [Route("AsyncWebMethod/{whateverValue}", Name = "DoSomeAsyncProcessingAndReturnResult")]
        [HttpPost]
        public async Task<HttpResponseMessage> DoSomeAsyncProcessingAndReturnResult(string whateverValue)
        {
            string Result = await WhateverAsyncMethodCallYouWantToCallInsideWebAPI(whateverValue);

            return Request.CreateResponse(HttpStatusCode.OK, Result);
        }
    }
}

 

Have fun Coding fellas ! 😀

 

Welcome to ÇøŋfuzëÐ SøurcëÇødë Tech Innovations !

Welcome to the ignition of Tech Innovations in Sri Lanka. We are a Sri Lankan based company that focuses on Technological Innovations and pushing the the boundaries beyond the Imagination.

CoverPic1

 

I have always been extremely passionate about Innovation and Creativity, and as a result of that I used to invent new things using whatever I learned. Even back in School Days I used to develop new inventions and win awards at competitions. That drove me to University, while studying Software Engineering, I always used to build new software tools y my self in whatever the theory that we learned during lectures, whereas most of the time I got too obsessed and I went ahead learning everything by myself about any specific subject. 
I have always dreamed of solving real life problems through new inventions and ideas, which is still the force that drives me forward. So as a result of my passion towards innovations and experimentation, I happened be developing so many softwares and apps which I had published to the public market. This sparked me the idea of initiating a startup of my own which I could drive through my passion. So here it is, Ladies and Gentlemen, Welcome to  ÇøŋfuzëÐ SøurcëÇødë Tech Innovations !
– Udara Alwis a.k.a. [CODENAME : ÇøŋfuzëÐ SøurcëÇødë]

Connect with us on our official Facebook page from the below link,

ProfilePic1 qrcode (2)

We already have a series of ongoing Innovative Development Projects and below are some of them.

Windows Phone App Development

We have already developed and published a series of Innovative and Creative Windows Phone Applications and published on Microsoft Windows Store which has gotten over 160,000 downloads worldwide along with a rapidly growing user base.

Over 30 Windows Phone Apps published…

Over 160,000 Users Worldwide…

CoverPic2

As we go on forward we are hoping to keep on developing more and more Innovative Windows Phone mobile apps. Also we are offering services to the public and business, so if you are in need of developing a Windows Phone app for your Company or Business, contact us immediately.

You can view all our Windows Phone apps by from below link,

462x120_WP_Store_blk

 

Sri Lankan Newspaper Cartoons Project

Welcome to “Sri Lanka Newspaper Cartoons” project, A centralized portal for showcasing and viewing all Sri Lankan Newspaper Cartoons published across the web. How we do this ? We have hosted cloud servers that crawls throughout the web searching for Newspaper Cartoons using our unique Web Crawling technologies and algorithms, where we will capture them and present to you by streaming from those servers.

Slide1

http://srilankannewspapercartoons.tk/

We simply bring all the Sri Lankan Newspaper Cartoons that are published across the web to one place and let you access them in a very easy to use, friendly, interactive way. We bring an ultimate experience of viewing Sri Lankan Newspaper Cartoons. Stunning visuals, interactive user experience blended together along with a faster and easier access and look up. “Sri Lanka Newspaper Cartoons”, we are empowering talented Sri Lankan Cartoon Artists to showcase and reach more audience easily and quickly and for the User, we are bringing an ultimate experience to view all Sri Lankan Newspaper Cartoons published across web, right from your fingertips….

Our fully automated system that is running behind this project was able to fetch over 11,000 Sri Lankan Newspaper Cartoons, while making this project the Sri Lanka’s first ever Largest Sri Lankan Newspaper Cartoons collection ever created.

Over 11,000 Newspaper Cartoons…

We are also opened up for Advertisers to publish ads on this project’s website and mobile app which are being used by over 1000s of users worldwide…

2 6 5 7

Download the Windows Phone app of our Sri Lankan Newspaper Cartoons project –

 http://www.windowsphone.com/en-us/store/app/sri-lankan-cartoons/83bfab81-883d-421e-8aba-c621bf67aee8

Here are some of the special features that we are bring you…

  • View all the Sri Lankan Newspaper Cartoons that has ever been published in Newspaper from one single place as you wish…
  • Stay up to date with the latest Sri Lankan Newspaper Cartoons and you can even view the oldest Cartoons ever…
  • Like or Dislike and Rate every single Cartoon…
  • Add Keywords and Tags to Cartoons as you like..
  • Easily share Cartoons with your Social Networks…

Sri Lanka Newspaper Cartoons Gallery

 

So join with us for the ignition of the next step of Sri Lankan Newspaper Cartoons entertainment…

Sri Lankan Memes Book

Welcome to the first ever largest Sri Lankan Memes collection ! The most awesome place for Sri Lankan Memes ! (^_-) Join with us today…

http://srilankanmemes.com/

CoverPhoto3

So are you Bored at Home ? or Work ? 9gag much ? a Memes fan ?
Welcome to the first ever largest Sri Lankan Memes collection !
Join Sri Lankan Memes Book today for the most awesome Sri Lankan Memes entertainment…

Welcome to the epic Book of all the Sri Lankan Memes Published on Facebook with over 15,000 Memes encountering Thanks to our unique intelligent Web Crawlers executing on Cloud… We are still on Beta level.. Stay tuned for our Official Release ! (^_-)

Sri Lankan Memes Book brings you the most amazing experience you ever had with Sri Lankan Memes entertainment. Such as,

  • View all the best Memes on Facebook
  • Even the Latest Memes, Recent Memes, Older Memes, most Liked or Disliked Memes, most Viewed Memes and so on..
  • View all the Memes under your favorite Meme pages
  • Vote Your favorite Memes
  • Daily updates of all the best Memes on Facebook
  • Like or Dislike Memes as you wish
  • Easily Share on Facebook or Twitter
  • View the best, Sri Lankan funny videos on Youtube…

You can also Watch the most awesome funny Sri Lankan Videos on Youtube via Sri Lankan Memes Book TV !
http://srilankanmemes.com/View_MemeStream_TV.aspx

News1

 
Visit our official Website –
http://srilankanmemes.com/

Facebook –
https://www.facebook.com/SriLankanMemesBook

Google –
https://plus.google.com/115627309497218505361
You can Subscribe to our Mailing list to receive daily awesome Sri Lankan Memes right into your inbox – http://goo.gl/oF6rTA

logo-base-test

Please drop a Like to the page if you think its awesome 😀 ! This is the first time such an app has been developed, so your support is highly appreciated. Please share with your friends as much as possible. 🙂

We have also opened up for Advertisers to publish Ads and Banners on our website and the mobile application. Please contact us if you are interested…

I Was There Map

I Was There Map, allows you to view all the places you have visited and your Facebook Check-ins. You can view all the amazing information statistics you have never known about those places and your check-ins. You will be shown all the interesting information about You and those check-ins like no other.
This project was developed based on ASP .net and C#. We have developed by our own custom API to grab data from Facebook for each and every user upon their permissions. We have invented a couple of innovative Algorithms in order to generate the relational data and information regarding the user and their check-ins information.

I Was There Map

Please check out more information from the below link,

https://theconfuzedsourcecode.wordpress.com/2014/04/03/i-was-there-map-is-ready-to-blow-your-mind/

Your Friends Map

Using ‘Your Friends Map’ you can view all your Facebook friends locations and hometowns in the world map. And it shows you a full list of all the locations and hometowns of your friends separately along with the number of friends in each location. This project was developed based on ASP .net and C#, where as I have used my own Custom Facebook API for pulling and streaming data from Facebook by the user’s permissions when the log in to the App.

We have invented a series of innovative algorithms to process the data and produce information regarding the user and their Friends, to populate statistical relationships.

Capture3

Please check out more information from the below link,

https://theconfuzedsourcecode.wordpress.com/2013/12/02/your-friends-map-is-ready-for-you/

Sri Lankan Photography Project

This project brings all Sri Lankan Photography that are published on Facebook to a one place, giving an ultimate experience to the user. With “Sri Lankan Photography”, we are empowering talented Sri Lankan Photographers to reach more audience easily and quickly and for the User, we are bringing a stunning ultimate experience for you to view all Sri Lankan Photography published on Facebook, right from your fingertips. This app provides so many special features, such as facilities keep in touch with the user’s favorite photographers as they wish, instantly viewing all the photo albums published on their public pages. Sharing those photography with user’s friends immediately on demand.

FlipCycleTileLarge

Please go to this link to view the full Article of our Sri Lankan Photography Project,

https://theconfuzedsourcecode.wordpress.com/2014/09/27/project-sri-lankan-photography/

Mobile In-App Advertising Project (Phase 1)

We have launched a project where we are giving In-App Advertising facilities to Advertisers and Companies in a series of popular Mobile apps developed by ÇøŋfuzëÐ SøurcëÇødë Tech Innovations.

Untitled

 

Please go to this link to view the Full Article of this project –

https://theconfuzedsourcecode.wordpress.com/2014/10/20/ultimately-boost-your-marketing-campaign-with-mobile-in-app-advertising/

Undisclosed Projects (under development) –

Intelligent Data Mining App (based on Social Media) Framework

A framework to fetch public Social Media data and coming up with analytical information through data mining…

Lanka Tuk Tuk Services Project

A new way of thinking about three wheeler services in Sri Lanka… (Coming Soon)

Mobile In-App Advertising Platform

A mobile in-app advertising platform for Sri Lankans…

 

So thats a little heads up about ÇøŋfuzëРSøurcëÇødë Tech Innovations initiation. So if any of you are interested of being a partner or an investor we would be very grateful to have you.

Till next time everyone.. 🙂 Cheers !

https://www.facebook.com/296474577210450

CoverPic1

Project: Sri Lankan Memes Book!

Welcome to the first ever largest Sri Lankan Memes collection ! The most awesome place for Sri Lankan Memes ! (^_-) Join with us today…

So are you Bored at Home ? or Work ? 9gag much ? a Memes fan ?
Welcome to the first ever largest Sri Lankan Memes collection !
Join Sri Lankan Memes Book today for the most awesome Sri Lankan Memes entertainment…

Visit our official Website –
http://srilankanmemes.com/

Facebook –
https://www.facebook.com/SriLankanMemesBook

Mobile App –
Available on Windows Phone and Windows 8 Store

Welcome to the epic Book of all the Sri Lankan Memes Published on Facebook with over 15,000 Memes encountering Thanks to our unique intelligent Web Crawlers executing on Cloud!

An entertainment gallery of social memes in Sri Lanka, aggregating across hundreds of Meme entertainment pages on social media using intelligent social media crawling bots, that I developed. This project included a Website, Mobile app and a Facebook page. 

Sri Lankan Memes are one of the fastest growing trends and entertainment in the country and among Sri Lankans all over the world.

This whole project, had two segments that I have developed,

  • The Mobile App, Sri Lankan Meme Reader
  • The Website, Sri Lankan Memes Book

Let’s dig in one by one,

Mobile App: Sri Lankan Meme Reader

“Sri Lankan Meme Reader”, a simple attempt to bring all the favorite and popular Sri Lankan Memes to one place. This app allows you to view all the Sri Lankan Memes which were posted on Facebook daily through some of the top Sri Lankan Meme pages. This is the first initiative of such attempt, bringing all the Sri Lankan Memes published across Facebook pages to a one single portal and giving an amazing experience of Sri Lankan Memes for people.

Sri Lankan Meme Reader has the capability of fetching all the latest Memes available instantly even when new Memes are posted on Facebook. Whenever a new meme has been posted to Facebook, you can instantly view them through this app as our Cloud servers stay awake to fetch every single one of them and bring to the user in real time. 😉

Launched on 21/06/2013, initially on Windows Phone App store and then to Windows 8 App Store.

Windows Phone App: http://www.windowsphone.com/en-us/store/app/sl-meme-reader/211662d2-c538-4c55-aef7-78d5c854dbef

Windows 8 Store App: http://apps.microsoft.com/windows/en-us/app/sri-lankan-meme-reader/deac8bd9-3547-4016-8d5d-a4934fbe5d76

Once the app is launched user can click on “Start” button where as it will take the user to the next screen where the user will be given to choose their favorite Meme Page or to View all of them at once.

After selecting that the user will be asked What do they want to view from the selected category, whether they want to view the Memes as a Photo Stream or as one by on.

Based on the choice Users will be able to stream through the available Meme Images, while sharing them as they wish instantly on Social Networks, and they can even view the original source of the Meme Image and find out more information about them.

Here’s a bit more on the Windows 8 Store App…

View thousands of Sri Lanka Meme Images right from your mobile phone with a very easy to use, attractive user interface, or on your Windows 8 Laptop at your convenience. You know, you can even share your favorite Sri Lankan Memes right from your phone with Facebook or any other Social media network. The best way to easily stay up to date with your favorite Sri Lankan Meme pages, is “Sri Lankan Meme Reader” App! 😉

Now on to the Website that I built using the same back-end servers…

The Website, Sri Lankan Memes Book: http://srilankanmemes.com/

“Sri Lankan Memes Book”, is the Web interface of the Sri Lankan Memes app whereas this website will be having a lot more extended features of the app. Streaming over 10,000 Sri Lankan Memes from our cloud servers, this web app will be giving an immersive experience of Sri Lankan Memes Entertainment like never before for the community.

The users will be able to view Sri Lankan Memes published across various Facebook pages right from this website just like the Mobile app as well as users will be able to Like or Dislike the memes that they view and rate them accordingly according to an automated ranking system.

Launched on 24/08/2014, we have developed the website in a way where, once the user navigates to the website home page, it will load random Meme Images as blocks on top and then at the bottom of it will be shown a button where users would be able to view more on the Meme Gallery section. By clicking that Users can view more Memes on Gallery as Image blocks, by clicking on them, user will be navigated to individual views of each of them.

The top menu bar of the site has 6 main sections –

  • Meme Stream – Allows user to navigate to Meme Stream page of the website, whereas user can seamlessly go through a long list of Memes while scrolling down the page. This feature offers 5 features, View Recent Memes, View Random Memes, Most Liked, Most Disliked, and Most Viewed and so on. According to the users choice the Meme Stream will be loaded.
  • Meme Stream TV – Watch the most awesome funny Sri Lankan Youtube Videos, bringing to your on Sri Lankan Memes Book!
  • Meme Gallery – Allows user to navigate to Meme Gallery, whereas user can seamlessly go through a long gallery of Meme Images.
  • Vote A Meme – Allows users to Vote for Memes Images and rank them, and they can also inform the Site admins to remove a certain meme if they are inappropriate.
  • Memes by Page – Allows users to view Sri Lankan Memes under each Meme Page available.
  • About Us – Contains information about the Sri Lankan Memes Book Project.

Then in the home page when the user scrolls down further the Meme Stream will start to appear, showing the memes in a Blog stream manner, whereas Users can instantly like them or dislike them and even Share them on Social Networking sites. In the right side bar all the latest memes will be displayed and quick links to other sections of the site. User can keep on scrolling down and more Meme images will automatically load as user keeps on going.

Sri Lankan Memes Book brings you the most amazing experience you ever had with Sri Lankan Memes entertainment. Such as,
– View all the best Memes on Facebook
– Even the Latest Memes, Recent Memes, Older Memes, most Liked or Disliked Memes, most Viewed Memes and so on..
– View all the Memes under your favorite Meme pages
– Vote Your favorite Memes
– Daily updates of all the best Memes on Facebook
– Like or Dislike Memes as you wish
– Easily Share on Facebook or Twitter
– View the best, Sri Lankan funny videos on Youtube…

A community base driven project where the users are given features to Like or Dislike the Memes they view and rank them accordingly according to an automated ranking system. View any Sri Lankan Memes based on your choice, whether it’s Recent New ones, most liked ones or most viewed ones and so on…

Share any of the Sri Lankan Memes right from the website itself with Facebook or Twitter…

Oh Yeah, it’s awesome!

“Sri Lankan Meme Reader” and “Sri Lankan Memes Book” is a very unique and innovative projects because this is the first time such initiative has been launched in order to provide a single portal for viewing and showcasing creative and entertaining Sri Lankan Memes while forming the largest Sri Lankan Memes collection database.

  • View thousands of Sri Lanka Memes right from your mobile phone with a very easy to use, attractive user interface
  • Easily stay up to date with your favorite Sri Lankan Meme community pages and experience the best of Sri Lankan Memes Entertainment…
  • A community base driven initiative where the users are given features to Like or Dislike the Sri Lankan Memes they view and rank them accordingly according to an automated ranking system.
  • View any type of Memes based on your choice, whether it’s your favorite Meme Page, Most Like or Disliked Memes, or even most viewed Memes and so on…
  • Implementation of State of the art Cloud Technology and a unique innovative offline data caching technology. So no more heating up your phone, as all the heavy weighted process executions are being leveraged to the Cloud!
  • Offline Image Caching facility saves you Data Connection usage and you can view pre-loaded Meme images even if your data connection is offline…
  • Share your favorite Memes right from your phone with Facebook or any other Social media network…

Encouraging our enthusiastic and creative Sri Lankan Memes community while showcasing their great talents and providing Sri Lankans an amazing experience of Sri Lankan Memes Entertainment is the key objective of this project.

“Sri Lankan Meme Reader”, a simple attempt to bring all your favorite and popular Sri Lankan Memes to a one place. This app allows you to view all the Sri Lankan Memes which were posted on Facebook daily, through some of the top Sri Lankan Meme fan pages.

Alongside with the mobile app a Web app has also being launched as “Sri Lankan Memes Book” with the same set of capabilities and a lot more features for the end user. This web app allows users to gain an extended experience of Sri Lankan Meme Reader app.

This is the first time such an app has been developed, so your support is highly appreciated. Please share with your friends as much as possible. 🙂 Thanks.

– Udara Alwis.
[ÇøŋfuzëÐ SøurcëÇødë]

‘I Was There Map’ is Ready to blow your Mind !

Welcome to ‘I Was There Map‘ – The Places You have been to and Amazing Tidbits…

The Link to the App – http://iwastheremap.confuzed-sourcecode.com/
Join with Us on Facebook  – https://www.facebook.com/IWasThereMap

WARNING – Beware ! Your Mind would be blown !

One day I was laying on my bed thinking about all the places that I have visited so far in my entire life, but unfortunately I couldn’t remember half of it and even the time periods… 😦 But suddenly, it hit me Oh yes ! I have been putting Facebook Check-ins for most of those places I have visited so far. Then at the same I was thinking, but its not possible to view all the places I have visited and put up Facebook check-ins, right from my profile ! 😦  There isn’t any way in Facebook to check all the check-ins you have put up, but you can do that by manually going through your Timeline, which would take hours to do so.

And that got me thinking, I’m sure there must be loads of people out there who would be worrying about the same thing I’m thinking right now, and I thought of coming up with a solution for this. Then BOOM ! as an innovative Software Engineer I thought of developing an application… 😉

So this is an Awesome concept I came up with, being able to view all your past check-ins on Facebook and when I kept on working on it, I saw these pretty interesting statistical connection between those places that I have visited and checked-ins. When I viewed all my past check-ins there were some amazing connections and information that were building around it. So I gathered around all those statistical information connections that I found out and blended them together by developing my own algorithms to populate those information. I have been working on it for about couple of weeks and finally its time to release it after testing it out with few of my friends. 😉

I Was There Map, allows you to view all the places you have visited and your Facebook Check-ins. You can view all the amazing information statistics you have never known about those places and your check-ins. You will be shown all the interesting information about You and those check-ins like no other.

So here are some of the amazing features we bring you from ‘I Was There Map’ –

  • View all the Places you have visited
  • View all the Places Checked-ins you have put on Facebook
  • View all the Places you have visited so far in a World Map
  • View the most Popular Top places among the places you have visited so far
  • View Amazing information about You and the places you have been
  • View Interesting connections between You and your Facebook check-ins
  • See the places you have been to, clustered different facts
  • How much distance you have Traveled and how much Time you have spent so far
  • The Country, State, and the City which you have visited the most
  • The Place you have traveled the most Distance from your current Location
  • The Place you have spent most Time travelling from your current Location
  • All your places and the Time you have spent and the distances you have traveled
  • View the directions from your current location for the places you have visited
  • Your First Check-in and and your Last Check-in on Facebook
  • The Timeline of the Places you have visited
  • The Month you have traveled the most and put up most of the Check-ins
  • Share Your Map with Friends And So on…

The above is just a piece of the cake, and Imagine all of those above and many more amazing facts about the places you have visited and your self… 😉 BOOM !

home

You can easily zoom in or zoom out in for any area in the map and view the Places you have Visited and their interesting information..

I Was There Map

So how can You try this Awesomeness ?

First of all go to ‘I Was There Map’, and simply click on, ‘Log in with Facebook’, where it may ask you to allow the application to use your Check-ins, Current Location and some basic information about your self, once you allow it, you are good to go… 😀
Please be noted the application would not be acquiring any of your personal information or e-mail or either log in information, and I personally guarantee that, where as most of the non-technical users always worry about. lol ! Please don’t come ask me whether it would steal your password and bullshit, I will punch you in your stupid **cking face for your lack of common sense !

Capture1

Click on the ‘Log in with Facebook’ and then it will ask for your permission..

Capture21

Click ‘Okay’ and allow the access to the application, where it will only acquire only the above information, but do not click ‘Cancel’ which will not let you use this application or it will cause for any malfunction. So after that, BOOM ! You are good to go ! 😉

After that you will be redirected back to ‘I Was There Map’ automatically..

Capture2

Now to being with with, Simply click on ‘Start – Show Me Where I Was‘, there it will let you view the places you have visited and the amazing information facts you have never known on the world map…

home

You can Zoom in or out for any area of the map click on any of those locations marked on the map and view interesting facts about that place or even view that Place on Facebook… 😉

I Was There Map

Wait dont hold on there, keep on scrolling down… 😉
Surprises awaiting to blow your mind !

Would you like to see all the places you have visited so far ? Of course you would ! Therefore we will show you all the Places you have visited so far which you have put in Check-ins, and we have ordered them according the number of visits for each and every one of them.. Capture6

Among those places you have visited, Have you ever wondered What were the most Popular, most famous Top Places you have ever visited ? Oh don’t worry, We will show you, through this epic journey 😉 ! Just keep on Scrolling…

WOAH !!! Hold on! behold people, the Numbers – prepare to be taken on a journey of mind blowing amazing statistical information about the Places you have been to and your self.. 😉 We will show you how many Places you have visited, how many Facebook Check-ins you have updated, how far you have traveled by visiting those places, how much time you have spent and many more…. 😀Capture8

 

We will also show the Places you have visited, clustered by several aspects according to the information on Facebook…Capture9

Have you ever thought of What kind of Places you have visited so far ? or may be how many times you have visited a certain type of a place ? Well well do not worry child ! We told you this is gonna blow your Mind ! 😉
Welcome to Categories Cloud ! So here we will show your visited places according to the each Category they belong to.. 🙂 So now you can view the type of places you have visited so far ! 😉Capture10

Do you remember the Place that you have visited, which you have traveled the longest distance ever ? Well nothing worry, We will bring back those memories…
We will also show you the Place that you have spent most time on travelling !
Oh yeah ! How cool is that eh ! 😉Capture12

Keep on Scrolling, its not over yet… 😀

We will then show you, the Places you have visited according to the each Distance traveled for each Location and also according to the Time you spent travelling right after that ! 😉Capture13

Here is something even more interesting, we bring you the Top 5 Places that you have traveled the most Distance and Time spent on travelling so far…
I know what you are thinking, more Amazing Tidbits indeed ! 😉Capture14

Do you remember those long road trips you took while visiting places do far away from home ? Do you still remember those directions ? or did your friend who lives nearby asked you for directions to that particular place you have visited ?
Well well don’t worry folks, We will give you all the directions you need ! 😉 Just simply select your place and we shall give you the specific directions in a map !Capture15

Oh yeah that’s right ! We shall give you directions to the places you have been to, step by step for the shortest directions ! As shown below we’ll show the directions on a separate world map and also right beneath that we’ll give you step by step turns and directions throughout till the destination… 😀Capture15_1

Remember since beginning we told you that we would blow your mind ? 😉 We present to you, the Timeline ! Where We will take you on an amazing journey through your life timeline and the places you have been to along with the amazing tidbits you have never known.. 😉

Remember your first check-in on Facebook ? Probably no ! 😛 But don’t worry, We got it..Capture16

Have you ever thought how many places you have visited so far, year by year since your very first check-in on Facebook ?  Yes we have the answer for that.. Simply keep on scrolling for more surprises ! 😀Capture17

Now you can see which year you have visited most places and put up check-ins on Facebook !
Not only that son, the Month which you have visited most number of places, yes we will show you that also… Oh well now you know the month that you were out of your home most of the time ! *fingers crossed* !
Another feature that we bring you through Timeline is, all the places you have visited at according to the month and yearCapture18

So where was your last check-in on Facebook ? Doesn’t matter whether you remember or not, We will show you ! 😉 Because your every single checkin matters… 🙂Capture19

Finally You can Share your own ‘I Was There Map’ among all your Friends across social networks… 😀 There your friends can view your Friends Map.Capture20

Already mind blown ha ? 😉 Well we told you since beginning ! But this is just a small description about this whole pack of awesomeness !

And one final thing, please don’t forget to Like Us and share this Awesomeness, ‘I Was There Map‘ with your Friends ! 🙂

So that is a short description about the revolutionary,  ‘I Was There Map‘  ! You can view the whole Help Tutorial through this link –
http://iwastheremap.confuzed-sourcecode.com/Help.aspx

Finally I warmly Welcome you to,

I Was There Map

The Places You have been to and Amazing Tidbits…

Connect with Us from our Official Facebook App Page –
https://www.facebook.com/pages/I-Was-There-Map/1483683708512311

Always execute awesomeness ! 😉

Thank you.
ÇøŋfuzëÐ SøurcëÇødë
(Udara Abhilash Alwis).