Sunday, January 3, 2016

Create your 1st Amazon EC2 Instance

7:25 AM Posted by Anuradha Welivita No comments
Have you ever wondered why many applications move into cloud nowadays? Well to run applications which cater to concurrent requests made by multiple clients, it requires the application to scale on demand. Cloud based services provides for this requirement by enabling the application to have re-sizable computing capacity without having to invest on computing hardware up front. Amazon Elastic Compute Cloud which is well known as Amazon EC2, provides re-sizable computing capacity in the Amazon Web Services (AWS) cloud. The advantage of using Amazon Web Services cloud is that you only needs to pay for what you use.
Amazon EC2 web service can be used to launch a virtual machine (VM). This can be used to launch your own virtual server. You can even have thousands of them and create your own data center. Amazon EC2 instances can handle extra traffic which may come into your website by automatically scaling up to add more capacity. All the security and networking settings can also be configured by the creator through the AWS console.  
Getting Started
In this I will explain you the step by step approach in creating a new Amazon EC2 instance and setting up a new virtual machine on it.
Step 1: Go to Amazon Web Services website: http://aws.amazon.com
If you do not have an AWS account, click Create an AWS account on the upper right hand corner of the page.
1.png
You need to enter your name, email address and other information along with your credit card information to create an AWS account.

Step 2: Login to your AWS account
Click on My Account → AWS Management Console. Enter your email address and password and login to your account.
Step 3: Set up the region you are closest to.
 Click on EC2 Virtual Servers in the cloud, in the AWS management console.
4.png
Then it leads to the EC2 Dashboard where you can select the region you are closest to by clicking on the region menu towards the upper right hand side of the Dashboard.
5.png
Step 4: Go to step by step wizard to create the EC2 instance from the AWS management console.
Click on “Instances” on the menu towards the left.
6.png
There you can see the current EC2 instances that you have, their status and other information. In order to create a new EC2 instance, click on the “Launch Instance” button.
7.png
Step 5: Choose an Amazon Machine Image (AMI)
Amazon Machine Images or AMIs are pre-configured templates provided by Amazon for your instances. It provides it own Linux, Red Hat, Ubuntu, Windows distributions. If you are not running very extensive applications you can use the free tier eligible. In case you are running very extensive applications having lot of live users, it is recommended to use one of the premium versions or the actual tier versions. Let’s use the Ubuntu Server 14.04 LTS distribution for this.
Select Ubuntu Server 14.04 LTS from the list of AMIs.
8.png
Step 6: Choose an Instance type
In the next screen you are given a list of instance types having varying combinations of CPU, memory, storage, and networking capacity. You need to select the instance with the appropriate mix of resources depending on your application needs. For this we are going to leave the default option selected as it is.
Next click on “Configure Instance Details” button.
9.png
Step 7: Configure Instance Details
Here you are given the options to change the number of instances, network, subnet configurations etc. Here we will leave the default options as they are.
Next click “Add storage” button.
10.png
Step 8: Add storage
Here you have the ability to change the storage options. The size will be 8   Gigabytes by default and the volume type will be standard. Delete on termination option will be selected by default and it means when you terminate the instance everything related to it will be deleted forever. Here also we will leave the default configurations as they are.
Next click on “Tag Instance” button.
11.png
Step 9: Tag Instance
Here you can tag your Amazon EC2 resources with a case sensitive key-value pair. To more about tagging your Amazon EC2 resources refer the link https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/Using_Tags.html?console_help=true. As default you do not need to tag it. Hence let us leave that blank.
Next click “Configure Security Group” button.
12.png
Step 10: Configure security group
A security group is a set of firewall rules that control the traffic for your instance. You can add rules here to allow only specific traffic to reach your instance via specific port ranges.
You can either create a new security group or select an existing security group. Create a new security group by any name and give a brief description about the security group.
Then for the types of security groups leave the ssh type as we will need that later to ssh into the virtual machine from your local machine. Also click “Add Rule” button and add another rule which is HTTP. This is to launch a web server inside the virtual machine for your web applications to run.
You can also configure the rules to allow traffic from known ip address only by specifying a custom ip address range or else leave the source as “Anywhere” to accept traffic from any ip address.
Finally click “Review and Launch”.
13.png
Step 10: Review and launch
Review the configuration details of your instance and click on the “Launch” button.
14.png
Step 11: Create a key pair
Then it requires you to create a key pair which is used when you try to access your instance such as when sshing to your virtual machine from your local PC. You can either use an existing key pair which you have created earlier or create a new pair. Here we will create a new key pair.
Select create a new key pair from the dialog box which appears and give it a name. Click download key pair to download the key pair in the form of a .pem file to your local machine. Store it in a secure location as you will only be able to download it once.
After that click on “Launch Instances” button to launch your 1st Amazon EC2 Instance.
15.png
Now you have finished creating your 1st Amazon EC2 Instance. You can view the status of it under “Instances” in the Amazon EC2 Dashboard. It will take a few minutes to fully initialize and run the newly created Amazon EC2 Instance.
In the blog posts which follow I will guide you through how to access your Amazon EC2 Instance from your local PC, host Apache web server and run a PHP web application on it.

Saturday, January 2, 2016

Phonetic Search

3:15 AM Posted by Anuradha Welivita No comments


Have you ever gone to McDonald’s? Is it McDonald’s or MacDonald’s? Well it sounds like the latter though. Phonetics is all about how words sounds like. People are bad at spelling things correctly. They do not memorize spellings but they type in the words guessings the spellings by the way the word sounds like. Most of us are more comfortable to listening stuff to understand something rather than having to read thousands of lines of text. And each year the number of distinct words we have encountered grows bigger and bigger. And as technology advances people rely on auto-correct generators or spell checkers to correct their spellings. These are the major reasons that most of the people in the world are spelling-challenged.
As people are the ones who use computers, it is a risk for the computers to depend on humans to type in the words spelled correctly for searches and stuff. If you read the blog post http://www.nextmovie.com/blog/most-misspelled-celebrity-names you will be able to see even the most popular celebrity names are reported misspelled most of the time. Not knowing either to pronounce what they read or spell what they hear often leads people to end up in this situation.   
This can be mostly seen in among spelling trademarks also which often leave out the vowels and arrange the consonants in unusual ways to sound unique. This uniqueness or distinctiveness in names often troubles the general public. And this has a greater effect on the amount of revenue earned by these brands as well because people may not be able to spell the brand name correctly on search engines and might not be able to get the correct results or might end up finding a different brand.   
Hence this arises the need to make computers less dependable on what people type in. Following approaches used in the content technology minimizes this problem to a certain extent.
  • Phonetic search
  • Voice search
  • Speech synthesis
Let’s look at Phonetics search in detail in this article.
Phonetic Search
Most of the traditional searches rely on the user to type in a query word. Although it auto-generate suggestions or predict text those also rely on the part of the text typed in by the user. But Phonetic search gives user the flexibility to search according to how the words sound like. Google also does not support it yet. One of the example where Phonetic search has been incorporated is general purpose search engine Exalead, from France’s Dassault Systèmes. This kind of search is mostly useful for e-commerce applications where products, brands and trademarks are searched in bulks.
How it works
Basically what it does is identify the sounds represented by the query word we type in and match it with words which sound alike (homonyms or near-homonyms for that sound). These words might have different meanings like the words cell and sell but will sound alike. You will understand that many such words which sound alike but completely different in meaning exist by referring the article http://www.cooper.com/alan/homonym_list.html. For this both the query and target words should be converted to a phonetic representation and when typed in the query word all the words which have a similar phonetic representation to that of the query word are returned.
Soundex Algorithm
Soundex is the main algorithm used in Phonetic search. It was developed by Robert C. Russel and Margaret King Odell and patented in 1918 and 1922. Many more modern Phonetic algorithms have also come up but the basis for most of these Phonetic algorithms is the Soundex algorithm.
Soundex algorithm indexes words according to their phonetic sound such that different words which sound alike get the same index. So, when storing words following the Soundex algorithm, those with similar phonetic sounds can be related together by their index and can be matched despite the minor differences in  their spellings.
Soundex algorithm first remove the vowels (except a vowel appearing as the first letter of a particular word) and other irrelavent consonants. The it calculates the Soundex index for the refined word. Soundex index for a name consists of a letter followed by 3 numerical digits. The letter is the first letter of the name and the digits encode the remaining consonants. Consonants at a similar place of articulation share the same digit. It partitions these consonants into groups and all the consonants which belong to the same group share the same digit. The following tables denote the similar groups of consonants and their corresponding digits.
Original Soundex consonant grouping
B P F V
1
C S K G J Q X Z
2
D T
3
L
4
M N
5
R
6
Refined Soundex consonant grouping
B P
1
F V
2
C K S
3
G J
4
Q X Z
5
D T
6
L
7
M N
8
R
9
Letters which are not included in the above table (all the vowels, H and W) are removed in the first step. Then adjacent letters from the same group are written as one letter. The result is truncated to the first letter followed by 3 digits. Missing positions of the 3 digits part is embedded with zeros. This is the Soundex index of a word and two words which sound alike will end up having the same Soundex index.
The following example will show how you calculate the Soundex index of two words which sound the same.

Thursday, August 20, 2015

GSoC Pencils Down

9:56 AM Posted by Anuradha Welivita 2 comments
Google Summer of Code 2015 has come to an end. And yes I am satisfactory to a certain level that I have produced something tangible and all of you are able to access it which is deployed in Openshift. And here is the link: http://askbotfedoratest-anuradhaw.rhcloud.com. The github repository which contains the code is here: https://github.com/anuradha1992/askbotfedoratest. We are planning to merge the code with the repo at https://github.com/fedoradesign/askbot-test so that others can also use it and build upon it.

GSoC Updates for the past week

For the past week I have been testing the website whether it functions properly and identified some bugs and managed to fix them. One of the major issues I had was with the sidr menu which was supposed to pop up in the mobile view. It was giving the following error and was not appearing.

Uncaught TypeError: $(...).sidr is not a function

I identified that the problem was that I was using a newer jquery version which is 1.11.2 and the existing Askbot using jquery version 1.7.2. I found out that sidr also works with version 1.7.2 of jquery and used it instead. And below are the screenshots of the sidr menu which is working now.

Sidr menu when accessing the website as an anonymous user






































Sidr menu when accessing the website as a logged in user






































I have also met up with cross browser compatibility issues and small issues with the styling and I have handled them one by one. One of the significant issues with regard to cross browser compatibility was that the CSS property box-sizing: border box was not working with versions of Firefox. There is a simple trick to make it work which is including the property -moz-boz-sizing: padding-box. Other wise the width of the elements will be calculated excluding the padding which is applied on those elements.

And my mentor Suchakra also reported some bugs regarding the styles which you will be able to view here: https://github.com/anuradha1992/askbotfedoratest/issues. These issues are also solved during the past few days and you will now be able to see a cross browser compatible, stable version of the web site by going to the project link mentioned at the top of this blog post. And you are also free to report any bugs and issues related to the functionality of the website so that I will attend to those issues.

Progress with the entire project AskFedora UX/UI and functionality overhaul

The github repo which contains the code can be accessed here https://github.com/anuradha1992/askbotfedoratest and we are planning to merge the code with https://github.com/fedoradesign/askbot-test and make it releasable. I have tested the website for responsiveness and cross browser compatibility through https://www.browserstack.com and it has worked okay. However I have discovered some bugs with the already existing Askbot instance by which the current AskFedora website is powered. The following are those bugs which my mentors and I agreed to look into after the GSoC pencils down by contacting the original designers of Askbot. 
  • When going to post an answer anonymously in the Q/A page, the option [hide preview] is not working hence the preview does not disappear when [hide preview] link is clicked.
  • When accessed the Q/A page as a logged in user and entered some text in the wmd-container of the Add answer section, the Add answer link which is not supposed to be there appear when the Q/A page is loaded again. An image of the above mentioned bug is denoted below.

  • And one of the critical bugs is that in the User profile page under Followed questions section, the pagination which is there to navigate back and forth in the list of followed questions does not work.
  • The question search Javascript functionality is not working in all the static pages excluding Tags, People and Badges pages and also in pages Sign in, Sign up, User network, Edit profile and Manage user login.
  • Also there is an inconsistency in the between the Tags and People pages because of its search functionality. In the Tags page, the search dynamically updates the pages after each key stroke that we type in the search bar but in the People page we need to type in the name of the person whom we want to search and enter it to view the results. 
These are the drawbacks which are left to be solved and they are with regard to the Askbot functionality. Before making a stable release it is better to attend to these issues beforehand.

And finally the following are screenshots of the mobile and desktop views of the main page of AskFedora as it is at the pencils down of GSoC.

Main page mobile view






































Main page desktop view



Words about GSoC and The Fedora Project

Although it is Google SUMMER of code, being in a tropical country it's always like summer in Sri Lanka. Hence we do not get any special holidays for summer and I have gone through this competition while attending the university and doing various university assignments as well. With the limited time I have had I am happy that I was successful in managing the time to get this project up to this state and feel contended about it. The journey up to now has not been easy because I had to learn a bunch of new technologies and have met up with a number of issues during coding and integration. With the help of my mentors Sarup Banskota and Suchakra Suchakra I was able to manage these issues and I want to mention Ahmed Fathy Hussein (IRC nick: TheMonster) and Patrick Uiterwijk (IRC nick: Puiterwijk) as well for helping me out in tackling some of such issues. And also not to forget Kushal Das (IRC nick: kushal) and Kevin Fenzi (IRC nick: nirik) for providing guidance for the GSoC students over the past few months. Thank you everyone for your support!


Even though GSoC has come to a pencils down, my contributions to The Fedora Project will not halt. And here onwards I will start contributing to The Fedora Project as a member of the Fedora design team and I look forward to the day that AskFedora gets released with its brand new look. :)

Thursday, August 13, 2015

GSoC Updates

9:21 AM Posted by Anuradha Welivita No comments
During past week I have proceeded more with integration and I have worked on the Ask page, Edit question page, Tags, People, Badges and User profile and related pages. As said in the last blog post I needed to work more on the mobile view of the footer and after many experiments I thought the following look of the footer will serve right in the mobile view. However any criticism about the styling of the footer is welcome as always :)

Footer mobile view

























And also as there are many links in the user profile page for overview, inbox, network, karma, followed questions, activity, votes, subscriptions and moderation when it narrows down to the mobile view the links overlapped on each other. Hence I had to figure out a way to prevent this and structure the links in a possible nice manner so that they will not overlap. I changes the arrangement of those links at 2 breakpoints one at 600px and the other at 1200px so that they have 3 different arrangements. The following screenshots shoes the 3 arrangements.

Mobile view

























Intermediate view


















Desktop view















I also styled the pagination so that the page numbers are enclosed in a circle shaped div as depicted in the image below.

Pagination















And earlier when my mockups were reviewed by the people who were present at FUDCon, they have mentioned that making the badges just like the tags with a pointed front does not make the badges distinguishable from the tags. Hence when integrating I removed that pointed part from the styling of the badges and now the badges look like the following.

Badges page mobile view

























Badges page desktop view















Furthermore I have worked more on the Sign in page, Edit question page, Tags, People pages and all the static pages including Help, Faq etc. I have also worked on the User profile page and related sub pages including the Subscription, Moderation, karma and followed questions. Some of the integrations with regard to those pages are included below.

Sign in page mobile view

























Sign in page desktop view















Edit question page mobile view

























Edit question page desktop view















Identified bugs

During integration I have come up with the following bugs which needs to be fixed.
  • The sidr side menu which is supposed to appear when the hamburger icon is clicked does not appear after Askbot's javascript files are imported via the collectstatic command.
  • In the main page as soon as the user adds new interesting tags and ignored tags, the tags appear just fine with the delete option just after each tag. Yet when the page is loaded again the delete section of the already added interesting and ignored tags does not appear the way they should. This problem is shown through the screen shots included below.

This is what appears when tags are newly added through the text boxes.
 Yet when the page is loaded again this is what they look like.























  •  In some of the pages the main header which consists of the search bar overlaps with the header above it. This also happens after typing in the collectstatic command where more stylesheets and javascripts files are fetched with that command which overrides the existing files.
  • In some of the pages the javascript search functionality with regard to the search bar seems not to be working.
Moreover my mentor Suchakra will be reporting bugs in the github tracker about the integration I have done so far so that it will also help me out in tracking the bugs. I hope to get these bugs resolved as soon as possible and continue with the integration.

Labels