Namepy step 5 – Flask-Restless

(This is part of the namepy project. Start at Namepy – on the shoulders of giants)

We will need Angular to use an Ajax call to request the data from Flask, using a REST-style request, and show it in Highcharts.

The two main Flask libraries for creating a REST API are Flask-Restful and Flask-Restless. We will be using Flask-Restless, because it is particularly suited for what we’re trying to do: “Flask-Restless provides simple generation of ReSTful APIs for database models defined using SQLAlchemy (or Flask-SQLAlchemy)” – from the Flask-Restless documentation.

Create and test the REST API

1. Install flask-restless

   (virtualenv) pip install flask-restless

2. import at at the start of __init__py:

   import flask.ext.restless

3. Create the API endpoint, add following to end of __init__.py:

   manager = flask.ext.restless.APIManager(app, flask_sqlalchemy_db=db)
   manager.create_api(models.Name, methods=['GET'])
   

4. Test this – python index.py; point your browser to 127.0.0.1/api/name, this should show a JSON structure with the names and frequencies

Use Angular to request and process the REST data from the back end system

5. Create a new function which takes a response object, extracts the json data, formats it, and passes it to Highcharts

   $scope.showChart = function(response_data) {
   
   chart_data = []
   angular.forEach(response_data.objects, function(name_object, key) {
   
   boys_count = []
   angular.forEach(name_object.frequencies, function(frequency, key) {
   boys_count.push(frequency.boys_count);
   });
   chart_data.push({ name: name_object.name, data: boys_count });
   });
   
   $('#container').highcharts({
   chart: {
   type: 'column'
   },
   title: {
   text: 'Name frequencies'
   },
   series: chart_data
   });
   };
   

   Note that this doesn’t quite make sense, for instance the year isn’t being shown in the chart. We’ll fix all of that later. For now the aim is to get the infrastructure set up – database, REST API, Angular, etc.

6. Use Angular’s $http.get() function to call the api, and pass the response object to the showChart function upon completion

   $http.get('api/name')
   .then(function(response) {
   $scope.showChart(response.data);
   });
   

7. Test: Make sure the Flask app is running and go to http://127.0.0.1:5000/. You should still see the name frequencies chart

Done

• Source code at https://github.com/CoachCoen/namepy/tree/step5
• Working version at http://cm-demo.com/namepy_step5/

Next

That completes the technical set up, for now. We’re ready to do some real coding, starting with getting the data into the database.

Continue to Step 6 – Load the data into the database