AngularJs App Using CoWin API

Posted onAuthoradminLeave a comment

AngularJs App Using CoWin API

This blog post demonstrate how to use Co-WIN Public APIs and AngularJs to build an app that helps to find Vaccination centers by PIN Code , by District on particular date.

Demo URL : http://renruhak.org/demos/angularjs_cowinapi/

Co-Win Public API URL : https://apisetu.gov.in/public/marketplace/api/cowin/cowin-public-v2

Co-Win Public APIs contains below APIS

  1. User Authentication APIs
  2. Metadata APIs
  3. Appointment Availability APIs
  4. Certificate APIs

this blog post demonstrate use of

1.Metadata APIs and 2.Appointment Availability APIs.

AngularJs Application directory structure is as below

  1. Root Directory / css / style.css
  2. Root directory/ js / myScript.js
  3. Root directory / index.html

AngularJs Features like ng-app , ng-controller , ng-repeat, filter , http api etc. used.

Code : Root directory/ js / myScript.js

const URL = "https://cdn-api.co-vin.in/api";
const URL_STATES = "/v2/admin/location/states";
const URL_DISTRICT = "/v2/admin/location/districts/";

const URL_FINDBYDISTRICT = "/v2/appointment/sessions/public/findByDistrict";
const URL_FINDBYPINCODE = "/v2/appointment/sessions/public/findByPin";

let URL_STATE_FINAL = URL + URL_STATES;
let URL_DISTRICT_FINAL = URL + URL_DISTRICT;
let URL_FINDBYDISTRICT_FINAL = URL + URL_FINDBYDISTRICT;
let URL_FINDBYPINCODE_FINAL = URL + URL_FINDBYPINCODE;

here prepared for the URLs

below url is the main url

const URL = “https://cdn-api.co-vin.in/api”;

in the next lines prepared for particular API urls.

for example to search state used

let URL_STATE_FINAL = URL + URL_STATES;

which will be

https://cdn-api.co-vin.in/api/v2/admin/location/states

//CREATE ANGULAR JS MODULE 
let app = angular.module("MyApp", []);

above code creates module named MyApp

app.controller("MyCtrl", ($scope, $http) => {

    //controller
    //PAGE TITLE
    $scope.title = "India Vaccination Details";

    //LIST STATES
    $http.get(URL_STATE_FINAL).then(
        (response) => {
            //console.log(response);
            $scope.all_states = response.data.states;
        },
        (error) => {
            console.log(error);
        });

    //LIST DISTRICTS FROM STATES     
    $scope.district_list = () => {
        URL_DISTRICT_FINAL_LIST = URL_DISTRICT_FINAL + $scope.selectedState.state_id
        $http.get(URL_DISTRICT_FINAL_LIST).then(
            (response) => {
                //console.log(response);
                $scope.all_districts = response.data.districts;
            },
            (error) => {
                console.log(error);
            }
        );
    }

    //FETCH VACCINATION CENTER DETAIL USING DISTRICT API
    $scope.district_vacc_details = () => {
        $scope.formatted_date = $scope.start_date;//$filter('date')($scope.start_date, "dd-MM-yyyy");
        URL_FINDBYDISTRICT_FINAL_LIST = URL_FINDBYDISTRICT_FINAL + "?district_id=" + $scope.selectedDistrict.district_id + "&date=" + $scope.formatted_date
        $http.get(URL_FINDBYDISTRICT_FINAL_LIST).then(
            (response) => {
                console.log(response);
                $scope.district_vacc_data = response.data.sessions;
            },
            (error) => {
                console.log(error);
            }
        );
    }

    //FETCH VACCINATION CENTER DETAIL USING PINCODE API
    $scope.pincode_vacc_details = () => {
        $scope.formatted_date = $scope.start_date;//$filter('date')($scope.start_date, "dd-MM-yyyy");
        URL_FINDBYPINCODE_FINAL_LIST = URL_FINDBYPINCODE_FINAL + "?pincode=" + $scope.pincode + "&date=" + $scope.formatted_date
        $http.get(URL_FINDBYPINCODE_FINAL_LIST).then(
            (response) => {
                console.log(response);
                $scope.district_vacc_data = response.data.sessions;
            },
            (error) => {
                console.log(error);
            }
        );

    }
});

in above code created controller named MyCtrl which contains the code to

  1. add states to selectbox
  2. add districts of particular state in selectbox
  3. fetch vaccination center details using District
  4. fetch vaccination center details using PINCODE

Code : Root directory/ index.html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"
        integrity="sha384-lpyLfhYuitXl2zRZ5Bn2fqnhNAKOAaM/0Kr9laMspuaMiZfGmfwRNFh8HlMy49eQ"
        crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <link rel="stylesheet" href="css/style.css" />

    <script src="js/myScript.js"></script>

above code is from head part of the html file. here added bootstrap , angularjs and js/myScripts.js

<body ng-app="MyApp" ng-controller="MyCtrl">
    <div class="container">
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-6 text-center">{{title}} </h1>
                <hr class="my-2">
                <p>Angular App To Search Vaccination Details</p>
            </div>
        </div>

        <div id="statelist">
            <table>
                <tr>
                    <td> Select State <select ng-model="selectedState"
                            ng-options="state.state_name for state in all_states" ng-Change="district_list()"></select>
                    </td>
                    <td>
                        Select District <select ng-model="selectedDistrict"
                            ng-options="district.district_name for district in all_districts"></select>
                    </td>
                    <td> Enter Date (dd-mm-yyy) <input type="text" value="08-05-2021" placeholder="dd-mm-yyyy"
                            ng-model="start_date" />
                    </td>
                    <td>
                        <button ng-click="district_vacc_details()">Search Details</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">OR</td>
                </tr>

                <tr>
                    <td>
                    </td>
                    <td>
                        Enter Pin Code <input type="text" placeholder="Pincode" ng-model="pincode" />
                    </td>
                    <td> Enter Date (dd-mm-yyy) <input type="text" value="08-05-2021" placeholder="dd-mm-yyyy"
                            ng-model="start_date" />
                    </td>
                    <td>
                        <button ng-click="pincode_vacc_details()">Search Details</button>
                    </td>
                </tr>
            </table>

            <div ng-if="district_vacc_data.length > 0" class="center">
                Result Found
            </div>
            <div ng-if="district_vacc_data.length <= 0" class="center">
                No Result Found
            </div>

            <div ng-if="district_vacc_data.length > 0" class="center">
                <span class="badge rounded-pill bg-info text-dark">Total Centers :
                    {{district_vacc_data.length}}</span>
            </div>

            <table class="table table-bordered">
                <tr style="background-color: #aaffcc;" ng-if="district_vacc_data.length > 0">
                    <td> Address </td>
                    <td> Available Capacity</td>
                    <td> Date</td>
                    <td> Fees Details</td>
                    <td> Timing</td>
                    <td> Age Limit</td>
                    <td> Slots</td>
                    <td> Type of Vaccine</td>
                </tr>

                <tr ng-repeat="center in district_vacc_data | orderBy: 'block_name'">
                    <td>
                        {{center.block_name}} <br />{{center.name}} <br /> {{center.address}}
                        <br />PinCode:{{center.pincode}}
                    </td>
                    <td> {{center.available_capacity}}</td>
                    <td> {{center.date}}</td>
                    <td> {{center.fee_type}} : {{center.fee}}</td>
                    <td> {{center.from}} : {{center.to}}</td>
                    <td> {{center.min_age_limit}}</td>
                    <td> {{center.slots}}</td>
                    <td> {{center.vaccine}}</td>
                </tr>
            </table>
        </div>
</div>

In above code in body tag added ng-app and ng-controller names to make it angularjs app

below portion of the code from index.html shows title of the page.

<div class="jumbotron jumbotron-fluid">
            <div class="container">
                <h1 class="display-6 text-center">{{title}} </h1>
                <hr class="my-2">
                <p>Angular App To Search Vaccination Details</p>
            </div>
        </div>

below portion display form to select state, district and date

<tr>
                    <td> Select State <select ng-model="selectedState"
                            ng-options="state.state_name for state in all_states" ng-Change="district_list()"></select>
                    </td>
                    <td>
                        Select District <select ng-model="selectedDistrict"
                            ng-options="district.district_name for district in all_districts"></select>
                    </td>
                    <td> Enter Date (dd-mm-yyy) <input type="text" value="08-05-2021" placeholder="dd-mm-yyyy"
                            ng-model="start_date" />
                    </td>
                    <td>
                        <button ng-click="district_vacc_details()">Search Details</button>
                    </td>
                </tr>

below code show or potion of the form and shows option to enter pincode and date

<tr>
                    <td>
                    </td>
                    <td>
                        Enter Pin Code <input type="text" placeholder="Pincode" ng-model="pincode" />
                    </td>
                    <td> Enter Date (dd-mm-yyy) <input type="text" value="08-05-2021" placeholder="dd-mm-yyyy"
                            ng-model="start_date" />
                    </td>
                    <td>
                        <button ng-click="pincode_vacc_details()">Search Details</button>
                    </td>
                </tr>

below code shows fetched result into tabular format

<table class="table table-bordered">
                <tr style="background-color: #aaffcc;" ng-if="district_vacc_data.length > 0">
                    <td> Address </td>
                    <td> Available Capacity</td>
                    <td> Date</td>
                    <td> Fees Details</td>
                    <td> Timing</td>
                    <td> Age Limit</td>
                    <td> Slots</td>
                    <td> Type of Vaccine</td>
                </tr>

                <tr ng-repeat="center in district_vacc_data | orderBy: 'block_name'">
                    <td>
                        {{center.block_name}} <br />{{center.name}} <br /> {{center.address}}
                        <br />PinCode:{{center.pincode}}
                    </td>
                    <td> {{center.available_capacity}}</td>
                    <td> {{center.date}}</td>
                    <td> {{center.fee_type}} : {{center.fee}}</td>
                    <td> {{center.from}} : {{center.to}}</td>
                    <td> {{center.min_age_limit}}</td>
                    <td> {{center.slots}}</td>
                    <td> {{center.vaccine}}</td>
                </tr>
            </table>

sample output of the code is as below

Angular App Using Cowin Api

You may Download Source Code AngularJs App Using CoWin API (135 downloads)

Thanks,

Hiren R. Patel

Leave a Reply