Category Archives: REST

Django Rest Framework API Microservice

I recently completed a small project for Zenstores. They simplify the shipping process for ecommerce sites. Their online service lets online businesses use multiple shipping companies for deliveries.

Each shipping companies offers a different own API, for booking shipments, etc. My client uses a separate microservice for each shipping company. These microservices listen to requests from the main system and translate them to the shipping company’s standard.

My client asked me to use Django Rest Framework to create a microservice which supports a new shipping company. DRF is a popular and powerful library to create RESTful APIs using Django.

The supplier provided me with a sandbox API and extensive documentation. The documentation was somewhat incomplete and out of date. Fortunately their support contact was very helpful all along.

I used Test Driven Design for complex functions where I understood the functionality well. For the rest I used a more experimental approach and added unit tests afterwards. Testing coverage was over 90%.

The client has integrated the microservice within their system and the first test shipments have gone through.

Namepy step 7 – Bringing it all together

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

Time to show some real results on a web page.

  1. Extend the API to show the letter scoring tables, no pagination, in __init__.py add:
    manager.create_api(models.Set, methods=['GET'], results_per_page=0) 
    
  2. Rename helloworld.html to index.html
  3. At the end of views.py, update the template name to index.html, and stop passing in ‘names’ since this is now done through the API, and rename the endpoint function to ‘index’:
    @app.route("/") 
    def index(): 
        return render_template('index.html') 
    

That’s it for the changes to the back end. The rest of the changes will all be in the front end, in index.html

  1. Rename the app from HelloWorldApp to NamePyApp
  2. Rename the controller from HelloWorldController to NamePyController
  3. Load the letter scoring table, and simplify it for faster lookup
    $scope.sets = [];
    angular.forEach(response.data.objects, function(set, index) {
        scores = {};
        angular.forEach(set.scores, function(score, index) {
            scores[score.letter] = score.score;
        });
        $scope.sets.push({ name: set.name, scores: scores});
    });
    
  4. Calculate the score for each of the sets
    angular.forEach($scope.sets, function(set, index) {
        var total = 0;
        var error = false;
        angular.forEach(name.split(''), function(character, index2) {
            if (character in set.scores) {
                total += set.scores[character];
            } else {
                error = true;
            }
        });
    
        if (error == false) {
            result.push([set.name, total]);
        }
    
        $scope.sort_on_element(result, 1);
    
        $scope.scores = result;
    });
    
  5. Show the result on the page, using Highcharts. For the code see the source code, function “showLetterScores”

Show baby name distribution

  1. Get data for entered name
    var filters = [{ name: 'name', 
        op: 'ilike', 
        val: $scope.visitor_name}];
    
    $http({
        method: 'GET',
        url: 'api/name',
        params: {"q": JSON.stringify({"filters": filters})}
        })
        .then(
            $scope.show_name_distribution,  
            function(response) {            
                $('#babynames_container').hide();
            }
        );
    
  2. Restructure the results for Highcharts
    var boy_frequency = [];
    var girl_frequency = [];
    var boys_found = false;
    var girls_found = false;
    
    angular.forEach(response.data.objects[0].frequencies, 
        function(frequency) {
            boy_frequency.push([
                Date.UTC(frequency.year, 1, 1), 
                frequency.boys_count]);
    
            girl_frequency.push([ 
                Date.UTC(frequency.year, 1, 1), 
                frequency.girls_count]);
    
            if (frequency.boys_count) boys_found = true;
            if (frequency.girls_count) girls_found = true;
        });
    
    $scope.sort_on_element(boy_frequency, 0);
    $scope.sort_on_element(girl_frequency, 0);
    
  3. Show the results using Highcharts. See the source code, function “show_name_distribution”

Done

Done Done

This is the final blog post for this little project. I hope you found it useful.

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

  1. 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.

  2. 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); 
                        	}); 
    
  3. 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

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