Simon Ho | Software Developer Blog

Introduction This blog describes how to build a Wordpress theme which the frontend displays a calendar (using jQuery FullCalendar). The Wordpress as backend which the PHP codes communicate with Google Calendar (via Google API service account) to perform loading/saving event(s). 15-seconds short demo outcome video (no sounds): System diagram of this tutorial: Note: Unlike other common tutorials, this tutorial chooses Server-to-Server communication approach . This does NOT require users to authenticate and consent. The Source Codes You can download the source codes from this Github repo Prerequisite WordPress 4.9+ PHP 7.0+ Composer 1.6+ A Google Account Initialize the backend project First of all, you’ll need to create a project directory. Link the directory to your WordPress theme directory (assume the WordPress is installed in /var/www/html ). The Linux command: $ mkdir google-calendar-wordpress $ cd google-calendar-wordpress $ ln -s $(pwd) /var/www/html/wp-content/themes/google-calen...

What is the Chatbot CMS I’ve developed and launched a WooCommerce chatbot (WcBot) business in January 2018. It is a mass commercial product. The chatbot main function is to connect between the WooCommerce and Facebook Messenger. See below diagram: The target clients are WooCommerce store owners. WcBot is actually a WordPress plugin. When the clients installed and activated the plugin, the chatbot can be added to the store like below screenshot: Chatbot features The benefits of WcBot for the shop owner: 1. Instantly answering the messages sent from Facebook Messenger like: “Show me the products” “List the category” “Which product price under 30?” “How about the price between 10 and 20?” “Find product tshirt” “View my shopping cart” Example reply screenshot: 2. WcBot has a built-in shopping cart. Wcbot supports whole buying experience inside the chatbot. The whole buying experience means that allows end-users to: Add item(s) to cart Review/Modify shopping cart items Input billing ...

Wanted to start your online store business in a more modern, cheaper, stable, and secure way? This blog is a step by step guide to do:  Element  Function  Cost  GoDaddy Web-hosting  Host your website   US$1/month  WooCommerce E-commerce platform  Store management (products, orders)  free  ZeroSSL SSL certificate  Secure the transactions  free  Braintree Payment gateway  Accept credit card payment  free  Chatbot CMS WcBot  24/7 answer your customer questions  US$29, one-off Blog Disclaimer Notice This is not a GoDaddy Ad. I’m the chatbot author 1. Monthly US$1 web hosting Below is the slide shows you how to buy US$1 web-hosting from GoDaddy: (Click or left/right arrow keys to view next/prev slide) 2. Install WooCommerce GoDaddy web-hosting is ready, below is the slide shows how to install WordPress and WooCommerce: (Click or left/right arrow keys to view next/prev slide) 3. Generate a free...

It’s worth pointing out that Semantic UI provides richer UI elements and robust features than Bootstrap 3/4. Semantic UI does contain more elements without the needs of 3rd party libraries. For examples: dropdown has built-in animation & search function. Step , Rating , Statistic are not existed in Bootstrap 3/4. Semantic UI comes with more than 20 themes. The CSS class names are more friendly to human words. (Semantic UI is available for download if you haven’t tried it yet, and want to.) This is a steps by steps guild show you how to create a basic Semantic UI theme, customize it, and setup the NodeJS server-side rendering development environment. Prerequisite This project leverages below technologies: Semantic UI 2.2 frontend framework NodeJS 6 or above server engine ExpressJS 4.15 server framework PUG 2 (Jade) template engine Gulp CLI 1.4 task runner LESS 2.2 CSS pre-processor Install NodeJS You can download & install the NodeJS from the official site or using...

This Blogpost compares the payment experience from three popular payment processors: PayPal , Braintree , and Stripe . This comparison is from the developer’s point of view. This is NOT to compare the prices and services. We will only concern the payment experience and coding effort. We will do: Backend codes in NodeJS-Express. Frontend codes in Pug, jQuery, Bootstrap 4. Whole payment process flow and its appearance. Compare the three SDKs and evaluate security. Please note that all payment processes are in Sandbox (development) platform. The source codes are host in this Github repo Project setup First of all, you’ll need NodeJS . The version is: node -v && npm -v v6.10.3 5.4.2 Enter your payment access keys (PayPal, Braintree & Stripe) into the .env file. The content is: PAYPAL_MODE='[sandbox|production]' PAYPAL_CLIENT_ID='[Your PayPal Client Id]' PAYPAL_CLIENT_SECRET='[Your PayPal Client Secret]' BT_ENVIRONMENT='[Sandbox|Production]' BT_M...

This is a long Blog describes how I build my Chatbot (named I’m Simon Chatbot) to demonstrate below features: The Chatbot talks with human via Facebook Messenger Chatbot server app running NodeJS (with ExpressJS framework) Giving an A.I. brain to the Chatbot with RiveScript The Chatbot server App hosts in AWS Lambda (comply with serverless architecture) User state management persistent via AWS DynamoDB Use Serverless framework for easy App deployment 1. Create a Facebook Page I want my Chatbot could be interfaced with my Facebook friends via Facebook Messenger. First of all, I need to create a Facebook page required by Messenger Platform . I make a funny banner picture and avatar to the Facebook Page as below: 2. Create an Facebook App and configure the Messenger Platform To accomplish chatting in Messenger, Facebook requires a Facebook App to define the configuration of the Chatbot web service. I create the App from the Facebook Developer website . As Facebook developer documentation...