Building a Github Star Tracker for your Open Source Project
21
April
2021

Building a Github Star Tracker for your Open Source Project

Building a Github Star Tracker for your Open Source Project
Akshay Rangasai
0
 minutes ↗
#
open-source
#
github
#
startups
#
javascript

Github interface is not very convenient to track the stars of your open source project, and it needs a lot of clicks, and hard to access all required information. We at Appsmith, as an open-source project, always wanted to keep track of our stars and see who is interested in our product. So we built an application using Appsmith to see the profiles of users who starred our repository. In this tutorial, we'll learn how we can build this star tracker app in just 10 minutes.

The Idea!

  • This star tracker application has a table to show a list of users who have starred a repository.
  • A container that shows more details of selected users like Name, Location and Company.
Check out the live demo of the app here.

Building the Application

To begin, you'll need to sign up for Appsmith (it's free!). If you already have an account, sign in and click Create New to create a new application. Name the application as Github Star Tracker.

Now, we will start with the output - what do we want to see and where? Appsmith makes it super easy to do so. Let's start with a simple text widget to display number to GitHub stars for the Appsmith repo. Next, let's add a table widget so we know what data we want to see. We will make the application more complex as we progress. We'll name this table starred_users, and it is essential to remember this name, as we will use this to reference queries later on.

Gif One.gif

You can see that Appsmith auto-populates the widget with sample data to show you what the render looks like. Once we set this up, we will dynamically change the content in the widget.

Using the other widgets in the widgets pane, let's create a user profile section to the right of the table. We're using Text widgets for this. Let's start with username, company and location as these are very common in Github.

Image One.png

That's it. We have a view. Now we need to bind data to the widgets.

Displaying User Data in the Table

To display data in our table, we need to bind the widget with a data source. This involves two simple steps, and an optional one for more control on what we'd like to display:

  • Create an API call to Github that returns the list of users who have starred the repository
  • Bind the API to the table Starred_Users
  • Transform the data using Javascript as necessary

Let's start by setting up the GitHub API,

We will use the public Github API endpoint, which doesn't require authentication, through a GET method from appsmith.

Now click on the + icon next to the APIs section on the sidebar and click Create New. Let's call this API Fetch_Starred_Users in the URL request input, the method is GET and we will use the URL constructed from Github's API documentation.

https://api.github.com/repos/appsmithorg/appsmith/stargazers

For the public GitHub API, we need to add the header telling them we're an app that is accessing v3 of the API and expecting a JSON response. We'll keep the params empty for now, and revisit it once we extend the application.

Accept : application/vnd.github.v3+json

Now click on run to evaluate the response to make sure this is working fine. Once this is done, this is what your API page will look like.

Image Two.png

Awesome, let's bind the API into our table.

Binding data to our Table

In the table widget, click on the settings icon, and in the table data field, we remove the sample data and instead fill in:

{{ Fetch_Starred_Users.data }}
Appsmith uses moustache to process Javascript, and thus in any input, content in between the {{ }} is evaluated as a Javascript. The table widget expects an Array of objects as its input, and automatically displays it.

We can immediately see the table populate. Appsmith interprets changes in real-time and reflects the state, making it much simpler to build the apps.

We now have a table that displays a list of users who have starred our repo. But as you might have noticed, there's a lot of unnecessary information in the response for our viewer. We'll transform this data so we just see the username of the user.

Transform Github Results to Display Login Details

We can use native JS to transform data in Appsmith. In this case, we will use the map function to remove unnecessary data that is returned, and only display users and their logins.

In the same table, we change the earlier moustache content to:

{{
    Fetch_Starred_Users.data.map((row) => {
      return { UserName: row.login };
    });
}}

We can see how that instantly changes the display here. We can also extend this and display what you'd like to display relevant in your app.

And that's it! We now have a view that calls an API and displays relevant data to users. But how do we go from here and display user data? We'll do that in the next section.

Going from View to App

Right now, our application doesn't have anything but the placeholders to show basic profile data. We're missing multiple things:

  1. No API to fetch profile details
  2. Connect table click to profile details
  3. Display profile details after API runs
  4. Paginate the API and get the full list of user profiles

Now, let's fix them starting with setting up profile API.

Setting up the Profile API

Github offers a very seamless way to access user profile details through their API. From their API resources:

https://api.github.com/users/{{"Username of User"}}

The {{Username of User}} is a variable that we need to share with GitHub to respond with the right response. We can do that in Appsmith by using Moustache and passing it as a parameter to the API.

Let's create a new API called Github_User and in the URL we have a GET request with the following parameters. Appsmith offers an intuitive selectedRow method for us to pull relevant data from the view.

https://api.github.com/users/{{Starred_Users.selectedRow.UserName}}

Our API should look like this after clicking on run.

Image Three.png

Now with the API in place, we need to modify the view to show the data that the API returns. But before we work on the view, we need to make sure that the API is called whenever somebody clicks on a table-row.

Appsmith has an inbuilt property that does just that. In the Table widget settings, update the onRowSelected field to run the Github_User API.

Image Four.png

To update text in the user profile text boxes we'd created before, change the placeholder text from User Name to:

https://api.github.com/users/{{Starred_Users.selectedRow.UserName}}

Repeat that for the rest of the fields and we'll have something that looks like this:

Image Five.png

Now we're able to click on a row essentially, and we'll immediately see the profile basics of the person who has starred our repo.

The Github API responds with only 100 profiles, and we'll have to paginate the rest and request this data each time. Appsmith lets us do that smoothly.

Paginating Github Response to Pull Profiles

To start paginating, we must enable server-side pagination on our Table. This will help us programmatically call the pages to Github and get more responses.

Image Six.png

With this enabled in the Fetch_Starred_Users API, we'll need to pass the page parameter, as described in the Docs.

In the API screen, we add the page parameter to the request:

page : {{Starred_Users.pageNo}}

The final API page should look like this:

Image Seven.png

Now we go to the app and check if our pagination is working, and that's it! We now have a full-fledged application that pulls data from Github and helps us see who and where the users who have starred our repo are from.

Lastly, let's add an API that fetches the count of Github Stars for the repo, for this let's create a new API and name it as Start_Count. Add the following URL in the input box:

https://api.github.com/repos/appsmithorg/appsmith

This URL will have the attribute stargazers_count from which we can get the count of the total number of stars on the Github repo. Now let's bind this variable on the text widget on our Page. Below is the screenshot:

Image Eight.png

Wrapping Up

Deploy your application on the cloud and share it with others, and that's it. We're done!

If you are more adventurous, you can extend the app to set parameters on how many users you want per query and have an input form that helps you dynamically check and explore user profiles of starred users on any repository.

We have made a slightly more robust application public here; try it out and let us know what you think. You can also check the live demo of our app here.

If you have any questions or feedback, join our discord, or write to akshay@appsmith.com

Cover Photo Credits: Photo by Markus Spiske on Unsplash

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?
1
June
2021
Product

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?

In 9 Months, 4500 People Starred Appsmith on Github. What Do We Know About Them?
Rishabh Kaul
0
 minutes ↗
#
open-source
#
github
#
community
#
general-advice
Product

It’s been only about 9 months since Appsmith became a GitHub project. Since then we’ve amassed about 4500 stars, which is a simple way for GitHub users to bookmark repositories that interest them. We’ve been very curious to learn more about these people. Who are they? What are they like? Are there things we could do to accelerate awareness and interest?

I recently came across this incredible post from Spencer Kimball (CEO, CockroachDB) based on the code that he wrote many year back and thought of running it over our Stargazers to learn more.

Why did we do this?

As a project which took an open source turn, we’ve been building in public. Most of our team members are going out and answering questions on Discord, Github, Reddit, Hacker News and Twitter. A lot of what we achieve is going to be determined by the community that we build. We like to think of stars as bookmarks and while we’re thrilled at our star growth, we also know that it’s often just one of the many indicators we’d like to consider when learning about how we’re being known in the wider technology ecosystem. The ultimate joy is going to be to see people build and use our product and there’s no replacement for that and the team is burning the midnight oil to gather feedback, observe usage and be there to help in any way we can.

That being said, given that Spencer did most of the heavy lifting, we were curious to learn more about our Stargazers and see if there’s something we could pick up from this analysis.

How did we get here?

As a project that hasn’t particularly invested in paid marketing, a lot of our outreach has been primarily through engaging with our community and writing content.

Content also has a compounding effect: we can repurpose it, we can start a thread on a new discussion board or link it back to twitter. By going through our cumulative growth in stars over the last 9 months and checking if that overlapped in any major releases or news items gave us a sense of what might have contributed to it.

Content & Community Matters, with a little help from luck.png

In our case, our first major content post which drove traffic was when Arpit (our CTO) wrote about Appsmith (on Hashnode & Dev.to).

Trending on Github gave us an initial bump, however the credit for this goes to the early community that was nurtured which allowed us to trend in the first place.

A big part of our steady growth honestly was just via our team being extremely active on public forums. This Reddit post got us a lot of traffic. As did our showcase on Hacker News . We were also featured in The Hindu (a major newspaper in India). And then sometime in April, something interesting happened, we got a couple of mentions from the community in China and Korea and that led to a lot of users from these places, which in turn led us getting mentioned in RunaCap’s list of most popular Github Projects in Q1 of 2021, as well as constantly trending on niche categories of Github.

In the meantime, we’re continuously coming up with a lot of listicles around low code platforms like this , this or this . None of these by themselves are needle moving, but together they all add up and it helps that this category is gaining traction.

Needless to say, we intend to continue to invest heavily in content, from tutorials to showcasing how our community is using Appsmith to other learnings around building software and teams.

Where are our Stargazers coming from?

In total, our Stargazers are from over a 100 countries. This data however isn’t complete since getting the exact location from a Github profile often becomes tricky. Why? For starters, only 60% of our Stargazers mentioned a location. Within these, folks have mentioned multiple locations, misspelled names or mentioned places like Mars ;)

However, from an indicative perspective, these are the top 25 countries.

Users who star_ We are one world.png

For our team at Appsmith, at the very least, it means having a global outlook towards our community, as well as keeping a lookout on certain geographies, where we might see Appsmith suddenly gain traction.

What else are our Stargazers checking out?

Starring on Github is super easy and people can go trigger happy with it. Still, analyzing the other repositories our Stargazers star gives us a directional sense of their interests. Our Stargazers starred a total of 247K repos. Of these, 222K repos had < 5 stars, which sorta points towards a power law that we’ve come to expect from social networks.

Here are the top 20 repositories

Screenshot 2021-05-30 at 8.31.26 AM.png

Our users love dev tools which should come as no surprise. Some common themes that are noticeable here: Tools that make it easy to create UI, tools that help automate workflows and tools that help on the database side of things. And since Appsmith is highly relevant to users trying to accomplish each of these things, it makes sense that these end up becoming the most correlated repos.

How much do our Stargazers contribute to open source projects?

29.1% (1310) of our Stargazers have made atleast 1 commit to a repository. repository. In total, our Stargazers made about 379K commits, of which the top 10 contributed 127K commits (or 33.5%). Spencer was kind enough to include some base criterion in his code to make the numbers palatable: only repositories with > 25 stars or 10 forks, or 10 open issues were included. This puts the average number of commits at 289 with a median number of commits at 46.

The top 20 active Stargazers had these impressive stats

Screenshot 2021-06-01 at 5.57.41 AM.png

A Networked Platform

Do our Stargazers follow each other? If so, to what extent. To make the data meaningful, we decided to go with only those Stargazers that had atleast 10 followers. This gave us a dataset of 2214 (~49%) Stargazers. Plotting the distribution bases % of shared followers, we see that for 62% of our Stargazers, there was an overlap of atleast 40% of their followers with other Stargazers of the Appsmith repo. Talk about a networked platform! And since we get followers from many countries, we can be reasonably certain that such a networked effect isn’t restricted to one or two locations.

Distribution of Shared Followers with Appsmith's Stargazers.png

Attributes of our new Stargazers

One additional thing that Spencer included in his code was to look at the follower and commit activity of Appsmith’s incoming Stargazers. Honestly, we’re not quite sure of what to make of this data except that there’s a positive (albeit weak) correlation between average follower count and average commits on Github.

Average Followers & Commits for new Appsmith stargazers.png

Why not try it yourself?

Go ahead and use the Stargazers repo yourself to analyze yours (or anyone else’s) repo’s trends. Depending upon the number of Stargazers you have, it can take some time. It took us about 7-8 hours (with a 5K/Hr rate limit).

And incase you're fed up of spending months building internal tools, dashboards, admin panels and what not or are just curious about why these 4500+ folks starred Appsmith, do check it out here !

Build a GitHub Dashboard and Track Any Open Source Project
10
August
2021

Build a GitHub Dashboard and Track Any Open Source Project

Build a GitHub Dashboard and Track Any Open Source Project
Vishnupriya Bhandaram
0
 minutes ↗
#
github
#
open-source
#
app-development
#
ui
#
javascript

Did you know that Appsmith is a fully remote distributed organization? We have colleagues in 5 countries! This makes total sense for us as an open-source platform with contributors from over 100 countries (take a look at our activity on Github). It’s also why we think of ourselves as learners; we read, talk to people, and love feedback. And in that spirit, every new team member makes an app on Appsmith in their first week upon joining us! And there is only one rule, that there are no rules! These apps range from functional to fun to downright silly!

This week, we’re featuring our colleague, Favour Ohanekwu’s app. Favour is a front-end engineer from Ibadan in Nigeria. Over the years, he has been actively involved in building web applications across several industries ranging from health, agriculture, and IoT. You can follow his work here.

First steps

Favour toyed around with a few ideas before landing on a final app idea. Some of these app ideas were:

  • An application that allows employees to review their team members and view reviews about them from their fellow team members.
  • An application that shows the current availability status of each employee at any time of the day. On this application, employees will be able to set their status (Active, Busy, Away) and be able to see the current working status of other team members.
  • A dashboard that reports the company's GitHub repositories and compares them in terms of several metrics.

Favour chose to work on the third idea to build a Github Dashboard to view and track several projects, using Github’s REST API.

Click here to see the app!

We’ll outline the steps involved in making this app, and you’ll see how easy it is to build this application in few simple steps using Appsmith!

Getting Started

This short tutorial uses the cloud version of Appsmith. However, you can always export and import Appsmith apps to different environments (cloud, self-hosted, local). The recommended way to use Appsmith is to use Docker; follow the documentation here for detailed instructions if you want to build locally.

  1. Create a new account or sign in with an existing account, redirecting it to our dashboard.
  2. Click on Create New under your organization, and this will create a new Appsmith application.
  3. Rename the application to GitHub Organisation Dashboard (or any name you’d like) by simply double-clicking on the existing one.
  4. On the left, find the entity explorer; this is where you can manage all the widgets and data sources of the entire application.

Now you can build a simple UI with Appsmith widgets to build the dashboard and display all metrics crucial to your project!

Fetching Data from Github Organisation

Now that you’ve configured the app, you will need to configure a data source that will fetch all the repos from a Github organization. To do this, follow the steps below:

  • Click on the + icon next to the Widgets, find the input widget, and drag and drop it on canvas. The idea is to enter the organization name and dynamically fetch all the repos created under that organization.
  • Next, click on the + icon next to Data Sources, and create a new API as a data source. Rename the API as get_organization_repos and paste the following in the URL:
https://api.github.com/orgs/{{Input1.text}}/repos
  • Here as you can see, we’re dynamically passing the organization name to the GitHub API from the input widget.
  • Go back to the canvas, and drag and drop a new Select widget; now paste the following snippet to pollute the options with repos in the select widget from the API.
    {{
    get_organization_repos.data.map((repo)=>     ({
        "label":repo.name,
        "value": repo.name
    }))
    }}
  • Drag and drop a new button widget and set the onClick action to Execute a Query and select the get_organization_repos
  • With this, whenever you enter a new organization name, the select widget automatically populates it with all the repos from that organization.

Additionally, you can drag text widgets and add some context regarding the same for the dashboard. Here’s how it looks:

Screenshot 2021-08-10 at 11.10.52 PM.png

Fhere

Fetching Data and Events of a Particular Repository

Displaying Core Metrics

Now that the repositories are listed on the application, you can fetch the data of a single repository and display all the crucial information such as network count, forks, subscribers, and a few more.

  • Click on the + icon next to the Data Sources and add a new API and set the URL to the following:

https://api.github.com/repos/{{Input1.text}}/{{home_select_repo.selectedOptionValue
  • This URL will fetch the repo details; we’ll name it as get_organization_repo_details
  • Similarly, add one more API data source and name it as get_repo_events with the following URL:
https://api.github.com/repos/{{Input1.text}}/{{home_select_repo.selectedOptionValue}}/events
  • For both of these data sources, we send the repo name from the Select widget, which is named as home_select_repo, and the selectedOptionValue property will help access the selected option from it. You need to create a UI for displaying all the core repositories based on the selected option. For this, drag and drop a few text widgets onto the canvas, and set the Value property to the following:
TextWidget1 Value: {{get_organization_repo_details.data.network_count}}
TextWidget2 Value: {{get_organization_repo_details.data.forks_count}}
TextWidget3 Value: {{Get_organization_repo_details.data.subscribers_count || "-"}}
TextWidget4 Value: {{Get_organization_repo_details.data.open_issues_count }}
TextWidget5 Value: {{Get_organization_repo_details.data.watchers_count}}

Additionally, you can add more text widgets and a container widget to organize this more beautifully.

Here’s how Favour did it:

Screenshot 2021-08-10 at 11.11.47 PM.png

Displaying Repository Events

In this section, you can display a table widget to show all the events for a repository. In this way, you can monitor who is creating pull requests, pushing new changes, etc.

Follow the steps below to do this:

  • Drag and drop a new table widget onto the canvas.
  • Open the property pane of the table widget, and set the following in the Table Data property.
{{
        get_repo_events.data.map(event => ({
            "Date": moment(event.created_at).format("LLL"),
            "Type": event.type.match(/[A-Z][a-z]+/g).join(" "),
            "Actor": event.actor.login,
            "Avatar": event.actor.avatar_url,
            "View": event.actor.url
        }))
   }}

With this code snippet, you can display all the data from the get_repo_events API and bind it on the table widget. Following is how the output looks like:

Screenshot 2021-08-10 at 11.13.25 PM.png

Displaying Statistics

Last, you can add a couple of charts that will help you visualize the number of repository forks and the number of watchers for the repository by following the below steps:

  • Drag and drop a chart widget onto the canvas.
  • Set the title to Number of Repository Forks
  • Choose the Pie Chart under the Chart Type property.
  • Now create a new series and set the title as Repository Forks and add the following under `Series Data
{{
Get_organization_repos.data.map(repo=>({
  "x": repo.name,
  "y": repo.watchers
}))
}}
  • Similarly, add more chart widgets, set the chart type to Bar Chart, and set the Series Data to the following:
{{
Get_organization_repos.data.map(repo=>({
  "x": repo.name,
  "y": repo.watchers
}))

Following is a screenshot:

Screenshot 2021-08-10 at 11.14.50 PM.png

Now, wasn’t that easy to do with Appsmith?

Have you made something using Appsmith? Write to me (vishnupriya@appsmith.com), and I would love to feature you on our blog!

If you’re interested in building an app on Appsmith, sign up today. We have docs, and tutorials and live help, and a vibrant discord community to help you along the way. So go ahead, put your ideas out there!

Do you want to join Appsmith? We’ve got a bunch of openings; take a look here and apply!

Don’t forget to join our community and sign up for live events.

Appsmith Project Now Has 1000 GitHub Stars
12
November
2020
Announcement

Appsmith Project Now Has 1000 GitHub Stars

Appsmith Project Now Has 1000 GitHub Stars
Arpit Mohan
0
 minutes ↗
#
open-source
#
github
Announcement

I announced the Appsmith project on Dev.to for the first time on Aug 21st. While stars don't reflect the quality of a project, seeing 1K stars on our GitHub project makes me happy. 😺

Check out the project at: https://github.com/appsmithorg/appsmith

A few reviews from developers:

Alt Text
Screenshot 2020-11-12 at 5.47.17 PM.png
Alt Text
Screenshot 2020-11-12 at 5.50.06 PM.png

In the past two months, we've seen thousands of users from 65 countries who've used Appsmith for building all sorts of internal apps and admin panels. We've also seen over 40 contributors who've reported issues and code.

We built Appsmith because there is no open-source platform that helps you build custom and beautiful internal tools or admin panels. Today Appsmith ships with 17 UI components, 7 database integrations, and a REST API connector. There's a lot more coming soon.

When should you use Appsmith?

An Appsmith user said this: "This tool is perfect when you need an admin panel that needs to query multiple data sources in the same UI, update values from one with the other, and even use values retrieved from both to query external APIs."

Try Appsmith at appsmith.com