Linking Firebase to my Creator ionic app

Linking Firebase to my Creator ionic app New and Old ways.

Old one(TodoList) created .run to create db in todos.js but new way(ChatApp) creates automatically in firebase.init.js

  1. At Firebase console create new project. Choose Realtime(Not Cloud) by setting “unlocked” ie “setting true” then create button.
  2. Database -> Rules ->Set both “read” and  “write”, “true”. -> Publish button
  3. Home -> </> add  Firebase to Web app -> config information window opens
    Config Information on Firebase window

    Already firebase.init.js is created automatically.

  4. Goto ionic and Addons button -> and fill in 4 fields of data with data from step3 config window (eg. apiKey:…..)

    “Firebase’s AngularFire has been added to your project.

    Documentation for using AngularFire can be found on the AngularFire github page.

    Here’s what we did for you:

    • Added the Firebase and AngularFire scripts to “External JS” settings
    • Added the “firebase” module to “Angular Modules” settings
    • Created a “firebase.init.js” file in “Other JS” where you can find your settings and an example.” message was on the Firebase window.
  5. Firebase.init.js shows up on the code listing index
  6. Code Settings -> both angularfire and firebase on the list.
  7. https://docs.usecreator.com/docs/building-a-simple-chat-app from 2:12 to 3:55.

https://github.com/firebase/angularfire/blob/master/docs/quickstart.md

ITS381B: jQuery, JavaScript, etc. Photo into DB

jQuery Learning Center

jQuery Tutorial W3C

jQuery API Documentation 

jQuery Selector Test

Online resources

codeacademy

Campus Travel vid

JaveScript Fundamentals MDN

JavaScript online resources

AngularJS vs jQuery vid

Firebase by Goole.com

creator.ionic.io tutorial videos

How to make a simple chat app using Firebase

Using APIs with $http part1 vid

api vid

ionicframework.com

ionicframework videos

 

 

How to backup your photos on iPhone.

Why ionic?

ITM381B Linking DB items between Client-Server

https://secrdir.com/campus/ionic/ionic_2_free.php

Looking at the https://secrdir.com/campus/ionic/files.php?show=add_agent.php php code and https://secrdir.com/campus/ionic/ionic_2_pro.php JavaScript code side-by-side.

In add_agent.php has

$_REQUEST is where the parameter was passed from JavaScript/AngularJS? add_agent code at the bottom. 
$_REQUEST in PHP is HTTP Request Variables. An associative array that by default contains the contents of $_GET, $_POST, and $_COOKIE.
$_REQUEST is one of the 'superglobal' variables of PHP.
<?php /* This is add_agent.php */
	header('Access-Control-Allow-Origin: *');

	include('_global.php');

	$datetime = date('Y-m-d H:i:s');

	$AgentName=$_REQUEST['AgentName'];

	$OfficeKey=$_REQUEST['OfficeKey'];

	$AgentName_as=addslashes($AgentName);

	$AgentID = 0;

	$OfficeLocation = '';

	$inserted = 0;

	$message='';

	if( strlen($AgentName) > 5 && $OfficeKey > 0 )
	{
		$sql = "SELECT AgentName, OfficeKey FROM AGENT WHERE AgentName='$AgentName_as' AND OfficeKey='$OfficeKey'";

		$sqlTable = mysql_query($sql, $conn) or die("Couldn't perform query $sql (".__LINE__."): " . mysql_error() . '.');

		if($sqlRecord = mysql_fetch_assoc($sqlTable))
		{
			$message = "already added";
		}
		else
		{
			$sql="INSERT INTO AGENT (AgentName,OfficeKey) VALUES ('$AgentName_as',$OfficeKey)";
			$sqlExecute = mysql_query($sql, $conn) or die("Couldn't perform query $sql (".__LINE__."): " . mysql_error() . '.');
			$message = "added";
			$inserted = 1;
		}

		$sql = "SELECT * FROM AGENT INNER JOIN OFFICE ON OfficeKey=OfficeID WHERE AgentName='$AgentName_as' AND OfficeKey='$OfficeKey'";

		$sqlTable = mysql_query($sql, $conn) or die("Couldn't perform query $sql (".__LINE__."): " . mysql_error() . '.');

		if($sqlRecord = mysql_fetch_assoc($sqlTable))
		{
			$message = $sqlRecord['AgentName'] . " $message at " . $sqlRecord['OfficeLocation'] . " location.";
			$AgentID = $sqlRecord['AgentID'];
			$OfficeLocation = $sqlRecord['OfficeLocation'];
		}
	}
	else
	{
		$message = "AgentName or OfficeKey wasn't specified correctly.";
	}

	$json = json_encode([		"datetime" => $datetime,
								"inserted" => $inserted,
								"message" => $message,
								"AgentID" => $AgentID,
								"AgentName" => $AgentName,
								"OfficeKey" => $OfficeKey,
								"OfficeLocation" => $OfficeLocation
						], JSON_PRETTY_PRINT);

	echo $json;

?>
  • Add Agent
    Replace line: function ($scope, $stateParams) {
    with 25 lines of code:

    function ($scope, $stateParams, GetOffices, AddAgent) {
    
      $scope.offices = [];    
    
      $scope.data = {};
    
      $scope.addAgent = function(){
        var agent = $scope.data.agent;
        var office = $scope.data.office;
        $scope.hideButton=true;
    
        AddAgent.getPost(agent, office) 
        .then(function(response) {
          $scope.post = response;
         });
      };
    
      GetOffices.getPost()
      .then(function(response) {
        $scope.post = response;
        $scope.offices =  $scope.post.records;
    	$scope.offices.unshift({ "OfficeID": 0, "OfficeLocation": "--- Select Office Location ---" });
    	$scope.data.office=0;
      });
    

Adding API Services JavaScript

services.js the first line should be:
angular.module('app.services', []) then the rest follows. 

.service('AddAgent', function($http) {
  return {
    getPost: function(agent,office) {
      var query = '?AgentName='+agent;
      query += '&OfficeKey='+office;
      return $http.get('https://secrdir.com/campus/ionic/add_agent.php'+query)
      .then(function (response) {
        return response.data;
      });
    }
  };
})

Video Viewing Problem

Use of freeconferencecall.com hangs on iMac 10.13.6/Chrome Version 68.0.3440.106 (Official Build) (64-bit). Also on Firefox. The network connection is through Ethernet cable and Wifi.

The video I tried to view was:

https://www.freeconferencecall.com/wall/recorded_audio?audioRecordingUrl=https%3A%2F%2Frs0000.freeconferencecall.com%2Fstorage%2FsgetFCC2%2FaGDlP%2FRmLir&subscriptionId=9365089

After starting for less than 30 seconds, I got the screen below – requesting a reload: 

Then, after a couple of reloading I got the following screen:

Looks like iMac does not like it or the network is not set up for it. It is a 2-hour class video.

I checked the system requirement, and it was not too demanding:

.

(When I was doing, there are only three or four students in the interface lab  and only one in animation side.)

I used to view at my home with my Macbook Pro with Wifi connection, I did not get any reload message. The problem was that the screen was too small to view the instructor’s coding on the screen.