Ashutosh Chaudhary

Getting started with Serverless and AWS

Fri, 10 Aug 2018 04:53:38 +0000

Serverless setup with AWS

Setting up a completely automated serverless setup on AWS can be a very hefty task. It will require a lot of efforts, configuring various services, keeping a note of what to link where, IAM roles etc. This not only requires a lot of research but consumes a lot of time as well.

Serverless solves all the problem of configurations, linking and creating roles and permissions, letting you focus on business logic and getting things done in few keystrokes.

In this tutorial, I will be creating a sample “hello world” program in Lambda (NodeJS), using API Gateway which will output the results on browser. In the next tutorial, I will help setting up dynamodb so you can have a datastore. We can also use RDS.

Prerequisites

An AWS account
Any local machine (I use linux)

Setting up AWS

Setting up AWS is the easy part. You just have to goto console.aws.amazon.com and signup for an account. You have to link a credit card for verification. Its free for an year so you won’t be charged and test out things for sake of this tutorial.

Once account setup is done, go to IAM section and create a new user, making the access type programmatic (NOTE: it is going to provide you with access key id and secret which will be used later on).

Next screen will take you to add permission to this user, where you can create a new group or choose from any existing one. Click Create Group to begin, which will bring a popup asking for name and roles. Since you are new, create a new group with any name of your choice. Select Administrator access as role for this user since it will be easiest route to go. Hit Create Group button.

Move on to next step Review where you can tally if user have the administrator access and programmatic authentication type. Finally, hit Create User which will suffice and complete the process.

You will be presented with the accesskey and secret which you should copy down somewhere safe. There is also a download option to download them in csv.

ETA: 5 mins

Setting up Serverless

We are going to need following AWS entities to get things rolling:

Lambda (for processing)
API Gateway (for API)
CloudWatch (for logging)
IAM roles (for permissions)

This will be enough to get a presentable state of our demo up and running in minutes. Lets get things going.

All serverless need is a config files which will determine how to configure things on AWS. To do so, First, it needs to know AWS account and region so it can use it to deploy applications.

1. Setting up local aws credentials

Manual Way

Create a directory .aws in your home directory (~/.aws on *nix, C:\Users\USER_NAME\.aws).
Create config file in .aws with following contents
```
[default]
output = json
region = us-west-2
```
Create credentials file in .aws with following contents
```
[default]
aws_access_key_id = <your-access-key-id>
aws_secret_access_key = <your-secret-access-key>
```
Read More: https://docs.aws.amazon.com/sdk-for-java/v1/developer-guide/setup-credentials.html

** Automated Way**

Download and set AWS CLI on your machine. Instructions here
run aws configure and answer the prompt questions.

Creating Serverless configuration file

Create a project directory and enter it
Create a file called serverless.yml
Enter following content:

service: serverless-helloworld
frameworkVersion: ">=1.1.0 <2.0.0"

provider:
  name: aws
  runtime: nodejs8.10
  environment:
    SERVICE_NAME: ${self:service}
    WORLD: 'world'
  
functions:
  helloworld:
    handler: hello/index.hello
    events:
      - http:
          path: hello
          method: get
          cors: true

Although, pretty much self explanatory, let me summarize this for you.

provider key tells serverless what aws providers are we going to use and which versions of them, such as lambda runner, dynamodb etc. This is kind of versioning aspect of the

This is a good place to set environment variables too. For instance, we are setting up SERVICE_NAME, WORLD as variables, which can be accessed inside our lambda node functions as process.env.SERVICE_NAME, process.env.WORLD.

Serverless supports event per function kinda configuration. Hence, we write the lambda handlers and the events on which it is going to respond. Various types of events are supported such as API Gateway, S3, SQS, CloudWatch etc. Since we are going to process as soon as we get an API request, we will be using API gateway event.

We can respond to same kind of process in response to various kind of events. For ex- You may want to write logs if file is uploaded to s3, but also when certain API request is being made, same lambda handler can be used to handle both the events. For now, we will only respond to API event(HTTP).

Hence, the basic configuration may look like:

...

functions:
  <custom-name>:
    handler: <file-location-without-js-suffix>.<method-name>
    events:
      - <event-name>:
          <event-configurations>
      - <another-event-name>:
          <event-configurations>

Serverless configures events

- http:
    path: hello
    method: get
    cors: true

This tells the event type will be http and values provides the configurations, such as for which path the event should be triggered etc. You got this gist.

ETA: 10-15 mins

Writing actual code

Lets again look at the configuration, specifically this part:

  helloworld:
    handler: hello/index.hello
    events:
      - http:
          path: hello
          method: get
          cors: true

This can be translated to:

Create a file in the hello directory (relative to config file), called index.js which will have the function hello to handle the request and will provide the response.

Lets write some code.

NOTE: Since we are using node 8.9.0 (check config again), we can use ES6 features.

// index.js

module.exports = (event, context, callback) => {
  // Getting query string parameters. It looks something like {a: 'b', c: 1}
  const params = event.queryStringParameters ? event.queryStringParameters : {}
  const body = 'Hello ' + process.env.WORLD
  const responseType = {success: 200, client_error: 400, server_error: 500};

  // Success response
  callback(null, {
    statusCode: responseType.success,
    body: JSON.stringify({body, params})
  });

  // Or Error response like
  /*
  //let error = new TypeError('some error')
  callback(error, {
    statusCode: responseType.client_error,
    body: JSON.stringify({ error: 'Any error message' }),
  });
  */
}

Thats it. You are nearly ready to deploy all this. Just execute the following command and hit Enter key to deploy.

$ serverless deploy

# or

$ sls deploy

Before making ourselves much happier and comfortable, lets first see what are we getting as input in our lambda handler and what and how are we outputting.

Starting with the first line:

module.exports = (event, context, callback) => {
  // shorthand for:
  // module.exports = function (event, context, callback) {
  // ...

We get three parameters to lambda handler (for nodejs):

event: Provides event sources and variables attached to any of AWS Event Sources
context: This provides lambda context so that you can extract out any piece of information related to this function such as configurations, runtime operations etc. Read more
callback: An optional parameter, which will be called after event loop becomes empty. In layman terms, this is the place which will be called “finally” and this is where your response should be.

Lets dive straightaway into the code now.

Getting query parameters of an Gateway request is quite easy. You can get them using event.queryStringParameters. event also provides other necessary info related to requests such as headers. Here is how a sample event object looks like:

{
  "path": "/test/hello",
  "headers": {
    "Accept": "application/json;q=0.9,image/webp,*/*;q=0.8",
    "Accept-Encoding": "gzip, deflate, lzma, sdch, br",
    "Accept-Language": "en-US,en;q=0.8",
    ...
  },
  "pathParameters": {
    "proxy": "hello"
  },
  "requestContext": {
    "accountId": "123456789012",
    "resourceId": "us4z18",
    "stage": "dev",
    "requestId": "41b45ea3-70b5-11e6-b7bd-69b5aaebc7d9",
    "identity": {
      ...
      "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36 OPR/39.0.2256.48",
      "user": ""
    },
    "resourcePath": "/{proxy+}",
    "httpMethod": "GET",
    "apiId": "xxxx"
  },
  "resource": "/{proxy+}",
  "httpMethod": "GET",
  "queryStringParameters": {
    "a": "b"
  }
  ...
}

Setting response body is also quite easy. You just have to pass it as second parameter of callback function. This is because the First parameter is reserved for Error and should be null if you want to indicate a success response.

I think its very straighforward. Moving on…

Deploying services

Like I’ve said, deployment is easy. Just execute serverless deploy or sls deploy command and serverless will create the necessary cloudformation stack, upload the package to s3 and cloudformation will take care of creating the necessary architecture. You can sit and relax and have a coffee instead.

It hardly took 1 hour to get things up and running and having a response, which might’ve took you more if you’re planning to go manual way.

Hope you’ve liked my efforts. Will keep posting new articles and more on architectures and orchestration. Comment below if you need any help.

Implement Xmpp Chat Client Android Part 2

Tue, 21 Jun 2016 00:00:00 +0000

Implement series post in Jekyll

Wed, 15 Jun 2016 00:00:00 +0000

This is a series of posts explaining how to implement a post series in plain simple style, within your favorutie static site generator - Jekyll.

This post also shows how I already used the system that I am about to explain, to show the post you are reading, as a part of series.

This post acts as index file for series of posts, i.e. it will list all sub-posts of the series and you can reach any part of it, anytime. A link to this post will also show up in the individual sub-posts, so you can get back here easily. Also, your blog index can list this post as a single entity, rather than listing all sub-posts.

Below you will find releavent posts explaining the implementation.

Implement series post in Jekyll - Part 2

Wed, 15 Jun 2016 00:00:00 +0000

In the last post of this series, I explained how you can make a series of post and connect it to a singular post, maintaing series index. We also learnt how I made a bare layout which listed all posts within series.

This post will explain how to list only series index post on blog index page.

Open the page where you are showing your blog index. For me, its index.html. It will probably contain a paginator loop, something like this:

... rest of index.html

<ul>
{% for post in paginator.posts %}
	<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>

Since we need to show posts which are either not a part of any series, or the series index posts, we have to filter out the sub-posts. Quite simple. We just need to check if a post in the loop is series sub-post or not. Still unsure? Check out code below-

... rest of index.html

<ul>
{% for post in paginator.posts %}
	{% if post.series == nil %}
	<li><a href="{{ post.url }}">{{ post.title }}</a></li>
	{% endif %}
{% endfor %}
</ul>

Done.

Implement series post in Jekyll - Part 1

Wed, 15 Jun 2016 00:00:00 +0000

This is first post in the series explaining how I implemented post series without any ruby-gem or anything, just simple liquid syntaxes.

The purpose has been stated earlier. I am only going to talk about the implementation now on. Lets get started.

Since we need a single index page for series post, lets make one. Create a file and fill releavent front matter. Since we need a way to recognize if this is the series page that holds all the sub-posts within, we need to add a variable. I found series-slug more intimidating, since it is more human readable and makes sense to sub-posts. Thus, the front matter may now look like:

---
title: 'Some series title'
layout: post
categories: [a,b]
series_slug: some-series
---

Fill in the content for the post. You have created an index page. Lets create sub-posts (parts of series) that series will contain. Lets make two posts to start with. I am calling it post A and post B. Create another two files for these and fill in releavent YAML front matter. Now, to link the post to the series post, I am declaring a variable within these posts which will connect them. So, I declared the variable series in front matter and fill in the series slug I declared earlier. Thus, the front matter for these posts will look like:

---
title: 'Part of series post - Part 1'
layout: post
categories: [a]
series: some-series
---

Good enough. Not so much!! We did declared a series and posts linking to it. However, we still need to show above posts in the series index. Since series has the layout: post, edit post.html in your _layouts directory. Enter the following line just below YAML front matter in post.html :

---
layout: default
---
{% include post-series.html %}

If you are familier with jekyll, you must know that include tag includes a file with the name following it, from _includes directory. In the above code, I just told jekyll to look for a file post-series.html in _includes directory, and include the code within it to current file. Thus would help me keep my code modular, in a separate place. This will enable me to write the code for post series thing in a single file called post-series.html and I can just call releavent variables whereever I like to.

For the series index page, we would like to show up all the sub-posts it contains. Quite easy. We will use a for loop to go threw each posts and check if it has a series variable in their front matter and if that matches our current series index’s series_slug. Open up post-series.html and write the code below:

{% comment %} We need an array to hold sub posts of the series. Below line is kind of hack to make one {% endcomment %}
{% assign seriesarray = '|' | split : '|' %}

{% for post in site.posts  %}

	{% comment %} Is this(loop) a sub-post and does it match the series index slug? {% endcomment %}
	{% if post.series and page.series_slug != nil and post.series == page.series_slug %}

        {% capture postitem %}    <li> <a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a> </li> {% endcapture %}
        {% assign seriesarray = seriesarray | push: postitem %}

    {% endif %}
{% endfor %}

{% comment %} At this point, seriesarray will hold all the sub-posts for this series. Just iterate threw them to like below. {% endcomment %}
{% if seriesarray.size > 0 %} <ul> {% endif %}
{% for post in seriesarray %} {{ post }} {% endfor %}
{% if seriesarray.size > 0 %} <ul> {% endif %}

We can use seriesarray in post.html to show the posts. I’d to show the list after the post content. Thus used the above for loop after {{ content }} in post.html.

If this works out for you, you can check part 2 of the post where I’ve explained how to list only series index post (instead of sub-posts individually) on the blog index page.

WordPress: HTML encoded image alternate text

Sat, 07 May 2016 07:20:59 +0000

One problem with wordpress is that it doesn’t allow HTML encoded strings in image alternate text. Even if you provide your image alternate text as a HTML string, wordpress will covert it down to plaintext, removing any HTML attributes and the image will then have only plaintext of your alternate text.

i.e even if you write your image alternate section such as this

Hey, I am <i> italic text </i>

this would output in frontend as

Hey, I am italic text

This is not cool. Sometimes, you rely on some plugins which reads image alternate text and display below the images in pretty cool style.

Options

One option which came to my mind is to leave alternate text blank and provide the image caption in HTML format. For ex, check below image:

Wordpres has this feature where if you leave the alternate text blank, it would fill the caption text in alternate text. I thought it would work since I can provide HTML in captions. But again, the same problem. Captions were turned back into plaintext.

Thus, for the above image, the output was something like this:

<img src="http://yourwebsite.com/path/to/image/image.jpg" alt="Hello, this is sample caption. This text is in bold" />

The solution

Luckily, WordPress provides image hooks which you can use to modify image attributes on the fly. The one which I want to use is wp_get_attachment_image_attributes

We can use this hook to see what image attribute we want to change, read its value, format it in HTML and return back our new value.

Hence, open up your theme’s functions.php and create a new function where you want to attach this hook. I am calling the function custom_filter_gallery_img_atts.

<?php
//Filename: functions.php
function custom_filter_gallery_img_atts( $atts, $attachment ) {
$atts["alt"] = get_post($attachment->ID)->post_excerpt; //This returns image caption (which is in HTML format)
return $atts;
}
  
add_filter( "wp_get_attachment_image_attributes", "custom_filter_gallery_img_atts", 10, 2 );
?>

What we did above is attaching wp_get_attachment_image_attributes to our custom defined function custom_filter_gallery_img_atts inside which we read the image caption and stored the value in image alternate text.

Hope you enjoyed the article. If you have any doubts, please comment below. See you soon.

Implement XMPP chat client in Android

Sun, 01 May 2016 08:39:37 +0000

Since it would take more than one post to share how to implement XMPP client in android, I made a series post which would explain in better way, the structure of XMPP client. I have tried to keep the code modular such that any part can be reused in any other application. The actual code for whole application can be found at https://github.com/ashutosh2k12/XmppDemo

Implement XMPP chat client in Android – Part 1

Sun, 01 May 2016 08:39:37 +0000

Part 1 - XMPP Basics

In the last post of this series, I talked about setting up XMPP based chat server, using ejabberd. In this post, I will be talking about how to implement XMPP chat client in android and let two users talk to each other. After reading this post series, you’ll be able to

Implement chat system such as whatsapp in your own android app
Allow yourself to chat with online users (roasters)
Making the chat as service so that chat messages still come through even while app is in background

Since it would be too long to explain everything within a single post, I am going to explain part by part code structure and basics of XMPP here.

XMPP Client

XMPP Clients is a software or application which allows you to connect to XMPP servers for instant messaging with other people. Simple enough!! If you are a frequent internet user, you must’ve used one to many XMPP clients such as pidgin, gtalk, Yahoo! IM etc. which allows you to send Instant Message to other users you are connected to. What we will do this in post is to make one such client in android.

What You will need

An android IDE for app development. While I prefer Android Studio, Eclipse also does the job.
Decent Working internet.

Starting the Project

Lets begin!!

Creating the project:

Create a blank project in android studio. Once you get to editor screen, add following dependencies to your app specific build.gradle:

compile 'org.igniterealtime.smack:smack-android-extensions:4.1.0'
compile 'org.igniterealtime.smack:smack-tcp:4.1.0'
compile 'com.google.code.gson:gson:2.6.2'

The first two lines are mandatory for getting smack to work on android. The third line (about gson) allows you to convert raw messages in GSON format. Since we will be sending messages in GSON format, I added it to my needs. Check out build.gradle of my app to get an idea.

Basics

Before diving straight into the code, lets understand few things about XMPP and in what manner are we going to implement them.

What is XMPP?

XMPP is basically a set of protocols (or rules) to allow communication based on XML. Thus, whenever you send a message, or your presence (available, unavailable etc.) to some other user (or server), it goes out in XML format, like this:

<presence>
  <show>dnd</show>
</presence>

But we don’t have to go threw this right now. You just need to know that whenever you are seeing someone online, or sending a message, the client communicates with each other in this mannar. Read more about these here

Jabber ID

Jabber Id or simply JID is a unique ID (just like your username on facebook) which helps you recognize in XMPP environments. Jabber ID is usually in the format username@domain. Sometimes, you may see your JID in form of username@domain/resource .Resource is nothing but a string representing your chat environment.

username@domain sometimes is reffered to as Bare JID while username@domain/resource as Full JID.

Roasters

Just like you have facebook friends, that only they can check out your shared items, XMPP too does have this security thing of its own kind. Whenever you gets connected to a XMPP server, few things about you travels along to server. So, for example, whenever you login to your GTalk, or pidgin, you instantly gets this “green” button to show you are online. You also see your last status that you’ve put up. you see your friendlist and online friends from them.

The information associated with you, as soon as you login to any XMPP client, includes mainly:

Your presence information (wether you are available or not)
Your status
Whom you are subscribed to (and who subscribed to you)

These informations are kept on server in database. XMPP have certain security features that decides who is going to see those informations. For ex, if you are subscribed to User A, and user A is also subscribed to you, then you both can see each other’s presences. However, if only user A has subscribed to you, only you can see his presence.

Roasters are people (or group of people) who are subscribed to you (or you are subscribed to them). They are like your friends on facebook, with limited access depending upon the subscription status between you both.

To put it simply, the online users that you see in your gtalk are roasters. Any user whom you have added as contact on XMPP clients are roasters.

Subscriptions

Subscriptions is one way of saying sending friend requests. Just like, when you send someone a friend request on facebook, you subscribe to someone on XMPP. You subscribe to someone by sending them a subscription presence packet to their JID. While I will begin with code, I will show you how to send a subscription packets and receive one. Thus, subscription state exists between two users.

For sake of simplicity, you just need to know that in order to make someone friends on XMPP, or allowing someone to make you a friend, you need subscription.

Subscriptions have 4 modes: subscribe_none, subscribe_to, subscribe_from, subscribe_both.

subscribe_none - When you are not subscribed in any way to a given user.
subscribe_to - When only you are subscribed to a given user (one way).
subscribe_from - When you are not subscribed in any way to a given user.
subscribe_both - When you are not subscribed in any way to a given user.

Creating XMPP chat server

Sat, 30 Apr 2016 10:02:06 +0000

In this part of series, I am going to show you how to create an XMPP chat server.

To build your own XMPP based chat solution in android, you need to have two important things:

XMPP based chat server
XMPP integration in your android code

XMPP chat server or XMPP server is the one that handles chat database, configurations, user, options etc. Basically, it is a chat server that handles your chat backend. What remains is to implement the chat in your own language and have fun.

There are many variations of XMPP chat servers available today. You can use any of them depending on your requirements and available configurations. What I would recommend are openfire and ejabberd.

Personally, I am going to use ejabberd to setup XMPP chat server. Let’s get into action. First, you will need a web server.For now, I am using DigitalOcean VPS with Ubuntu Server 14.04 LTS installed, to host the server. Don’t worry if you do not have a VPS right now. You can still test it with your own localhost machine.

Installing Ejabberd

Run following command in your terminal to update current package list.

sudo apt-get update

To install ejabberd, just enter the below command and you are done. So easy.

sudo apt-get -y install ejabberd

This will install ejabberd and will also create a configuration file which you can edit to have your own jabberd configuration. The ejabberd configuration file can be found at /etc/ejabberd/ejabberd.cfg. Lets edit it. Back on your terminal screen, enter this command to edit the file:

sudo nano /etc/ejabberd/ejabberd.cfg

This will bring up nano editor, where you can use up and down keys on your keyboard to edit the file. For Ubuntu desktops or other graphical environments, you can use gedit. Hence, use this command instead sudo gedit /etc/ejabberd/ejabberd.cfg

In the editor screen, You’ll see a lot of text there and lot of options. Don’t panic. You only have edit 3-4 options overall. I will be doing them below, so pay attention.

The ejabberd.cfg file will look something like this:

Use your cursor to move below and find the line which has this text:

%% Admin user
{acl, admin, {user, "admin", "localhost"}}.

%% Hostname
{hosts, ["localhost"]}.

Lets decode what’s written line by line so that you can get confortable enough to do this on your own next time.

Admin user defines what user (user must be registered with ejabberd) holds the administrative privilages of ejabberd server. {acl, admin, {user, "admin", "localhost"}}. This line tells that user with username admin@localhost is admin of ejabberd configuration. We can add multiple users here to make them admin. Let’s add one. So, press enter key and add similar line with different username.

{acl, admin, {user, "myusername", "localhost"}}.

The file will now look like:

%% Admin user
{acl, admin, {user, "admin", "localhost"}}.
{acl, admin, {user, "myusername", "localhost"}}.

%% Hostname
{hosts, ["localhost"]}.

You might be wondering the user “myusername” isn’t yet registered with ejabberd, how come we defined here. We will registered him shortly after we are done with editing configuration file.

Hostname defines the server at which ejabberd should listen and connect. If you are not using a local machine (i.e you are using VPS such as DigitalOcean) to host the XMPP chat server, you can mention the domain name or IP address here. I am assuming example.com as my VPS domain name, hence I will modify this line as:

{hosts, ["localhost","example.com"]}.

Thats all the changes you have to make for now. Wasn’t that simple? Once you have made the above changes, the cfg file will now look like:

%% Options which are set by Debconf and managed by ucf

%% Admin user
{acl, admin, {user, "admin", "localhost"}}.
{acl, admin, {user, "myusername", "localhost"}}

%% Hostname 
{hosts, ["localhost","example.com"]}. 

Now exit the nano editor by pressing CTRL + X. This will prompt you if you want to overwrite the previous cfg file, press Y, then press Enter again to confirm. This will bring you back to terminal screen.

We have mentioned that “myusername” is another user holding administrative rights to ejabberd, but we still haven’t registered him yet. Lets register him as well. Enter following command to register:

ejabberdctl register myusername localhost password

Replace “password” with whatever password you want to use to login. Once you are done with this, You have to re-start your ejabberd server by issuing this command:

sudo service ejabberd restart

Congradulations, We have successfully setup our ejabberd chat server. Lets visit the administrative control panel and see what we got there. Fire up your public domain name in your favorite browser on port 5280 to login to ejabberd server: http://example.com:5280 .This will bring up webpage asking you for username and password. Login with username: myusername@localhost, password: whatever you mentioned earlier.

NOTE- The localhost in above username myusername@localhost represents domain name of user. If you are not sure, edit ejabberd.cfg and check for user. The line, for “myusername” looks like {acl, admin, {user, "myusername", "localhost"}}, the last part is domain name.

EDIT- For users running on local machines, you can simple use http://localhost:5280. To find your locally accessible ip address, run following command (ipconfig for windows user):

ifconfig

and look for address in the form 192.168.0.xxx.

Once done, following screen will show up:

You have now successfully installed ejabberd on your machine and can be used to connect to any XMPP based chat client. In the next post, you’ll learn how to implement XMPP chat client in android code. Have fun!!

Thanks for going threw entire long post. Please like and share if you like the article. Ask anything in comments below.

Troubleshooting:

Sometimes, ejabberd might not open up in your browser and will give Connection timed out error. It usually happens if firewall is blocking ports on which ejabberd relies for communication stuffs. Usually those ports are 5222, 5269, 5280. You can try opening those ports like I did below:

Enter following commands in terminal:

iptables -A INPUT -p tcp --dport 5222 -j ACCEPT
iptables -A INPUT -p tcp --dport 5269 -j ACCEPT
iptables -A INPUT -p tcp --dport 5280 -j ACCEPT

Open up /etc/hosts file. sudo nano /etc/hosts and add your domain name into it (assuming your public ip address is 123.123.10.210) :
```
123.123.10.210 example.com
```
Allow ubuntu firewall

sudo ufw allow 5222
sudo ufw allow 5269
sudo ufw allow 5280

This will open the ports and allow public connections, which should fix the issue.

Get video links from Coursera

Wed, 27 Jan 2016 05:50:23 +0000

I have gone threw coursera classes now and then. What I felt is need for a coursera video downloader. I searched but couldn’t found any good working one.

Hence here is a small script I developed which would give you all video links from coursera. Here is what you’ll have to do:

Goto your class. For ex- Mine was https://www.coursera.org/course/startup
Enroll and go to video lectures from left tab. Here is the screenshot
in chrome, press f12 to bring up chrome inspector. You can also right click anywhere on webpage and click inspect element. Go to console tab.
Paste the following script into the console:

    (function($){
      $("ul.course-item-list-section-list > li").each(function(){
        var link = $(this).find("a[data-link-type=\"lecture:download.mp4\"]").attr('href');
        console.log(link)
      });
    })(jQuery);

Press enter and hopefully, it will parse every video link in the page.

Hope you’ve liked the article and it helped you. Please do comment if I owe any explanations. Share, it might be helpful to others.