I love reading books, in fact lots of books. I’am sure many of you read books as well. Books on different topics and subjects help you to expand the horizon of knowledge and creativity. Often it happens that you extract an idea from a book and you give your own touch in it and produce a product which people love to use.
In the age of social media when people love to let others know about their daily activities by updating a status, it ‘s not surprising that there are such social sites available which let your friends know about what you’re reading. Goodreads is one of them which is kind of Facebook for Books.
A month and half back I got an idea to come up with a tool that let your email recipients know about your book reading habit. Lo and behold, Currently Reading came it being.
Currently Reading is actually a Chrome extension for Gmail that adds an entry in your existing signature about the book you’re reading.
How it Works?
Well, see yourself!
You search the book you’re reading, select it and it automagically appears in your email signature.
A computer program designed to simulate conversation with human users, especially over the Internet.
Chat bot in PHP
When I heard of it, my very first thought was to a bot in PHP. I started to find some SDK in this regard released by Facebook but none was present. I headed over to documentation which provided good information for starters.
Ok! so without wasting further time, let’s build our first Bot
In order to create an Fb bot you will need two things to host your bot: A Facebook Page which will be like Home of Bot, People will visit the page, click on Message option to Interact with your bot. For example, suppose Pizza Hut introduce a bot for order related operations. What could they do that they integrate or host their bot on their official page, a fan can just click on Message button and send messages to order a Pizza, get new deals etc and they will get messages as if some human representatives is responding to them. It all depends how efficient a bot is. Facebook puts no limitation in this regard.
I am going to create a Time bot which will tell you current time Time API that provides different options to retrieve time. For our bot, we are just fetching latest(NOW) time. I will go step by step:
Step 1: Create Facebook Page:
I am going to create Bot’s Page first, this page will actually be the entry point for communication for the bot to interact with your page fans/users. Do note that it is not necessary to create a separate page only for Bot purpose. You may use existing Fan page for this purpose.For sake of this tutorial I am assuming that you never created a page before. Visit https://www.facebook.com/pages/create/ and you will see something like this(as of April, 2016):
I picked Entertainment option. In next steps it asks different options which you can always skip.
Alright! so my page is ready and something like should be visible for you as well:
Step 2: Create Facebook App:
Alright, go to https://developers.facebook.com/apps and click on Add a New App button. Make sure you have a developer account otherwise you will not be able to access developer dashboard.
When you click on it it shows a window and asks you what kind of app are you going to make. I picked Basic Setup given at bottom. I entered required information; Display Name & Contact Email and hit Create App ID button.
After Captcha you will be redirected to your App Page where you will be seeing details.
On left side bar you will see an option of Messenger. When you click on it, it shows introduction of Messenger Platform and why and how these bots will be helpful.
Click on Get Started and it will show a New Dashboard page related to your newly created app that’s going to be hooked with Messenger platform.
Now we need to do a few things for setting up the bot. As you can see, you are being asked a few things; Access Token/Page Token so that Facebook can know where do you want to host bot, Webhooks, your script URL that will be receiving messages from your users and responding them. It will also be hold the logic of your bot and Permissions that is, what this bot should be able to perform when communicating with users. Ok first, set the page which you just created. I am selecting TimBot. Since I, as a normal Facebook User going to use this page very first time, it will ask for Permissions as it normally asks.
Once all goes well you would get your Page Token like this, save it somewhere as this will be used as access_token while sending messages.
Now we have to set our Webhook. Facebook asks you to setup an https:// URL which means, you simply can’t use localhost while developing. You can either upload your script somewhere which allows SSL based requests or.. you can use some tunneling tool that will pass on your localhost message to outer world. Luckily such tools are available and they are FREE as well. I’d recommend nGrok for this purpose. Once it’s unzipped, go to the folder and run the command:
As a free user you are not allowed to give your own subdomain. Once it starts working, it shows something like this:
As you can see, it gives you two forwarded URLs. Since we re interested about https one so we will focus on that. nGrok also provides you an interface to view requests on your newly created domain. It will help you to debug how your webhook page is being accessed by Messenger Platform. For that purpose, open a separate tab with the URL http://localhost:4040/inspect/http and here you can see all details related to that request.
Now I have the URL, all I have to do is to setup my Webhook for Time Bot. Click on Setup Webhooks option and you’d see something like that.
Here I entered the nGrok based URL, Verify Token which could be ANY string and checked subscription fields. If you hit verify and save, you will get error:
What does it mean? Webhook when access the URL, it first verification token before doing anything further, if not present or incorrect, it gives the error you are seeing above.
It’s time to open IDE and write some code. Create a file, in my case it’s index.php, in your case it could be any other file. Write the code that verify your Webhook.
Where access_token is the code I got in earlier step for the page Time Bot Page which I asked you to save somewhere. If works perfectly you should success message on console:
Now go to your bot page and send message.
If hooks and subscription works fine, on your nGrok Web Interface(http://localhost:4040/inspect/http), you should see a request hit:
Now you will know the power of nGrok Web Interface, here we are receiving message from Bot in a structure. In next step we will convert this message structure by decoding JSON into array and fetch sender Id and message.
If you are working on a project having lots of feature branches, you’d like to remove all of once your deployment is done and all feature branches merge into master. Following simple command can help you to get rid of them.
git branch|grep'DB-'|xargs git branch-d
Here DB- is prefix of your feature branch. So, if you have branches like DB-1, DB-2; it will run grep branch and then grep all strings match DB- and then will remove them. xargs rule!
If you are going to send a CSS based HTML mail aka Email Templates, chances are you are embedding CSS in <style> tag and end up having a bad experience of not having a properly rendered page.
The issue is that web clients like Gmail etc strip markup tags. Specially <head><script> and <style> for security reasons. The only way is left to make an HTML content with inline CSS.
But.. making inline CSS is pain in neck and it’s not easy specially when are now used to make external CSS files or style block. Thankfully, Mailchimp provides a tool that takes your CSS and HTML and make it online.
Try CSS Inline tool. It’s quite a neat tool and even take care of messy CSS
This post is part of LxD Series in which I share my learning process about different technologies. Learn more about LxD here.
Ok you saw earlier the design we are going to use for our application. Now it’s time to integrate that design in our Laravel 5 application. Before I go further, let me tell directory structure of Laravel to integrate our design.
Laravel folder structure
Layouts are actually part of views hence they reside in views folder. You have option to put all of your layouts within views->layouts folder or manage it better by dividing it into folders based on your site modules. For instance, Admin, Emails, Site etc. For my sake I created a site folder and created a blade template with name master.blade.php. All template files are actually PHP file with some special syntax and they will have .blade within file name.
Now, I put entire home page HTML within master file. Now once it’s done, we have to figure out which parts of our sites are dynamic and which are static. In our case only left navigation is static and right panel will have dynamic content. The way to deal is that we could have way to deal with it. Laravel’s blade template provides an easy to use technique to do it. See code below:
<div id="main"class="ten left columns marginleft0">
Look at code, it is same as we had for mockup. I set path of assets accordingly. In order include this template in our other pages, Laravel blade provides yield method.
Yield actually returns the content within template from other parts of the site. Hence when you integrate a sub section it just ‘outputs’ the content from this function. How it works, let’s see below:
The blade file begins with the line @extends(‘../layouts.site.master’), which means this particular view file is actually part of master layout. extends actually take path of layout file. The dot notation is used to indicate sub folders. Hence layouts.site.master means that master.blade.php reside in layouts/site/ folder.
Next thing is @section@stop. It is like IF block we usually use in our code. @section(‘content’) is start of block, content tells where to put the code within block and @stop actually ends the dynamic code block
When we access page it appears like that:
As you see Subpage is included right where it should. That’s it for now. In coming posts we will be implementing the sub pages and their controllers and routes. Till then…