Loklak.org has a page for front-end apps that showcase the uses of loklak’s API, and in the first week I’ve tried to warm up for GSOC by making a ‘realtime’ twitter feed, as the existing front-end apps were mainly single http get requests and didn’t seem very appealing to me, and also to prepare for my front-end app data visualisations GSOC project.
To obtain updated data, the app polls the loklak API on a regular interval. This is done rather simply by using $interval in AngularJS, which is just a wrapper around window.setInterval(). For the realtime feed, I set the minimum rate for querying at an arbitrary 1min so as not to exceed the limits.
The next thing I needed to solve was where to store the data, as I didn’t have a database to work with, local storage was the only option. A useful module for this is “ngStorage“. At a maximum of 5MB it isn’t much, but decent enough to store a few thousand tweets and showcase the features of loklak. If developers wanted to create an external app for loklak, they could also use the front-end apps if they were well modularized.
Lastly, to display in a fancy pinterest-like grid, I’ve decided to use an angular module called “angulargrid“. To achieve the infinite scroll effect, I created another scope variable, to take a subset of the data in local storage. AngularJS then helps with rendering changes in the data model to the feed, by using $watch() on local storage.
Do checkout the tweetfeed:
Some areas to improve:
- Refactor services to make it more modular
- Improve the regex to account for emojis and other tags
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:
- Linear: 3 tweets are shown at a time.
- Grid: 9 tweets perfectly arranged in a grid.
- Center of attraction: One big tweet in the center of the page.
- 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.
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 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