{"id":19262024,"url":"https://github.com/hacksu/availability","last_synced_at":"2026-02-27T16:41:37.977Z","repository":{"id":149141238,"uuid":"51343760","full_name":"hacksu/Availability","owner":"hacksu","description":"This project demonstrates the use of Flask to produce a JSON API","archived":false,"fork":false,"pushed_at":"2016-02-09T17:43:28.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-23T18:46:13.257Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hacksu.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-09T03:07:24.000Z","updated_at":"2016-02-09T03:07:32.000Z","dependencies_parsed_at":"2023-04-29T21:00:42.998Z","dependency_job_id":null,"html_url":"https://github.com/hacksu/Availability","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hacksu/Availability","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FAvailability","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FAvailability/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FAvailability/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FAvailability/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hacksu","download_url":"https://codeload.github.com/hacksu/Availability/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hacksu%2FAvailability/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29905264,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T14:46:13.553Z","status":"ssl_error","status_checked_at":"2026-02-27T14:46:10.522Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T19:29:25.022Z","updated_at":"2026-02-27T16:41:37.948Z","avatar_url":"https://github.com/hacksu.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AvailabilityBackend\n\nThis project demonstrates the use of Flask to produce a JSON api.\n\n* GET /availability returns every user's availability\n* POST /availability allows the user to specify their availability\n\n## Instructions\n\n### Hello World\n\nLets make it say hi to us like every good program should.\n\n* First lets make sure Flask is installed type `pip install flask`\n* Now lets create a file. I'll call it AvailabilityBackend.py, but the file name really doesn't mater.\n* Open it up in your text editor of choice\n* We'll be importing the the Flask class from the flask package add `from flask import Flask`\n* We'll define our web server with `app = Flask(__name__)` the `__name__` is set by the interceptor to show the context the script is run in\n* We need to register a function to be run when Flask gets various requests\n* Here well by adding\n\n        @app.route(\"/\")\n        def hello_world():\n            return \"Hello World!\"\n        \n    this may look strange, but this is just what we call a decorator. In essence, it's a fancy way of saying `app.route(\"/\", hello_world)`\n    It's a lot easier to read though so people generally do it this way.\n\n* You notice we returned \"Hello World!\" that was what we wanted our route to return. It's that simple\n* We just have to run a local server. Add `app.run()`\n* Run your file with `python` your file name. In my case `python AvailabilityBackend.py`\n* It should give you the url it is listening on. Go to that url and you should see `Hello World!`\n* This works, but it isn't right. One we may need to load this file as a module, so we can use a more fully fledged web server\nthan the built in one. To do this we'll need to check if we're the main file when we're about to run the web server\n* Add `if __name__ == \"__main__\":` in front of the `app.run()`\n\n\n### Read the info in jQuery\n\nLet's change tacks and load the route we just created using jQuery.\n\n* Create a html file. I'll be calling it `index.html`\n* Add the minimal stuff to make it a valid page\n        \n        \u003chtml\u003e\n        \u003chead\u003e\n            \n        \u003c/head\u003e\n        \u003cbody\u003e\n        \n        \u003c/body\u003e\n        \u003c/html\u003e\n* Then we need to include jQuery. We'll make this bit interactive.\n    * Search for `jquery cdn`\n    * find the link to the library\n    * Include it by adding a `\u003cscript src=\"`your url`\"\u003e\u003c/script\u003e` where your url is the url we found earlier\n* Add a script tag again in the head\n* Let's make a GET request to fetch that page we created. We can do this a number of different ways but the easiest\nis just to do \n    \n        $.get(\"http://127.0.0.1:5000/\", \"\", function (data) {\n            alert(data)\n        })\n\n* Load that page... You should see nothing. \n    * If you open up the console you'll see `XMLHttpRequest cannot load http://127.0.0.1:5000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:6209' is therefore not allowed access.`\n    * This is a very common error. We'll getting it because we didn't tell chrome it was OK to let Javascript load our resource.\n* There's an easy solution. Install flask-cors with `pip install flask-cors`\n* Add `from flask.ext.cors import CORS` to import the library\n* Add `CORS(app)` to apply it\n* Reload and you should get an alert that says \"Hello World!\"\n\n## Serve JSON\n\n* Right now we'll just returning html which isn't the most useful thing for scripts, instead lets return JSON.\n* Add `, jsonify` after the Flask import\n* Now we can call jsonify to turn a python dictionary into a json responce for any of our routes\n* As an example replace \"Hello Wold!\" with jsonify({\"message\": \"Hello World!\"})\n* Now when we reload the website we get... `[object Object]` not exactly what we wanted. Lets print it out instead\n    * Replace `alart` with `console.log`\n    * We get `Object {message: \"Hello World!\"}` much more useful. It got parsed into a JavaScript object because jQuery is useful\n* We can print out just the message by doing `data.message` so `alert(data.message)`\n\n## Serve the right JSON\n\nLet's actually serve JSON which can be used to display the information we want\n\n* Lets add a new route \"availability\" like\n\n        @app.route(\"/availability\")\n        def get_availability():\n            return jsonify({})\n            \n* The format we want to use for the finished version will be very simple\n    * Just a dictionary of names and availabilities\n    * So for now lets return something like `{\"isaac\": \"free\", \"timothy\": \"kind of busy\"}\n* Change the index.html file to fetch  `http://127.0.0.1:5000/availability` then just print out the result.\n\n## Record status\n\nLet's actually record if people are available.\n\n* To do that we need another route, but this one will be special. All the others have just defaulted to be GET, this one needs to be PUT\n* So we specify the method like this: @app.route(\"/availability\", methods=[\"POST\"])\n* Then we need to add a method to go with it.\n* Import `request` from flask, this is a variable which holds details about the current request being made.\n* Now we are going to define a global dictionary to hold our data. THIS IS A BAD IDEA, but we'll hackers so lets do it. `availability = {}`\n* Inside our new function, make sure python knows we want to use it with  `global availability`\n* Now we just need to merge the data we just got with our existing data on availability. This does that perfectly `availability.update(request.get_json())`\n* We have to return something so let's return the current availability dictionary `return jsonify(availability)`\n* And let's do the same thing when we're getting availability\n\n## Show status\n\nLets display all this cool info we have to the user\n\n* So what we need to do is dynamically edit the web page. The good news is we can do just that.\n* First step is to add a div to mark the spot we'll be putting this info. Something like `\u003cdiv id=\"availabilities\"\u003e\u003c/div\u003e`\n* Make sure it give it an id so we can find it later\n* Now in when we get our data back from the backend, we need to make sure the website has been totally loaded so we can edit it\n* We pass a function to jQuery and it will take care of it like this:\n\n        $(function () {\n        });\n\n* The first thing we need to do is find that div we created. Like this `var availabilities = $(\"#availabilities\");`\n* Now we can just loop through every user and add a list item for them like so\n\n        for (var user in data) {\n            availabilities.append(\"\u003cli\u003e\" + user + \": \" + data[user] + \"\u003c/li\u003e\")\n        }\n* Reload the page and... you see nothing because we don't have any data yet. We can add some with postman, or you can just use my data\n\n## Set Status\n\nLets let users actually set if they are free or not\n\n* Add the menu, your options can be different, but my backend will strip any inputs but those listed\n\n        \u003cinput type=\"text\" id=\"name\"/\u003e\n        \n        \u003cselect id=\"availability\"\u003e\n          \u003coption value=\"Free\"\u003eFree\u003c/option\u003e\n          \u003coption value=\"Busy\"\u003eBusy\u003c/option\u003e\n          \u003coption value=\"Putting out a fire\"\u003ePutting out a fire\u003c/option\u003e\n          \u003coption value=\"Running really fast\"\u003eRunning really fast\u003c/option\u003e\n        \u003c/select\u003e\n        \u003cbutton onclick=\"submit_availability()\"\u003eSubmit\u003c/button\u003e\n* Add the function\n\n        function submit_availability() {\n            var name = $(\"#name\").val();\n            var availability = $(\"#availability\").val();\n            var data = {};\n            data[name] = availability;\n            jQuery.ajax({\n                type: \"POST\",\n                url: \"http://127.0.0.1:5000/availability\",\n                data: JSON.stringify(data),\n                success: function (data) {\n                    console.log(data);\n                },\n                contentType: \"application/json\"\n            });\n\n        }\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Favailability","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhacksu%2Favailability","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhacksu%2Favailability/lists"}