How to resolve OPCache configuration issue when install Moodle?

Software Required

- macOS High Sierra
- XAMPP-VM/PHP 7.3.0. Please refer to download
- Moodle version 3.6.1. Please refer to download

Problem

• During the Moodle installation on XAMPP, OPCache plugin checking message is displayed. Please refer to the screenshot below

Steps

• To check the location of php.ini, browse to http://localhost:8080/dashboard/phpinfo.php

• Obviously, php.ini is located at "/opt/lampp/etc/" directory
• Uncomment ";" at the line 1031 to enable opcache library

zend_extension=opcache.so

• Append the opcache configuration as shown below

[opcache]
opcache.enable = 1
opcache.memory_consumption = 128
opcache.max_accelerated_files = 10000
opcache.revalidate_freq = 60

; Required for Moodle
opcache.use_cwd = 1
opcache.validate_timestamps = 1
opcache.save_comments = 1
opcache.enable_file_override = 0

; If something does not work in Moodle
;opcache.revalidate_path = 1 ; May fix problems with include paths
;opcache.mmap_base = 0x20000000 ; (Windows only) fix OPcache crashes with event id 487

; Experimental for Moodle 2.6 and later
;opcache.fast_shutdown = 1
;opcache.enable_cli = 1 ; Speeds up CLI cron
;opcache.load_comments = 0 ; May lower memory use, might not be compatible with add-ons and other apps.

• Restart the XAMPP VM, the OPCache plugin checking message is not prompted anymore.

How to resolve vim editor not found on XAMPP VM?

Software Required

- macOS High Sierra
- XAMPP-VM/PHP 7.3.0. Please refer to download
- Moodle version 3.6.1. Please refer to download

Problem

• During the Moodle installation on XAMPP, vim editor is not available
• Try to install vim editor by executing the command below

apt-get install vim

• Error message as shown below is displayed

Reading package lists... Done
Building dependency tree       
Reading state information... Done
E: Unable to locate package vim

Steps

• Obviously, package index files are not up to date.
• Run the command below, it will work like a charm. vim editor command is installed and it is ready for used.

apt-get update
apt-get install apt-file
apt-file update
apt-get install vim

How to resolve "No Entry" sign at Mac startup page?

Software Required

- macOS High Sierra


Problem

• Update my Mac OS (High Sierra) recently, no symptom after the OS update
• Restart my Macbook recently, encounter Macbook unable to boot up issue
• "No Entry" sign always show after the Apple logo
• The system will reboot and it will keep repeating couple of times and remain shut down afterwards

Steps

• Make sure your Mac machine is shutting down. 
• Press "Command" + "R" key
• Press the "Power" button to start the Mac machine
• "Mac OS X Utilities" window will be displayed
• Select "Reinstall Mac OS X" option, click on "Continue" button
• Follow the steps in the wizard, you will get the your Mac machine start up to work like a charm.

Note: Reinstall Mac OS X will not cause data lost.

How to resolve "Unknown version of Tomcat was specified." error message when add Tomcat server to Spring Tool Suite IDE?

Software Required

- macOS High Sierra
- Spring Tool Suite Version: 3.9.6.RELEASE

Problem

• Error message "Unknown version of Tomcat was specified." is displayed when adding new Tomcat server to Spring Tool IDE

• Obviously, Tomcat installation directory cannot be found. The Tomcat server haven't install on the machine yet

Steps

• Run command below to install Tomcat on the machine

brew install tomcat

• Run command below to find the tomcat home directory

brew ls tomcat

• Add Tomcat home directory into "Tomcat Installation directory" field, for example "/usr/local/Cellar/tomcat/9.0.13/libexec"

• Click on "Finish" button, the new Tomcat server will be added into the Spring Tool IDE instance.

How to resolve "The certificates path does not contain ca.pem" issue when NetBean connect to Docker?

Software Required
- macOS High Sierra
- NetBean IDE 8.2

- docker version 18.06.1-ce

• Try to configure Docker connection from Netbean 8.2, encounter error message "The certificates path does not contain ca.pem" as shown in the screenshot below

Steps

• Run the command below to install socat

brew install socat

• Run the command below to start a bridge instance to listen to port 9090 and connect to Docker socket.

socat tcp-listen:9090,fork UNIX:///var/run/docker.sock

• Configure the URL to point to "http://localhost:9090" and leave the "Certificates Path" field empty.

• Click on "Finish" button. Voila, all the Docker images and containers will be displayed.

How to resolve Netbean unable to create new project issue?

Software Required

- macOS High Sierra
- NetBean IDE 8.2

Problem

• Click File-> New Project menu, no response and unable to create a new project.

Steps

• Browse to Oracle website to download JDK1.8 and install the JDK1.8
• Open the terminal window, browse to 
  "/Applications/NetBeans/NetBeans 8.2.app/Contents/Resources/NetBeans/etc", edit the netbeans.conf file to point to the jdk1.8 library that located at "/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home".

  
  netbeans_jdkhome="/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home"
  
  

•  Restart NetBean and repeat the same steps to create a new project. "New Project" window is popup.

How to start Moodle on docker?

Software Required

- docker-compose version 1.22.0
- macOS High Sierra
- docker version 18.06.1-ce

Steps

• Construct the docker-compose.xml as shown below

version: '2'

services:
  mariadb:
    image: 'bitnami/mariadb:latest'
    environment:
      - MARIADB_USER=bn_moodle
      - MARIADB_DATABASE=bitnami_moodle
      - ALLOW_EMPTY_PASSWORD=yes
    volumes:
      - 'mariadb_data:/bitnami'
  moodle:
    image: 'bitnami/moodle:latest'
    environment:
      - MARIADB_HOST=mariadb
      - MARIADB_PORT_NUMBER=3306
      - MOODLE_DATABASE_USER=bn_moodle
      - MOODLE_DATABASE_NAME=bitnami_moodle
      - ALLOW_EMPTY_PASSWORD=yes
    ports:
      - '80:80'
      - '443:443'
    volumes:
      - 'moodle_data:/bitnami'
    depends_on:
      - mariadb

volumes:
  mariadb_data:
    driver: local
  moodle_data:
    driver: local

• Run command below to pull the Moodle image 

docker-compose up -d

• Browse to http://localhost

• Login as user id: user and password: bitnami, Moodle console page is displayed

How to resolve minikube hang issue after the start?

Software Required

- MiniKube version 0.30.0
- macOS High Sierra

• Install MiniKube on my Mac machine, encounter a hang issue after I triggered the command below

minukube start

• The application always stop at "Starting cluster components" 

Starting local Kubernetes v1.10.0 cluster...

Starting VM...

Getting VM IP address...

Moving files into cluster...

Setting up certs...

Connecting to cluster...

Setting up kubeconfig...

Starting cluster components...

• In order to resolve this problem, run the command below to delete the machine, it will work like a charm

minikube delete && minikube start

How to setup Facebook ChatBot (2) ?

Note: Facebook has provided a very details step by step guide. This is for my own note taking and reference

Based on the previous tutorial, we know the steps and configuration that we need to perform to create Facebook Chatbot. However, it still lack of human intelligent to interact with human being.

In order to enable the Facebook chatbot to understand your question and respond intelligently, a backend system with machine learning and natural language processing (NLP) is required. We have selected DialogFlow as the platform which powered by Google, as the platform to allow us to explore the Chatbot and AI technology.

Prerequisite
- Register an account at DialogFlow

Create the DialogFlow Agent

- Click on the dropdown menu at the left menu, select create new agent menu. Fill in the information

- Fill in the information as listed below:

• Agent Name - A name to identified the agent
• Default Language - I used English
• Default time zone - Depends on your location

- Click on "Create" button, agent will be created.  A google project will be created as well.

- Select "Small Talk" at the menu, check enable checkbox. 

- Click on "Integrations" at the left menu to launch the "Integration" listing

- Click on "Facebook Messenger", enter the token from Facebook messenger into the "Verify Token" and "Page Access Token" fields. Copy the "Callback URL" and paste it into Facebook messenger.

- Login to Facebook developer console, click on "Webhooks" at the left menu, click on "Edit Subscription" button. Paste the url from "Dialog flow" and paste into "Callback URL" field.

- Now, the Facebook messenger able to answer the simple question. Please refer to the screenshot below.

How to setup Facebook ChatBot (1) ?

Setting Up Your Webhook

Prerequisite

Note: Facebook has provided a very details step by step guide. This is for my own note taking and reference

- Install Node.js https://nodejs.org/en/
- Install the curl download 
- Run the command below to setup the webhook:-

mkdir messenger-webhook         // Creates a project directory
cd messenger-webhook            // Navigates to the new directory
touch index.js                  // Creates empty index.js file.
npm init                        // Creates package.json. Accept default for all questions.
npm install express body-parser --save // Installs the express.js http server framework module and then adds them to the dependencies section of package.json file.  

- Below are the folder structure and files in messenger-webhook directory

index.js 
node_modules
package.json

- Download the source code from download and replace the source code to index.js
- Start the webhook on localhost

node index.js

- Command below to test the webhook

curl -X GET "localhost:1337/webhook?hub.verify_token=&hub.challenge=CHALLENGE_ACCEPTED&hub.mode=subscribe"

curl -H "Content-Type: application/json" -X POST "localhost:1337/webhook" -d '{"object": "page", "entry": [{"messaging": [{"message": "TEST_MESSAGE"}]}]}'

Create a New Facebook page

• Login into Facebook account
• Select "Create Page" option in the drop down menu
  
  

• Select "Community or Public Figure", click "Get Started" button
• Enter "Uncle Lubang" in the "Page Name".
• Select "Computers & Internet Website" in the "Category" field.
• Click on "Continue" button
• Click both "Skip" button twice to create the page.

Create Facebook App

• Browse to Facebook developers, click on "Register Now" button to register developer account.
• Follow the "Wizard" to register developer account and create app
• Create the app with the name as "Uncle Lubang".

Add Contact Facebook Page Through Messenger

• Browse to the page, click on the "Add a Button" button
  
  
• Select "Send Message" in the "Contact You" section. Click "Next" button
  
  
• Select "Messenger" and follow by "Finish" button
  
  
• Hover the mouse towards the "Send Message" button on the page, click on "Test Button" menu. Facebook messenger box will be displayed.
  
  

Transform localhost into https URL (Ensure https is enable and you wish to use your desktop at home)

• Download ngrok from download
• Unzip the file and run the command as described below. My port used is 1337.

ngrok http 1337

• Below is the sample result

• Unzip the file and run the command as described below. The port I used is 1337
• Based on the forwarding URL generated, "http://6913c05b.ngrok.io" will be used for Facebook configuration

Deploy webhook on Glitch

• Launch your project from Glitch
• Sample code in App.js

'use strict';

// Imports dependencies and set up http server
const
  request = require('request'),
  express = require('express'),
  bodyParser = require('body-parser'),
  PAGE_ACCESS_TOKEN = process.env.PAGE_ACCESS_TOKEN,    
  app = express().use(bodyParser.json()); // creates express http server

// Sets server port and logs message on success
app.listen(process.env.PORT || 80, () => console.log('webhook is listening'));

// Creates the endpoint for our webhook 
app.post('/webhook', (req, res) => {  
 
  let body = req.body;

  // Checks this is an event from a page subscription
  if (body.object === 'page') {

    // Iterates over each entry - there may be multiple if batched
    body.entry.forEach(function(entry) {

      // Gets the message. entry.messaging is an array, but 
      // will only ever contain one message, so we get index 0
      let webhook_event = entry.messaging[0];
      console.log(webhook_event);
      
      // Get the sender PSID
      let sender_psid = webhook_event.sender.id;
      console.log('Sender PSID: ' + sender_psid);
      
      // Check if the event is a message or postback and
      // pass the event to the appropriate handler function
      if (webhook_event.message) {
        handleMessage(sender_psid, webhook_event.message);        
      } else if (webhook_event.postback) {
        handlePostback(sender_psid, webhook_event.postback);
      }      
    });

    // Returns a '200 OK' response to all requests
    res.status(200).send('EVENT_RECEIVED');
  } else {
    // Returns a '404 Not Found' if event is not from a page subscription
    res.sendStatus(404);
  }

});

// Adds support for GET requests to our webhook
app.get('/webhook', (req, res) => {

  // Your verify token. Should be a random string.
  let VERIFY_TOKEN = "[PAGE_TOKEN]"
    
  // Parse the query params
  let mode = req.query['hub.mode'];
  let token = req.query['hub.verify_token'];
  let challenge = req.query['hub.challenge'];
    
  // Checks if a token and mode is in the query string of the request
  if (mode && token) {
  
    // Checks the mode and token sent is correct
    if (mode === 'subscribe' && token === VERIFY_TOKEN) {
      
      // Responds with the challenge token from the request
      console.log('WEBHOOK_VERIFIED');
      res.status(200).send(challenge);
    
    } else {
      // Responds with '403 Forbidden' if verify tokens do not match
      res.sendStatus(403);      
    }
  }
});

// Handles messages events
function handleMessage(sender_psid, received_message) {
  let response;

  // Check if the message contains text
  if (received_message.text) {    
    // Create the payload for a basic text message
    response = {
      "text": `You sent the message: "${received_message.text}". Now send me an image!`
    }
  }  
  
  // Sends the response message
  callSendAPI(sender_psid, response);    
}

// Handles messaging_postbacks events
function handlePostback(sender_psid, received_postback) {

}

// Sends response messages via the Send API
function callSendAPI(sender_psid, response) {
   // Construct the message body
    let request_body = {
      "recipient": {
        "id": sender_psid
      },
      "message": response
    }
    
    // Send the HTTP request to the Messenger Platform
    request({
    "uri": "https://graph.facebook.com/v2.6/me/messages",
    "qs": { "access_token": PAGE_ACCESS_TOKEN },
    "method": "POST",
    "json": request_body
  }, (err, res, body) => {
    if (!err) {
      console.log('message sent!')
    } else {
      console.error("Unable to send message:" + err);
    }
  }); 
}

• Sample code in package.json

{
  "name": "messenger-quick-start",
  "version": "1.0.0",
  "description": "An example webhook for Facebook Messenger quick start tutorial.",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/fbsamples/messenger-platform-samples.git"
  },
  "author": "Facebook",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.15.0",
    "express": "^4.13.4",
    "request": "^2.72.0"
  },
  "engines": {
    "node": "~4.1.2"
  }
}

Facebook webhook configuration

• Launch the Facebook dashboard to "My Apps" section, select "Uncle Lubang" app.
• Scroll to "Token Generation" section, select "Uncle Lubang" page.
• Follow the steps from wizard to generate the token.
• Scroll to "Webhooks" section, click on the "Setup Webhooks" button to launch. Fill in the Callback URL, Verify Token and check "messages", "messaging_postbacks" and "messaging_optins" checkbox. 

Test the ChatBot

How to resolve "Cannot resolved symbol 'android'" error when apply GoogleMaps library?

Prerequisite

- Android Studio 3.1.4

• Import GoogleMaps library to Android project, encounter error message "Cannot resolved symbol 'android'"

Steps to resolve

• Click on "Tools" → "SDK Manager" to launch "Default Settings" window
• Click on "SDK Tools" tab and select "Google play services" checkbox. 

• Click on "File" → "Project Structure" to launch "Project Structure" window
• Click on "Dependencies" tab, add "com.google.android.gms:play-services-maps:15.0.1" library, rebuild the project and the issue will be resolved.

How to resolve "jit-grunt: Plugin for the "karma" task not found." when execute grunt test?

• Run the grunt command "grunt test", error message as shown below is displayed

jit-grunt: Plugin for the "karma" task not found.
If you have installed the plugin already, please setting the static mapping.
See https://github.com/shootaroo/jit-grunt#static-mappings

Warning: Task "karma" failed. Use --force to continue.

Aborted due to warnings.

• Execute the command below to install karma, the problem will be resolved.

npm install grunt-karma karma karma-phantomjs-launcher 
karma-jasmine jasmine-core phantomjs-prebuilt --save-dev

How to resolve "Path must be a string. Received null Use" error message when execute grunt script?

• Run the grunt script, error message as shown below is displayed

Running "jshint:all" (jshint) task
Warning: Path must be a string. Received null Use --force to continue.
Aborted due to warnings.

• To resolve this, add the script as shown below to jshint section

options:{
 reporterOutput:''
},

• Please refer to the sample source, it will work perfectly

grunt.initConfig({
 jshint:{
  options:{
    reporterOutput:''
   },
   all:['script.js']
  }
 });

How to upgrade PHP 7.2.6 on WAMP 3.0.6 server?

Software Required
- WAMP 3.0.6
- PHP 7.2.6

In the development stage, upgrading of PHP to support new library or functionality is unavoidable. WAMP has been used for my project development, however, PHP 7.2.6 doesn't exists in the WAMP 3.0.6. Below are the steps that I performed to import PHP interpreter into my WAMP container.

PHP installation steps

• Download PHP from https://windows.php.net/download#php-7.2
• Unzip the PHP zip file into "php7.2.6" folder and copy into "D:\wamp64\bin\php" folder.
• Copy wampserver.conf from "D:\wamp64\bin\php\php5.6.25" to "D:\wamp64\bin\php\php7.2.6"
• Browse to "D:\wamp64\bin\php\php7.2.6" folder, rename "php.ini-development" to "php.ini.
• Alter php.ini by changing the new configuration as shown below

extension_dir = "d:/wamp64/bin/php/php7.2.6/ext"
upload_tmp_dir ="d:/wamp64/tmp"
error_log ="d:/wamp64/logs/php_error.log"

• Alter the extension section at php.ini 

extension=php_bz2.dll
extension=php_curl.dll
extension=php_fileinfo.dll
extension=php_gd2.dll
extension=php_gettext.dll
extension=php_gmp.dll
extension=php_intl.dll
extension=php_imap.dll
;extension=php_interbase.dll
extension=php_ldap.dll
extension=php_mbstring.dll
extension=php_exif.dll
extension=php_mysqli.dll
;extension=php_oci8_12c.dll  ; Use with Oracle Database 12c Instant Client
;extension=php_odbc.dll
extension=php_openssl.dll
;extension=php_pdo_firebird.dll
extension=php_pdo_mysql.dll
;extension=php_pdo_oci.dll
;extension=php_pdo_odbc.dll
;extension=php_pdo_pgsql.dll
extension=php_pdo_sqlite.dll
;extension=php_pgsql.dll
;extension=php_shmop.dll

; The MIBS data available in the PHP distribution must be installed.
; See http://www.php.net/manual/en/snmp.installation.php
;extension=php_snmp.dll

extension=php_soap.dll
extension=php_sockets.dll
extension=php_sqlite3.dll
;extension=php_tidy.dll
extension=php_xmlrpc.dll
extension=php_xsl.dll
;extension=php_com_dotnet.dll
;extension=php_dba.dll
;extension=php_enchant.dll
;extension=php_ftp.dll
;extension=php_phpdbg_webhelper.dll
;extension=php_sodium.dll
;extension=php_sysvshm.dll
;extension=php_zend_test.dll

• Duplicate php.ini file and save it as phpForApache.ini.
• Alter wampserver.conf located at "D:\wamp64\bin\php\php7.2.6" folder

$phpConf['apache']['2.4']['LoadModuleName'] = 'php7_module';
$phpConf['apache']['2.4']['LoadModuleFile'] = 'php7apache2_4.dll';
$phpConf['apache']['2.4']['AddModule'] =  '';

• Launch wampserver manager, browse to "PHP" > "Version" menu, version 7.2.6 option is ready for selection. 
• After select "7.2.6" menu and wamp manager has been restarted, browse to the site, PHP version 7.2.6 is displayed.

How to encode multiple parameter value on curl command?

Prerequisite

- CURL version 7.53.1 has been installed
- An web service is ready, for example, "https://www.api.com/query?"
- Multiple parameters are required to pass to the API, for example param1=value1&param2=value2 

Create a New REST API

• Use the curl command to call the web service "curl https://www.api.com/query?param1=value1&param2=value2"
• You may encounter the error message as shown below:-

'param1' is not recognized as an internal or external command,
operable program or batch file.
'param2' is not recognized as an internal or external command,
operable program or batch file.

• To resolve this problem, url encoding is required.
• Use the curl command to call the web service, error message as shown above is eliminated.

curl -G -v "https://www.api.com/query" --data-urlencode "param1=value1" --data-urlencode "param2=value2"

How to setup Serverless server on AWS (RESTful APIs)?

Prerequisite

- Register an AWS account

Note: AWS has given a very details step by step guide. This is for my own note taking and reference

Create a New REST API

• Login to AWS management console, select "API Gateway" in the "Networking & Content Delivery" section.
• Click on "Get Started" button
• Select "New API" and enter "BeezRydes" in the "API name" field
• Select "Edge Optimized" in the "Endpoint Type" field.
• Click "Create API" button

Create a Cognito User Pools Authorizer

• Select "Authorizers in the left menu

• Select "Create New Authorizer" button
• Enter "BeezRydes" in the "Name" field
• Select "Cognito" for the "Type" field
• Enter "BeezPool" in the "Cognito User Pool" field
• Enter "Authorization" in the "Token Source" field
• Click on "Create" link

Verify your authorizer configuration

• Browse to the /ride.html, please refer to screenshot below. Copy the token.
  
   
• Back to the "Authorizers" page, click on the "Test" link
  
  
• Paste the authorization code into "Test Authorizer" page
  
  
• Click on the "Test" button, Response code: 200 us returned

Create a new resource and method

• Click on the "Resources" in the left menu
• Click on the "Actions" button, follow by "Create Resource" option
• Enter "ride" in the "Resource Name" field, the "Resource Path" is auto populated as "ride"
• Ensure the "Ensure API Gateway CORS" checkbox is checked
• Click on the "Create Resource" button
• Click on the "Actions" button, follow by "Create Method" option
• Select "POST" in the OPTIONS dropdown, click the checkmark afterwards.
• Select "Lambda Function" in the "Integration type" field
• Check the "Use Lambda Proxy integration" check box
• Enter the name of the function you created in the previous module, RequestUnicorn, for Lambda Function.
• Click on "Save" button
• Click on the "Method Request" 
• Click on "Edit" icon next to the "Authorization" field
• Select "BeezRydes Cognito user pool authorize", follow by the checkmark
  

Deploy Your API

• Click on the "Actions" button, follow by "Deploy API" option
• Select "[New Stage]" in the "Deployment Stage" field.
• Enter "prod" in the "Stage name" field
• Click on the "Deploy" button
• Please take note of the "Invoke URL", "https://1g4tkvr1pj.execute-api.ap-southeast-1.amazonaws.com/prod"

Update the Website Config

• Open the config.js file in a text editor
• Update the invokeUrl setting under the api key in the config.js file.

window._config = {
    cognito: {
        userPoolId: 'XX-XXXXXXXXX-X_XXXXXXXXX', // e.g. us-east-2_uXboG5pAb
        userPoolClientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXX', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'XX-XXXXXXXXX-X' // e.g. us-east-2
    },
    api: {
        invokeUrl: 'https://1g4tkvr1pj.execute-api.ap-southeast-1.amazonaws.com/prod' 
    }
};

• In the AWS Management Console, choose Services then select S3 under Storage.
• Navigate to the website bucket and then browse to the js key prefix.
• Upload the config.js file

Validate your implementation

• Visit /rides.html page, for example, "http://beez-firstname-lastname.s3-website-ap-southeast-1.amazonaws.com/signin.html"
• Sign in page is displayed. Login with the registered user in thee previous tutorial.
• Click on the map follow by "Request Unicorn" web service, the "Unicorn" will appear on the map as shown in the screenshot below