How to create and deliver an Open Badge ? The definitive quick and easy Open Badge tutorial.

Mozilla has a great documentation regarding Open Badges ecosystem and use, but also quite complex in regards to an Open Badge mvp. Below are working examples tied to this repo along with the expected steps tutorial.

Although if you prefer, you can follow the official step by step tutorial, as well as reading the official specification.

Requirements

What you need before anything :

one image representing your badge

You can use this tool to build one : Chicago Badge tudio

What you will build with this tutorial :

one "issuer" json file
one "badge class" json file
one "badge assertion" json file
one github repo used for hosting the badge files
one "baked badge" image file

Step1 : Defining the issuer

Basically you, or your organisation : the one that will deliver the badge.

{
    "name": "insert your name",
    "url": "insert your personal or company url"
}

Save the file as your-badge-issuer.json

Step2 : Defining the badge class

Basically, the definition for the badge that you want to award, including criterias, image and issuer.

{
    "name": "insert the badge class name",
    "description": "insert the description for your badge class",
    "image": "insert the url to the badge image file",
    "criteria": "insert the url to your badge criterias HTML page",
    "issuer": "insert the url to your badge issuer json file "
}

Save the file as your-badge-class.json

Step3 : Defining the badge assertion

This is the "real" badge that you will "physically" deliver. It should be unique for each awardee you grant it to. Exists in at least 2 forms : /to complete/

Note : Although it is specified the "image" option is optionnal, I couldn't validate any assertion without it.

{
  "uid": "insert a unique identifier",
  "recipient": {
    "identity": "insert the email of the awardee",
    "type": "email",
    "hashed": false
  },
  "issuedOn":  insert a timestamp,
  "badge": "insert the url to your badge class json file",
  "verify": {
    "type": "hosted",
    "url": "insert the url to the awardee badge award json file (this actual json file)"
  },
  "image":"insert the url to the badge image"
}

Save the file as your-badge-award.json

Step 4 : Uploading and validating

In order to validate the badge assertion schema, you need your ressources to be online. Easyer way to do so, is to actually :

fork this repo on your account
activate Github pages for the fork
modify the paths in your 3 .json badge files accordingly to your Github pages site
add them to the /json folder
add your badge infos in the badges criterias page
Push :)

Once your done, you can submit your assertion structure here for validation :

Open Badges Validator

Step 5 : Bake the badge you're about to deliver

This step will merge the assertion with your badge image, so you have a portable badge to deliver.

Open Badges Bakery

Step 6 : Add to backpack !

This is the last step, create an account and upload your baked badge to see it displayed.

Open Badges Backpack

Hope this tutorial helped, any contribution is more than welcome !

Also, if you want to add this tutorial badge to your backpack, open an issue with your mail or a pr, i'll gladly award you one !

JonRiv/openbadges-easy-tutorial