Loklak : Map your Tweets!

The heading must have aroused your interest what it is about, but let me first tell you about Loklak.Loklak is a tool which you can use to anonymously scrap the tweets from twitter.Such a great back-end API needs an awesome enough front-end tool!That’s what we are developing this year as GSOC Students.The Loklak Front End, currently in its pre-alpha stage just completed its 1st phase out of 4, so I will be talking what we have achieved till now.I am working on the Maps feature so I will mostly speak about it

The Tweet Map feature allows the user to visualise the tweets as they are tweeted by the users on world maps as markers.The markers will show the tweet content in a popup with other related content like the username, time, location and links.The current stage is updated regularly and can be seen here. You can also try the wall feature thats another dimension.

ad_converted

Technologies I am using

Loklak Frontend is built on AngularJS as most of us developers share a love for JS here at Loklak.I am using Leaflet libraries to handle the Map related features.Currently I am using a inline geoJSON Variable to plot the markers on the map, soon it will be plotted from a jsonp request to server.

Its just a start to an awesome ending, once the whole feature is complete a user can select a region to show the tweets in, put in a name of a place and retrieve its tweet on the world map.Just imagine you want to see whats trending where the most? Just put in a #tag and you can see the density or may be heatmap! Its just way too cool! It has lots of potential and we are just scratching the surface. If you would like to join the development. Join us on Github, chat with us on Gitter.

Thats all for now! Next week new developments new post!

Loklak : Map your Tweets!

Another tweet on the wall

wall? The internet does not have walls.

Oh, but we do have one. Our wall doesn’t separate people. It brings them closer. More specifically, we bring the audience closer to you at your event.

Sounds interesting. What is it?

It is a twitter wall!

A twitter wall is an awesome way to engage your social media audiences at your event. Any tweets related to an event will pop up on our wall within seconds of the actual tweet.

Setting up a twitter wall on Loklak is super easy.

Step 1: Give us some basic information about your event

Step 2: Tell us what content should appear on your wall. You can be as specific as you want. Or not at all!

Step 3: Tell us how your wall should look. You get four different layouts to choose from:

  1. Linear: 3 tweets are shown at a time.
  2. Grid: 9 tweets perfectly arranged in a grid.
  3. Center of attraction: One big tweet in the center of the page.
  4. Map: YES! A MAP! Watch tweets appear on a map!

We have beautiful animations too. We really want your twitter wall to look good when you show it at your event.

Untitled

Soon to come:

  • Tweet statistics. View how many people tweeted over time. View top hashtags, top mentions and top twitterers. All this in real time!
  • More layouts. You can suggest us one too!
  • A photo wall. Watch photos from twitter and instagram come alive on the wall when within seconds of posting.
  • A dashboard and the ability to quickly save, edit and create new twitter walls.

The technology

The Loklak twitter wall is a part of the Loklak webclient which is powered by the Loklak server. We use AngularJS with browserify to make our app modular, along with some CSS magic to deliver a beautiful and useful product. The best part is that we are open source. You can contribute too! We are on Github.

Loklak webclient on Github

Loklak Server on Github

Chat with us on Gitter

Another tweet on the wall

A peek at loklak webclient

To demonstrate the capability & the purpose of loklak, we need a multifunctional and also practical web application to utilize and visualize the search result. This is where loklak webclient comes in.

In short, the webclient aims to:

  • Enable tweeting features, including rich contents those can be stored and processed, exclusively by the loklak server
  • Provide a fully functional twitter walls, like e.g. tweetbeam or tweetwall.
  • A Search front and comprise of default twitter search filter, along with additional functionality e.g. a map of search results, rich content search results.

With so many features in one web application, the answer for seamless UX is: Single Page Application, and thank to @julianfox, we had an amazing Angular app skeleton to start with.

Let’s take a look at the original skeleton.

App is the center of creation. This subdir contains the pre-built static file of your application. Angular components are separated and bundled the nodejs way, with the help of browserify.

├── components

├── constants.js

├── controllers

├── directives

├── filters

├── main.js

├── on_run.js

├── routes.js

├── services

└── templates.js

With this level complicity, automation is essential, this is where gulp comes in. The skeleton provide automation tasks for all the important aspects of development, production and deployment, e.g bundling, minifying, linting,  testing, watching and so-on.

tasks/

├── browserify.js

├── browserSync.js

├── clean.js

├── deploy.js

├── development.js

├── fonts.js

├── gzip.js

├── images.js

├── lint.js

├── live.js

├── minify-css.js

├── production.js

├── styles.js

├── test.js

├── unit.js

├── views.js

└── watch.js

I hope the first look at the application structure did not scare you away. It took me almost half a month to have an idea what’s going on, especially in the angular components, and then in the automation. But honestly this will always be my new model for SPA skeleton in the future, because it embraces the principle of modularity and extensibility, which are so hard to achieve in the modern web development.

Like what you see? Join the development team discussion here on gitter.

A peek at loklak webclient

Tweet it away with Loklak

At loklak, we harvest tweets, we collect, dump and index tweet search results allowing you to run an anonymous search using our API, No user accounts and no authorization required to do that. We’ve made it quite far with the application and there’s plenty of things to look forward to. A great back end always requires a great front end. As a GSoC student I’ve been working on the design and the authentication part required for the user to post through loklak app itself without the feel that he’s come out of twitter onto a completely different platform.

We’ve reached quite a stage today crossing our 1st stage out of the 4 planned so far to complete the application. Through loklak you can now register / signup using your twitter account and everything still feels like it’s all so beautiful and still intact with your experience.

We’ve been working a lot to make things stable and easy for new developers to onboard and help in the development, throught out this process we have cleaned up quite a few unused libraries, streamlined our application and its performance.

The web interface for Loklak is still in its alpha stages and there’s still ongoing work to make this awesome. Currently we support the functionality to search for a specific content using our search, a twitter wall to showcase during conferences and summits and use it as a live twitter wall and a brilliant maps feature visualizing the locations of the tweets.

The webclient is built using JavaScript and using task runners like gulp, a proxy service like oauth-proxy and other services like iframely

We’re gearing up for more work in the upcoming weeks with lots of changes and a more robust solution which is much more easier to use and intuitive with our 2nd Milestone to accomplish. Join us in is development here on github. See you all next week with more milestones accomplished.

Tweet it away with Loklak