![\"\"](\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2017\/11\/groceries.jpg\")
<\/p>\n<\/p>\n
In a previous post<\/a>, I put together a script for solving a linear optimisation problem using Google’s OR-tools<\/a>. This python script is callable from the command line and you kinda need to know what you are doing and how to organize the parameters.<\/p>\n So, in order to address this difficulty, I wanted to build a web front-end for this script, so that regular humans can interact with it.<\/p>\n We can generalize this problem as how to build a web interface for a python script<\/strong>.<\/p>\n First of all, we can split the concerns. What we need is a web page that serves as a user interface, and a web API connecting the webpage to the python backend.<\/p>\n Ideally, this API should be as light as possible. After all, the heavy lifting is going to be performed by the backend. Using Django would be easy but also overkill. I was looking for one of these microframeworks, you know, like Flask. And that’s how I got to Falcon<\/a>.<\/p>\n Falcon is like 10 times faster than Flask, it is as bare bones as you can get insomuch as you need to bring your own WSGI server<\/a>, like gunicorn<\/a> (but you can use Waitress<\/a>\u00a0in Windows, or uWSGI<\/a>).<\/p>\n <\/p>\n Get the code here<\/a><\/p>\n <\/p>\n My plan was to use JSON to exchange data between the API and the webpage. So I needed a JSON response builder. I could add this functionality to the previously created python script, but I prefer to have it in a separate file which basically calls the main method of the solver script and returns a JSON payload.<\/p>\n Source code<\/a><\/p>\n <\/p>\n The principle for creating an API in Falcon is very easy to understand: you define a class and then instantiate it and link it to a route. This ends up being very convenient and clear. You can define the routes and the methods as you please.<\/p>\n Source code<\/a><\/p>\n As you may see in the class, I added two methods. on_get is not doing much, the interesting one is on_post. On each post to the specified route, the scripts decodes de body, extracts a JSON object, looks for the property cfg (config) and sends that to the JSON response builder.<\/p>\n (Yes, this means that whenever you POST, you need to send a JSON object in the body with a “cfg” attribute that looks more or less like this:<\/p>\n If you are running the API in a different machine than the one serving the webpage, you may have trouble with the same origin policy. In order to address this, you can enable cross-origin resource sharing, CORS.<\/p>\n Add the following class to the code above<\/p>\n And call this class during the API instantiation:<\/p>\n Pluggable magic!<\/p>\n You may run this API in port 18000 (or the one you please) by calling gunicorn:<\/p>\n Check the gunicorn docs for more options<\/a><\/p>\n The Falcon documentation is here<\/a>.<\/p>\n <\/p>\n I use the wonderful Postman<\/a> for testing all the APIs that I make <\/p>\n The web interface can easily be an HTML+JS+CSS thingie. I tried to keep it simple creating a single page with 3 parts: a formulation, a data table and a fat green button to get the results.<\/p>\n From the functional perspective, the only thing you need to do is to perform POSTs to the \/gunicorn\/igsapi endpoint defined in the API script, and then process the response.<\/p>\n Here you can see the javascript file that does everything<\/a>.<\/p>\n I keep a variable (igs.payload) constantly updated with the JSON payload I’m going to send. And then I just POST whenever I please:<\/p>\n The result is sent to a very dirty fillAnswerTable function which builds and re-builds the HTML code for the solution table.<\/p>\n For the UI look and feel I used Semantic UI<\/a>, my current favorite Bootstrap alternative.<\/p>\n![\"\"](\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2017\/11\/gunicorn1.jpg\")
<\/p>\n![\"\"](\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2017\/11\/gunicorn2.jpg\")
<\/p>\nTL;DR<\/h2>\n
1 Installing the dependencies<\/h2>\n
\r\npip install falcon cython gunicorn\r\n<\/pre>\n
2 Creating a JSON output for the script<\/h2>\n
\r\nimport json\r\nimport interview_grocery_startup as igs\r\n\r\n\r\ndef get_json_response(cfg, what):\r\n results = igs.main(cfg, what)\r\n\r\n solver = results['solver']\r\n\r\n\r\n if results['result_status'] == solver.OPTIMAL:\r\n response = {'result_status': 'optimal answer'}\r\n\r\n variable_list = results['variable_list']\r\n\r\n print solver.wall_time()\r\n print solver.Objective().Value()\r\n\r\n response['wall_time'] = solver.wall_time()\r\n response['objective_value']= solver.Objective().Value()\r\n\r\n response['variables'] = dict()\r\n\r\n response['variables_sum']=0\r\n for variable in variable_list:\r\n response['variables'][variable.name()]= variable.solution_value()\r\n response['variables_sum']+=variable.solution_value()\r\n\r\n elif results['result_status'] == solver.INFEASIBLE:\r\n response = {'result_status': 'infeasible'}\r\n elif results['result_status'] == solver.POSSIBLE_OVERFLOW:\r\n response = {'result_status': 'overflow'}\r\n\r\n json_response = json.dumps(response, sort_keys=True)\r\n\r\n return json_response\r\n\r\ndef main(cfg, what):\r\n json_response = get_json_response(cfg, what)\r\n print(json_response)\r\n return json_response\r\n<\/pre>\n3 Coding the API<\/h2>\n
\r\nimport falcon\r\nimport json\r\nimport interview_grocery_startup_json as igsj \r\n\r\nclass InterviewGroceryStartupResource(object):\r\n def on_get(self, req, resp):\r\n #Handles GET requests\r\n \r\n resp.status = falcon.HTTP_200 # This is the default status\r\n\r\n resp.body = igsj.main(cfg,cfg['what'])\r\n\r\n def on_post(self, req, resp):\r\n try:\r\n body = req.stream.read()\r\n body_json = json.loads(body.decode('utf-8'))\r\n cfg = body_json["cfg"]\r\n except KeyError:\r\n raise falcon.HTTPBadRequest(\r\n 'Missing Config',\r\n 'A config (cfg) must be submitted in the request body.')\r\n\r\n resp.status = falcon.HTTP_200\r\n resp.body = igsj.main(cfg,cfg['what'])\r\n\r\n# falcon.API instances are callable WSGI apps\r\napp = application = falcon.API()\r\n\r\n# Resources are represented by long-lived class instances\r\nigsapi = InterviewGroceryStartupResource()\r\n\r\n# ApiTestResource will handle all requests to the '\/apitest' URL path\r\napp.add_route('\/igsapi', igsapi)\r\n<\/pre>\n\r\n{\r\n "cfg": {"what": "cost",\r\n "maxWeight": 10,\r\n "maxCost": 100,\r\n "minCals": 14000,\r\n "minShop": 0.25,\r\n "total_cost": 0,\r\n "food": [["ham",650, 4],\r\n ["lettuce",70,1.5],\r\n ["cheese",1670,5],\r\n ["tuna",830,20],\r\n ["bread",1300,1.20]]\r\n }\r\n}\r\n<\/pre>\n\r\nALLOWED_ORIGINS = ['http:\/\/localhost';]\r\n\r\nclass CorsMiddleware(object):\r\n def process_request(self, request, response):\r\n origin = request.get_header('Origin')\r\n if origin is not None and origin in ALLOWED_ORIGINS:\r\n response.set_header('Access-Control-Allow-Origin', origin)\r\n response.set_header('Access-Control-Allow-Origin', '*')\r\n<\/pre>\n\r\napp = application = falcon.API(middleware=[CorsMiddleware()])\r\n<\/pre>\n
gunicorn interview_grocery_startup_api -b :18000 --reload<\/pre>\n
4 Testing the API<\/h2>\n
\n![\"\"](\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2017\/11\/postman.jpg\")
<\/a><\/p>\n5 Coding the interface<\/h2>\n
\r\n jQuery.ajax({\r\n type: "POST",\r\n url: "\/gunicorn\/igsapi",\r\n dataType: "json",\r\n data: JSON.stringify(igs.payload),\r\n\r\n error:function (xhr, ajaxOptions, thrownError){\r\n console.log(thrownError);\r\n },\r\n\r\n success:function(data, textStatus, jqXHR){\r\n console.log(data);\r\n igs.fillAnswerTable(data);\r\n }\r\n })\r\n<\/pre>\n
![\"\"](\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2017\/11\/groceryshopping.gif\")
<\/p>\n