Programming Steps: Ionic V1 Project My Club

This tutorial creates Firebase Cloud Function to automatically create a User Profile record for a new user,

1) Run terminal command to init project and edit function codes

#if you havent installed firebase CLI to your PC
  sudo npm install -g firebase-tools
  
  #create a specific directory for your project
  mkdir myclub
  cd myclub
  
  #login into your firebase account
  firebase login
  
  #update latest npm by re-running command
  npm install -g firebase-tools
  
  #initialize project
  firebase init
  
  #select your project
  #select setup options: 
  # [] Database
  # [x] Functions (for this tutorial, select this option)
  # [] Hosting
  
  #select language option:
  # [x] JavaScript (for this tutorial, select this option)
  # [] TypeScript  
 
 #firebase will create necessary files and folders
 # edit the file at functions/index.js

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.createProfile = functions.auth.user()
  .onCreate( (userRecord, context) => {
  return admin.database().ref(`/userProfiles/${userRecord.uid}`).set({
    email: userRecord.email,
    user:true,
    admin:false,
    executive:false,
    customer:false,
    name:'',
    phone:'',
    address:'',
    postcode:'',
    town:'',
    state:''
  });
});  
  
  #save the file
  #run terminal command
  firebase deploy --only functions

#To delete/undeploy a single function, 
#you can delete the code for your function 
#and then run the following in command line:
firebase deploy --only functions:YourFunctionName

#also read https://firebase.google.com/docs/cli/

2) edit front-end codes

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/js/ionic.bundle.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.3.0/angular-sanitize.js"></script>
  <script src="//www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="//cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>
  <script>
    angular.module('firebaseConfig', ['firebase'])
      .run(function() {
        // Initialize Firebase
        var config = {
          apiKey: "AIzaSyAn7kAVy-cCf-CQ7vaZ0JVZZ4LE8gF29c8",
          authDomain: "notaraziproject.firebaseapp.com",
          databaseURL: "https://notaraziproject.firebaseio.com",
          projectId: "notaraziproject",
          storageBucket: "notaraziproject.appspot.com",
          messagingSenderId: "731471194718"
        };
        firebase.initializeApp(config);
      })
  </script>
  
  
  
  <link href="//cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.css" rel="stylesheet">
  <style type="text/css">
    .platform-ios .manual-ios-statusbar-padding {
      padding-top: 20px;
    }

.manual-remove-top-padding {
      padding-top: 0px;
    }

.manual-remove-top-padding .scroll {
      padding-top: 0px !important;
    }

ion-list.manual-list-fullwidth div.list,
    .list.card.manual-card-fullwidth {
      margin-left: -10px;
      margin-right: -10px;
    }

ion-list.manual-list-fullwidth div.list>.item,
    .list.card.manual-card-fullwidth>.item {
      border-radius: 0px;
      border-left: 0px;
      border-right: 0px;
    }

.show-list-numbers-and-dots ul {
      list-style-type: disc;
      padding-left: 40px;
    }

.show-list-numbers-and-dots ol {
      list-style-type: decimal;
      padding-left: 40px;
    }
  </style>
  <style>
    .full-page {
      height: -webkit-calc(100% - 50px);
      height: -moz-calc(100% - 50px);
      height: calc(100% - 50px);
      overflow: scroll;
    }

.has-header {
      top: 44px;
    }

.round-image {
      border-radius: 50%;
      margin: 10px;
      border: 4px solid $SIDEMENU_TRANSPARENCY;
      -webkit-box-shadow: 0px 0px 142px -37px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 0px 0px 142px -37px rgba(0, 0, 0, 0.75);
      box-shadow: 0px 0px 142px -37px rgba(0, 0, 0, 0.75);
    }
  </style>
  <!--
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/routes.js"></script>

</head>

<ion-view title="MY CLUB" id="page1">
      <ion-content padding="false" scroll="false" class="has-header" style="background-color:#205c96;">

<div ng-show=user.isSignedOut>
          <center><img width="100%" ng-src="{{imgUser}}" />
            <h1>MY PROFILE</h1>
          </center>

</div>

<ion-scroll class="full-page" ng-show="user.isSignedIn">
          <div class="list card">
            <div class="item" style="    text-align: center;">
              <img class="round-image" style="width:35%;" ng-src={{imgUser}}>
            </div>
            <div class="item">
              <h2>Name</h2>
            </div>
            <div class="item">
              <p>Email</p>
            </div>
            <div class="item">
              <p>Phone No</p>
            </div>
            <div class="item">
              <p>Address</p>
            </div>
            <div class="item">
              <p>Post Code</p>
            </div>
            <div class="item">
              <p>Town</p>
            </div>
            <div class="item">
              <p>State</p>
            </div>
            <a class="button button-calm button-full" ng-click="selectBaseModule('editperson')">EDIT PROFILE</a>
          </div>
    <i class="icon ion-social-google" ng-show="verified"></i>
    
        </ion-scroll>

<div class="button-bar bar-assertive" style="position:absolute;bottom:0px" name="bottomPanel">
          <a ng-repeat="item in baseModule.buttons" class="button icon {{item.icon}}" ng-click="selectBaseModule(item.cmd)" ng-show="{{item.show}}"></a>
        </div>
        
        
      </ion-content>
    </ion-view>
  </script>

scope.openModal = function() {
      scope.modal.show();
   };
 
   scope.closeModal = function() {
      scope.modal.hide();
   };
 
   //Cleanup the modal when we're done with it!
   scope.$on('$destroy', function() {
      scope.modal.remove();
   });
 
   // Execute action on hide modal
   scope.$on('modal.hidden', function() {
      // Execute action
   });
 
   // Execute action on remove modal
   scope.$on('modal.removed', function() {
      // Execute action
   });
            
            
            
            
            switch (option) {
              case "signin":
                UserService.prepSignIn(scope);
                break;
              case "signup":
                UserService.prepSignUp(scope);
                break;
              case "signout":
                UserService.prepSignOut(scope);
                break;
              case "editperson":
                //alert("editing ...")
                scope.openModal()
                break;                
            }
          }
        })
      .service("UserService",
        function(
          $timeout,
          $q,
          $firebaseAuth,
          MsgFactory,
          $ionicPopup,
          $ionicLoading,
          $localStorage,
          UserFactory
        ) {
          var that = this; /*use that var to avoid internal conflict*/
          var hideIonicLoadingIfItIsShowing = function() {
            $ionicLoading._getLoader().then(function(state) {
              if (state.isShown == true) {
                $ionicLoading.hide()
              }
            });
          }
          this.toggleStatus = function(scope) {
            var deferred = $q.defer();
            var timeoutPromise = $timeout(function() {
              console.log("Timed out");
              deferred.reject(scope);
            }, 250);
            var firstProp, secondProp;
            if (scope.user.uid && scope.user.uid != '') {
              firstProp = "isSignedOut";
              secondProp = "isSignedIn";
            } else {
              firstProp = "isSignedIn";
              secondProp = "isSignedOut";
            }
            scope.user[firstProp] = false;
            $timeout(function(data) {
              $timeout.cancel(timeoutPromise); //cancel the timeout
              scope.user[secondProp] = true;
              console.log('togglestatus')
              console.log(scope.user)
              deferred.resolve(scope);
            });
            return deferred.promise;
          }
          this.updateLocalUser = function(scope, objAuthUser) {
            //console.log(objAuthUser)
            //if(!angular.isDefined(objAuthUser)){
            //if(objAuthUser===null){
            //if(objAuthUser==undefined){
            if (!angular.isDefined(objAuthUser) || objAuthUser === null || objAuthUser === undefined) {
              scope.user.uid = '';
              scope.user.name = '';
              scope.user.email = '';
              that.toggleStatus(scope).then(function(thatscope) {
                console.log(thatscope)
                UserFactory.setLocalUser(thatscope.user)
              })
            } else {
              scope.user.uid = objAuthUser.uid;
              scope.user.name = objAuthUser.displayName;
              scope.user.email = objAuthUser.email
              that.toggleStatus(scope).then(function(thatscope) {
                UserFactory.setLocalUser(thatscope.user)
              })
            }
            scope.setUserBroadcast();
          }
          this.doSignUp = function(objUser) {
            firebase
              .auth()
              .setPersistence(firebase.auth.Auth.Persistence.LOCAL)
              .then(function() {
                var objAuthUser = $firebaseAuth()
                  .$createUserWithEmailAndPassword(objUser.email, objUser.password).catch(function(error) {
                    // Handle Errors here.
                    $ionicLoading.hide()
                    MsgFactory.showAlert(
                      "<span class='assertive'>" + error.code + "</span>",
                      error.message
                    ); /*showalert*/
                  }); /*createuserwithemailandpassword.catch*/
                console.log(objAuthUser)
              }) /*setpersistence.then*/
              .catch(function(error) {
                // Handle Errors here.
                $ionicLoading.hide()
                MsgFactory.showAlert(
                  "<span class='assertive'>" + error.code + "</span>",
                  error.message
                ); /*showalert*/
              }) /*setpersistence.then.catch*/
          }
          this.doSignIn = function(objUser) {
            firebase
              .auth()
              .setPersistence(firebase.auth.Auth.Persistence.LOCAL)
              .then(function() {
                var objAuthUser = $firebaseAuth()
                  .$signInWithEmailAndPassword(objUser.email, objUser.password).catch(function(error) {
                    // Handle Errors here.
                    $ionicLoading.hide()
                    MsgFactory.showAlert(
                      "<span class='assertive'>" + error.code + "</span>",
                      error.message
                    ); /*showalert*/
                  }); /*signInWithEmailAndPassword.catch*/
                console.log(objAuthUser)
              }) /*setpersistence.then*/
              .catch(function(error) {
                // Handle Errors here.
                $ionicLoading.hide()
                MsgFactory.showAlert(
                  "<span class='assertive'>" + error.code + "</span>",
                  error.message
                ); /*showalert*/
              }) /*setpersistence.then.catch*/
          }
          this.doSignOut = function(scope) {
            var confirmPopup = $ionicPopup.confirm({
              title: 'Sign Out',
              template: 'Are you sure?'
            });
            confirmPopup.then(function(res) {
              if (res) {
                console.log('Confirmed Sign Out');
                $firebaseAuth().$signOut()
              } else {
                console.log('Cancel sign Out');
              }
            });
          }
          this.prepSignUp = function(scope) {
            scope.popupData = {};
            var strPopup =
              '<form class="list" name="formSignUp"><input type="email" placeholder="Your Email" ng-model="popupData.email" ng-required="true" name="email"><div ng-hide="formSignUp.email.$valid" class="show-list-numbers-and-dots assertive">Enter valid email</div><br/><input type="password" placeholder="Your Password (min 6 chars)" ng-model="popupData.password" name="password" ng-required="true"><br/><input type="password" placeholder="Re-enter Password" ng-model="popupData.password1" name="password1" ng-required="true"><div ng-show="userNew.password!=userNew.password1" class="show-list-numbers-and-dots assertive"><p>Passwords must match one another</p></div><p name="formvalidity" style="display:none">{{formSignUp.$valid && (userNew.password==userNew.password1)}}</p></form>';
            var strPopupTitle =
              '<div style="text-align:center;"><i class="icon positive ion-planet" style="font-size:100pt;"></i></div>Sign Up';
            var strPopupSubTitle = "Enter Email and Password for Registration";
            return $ionicPopup.show({
              template: strPopup,
              title: strPopupTitle,
              subTitle: strPopupSubTitle,
              cssClass: "",
              scope: scope,
              buttons: [{
                  text: "Cancel",
                  type: "button-assertive"
                },
                {
                  text: "Sign Up",
                  type: "button-balanced",
                  onTap: function(e) {
                    var elem1 = document.querySelectorAll(
                      '[name="formvalidity"]'
                    )[0];
                    if (elem1.innerHTML === "true") {
                      $ionicLoading.show({
                        template: "Signing Up ...",
                        delay: 100
                      });
                      that.doSignUp(scope.popupData)
                      //scope.popupData={};
                    } else {
                      MsgFactory.showAlert(
                        "<span class='assertive'>Error</span>",
                        "Please complete the form"
                      );
                      e.preventDefault();
                    }
                  }
                }
              ]
            });
          }; /*prepSignUp*/
          this.prepSignIn = function(scope) {
            scope.popupData = {};
            var strPopup =
              '<form class="list" name="formSignIn"><input type="email" placeholder="Your Email" ng-model="popupData.email" ng-required="true" name="email"><div ng-hide="formSignIn.email.$valid" class="show-list-numbers-and-dots assertive">Enter valid email</div><br/><input type="password" placeholder="Your Password (min 6 chars)" ng-model="popupData.password" name="password" ng-required="true"><br/><p name="formvalidity" style="display:none">{{formSignIn.$valid}}</p></form>';
            var strPopupTitle =
              '<div style="text-align:center;"><i class="icon positive ion-planet" style="font-size:100pt;"></i></div>Sign In';
            var strPopupSubTitle = "Enter Email and Password";
            return $ionicPopup.show({
              template: strPopup,
              title: strPopupTitle,
              subTitle: strPopupSubTitle,
              cssClass: "",
              scope: scope,
              buttons: [{
                  text: "Cancel",
                  type: "button-assertive"
                },
                {
                  text: "Sign In",
                  type: "button-balanced",
                  onTap: function(e) {
                    var elem1 = document.querySelectorAll(
                      '[name="formvalidity"]'
                    )[0];
                    if (elem1.innerHTML === "true") {
                      $ionicLoading.show({
                        template: "Signing In ...",
                        delay: 100
                      });
                      that.doSignIn(scope.popupData)
                      scope.popupData = {};
                    } else {
                      MsgFactory.showAlert(
                        "<span class='assertive'>Error</span>",
                        "Please complete the form"
                      );
                      e.preventDefault();
                    }
                  }
                }
              ]
            });
          }; /*prepSignIn*/
          this.prepSignOut = function(scope) {
            that.doSignOut()
          }; /*prepSignOut*/
        }
      ) /*UserService*/
      .service('WebService', function($http) {
        function jsontostring(objData) {
          return Object.keys(objData).map(function(key) {
            return encodeURIComponent(key) + '=' +
              encodeURIComponent(objData[key]);
          }).join('&');
        }
        return {
          RqsGet: function(url, rqsparam) {
            //console.log(url + rqsparam)
            return $http.get(url + "?" + rqsparam).then(function(response) {
              if (response) {
                console.log(response)
                return response
              } else {
                return null
              }
              return response;
            }).catch(function(e) {
              return null
            });
          } /*RequestGet*/ ,
          RqsPost: function(url, rqsparam) {
            console.log(rqsparam);;
            return $http({
                method: 'POST',
                url: url,
                data: jsontostring(rqsparam), //forms user object
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                }
              })
              .then(function(response) {
                //console.log(response);
                return response;
                if (data.errors) { //data.errors
                } else { //data.message
                  return (data);
                }
              });
          } /*RequestPost*/
        }
      }); /*WebService*/
  </script>
</body>

</html>

201708, 20170812, ionic-v1, firebase

Programming Steps

Learn the powerful enterprise adaptable database:

Getting Started With ADABAS & Natural

Saturday, August 12, 2017

Ionic V1 Project My Club

No comments:

Post a Comment