Full name: Aditi Mittal
Country: India (GMT + 5:30)
E-Mail address: [email protected]
IRC nickname: aditi
GitHub repository: http://github.com/adviti

Education completed or in progress (i.e., university, major/concentration, degree level, and graduation year?

I am a final year student of Integrated M.Sc. Applied Mathematics at Indian Institute of Technology, Roorkee.

How did you hear about this program?

I heard about this program from a friend involved in open source development. He works for OpenStack Foundation.

We advise all students applying for coding projects to apply for Google Summer of Code as well. Are you planning to apply for Google Summer of Code (once its application period opens on April 22?

I am interested in MediaGoblin’s blogging system project, since MediaGoblin is also selected for Google Summer of Code floating the same project I will definitely apply for GSoC.

Please describe your experience with the organization's product as a user and as a contributor (include the information about the contribution you made to the project you are interested in here.

I have not used MediaGoblin as a user before, but as a contributor, I submitted a patch for the issue at http://issues.mediagoblin.org/ticket/667. For supporting my proposal, I have also crudely implemented a couple of views for the blogging system project of MediaGoblin. This helped me in understanding and learning the MediaGoblin codebase. The code can be viewed in my github repo at https://github.com/adviti/mediagoblin/tree/master/plugins/blog.

Please describe your experience with any other FOSS projects as a user and as a contributor.

I have used many FOSS projects as a user, for eg., LibreOffice, Sage, Ubuntu, Python, NumPy, SciPy, matplotlib, Django and others. As a contributor to FOSS, I have submitted few patches to Melange. Below are some of the links to the patches: http://code.google.com/p/soc/source/detail?r=2e17c0fac7251ec54251f6dec687a61efb001a86

http://code.google.com/p/soc/source/detail?r=ce3c02b659c4e0816448ceae16e3932ca2cbfe8d

http://code.google.com/p/soc/source/detail?r=915af6bb5d7fdc9fe5e804ac3c96efe0d8b3dd9c

Please describe any relevant projects that you have worked on previously and what knowledge you gained from working on them.

I have implemented a blogging project from the book “Practical Django Projects” by James Bennet. It helped me in learning how dynamic web development is done today and learnt about various concepts like MVC, DRY, Object Oriented approach, ORM mappers, Database system designing etc. I also worked with Melange as a contributor. Melange uses Django as its web framework and is hosted on Google App Engine. I learnt how Google App Engine works and came to know about a different class of database systems called NoSQL databases.

What project(s) are you interested in (these can be in the same or different organizations)?

I am interested in MediaGoblin’s blogging system project because this project suits me best according to my present capabilities. I also find this project interesting and hope to learn more about web development from working on this project.

MediaGoblin is currently used as free platform for media publishing programs. A large number of users constantly upload media and hence having a blogging system will enable them to brag about the content that they add. I propopse to add blogging system to MediaGoblin as a separate plugin by reusing components such as MediaEntry, MediaTag, Collection etc from the existing infrastructure. With a blogging system, MediaGoblin can be used as an alternative to tumblr. I also propose to implement oEmbed protocol to provide embedding support in MediaGoblin.

We can implement the blogging system as a composition of three main interfaces viz. My Blogs and Blog Dashboard, Blog Post Edit interface and Blog View interface.

This will be the one point access interface where user can perform all blog management tasks like create a new blog, new blog post, edit, delete and view an existing blog post. My Blogs will list all the blogs that a user has created and provide other blogs management tasks like Deleting a Blog, Creating a New Blog etc.

Blog Dashboard [2] will represent the various management tasks that can be performed on a particular blog of a particular user. As we can see, this page will list all blog post entries of the user as a list along with the date and status fields. If the status of the blog post is “Draft”, then displayed date is the date of last modification or if the status is “published”, then the date field shows when the post published.

Here the user can create a new blog post or edit an existing one. For every blog post user creates, he has to provide a title whereas tags is an optional field. Tags help to search the blog post among all media type entries. The edit interface will have a WYSIWYG editor which will save a user from writing pure HTML. I propose to use TinyMce which is a web based editor written in Javascript and has the capability of turning TextAreas into editor instances.

Apart from this a user can save the post as a draft or publish it. Published posts would be visible on blog view page whereas drafts will be invisible to the public. We can also facilitate the user with to have a preview of his/her post before publishing.The view page for Create/Edit Blog Post can be seen at[3].

Access to this interface will be open to the general public and will act as an end point where other users can see the blog posts by other users.

We can provide a view interface to a blog in the following two ways. We should discuss which view we want our blog users to have by default. 1. Gallery View: As shown in the mockup [4], this grid view representation is same as other media types in MediaGoblin such as audio, video and images are represented. We intend to create the same interface for blog post entries. We will ask a user to provide a thumbnail for its blog post and if a user doesn’t provide a thumbnail, we will display a default thumbnail or it could be the embedded audio, video or image in the post.

<img src="http://www.mediafire.com/convkey/f05d/axeee5rjxvbspb26g.jpg"width="600" height="400"/>

2. Vertical View: In this view , we will display the blog posts like a stack with the latest blog posts on the top. The posts will be displayed with an excerpt which will be generated from the blog post description. Clicking on an entry in this page will open the blog post’s own page. Vertical view mockup is shown below.

As suggested by the mediagoblin community, the blogging system should be developed as a separate media type plugin, where blog posts will be just another MediaEntry objects. This way we will not have to develop new infrastructure and we can use the existing infrastructure that MediaGoblin already provides. For example, the basic models that a blogging system may need are Blog, BlogPost, Comment and Tag. For our blogging system, we can re-use Collection, CollectionItem, MediaComment, MediaTag and MediaEntry models without implementing any new models.

I explain about the various models that I will be using to implement our blogging system.

We will model blog post as a MediaEntry instance like videos, audios etc. The table below shows the mapping of the attributes of our blog post to their corresponding attributes in a MediaEntry object.

In addition to these, MediaEntry.media_type attribute will hold “blogpost” as its value for a BlogPost media type.

###Blog(Collection): We will model a Blog as a Collection entity consisting of blog posts which are in turn MediaEntry objects. When a MediaEntry object is created, we also create a CollectionItem which references the MediaEntry we just created and the Collection it refers to.

###Comment (MediaComment) & Tag (MediaTag) These models will also be used in conjunction with the MediaEntry objects.

###URL Mapping and Views: We will have the following URL patterns for blogging system

###Directory Structure: Since we are developing “blog” as media type plugin, we will create a mediagoblib.plugins.blog directory and structure it as follows.

**init.py File will use the functions of mediagoblin.tools.pluginapi to create hook for our blog plugin and also register the URLs of our blogging system **forms.py Contains forms like BlogPostEdit, BlogEdit etc. **views.py File contains views for Blog Homepage, Blog Post View Page, Blog Post Create/Edit Page and Blog Dashboard ,etc. We have not added any models for our Blog plugin since we are using the existing ones. Before starting the server, we can adjust our mediagoblin.ini file to load the new plugin Blog by simply adding mediagoblin.plugins.blog to the [plugins] sections.

I have written some crude code and implemented a view to create a blog post and a view to access all the published posts in a vertical order. You can take a look at the code I wrote here. Below are the screenshots of the blog post create/edit page and posts view page. For simplicity, I have only created a single Publish button and no Save or View buttons. The posts view page just lists the title and description of each published post without any sort of hyperlinks. The code for these views can be viewed at https://github.com/adviti/mediagoblin/tree/master/plugins/blog.

oEmbed is a format for allowing embedded representation such as images, videos and audios on third party sites. We want to support embedding in our blog system by displaying embedded content from media URLs in our blog post. We can easily support embedding of thirdparty media such as from sites like youtube, vimeo etc by using the existing oEmbed consumer solutions like python-oembed etc. For supporting embedding of media from MediaGoblin, we must implement the oEmbed protocol so that MediaGoblin can act as an oEmbed provider. We will implement oEmbed API end points which can be used for media embedding in blog posts as well as on third-party websites.

Media can be embedded in a blog post with the help of tags such as <embed>, <audio>,<canvas>, <iframe>,<img>, <math>, <object> and <svg>. We will have an ALLOWED_EMBED_TAGS variable in our mediagoblin.ini file which will list the allowed HTML tags that can be used for media embedding. This way, a user of MediaGoblin platform can configure the types of media are allowed for embedding in blog posts. We are particularly interested in the data of description field of our blog post(MediaEntry.description) which is HTML text and may contain media URLs. We will implement a clean_html method whose job would be to clean the html that is generated by TinyMce and convert all the media URLs found into embedded code as permitted by the ALLOWED_EMBED_TAGS setting. We will parse the media URLs to get the Hostname of the media provider and then use python-oembed to request the embed codes. In response to a consumer request, a provider returns it’s response in json or xml format, which we use to generate the embed codes.

We will use python-oembed consumer library to implement mediagoblin as a consumer. Below is a simple python code for a oEmbed consumer:

import oembed

#An instance of oembed consumer
consumer = oembed.OEmbedConsumer()

#provider = 'http://www.xyz.com/'
URL_REQUESTED = 'http://www.xyz.com/photos/bt/3456'
provider_URL_Scheme = 'http://www.xyz.com/photos/*'   
provider_API_End_Point = 'http://www.xyz.com/services/oembed/'

endpoint = oembed.OEmbedEndPoint(provider_API_End_Point, [provider_URL_Scheme])
consumer.addEndPoint(endpoint)

#Provider's response
response = consumer.embed(URL_REQUESTED)

#Response can be a json or xml object depending upon configuration of provider.
#Response: Attributes of response object are different for different media types.
#This response object is further used to display the content of the URL on the
#same page.

###June 10 – June 17 ####Community Bonding Period

• Interact with mentors for more concrete and discrete timeline.
• Read the documentation of MediaGoblin to get more familiarity with its modules.
• Read about plugins and their implementation.

###June 17 – June 27 ####Official Coding period starts

• Discuss more concrete design of the blogging system with the community.
• Discuss for a better user interface design with mentor.
• Setup blog plugin.
• Create basic files and structure of blog.

###June 27 – July 7

• Read documentation of SqlAlchemy.
• Write views for Blog Dashboard and My Blogs.
• Write templates to render the Blog Dashboard view.
• Discuss the additional features needed on Blog Dashboard.

###July 7 – July 15

• Write views for Blog Edit Interface.
• Write template and Blog Post Edit form for editing interface.
• Implement handling of status of Blog Posts.
• Write views to delete a Blog and a Blog Post.

###July 16 – Aug 4 (Two weeks)

• Discuss with my mentor which text editor would be the best for edit interface although I have proposed to use TinyMce.
• Discuss with my mentor and community about the possible blog posts collection displays viz. vertical or gallery view and implement them.
• Discus and implement a clean_html method for the HTML generated by the WYSIWYG editor. We can use lxml.clean_html which is a fairly robust method for cleaning HTML.
• Refactor and clean the code written for blog edit interface, blog dashboard, gallery view.
• Documentation

###August 4 – August 10 (take a off)

• I will take a week off.

###August 11 – September 13

• Get familiar with oEmbed protocol.
• Discuss with my mentor about the design of our oEmbed provider AP and implement oEmbed protocol so that MediaGoblin can act as an oEmbed provider.
• I will manually test the features implemented so far. This period i’ll devote mainly for bug fixing, giving final touches to the code by code cleaning and code refactoring with the help of mentor.
• Implement embedding support for blog posts

###September 13 – September 23

• Get done all pending work.
• Code submission.

I found the MediaGoblin community to be very helping and everyone was ready to help me whenever I got stuck. The experience of working on MediaGoblin has been very pleasant. I hope to continue working on blogging system after GSoC and help in maintaining and extending it.