Labels

ionic (40) Google Apps Script (28) Construct2 (6) Google API (5) Google Cloud (5) Java (5) presentation (5) jasper (4) plunker (4) Notepad++ (2) liferay (2) ms access (2) mysql (2) PHP (1) SQLite (1) android (1) blogspot (1) html5 (1) ionic-creator (1) javascript (1) mobile (1) plainjs (1) utilties (1)

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Tuesday, January 10, 2017

111 Ionic with Google Form and Google Sheet


.
111 Ionic with Google Form and Google Sheet

This tutorial demonstrates how to post responses to Google Form and view them back via Google Sheet API.

1) Start with startup codes.

Fork: http://codepen.io/notarazi/pen/BpgKvz 
Rename as 111 Ionic with Google Form and Google Sheet 1

1) Create Google Form

Assume that we are collecting Name, Email and Message.
Browse http://drive.google.com and create a new Google Form.
URL: https://docs.google.com/forms/d/e/1FAIpQLSdneWWfhgPch7eOuFKRgk7YFz-GpD2eOiamJfe7_EY-6hmfvg/viewform
Use Web Browser Developer Console to get the field ids
Name = entry.1596847310
Email = entry.1635092957
Message = entry.1714158145
URL: https://docs.google.com/forms/d/e/1FAIpQLSdneWWfhgPch7eOuFKRgk7YFz-GpD2eOiamJfe7_EY-6hmfvg/formResponse 

2) Create New Google Sheet to store responses.

URL:
https://docs.google.com/spreadsheets/d/1uk5u_6QijDN095NELFGkMe6NIdKJFWh_1wqStS9J668/edit

3) Test the Google Form URL and field id using Chrome Postman Extension.

Postman should received a positive response.
Google Sheet should display the submitted response.

4) Add Codes To Post Data

HTML
<html>
<head>
    <meta charset="utf-8">
    <title>Diary</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- Internal Library
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <!-- Cloud Library -->
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
</head>
<body ng-app="app">
    <div>
        <div>
            <ion-nav-bar class="bar-stable">
                <ion-nav-back-button></ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-view></ion-nav-view>
        </div>
    </div>
    <script id="home.html" type="text/ng-template">
        <ion-view title="Home" id="page1">
            <ion-content padding="false" scroll="false" class="has-header">
                <ion-scroll class="top-container" delegate-handle="messagelist">
                    <ion-list>
                        <ion-item ng-repeat="entry in entries">
                            <h2>{{entry.name}}</h2>
                            <p>{{entry.email}}</p>
                        </ion-item>
                    </ion-list>
                </ion-scroll>
                <form class="bottom-form" ng-submit="postMessage()">
                    <br/>
                    <label class="item item-input">
        <span class="input-label">Name</span>
        <input type="text" placeholder=""
        ng-model="data.name">
      </label>
                    <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="text" placeholder=""
        ng-model="data.email">
      </label>
                    <label class="item item-input">
        <span class="input-label">Message</span>
        <input type="text" placeholder=""
        ng-model="data.message">
      </label>
                    <button class="button button-positive  button-full">Submit</button>
                </form>
            </ion-content>
        </ion-view>
    </script>
</body>
</html>
CSS (no changes)
.top-container{
    height: calc(100% - 220px);
   overflow:scroll;
}
.bottom-form{
    position:absolute;
    bottom:0px;
    display:block;
    width:100%;
    background-color:lightgrey;
    button{
        margin:0px !important;
    }
}
/*
the following css codes overcome
the double scroll bar issues
*/
::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
}
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope', '$ionicScrollDelegate','$http',
function ($scope,$ionicScrollDelegate,$http) {
  $scope.entries=[];
  $scope.data={};
  $scope.addMessage=function(){
    $scope.entries.push($scope.data);
    $scope.data={};
    $ionicScrollDelegate.$getByHandle('messagelist').scrollBottom();
    console.log($scope.entries);
  }
  $scope.postMessage = function (){    
    var jsonData={
      "entry.1596847310":$scope.data.name,
      "entry.1635092957":$scope.data.email,
      "entry.1714158145":$scope.data.message
    };
    console.log(jsonData);
  var strData = Object.keys(jsonData).map(function(key){
  return encodeURIComponent(key) + '=' + encodeURIComponent(jsonData[key]);
}).join('&');


   $http({
      method: 'POST',
      url: 'https://docs.google.com/forms/d/e/1FAIpQLSdneWWfhgPch7eOuFKRgk7YFz-GpD2eOiamJfe7_EY-6hmfvg/formResponse',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
      data:strData
   })
   .then(function mySucces(response) {
        console.log("success:" + response);
    }, function myError(response) {
        console.log("error:" + response);
    });
}  
}])
   
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
      .state('home', {
    url: '/page1',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })
$urlRouterProvider.otherwise('/page1')
});
CODEPEN: http://codepen.io/notarazi/pen/zNVbZy 

5) Add codes to get response data

FORK: http://codepen.io/notarazi/pen/zNVbZy  and rename as 111 Ionic with Google Form and Google Sheet 2
Publish your Google Sheet.
Find your feed link from the following URL.
https://spreadsheets.google.com/feeds/worksheets/1uk5u_6QijDN095NELFGkMe6NIdKJFWh_1wqStS9J668/public/basic
Look for the link containing the string feeds/list.
E.g:
https://spreadsheets.google.com/feeds/list/1uk5u_6QijDN095NELFGkMe6NIdKJFWh_1wqStS9J668/our66d4/public/basic
Change basic to values.
Append ?alt=json to the end of the URL String so that you get JSON format.
https://spreadsheets.google.com/feeds/list/1uk5u_6QijDN095NELFGkMe6NIdKJFWh_1wqStS9J668/our66d4/public/values?alt=json 
HTML
<html>
<head>
    <meta charset="utf-8">
    <title>Diary</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- Internal Library
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    -->
    <!-- Cloud Library -->
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <!-- Needed for Cordova/PhoneGap (will be a 404 during development) -->
    <script src="cordova.js"></script>
</head>
<body ng-app="app">
    <div>
        <div>
            <ion-nav-bar class="bar-stable">
                <ion-nav-back-button></ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-view></ion-nav-view>
        </div>
    </div>
    <script id="home.html" type="text/ng-template">
        <ion-view title="Home" id="page1">
            <ion-content padding="false" scroll="false" class="has-header">
                <ion-scroll class="top-container" delegate-handle="messagelist">
                  <ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doRefresh()">
  </ion-refresher>
                    <ion-list>
                        <ion-item ng-repeat="entry in entries">
                            <h2>{{entry.gsx$yourname.$t}}</h2>
                            <p>{{entry.gsx$youremail.$t}}</p>
                            <p>{{entry.gsx$yourmessage.$t}}</p>
                        </ion-item>
                    </ion-list>
                </ion-scroll>
                <form class="bottom-form" ng-submit="postMessage()">
                    <br/>
                    <label class="item item-input">
        <span class="input-label">Name</span>
        <input type="text" placeholder=""
        ng-model="data.name">
      </label>
                    <label class="item item-input">
        <span class="input-label">Email</span>
        <input type="text" placeholder=""
        ng-model="data.email">
      </label>
                    <label class="item item-input">
        <span class="input-label">Message</span>
        <input type="text" placeholder=""
        ng-model="data.message">
      </label>
                    <button class="button button-positive  button-full">Submit</button>
                </form>
            </ion-content>
        </ion-view>
    </script>
</body>
</html>
JS
angular.module('app', ['ionic'])
.controller('homeCtrl', ['$scope', '$ionicScrollDelegate','$http',
function ($scope,$ionicScrollDelegate,$http) {
  $scope.entries=[];
  $scope.data={};
  $scope.addMessage=function(){
    $scope.entries.push($scope.data);
    $scope.data={};
    $ionicScrollDelegate.$getByHandle('messagelist').scrollBottom();
    console.log($scope.entries);
  }
  $scope.postMessage = function (){    
    var jsonData={
      "entry.1596847310":$scope.data.name,
      "entry.1635092957":$scope.data.email,
      "entry.1714158145":$scope.data.message
    };
    console.log(jsonData);
  var strData = Object.keys(jsonData).map(function(key){
  return encodeURIComponent(key) + '=' + encodeURIComponent(jsonData[key]);
}).join('&');
   $http({
      method: 'POST',
      url: 'https://docs.google.com/forms/d/e/1FAIpQLSdneWWfhgPch7eOuFKRgk7YFz-GpD2eOiamJfe7_EY-6hmfvg/formResponse',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
      data:strData
   })
   .then(function mySucces(response) {
        console.log("success:" + response);
        $scope.doRefresh();    
    }, function myError(response) {
        console.log("error:" + response);
        $scope.doRefresh();  
    });
    $scope.data={};
}  
   
$scope.$on('$ionicView.enter', function(){
    $scope.doRefresh();
});    
    $scope.doRefresh = function() {
    var url='https://spreadsheets.google.com/feeds/list/1uk5u_6QijDN095NELFGkMe6NIdKJFWh_1wqStS9J668/our66d4/public/values?alt=json';
    $http.get(url)
      .then(function(resp) {
        console.log('Success', resp);    
        $scope.entries = resp.data.feed.entry;
        $ionicScrollDelegate.$getByHandle('messagelist')
         .scrollBottom();    
        console.log($scope.entries);
        }, function(err) {
        // err.status will contain the status code
        console.error('ERROR', err);
      })
     .finally(function() {
       // Stop the ion-refresher from spinning
       $scope.$broadcast('scroll.refreshComplete');
     });
  };
}])
   
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
      .state('home', {
    url: '/page1',
    templateUrl: 'home.html',
    controller: 'homeCtrl'
  })
$urlRouterProvider.otherwise('/page1')
});
CODEPEN:
http://codepen.io/notarazi/pen/rjEXQe 

DEMO:
.
See the Pen 111 Ionic with Google Form and Google Sheet 1 by notarazi (@notarazi) on CodePen.
Posted by at
Labels:

3 comments:

  1. UnknownMay 16, 2018 at 5:56 PM

    Hi, so is this still creating an app? As in the form is it still being created in the ionic software?

    ReplyDelete
  2. EnekoFebruary 9, 2019 at 3:41 AM

    Thank you very much Razi! Your post was really helpful!

    ReplyDelete
  3. Long LastingSeptember 13, 2022 at 10:21 AM

    Your post was really helpful!
    html form to google sheet

    ReplyDelete

Subscribe to: Post Comments (Atom)