🎈 Public Lab: GSoC proposal: Social Media Integration and Leaflet-Layers Library .

GSoC proposal: Social Media Integration and Leaflet-Layers Library .

by sagarpreet | February 16, 2018 05:09 16 Feb 05:09

About me

Name : Sagarpreet Chadha

Github : https://github.com/sagarpreet-chadha

LinkedIn : https://www.linkedin.com/in/sagarpreet-chadha-786378125/

Affiliation : Delhi Technological University , India

Location : Delhi , India

Email : chadha.sagarpreet97@gmail.com

Project Title : Social Media Integration and Leaflet-Layers Library .

Gitter : sagarpreet-chadha

Portfolio : https://sagarpreet-chadha.github.io/

I am in my pre-final year studying Computer Science Engineering (BTech) from Delhi Technological University , India . Originally I am from a small village in Punjab , India but currently living in Delhi , India to complete my studies .

Project description :

I would love to work on Social Media Integration and part of Interactive Project Maps .

Abstract/summary (<20 words):

Adding replies from twitter post to the original node on PublicLab and also adding answers from PublicLab node to twitter as comments . Also improving the interactive maps used in PublicLab website .

Problem :

What problem does your project solve?

PART 1 of the project : (Milestone : Social Media Integration )

People are increasingly engaging with Public Lab community and questions via Twitter . This project helps in :

1.) Generating more content to Public Lab website .

2.) Notifying the author of the node when someone comments on the corresponding tweet of the node , as an email is send to the author because that comment is added as a comment to the original node in PL website .

3.) helping people to know more about the Public Lab community .

4.) Automating a general reply to each comment on a tweet of the form - “Thank you John Doe for your reply .”

5.) Posting all the answers from a node on Public Lab website as a comment to the corresponding post on twitter of the form - “Warren added an answer to your node on publiclab.org ”.

PART 2 of the project : (Milestone : Geographic features)

1.) Adding a map using leaflet javascript library to show nearby projects .

2.) Making all the maps used on PL website to dynamically load markers by making API . This API can be used for other useful purposes .

3.) Solving the issues related to security , i.e , not showing the markers when the zoom level exceeds the precision level of the location given by the user .

4.) Showing project related attributes on marker and using different markers to show Projects to avoid any kind of confusion .

5.) Solving the issue of infinite scrolling and dragging of maps to make use of maps more friendly and smooth .

6.) Making an alternate list-view of map showing nearby projects .

Implementation

PART 1 of the project :

I have already worked with Rails RSS Feed generator and integration with IFTTT recipes to generate Tweets with images .

The first step would be to change the format of the Tweets generated by IFTTT to start with a unique number (which can be the ‘uid’ of that node) , for fast searching of that node from our database.

Then using the Twitter gem , we can write an algorithm to fetch the recent replies to a tweet by @PublicLab .

Then storing the tweet ids of these replies in a our database so that they are not processed the next time our algorithm runs . Also storing the tweet id of the parent post which is used to post the answers from PL website to this post as a comment .

This algorithm will be written as RAKE file in /lib folder and then using Whenever gem (we will also be using this gem for generating EMAIL - DIGEST) we can execute this rake file after every finite interval of time .

Advantages :

1.) We are just storing the Tweet-ids and hence less space is used .

2.) We are making a RAKE file and hence not changing the core code .

Pseudo-code for the Algorithm :-)

image description

I have created this Demo project :

A.) Add a comment to this tweet here :

https://twitter.com/Sagarpreet_07/status/961854112450068483

B.) Your comment would be shown here within 10 minutes : (To be more precise it runs every XX : X7 UTC time)

https://pure-eyrie-27023.herokuapp.com/tweets/test

C.) Also an automated reply to that comment will be generated on twitter .

Youtube Video showing the Demo :

PART 2 of the project :

Some of the existing issues i would like to solve :

Location-security

Refresh map on panning and zooming

Infinite scrolling and panning of maps

Different Layers on Leaflet map

SkyTruth Alerts and Full screen (in Progress)

Inline map showing incorrect nodes

I have already worked with the leaflet javascript library to add the /people map and the /profile map and have made the API to dynamically load markers in /people map . In the same way we can show the near-by projects .

To standardise the use of maps across PublicLab website , we should create a JS library .

I have created this demo JS library and published to npm :

GITHUB : https://github.com/sagarpreet-chadha/Leaflet_learning

NPM : https://www.npmjs.com/package/leaflet-learning

DEMO : https://sagarpreet-chadha.github.io/Leaflet_learning/

DOCS OF THE Leaflet JS library :

1.) Creating an instance / object :

        var PLmap = new MainModule() ;

2.) Attributes for modifying maps :

Description :

3.) To add Single - Layer Map :

       PLmap.SkyTruth(op) ;

       PLmap.MapKnitter(op) ; 

       PLmap.ToxicRelease(op) ; 

       PLmap.WaterReport(op) ; 

        and many more !

4.) To add Map with Layer button on top-right corner of map to choose combination of layers :

    PLmap.MultiLayers("SkyTruth" , "MapKnitter") ;

    PLmap.MultiLayers("SkyTruth" , "ToxicRelease" , "WaterReport") ; 

    and various other combinations !

5.) To add a CUSTOM map with your own API : This Map can be used for :

People Map : to show recent contributors to PublicLab.org
Project Map : to show near-by projects from the current location of the user .
People-Community Map : to show near-by PublicLab community people .
```
 PLmap.CustomMap(op , "https://" + URL OF API   + ".json") ;
```

6.) To add Map with only 1 marker : This Map can be used in various places across the PL website mainly :

Profile Map .
```
PLmap.Singleton(op) ; 
```

The final UI of this new map will be (can be modified as per my mentors convention) :

Profile Map showing Near By Projects with a different marker .

image description

Page showing near by Projects in both views : map view and a list view .

image description

Map showing one of the Layer of various layers .

Map showing button to choose various layers with different markers for each layer .

Map showing FULL-SCREEN option .

Timeline/milestones

The detailed timeline is linked below :

timeline1 timeline2

Needs

All the resources I will be requiring are on the internet such as Twitter gem documentation , leaflet documentation , etc . And I would of course require the guidance of my mentor.

Setup

I have forked and built plots2 . I have been contributing to PublicLab community from the past 6 months and am quite comfortable with the codebase .

Experience

I am extremely passionate about developing applications and have worked hard to attain the required set of knowledge and skills .

I also work as a Teaching Assistant where i teach people the basics of Web development using Ruby on Rails and Javascript and help them to enter the world of open-source and to make their first contribution .

Also i like to go to various Hackathons and have recently won a hackathon where my team developed a product for children with cognitive disability . (Organised by Read-Alliance , held in NASSCOM office , Delhi)

I am also a recipient of Google India Challenge Scholarship .

Contributions to Public Lab :

I have done about 32 commits and have reported about 24 issues . My contributions to PublicLab repository are listed below :

Merged Pull Requests :

https://github.com/publiclab/plots2/commits?author=sagarpreet-chadha

Issues reported :

https://github.com/publiclab/plots2/issues/created_by/sagarpreet-chadha

I still remember the first contribution i made to PublicLab :)

Teamwork

Throughout my academic career , I have been consistently praised as focused by my professors and peers . While working on academic and extracurricular projects , I have developed proven leadership , technical , and teamwork skills . I like to work in a team and have developed various projects with my college mates . Also as i am a regular hackathon participant , i have the experience of working in a team .

Passion

Belonging from a place having fresh air , pure water and green environment , and currently living in one of the most polluted city in the world - Delhi , Yes Public Lab interests me a lot and i wish to be the part of the PublicLab family for a very long time .

As Larry Page once said- “If you’re changing the world, you’re working on important things. You’re excited to get up in the morning .”

My Outreach - Plan to bring more newcomers during my Summer Project :

Since I am a Teaching Assistant for https://www.codingninjas.in/ , I am planning to hold free sessions for students where we can promote OSS . I will also encourage them to fork the PL repo and solve FTO issues and send a PR for the same .

Same session will also be conducted in my university .

In this way we would not only get more developers on-board but it will also help students explore the Open-Source world as well .

Audience

This project will be helpful for people engaging with Public Lab via twitter .

It will also help twitter-savvy people to follow their PL tweets of interests very closely .

The contributions by existing Public Lab users will be visible on twitter which will reach more audience and at the same time attract more users to Public Lab community .

This project will also help people who wants to know about the various projects near them . The project will also focus on location-security .

Commitment

I can assure you that if i get selected to work with Public Lab this summer , I will definitely try my level best to make this project successful and will love to continue working with Public Lab even after the summer .

External Links :

1.) Youtube video :

https://www.youtube.com/watch?v=nm7DzQ4uBWI

2.) Demo Website :

https://pure-eyrie-27023.herokuapp.com/tweets/test

3.) Tweet URL :

https://twitter.com/Sagarpreet_07/status/961854112450068483

Looking forward to working with you .

Sagarpreet Chadha .

48 Comments

Hi @warren , kindly see this .

I have some initial implementation that i want to show you regarding fetching tweets and replying to tweets automatically . I have hosted that mini-project , should i add that to this proposal as well ? Thanks !

Is this a question? Click here to post it to the Questions page.

Sure, go ahead and add that in! Thanks!

Can you also link to the relevant portions of OmniAuth issues from the repository?

It'd be great also to link to, and collect ideas from, the relevant milestone: https://github.com/publiclab/plots2/milestones and the associated planning issue if there is one! Thanks!

@warren...I have added the demo project , kindly see that . Also added a youtube link :-)

Also i would like to know whether this Soc idea https://publiclab.org/wiki/gsoc-ideas#Interactive+Project+Maps requires Leaflet-Blurred-Location as a pre-requisite ? Thanks so much !

@mridulnagpal what do you think?

Added some wire-frames for more clarity .

@warren...actually i am interested in doing Social Media Integration idea (not the OAuth-based Login) but as coding period is very long so i am hoping to do part of Interactive Project Maps also . What do you think ? @mridulnagpal

@sagarpreet Interesting. I would like to work with you for the socialisation part. I am proposing an idea for OAuth based login. I want to deal with the facebook for the summer.

Hi @bansal_sidharth2996...Thanks so much :) Yes that would be great !

@sagarpreet @warren Sure I can use some help in upgrading leaflet blurred location. If @sagarpreet is willing to work on it as well, we can extend the features we aim on having plenty of other features as well.

@mridulnagpal...i would love to ! Thanks :) Can you also see the current proposal state . What do you think ?

I would suggest getting a little familiar with leaflet blurred location, and its demo. Also our main task would be adding information to our maps using tags, like project description, # of people, etc. Also we need to maintain subscribers list for regions, or boxes in our case. Please have a look at my proposal and leave any comments on what features we can enhance even further.Also the proposal looks really good to me. Thanks :)

Hi @warren , I have added the flowchart explaining the algorithm to fetch tweets and showing to our website and also replying to tweets .

Also found this interesting article on why Social Media Integration is important : https://economictimes.indiatimes.com/small-biz/sme-sector/power-of-social-media-a-win-win-marketing-strategy-for-smes/articleshow/60231774.cms

Ooh, i really like this item: Profile Map showing Near By Projects with a different marker

More soon when I do a full review, thank you!!!

A few ideas;

If we stopped using IFTTT to generate tweets, and did it via the API somehow, could we get the tweet ID directly that way? And if so, could we link the tweet id to the node with a node tag like twitter:_______ maybe?

Is 10 minutes based on a Twitter API limit? Just curious!

For the project map work, I'm interested in hearing from @stevie and @liz -- they have a lot of ideas about project and page mapping that I hope could be useful! And also see this related but old page: https://publiclab.org/places

Also see this suggestion I put up about how the "reply by tweet" might be similar in some ways to "reply by email"-- https://publiclab.org/notes/gauravano/02-18-2018/gsoc-proposal-email-integration-project#c18697

What do you think? Maybe reach out to @gauravano to discuss!

Thanks! Great list of important projects here!

Hi @warren

1.) I tried very hard to use the Twitter API and twitter gem to directly tweet .
But it seems they have depreciated the API to post images with tweets , only we can tweet text without image .

I even asked for help here https://github.com/sferik/twitter/issues/638 and tried the solution given by some good folks in that issue comments but still no luck . I will try some alternatives to post images as well in the next week .

Also you once said here : when we solved this tricky IFTTT issue :-) that you don't liked the idea of baking new channels of publication into our core code , which makes total sense .

The best solution and the fastest solution i think is just to update the tweets generated from RSS feeds to start with the node-id , for example :

Tweet-15850 via Ag8n: http://ift.tt/2FJ8tlw The difference between medical particle monitoring and your particle monitoring?

1.1) We can quickly parse 15850 and search in our Node-database and add power tag twitter:XXXXX (here XXXXX is the tweet-id) .

1.2) Similarly when someone comment on the any tweet , we fetch this comment => then calculate the parent using parent = client.status(i.in_reply_to_status_id) where i = comment object and then using again the node-id = 15850 which is in parent.title we can add this comment to our Comment database .

1.3) Now for adding comments from PublicLab to Corresponding tweet (this is exciting !) , we can simply use the Power-Tag twitter:XXXXX and Client.update( body of comment , reply_to: XXXXX) we can post the comment on that Tweet .

2.) Why 10 minutes ?

Actually i have hosted the demo website on Heroku and scheduler used is Heroku-scheduler which has minimum running time of 10 minutes . But we will use the Whenever gem , which can even run after every 1 minute ! @namangupta mentioned whenever gem documentation in his proposal here .

3.) And @warren , @liz , @stevie , please check the demo and let me know if anything needs to be added / modified .

Thank so much for feedback !

@namangupta , @gauravano , @vidit what do you all think about this ? Thanks !

On important thing to note in Twitter API is that we cannot get replies to a Tweet directly !

So the alternative is to fetch recent replies to @PublicLab on twitter and then follow the above flowchart in the proposal . @warren kindly see the demo in the proposal and let me know if anything need to be changed or modified .

Thanks !

@sagarpreet yes you are right that we cannot get the tweet's reply directly but i have some implementation regarding this. @warren told me to get into this reply-by-tweet concept so is it okay with you if i get into this problem?

https://publiclab.org/notes/namangupta/02-17-2018/gsoc-proposal

Sure ! Go Ahead ! It would be wonderful to work together :)

Do take a look on how i am implementing in the demo . Also it would be great if you can figure out a way to tweet a node using Twitter API (with IMAGE !) .

i will call you today or tomorrow to discuss about the feature if its fine with you and you are not busy?

Ok...I will share my personal number with you on gitter . But it would be great if you could call me on Thursday as i am a little busy with my University examinations .

Is it ok with you ? Thanks !

@sagarpreet we already have numbers ( coding ninjas august alchemy batch 2017 :p ). And lets connect on thursday and All the best for your exams.

Awesome ! And thanks :)

Hi @mkashyap354 ...I see you are a potential mentor for Social Media Integration idea (listed here ) . It would be great if you can review this proposal . Thanks !

hi @sagarpreet I go through you proposal and I have a question for you that why we use only twitter although we have other social site also like facebook etc. thanks

Thanks @mkashyap354 !

I asked the same question to @warren and @liz a long time ago :)

I guess the answer is that Facebook networks People while Twitter networks ideas and topics.

Hi @warren , @liz , @stevie !

I would really need your guidance on what Map related features should i focus in my proposal ?

Which current issues on Github related to Map integration should i add here ?

Also kindly see my above comment (the big one) on Twitter integration .

Thanks so much ! I really appreciate your help here :)

Hi, all -- still trying to keep up with the proposals... so many good ones!

As to Twitter vs. FB or others (just to explain for @mkashyap354), we hope to do integration with several, and I think it's fine to focus on one at a time. We've seen lots of people respond helpfully to questions from the site which we post (now automatically) to Twitter, and getting some of those replies to show up back on the site would be great.

I LOVE the flowchart and background work you've done on Twitter. I think this is pretty great. One idea i had though -- tell me what you think -- is to use the nid in the tweets we generate as part of the URL maybe? Or, as a hashtag -- then search for that hashtag -- in @publiclab tweets, like #15744 for this node. Could that make things slightly easier? Just trying to brainstorm a bit.

Regarding map related features, let's see... I think there are a lot of different projects going on in maps, including new layers, ways to show different types of content (users, nodes) -- I wonder if we ought to create a JS library for maps on Public Lab -- a way to generate a Leaflet map and pass it node or user ids, and have it produce the Leaflet map instance? That would help standardize mapping implementation across the site, too. We could spin this out as a sub-library in JavaScript, kind of like how we've done for:

I hope that's helpful feedback!

Thanks so much !

1.) The hashtag idea is great ! Yes we can do that .

2.) And regarding the JS library , I really think we should do that to standardize the use of maps at all places . Saying that , TBH i would need your help as to what will be the flow of code . I am comfortable with Leaflet library , Vanilla Javascript and Jquery , have basic knowlege of NodeJS and NPM and gruntJS and Jasmine Framework for testing .

By studying this awesome library : https://github.com/publiclab/PublicLab.Editor , I am able to understand how this works . I am sure with the time we have before the summer and with your guidance i can learn how to create consistent and maintainable JS library .

This will be exciting and i would love the opportunity to create a JS library from scratch for PublicLab ! Thanks :)

I really liked your timeline. It has given priorities to each issue according to the need of issue. I also like your flow charts a lot they explain the logic very easily.

Thank you @ bansal_sidharth2996 !

For maps-layer JS library , i was thinking of making independent modules like :
1.) Layers module .

2.) Full-Screen module

3.) Near-By projects module

4.) Near-By people module

5.) And a Main-Module whose instance will be made .

We will take arguments as the URL of the API , and maybe URL of markers png image  , and number of markers to be displayed  , security options , etc . in above modules .

Also including features like ( Using Leaflet library (i have some initial implementation for these) ): * Refresh Map on panning and zooming * Finite Scrolling and panning of maps * Location - Security

CODE FLOW / STEPS :

1.) Creating src , dist , test and example folder .

2.) Creating independent modules in src folder .

3.) Creating example HTML files in example folder to test different map modules .

4.) Using Jasmine framework for testing to be put in test folder .

5.) Using gruntJS plugins for concatenating and compressing modules into one single JS file .

6.) Publishing the library to npm .

7.) For increasing code - maintainability and usability , we can use : https://coveralls.io/ and https://travis-ci.org .

I was thinking of starting the work before the actual coding period starts like from 24 April as i am already a contributor for PublicLab from a long-time , hence skipping the community-bonding period exercise , only if you all agree with this :)

What do you think @warren ? Thanks !

Also including features like ( Using Leaflet library (i have some initial implementation for these) ):

Refresh Map on panning and zooming
Finite Scrolling and panning of maps
Location - Security

8.) Integrating with plots2 .

What do you think @warren ?

I also do agree with @sagarpreet, I know public lab since last yr I drafted my first proposal(eventhough was not selected at that time for GSoC) and contributing since October, so we guys don't require any community bonding period. We can start the work prior to that if the mentors would wish and we got selected.

I agree with @sagarpreet and @bansal_sidharth2996 , we can start coding earlier too.

:-) of course you can!

Regarding the leaflet library -- i think it's best to think about it in terms of the inputs and outputs. So the docs would say something like:

# begin by instantiating a Leaflet map:
var map = L. ....
# add the additional layers like this:
var peopleLayer = new PLMaps.PeopleLayer(map, peopleUrl);
var mapknitterLayer = new PLMaps.MapKnitterLayer(map);

Something like that -- make sense? Then we just have to add a few simple lines to each place we make/use a map.

Maybe looking at an example of another Leaflet map library would make this even easier, like addTo(map) syntax: https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant

Yeah this is a cool idea.

Just for learning purposes i made this demo JS library :-)

https://github.com/sagarpreet-chadha/Leaflet_learning

Contaning only single module SkyTruth Alert .
Following modular approach .

@warren ... kindly see this . Thanks !

Also should i update my proposal , the maps part ? Showing doc/API of JS library maybe ?

Oh wow, cool! If you make a gh-pages branch and (on that branch) check in your node modules, we can try it out! There are some gotchas so give it a try and I can help you along the way. Don't get too frustrated!

Sure, this is a great addition!

Thanks so much @warren !

Ok so i tried hosting using the gh-pages branch . The link to Webpage is :

https://sagarpreet-chadha.github.io/Leaflet_learning/

However i have changed the cdn links to the actual links and not to the one's locally stored in node_modules folder in index.html file , i think node_modules folder is very large and hence not uploaded to github server or maybe it is still uploading ?

If the node_modules folder is still uploading , then this webpage should work after some time , https://sagarpreet-chadha.github.io/Leaflet_learning/example/example1.html , right ?

What do you think ?

And will try to update my proposal today . Thanks !

I have updated the proposal here , added :

Mockups
API/Doc of the JS library

And updated my timeline here :

https://drive.google.com/file/d/1n-eZ9_BBfhiTAFsWr479G9miKVa3iFWT/view?usp=sharing

Kindly see the above PDF link so that i can submit my final Proposal , the timeline consists of approx. 2 months work on maps and remaining 1 month work on reply by twitter feature .

Thanks :-)

Great proposal @sagarpreet . The best!!

Thanks @vidit ! Means a lot !

Hi @warren !

So i found this JS library https://github.com/MatthewBarker/leaflet-wikipedia/blob/master/source/leaflet-wikipedia.js
with demo here :
http://matthewbarker.github.io/leaflet-wikipedia/

This fetches from wikipedia API and shows markers on map ! Also it removes marker outside the current bounding-map .

I will try to learn from this library and try to understand how the Leaflet's classes are getting extended here and how the Leaflet class functions are getting overwritten .

And the demo i made above got 43 downloads in 4 days on npm ! Yay ! Thank you !!!

Wow, very cool! Yes, this looks like a great library to study. Great work!

You must be logged in to comment.

Public Lab Research note

GSoC proposal: Social Media Integration and Leaflet-Layers Library .

About me

Project description :

Abstract/summary (<20 words):

Problem :

Implementation

Timeline/milestones

Needs

Setup

Experience

Contributions to Public Lab :

Teamwork

Passion

My Outreach - Plan to bring more newcomers during my Summer Project :

Audience

Commitment

External Links :

48 Comments

Tags