Tutorial

Read more about the article Hyperlinking Support for SUSI Webchat

Hyperlinking Support for SUSI Webchat

SUSI responses can contain links or email ids. Whenever we want to access those links or send a mail to those email ids, it is very inconvenient for the user to manually copy the link and check out the contents, which is a very bad UX. I used a module called ‘react-linkify’ to address this issue. ‘React-linkify’ is a React component to parse links (urls, emails, etc.) in text into clickable links. Usage: <Linkify>{text to linkify}</Linkify> Any link that appears inside the linkify component will be hyperlinked and is made clickable. It uses regular expressions and pattern matching to detect URLs and mail ids and are made clickable such that clicking on URLs opens the link in a new window and clicking a mail id opens “mailto:” . Code: export const parseAndReplace = (text) => {return <Linkify properties={{target:"_blank"}}>{text}</Linkify>;} Lets visit SUSI WebChat and try it out. Query: search internet Response: Internet The global system of interconnected computer networks that use the Internet protocol suite to... https://duckduckgo.com/Internet The link has been parsed from the response text and has been successfully hyperlinked. Clicking the links opens the respective URL in a new window. Resources Linkify Library Examples Using React-Linkify

Continue ReadingHyperlinking Support for SUSI Webchat
Read more about the article How to teach SUSI skills calling an External API

How to teach SUSI skills calling an External API

SUSI is an intelligent  personal assistant. SUSI can learn skills to understand and respond to user queries better. A skill is taught using rules. Writing rules is an easy task and one doesn’t need any programming background too. Anyone can start contributing. Check out these tutorials and do watch this video to get started and start teaching susi. SUSI can be taught to call external API’s to answer user queries. While writing skills we first mention string patterns to match the user's query and then tell SUSI what to do with the matched pattern. The pattern matching is similar to regular expressions and we can also retrieve the matched parameters using $<parameter number>$ notation. Example : My name is * Hi $1$! When the user inputs “My name is Uday” , it is matched with “My name is *” and “Uday” is stored in $1$. So the output given is “Hi Uday!”. SUSI can call an external API to reply to user query. An API endpoint or url when called must return a JSON or JSONP response for SUSI to be able to parse the response and retrieve the answer. Rule Format for a skill calling an external API The rule format for calling an external API is : <regular expression for pattern matching> !console: <return answer using $object$ or $required_key$> { “url”: “<API endpoint or url>”, “path”: “$.<key in the API response to find the answer>”, } eol Url is the API endpoint to be called which returns a JSON or JSONP response. The parameters to the url if any can be added using $$ notation. Path is used to help susi know where to look for the answer in the returned response. If the path points to a root element, then the answer is stored in $object$, otherwise we can query $key$ to get the answer which is a value to the key under the path. eol or end of line indicates the end of the rule. Understanding the Path Attribute Let us understand the Path attribute better through some test cases. In each of the test cases we discuss what the path should be and how to retrieve the answer for a given required answer from the json response of an API. API response in json : { “Key1” : “Value1” } Required answer : Value1 Path : “$.Key1    =>   Retrieve Answer:  $object$   API response in json : { “Key1” : [{“Key11” : “Value11”}] } Required answer : Value11 Path : $.Key1[0]   =>  Retrieve Answer: $Key11$ Path : $.Key1[0].Key11   => Retrieve Answer: $object$   API response in json : { “Key1” : {“Key11” : “Value11”} } Required answer : Value11 Path : $.Key1  => Retrieve Answer:  $Key11$ Path : $.Key1.Key11  => Retrieve Answer: $object$   API response in json : { “Key1” : { “Key11” : “Value11”, “Key12” : “Value12” } } Required answer : Value11 , Value12 Path : $.Key1  => Retrieve Answer:  $Key11$ , $Key12$ Where to write these rules? Now, since we know…

Continue ReadingHow to teach SUSI skills calling an External API

Working with ButterKnife in Android

The following tutorial will help you understand Butter Knife implementation in Android Why to use Butter Knife for Android? Butter Knife in short is used in case for method binding of Android Views. Butter Knife is mainly used to make coding clean and simple especially in cases where where you deal with complex layout. Usually if you aren’t using Butter Knife you’ll have to eventually use findViewById() method for each view that you create in your layout, in cases where your application deals with many TextView’s, EditText’s, Button’s , ImageView’s the lines of code you write extends. In such cases Butter Knife comes in handy, using which you can reduce many lines of code and simply avoid methods such as findViewById(). Does Butter Knife make your App to slow down ? No. Butter Knife doesn’t slow down your App, it gives the same result as when you declare your views using findViewById. The reason behind it is ButterKnife automatically generates findViewById calls at compile time itself thus, making use of “Annotation Processing”. Butter Knife in Action : Usage in xml : <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="15dp" android:id="@+id/butterknifeLayout" android:layout_marginLeft="@dimen/pager_margin" android:layout_marginRight="16dp" android:weightSum="2"> <EditText android:id="@+id/butterknifeEdittext" android:layout_width="0dp" android:layout_height="wrap_content" android:textSize="13sp" android:hint="First Name" android:singleLine="true" android:layout_weight="1"/> </LinearLayout>; Usage in Java class. @InjectView(R.id.butterknifeLayout) LinearLayout linearLayout; @InjectView(R.id.butterknifeText) EditText edittext; //Just use the below code for setting a OnclickListener. That’s it. you don’t need to use findViewById multiple times @OnClick(R.id.butterknifeLayout) void OnLayoutClicked(View view) { //Do Your Stuff here } Learn more about butterknife at : http://jakewharton.github.io/butterknife/

Continue ReadingWorking with ButterKnife in Android

Lambda expressions in Android

What are Lambda expressions Lambda Expressions are one of the most important features added to Java 8. Prior to Lambda Expressions, implementing functional interfaces i.e interfaces with only one abstract method has been done using syntax that has a lot of boilerplate code in it. In cases like this, what we are trying to do is pass a functionality as an argument to a method, such as what happens when a button is clicked. Lambda expressions enables you to do just that, in a way that is much more compact and clear. Syntax of Lambda Expressions A lambda expression consist of the following: A comma separated list of formal parameters enclosed in parentheses. The data types of the parameters in a lambda expression can be omitted. Also the parenthesis can be omitted if there is only one parameter. For example: TextView tView = (TextView) findViewById(R.id.tView); tView.setOnLongClickListener(v -> System.out.println("Testing Long Click")); The arrow token -> A body which contains a single expression or a statement block. If a single expression is specified, the java runtime evaluates the expression and then return its value. To specify a statement block, enclose statements in curly braces "{}" Lambda Expressions in Android To use Lambda Expressions and other Java 8 features in Android, you need to use the Jack tool-chain. Open your module level build.gradle file and add the following: android { ... defaultConfig { ... jackOptions { enabled true } } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } Sync your build.gradle file and if you are having any issue with build tools, you may need to update buildToolsVersion in your build.gradle file to "24rc4" or just download the latest Android SDK Build-tools from the SDK Manager, under the Tools (Preview channel). Example Adding a click listener to a button without lambda expression Button button = (Button)findViewById(R.id.button); button.setOnClickListener(button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(this, "Button clicked", Toast.LENGTH_LONG).show(); } });); with lambda expressions It is as simple as: Button button = (Button)findViewById(R.id.button); button.setOnClickListener(v -> Toast.makeText(this, "Button clicked", Toast.LENGTH_LONG).show();); As we can see above, using lambda expressions makes implementing a functional interface clearer and compact. Standard functional interfaces can be found in the java.util.function package [included in Java 8]. These interfaces can be used as target types for lambda expressions and method references. Credits : https://mayojava.github.io/android/java/using-java8-lambda-expressions-in-android/ Another way to have Java 8 features in your Android app is using the RetroLambda plugin.

Continue ReadingLambda expressions in Android

AngularJS structure and directives

Today I am going to tell you how to build a well worked Angular JS structure, as well as to be able to maintain your app's elements correctly. It's a basic and most important thing to learn and remember before you start building your own website or app because in the early phases of a project the structure doesn't matter too much, and many people tend to ignore it, but in the long term it will affect code maintainability. It also helps you to develop it quicker and solve bugs without any additional troubles. I must admit that I was one of them who  had made this mistake and ignore AngularJS correct structure. The thing is that I had not known how to build Angular JS app correctly before I started coding CommonsNet, and I wanted to start and provide a real outcome as quickly as possible. But unfortunately my mistake has stoped me later. I have realised it this week while implementing a quite simple feature - adding HTML elements dynamically. It turned out that I had a trouble while adding them. I had't known that it's better not to manipulate DOM elements in Controllers, but instead do it in directives. Let me to explain it step by step from lessons I've learned while refactoring CommonsNet code structure. Please note that I'm just sharing my experience in building rather a small project and I'm covering only a small part of that subject, so some of these tips may be first - useless if you want to build an extended one, and then - not enough if you want to learn more. I recommend you to find further resources. AngularJS Structure First of all please see at AngularJS structure provided below. It's a very basic structure, but it' is important to have in mind that you should follow that pattern while developing your own app. If you want to have an order in your files you should seperate them by directories and create different ones like: controllers, directives, services, js and views. This structure makes it very easy for the reader to visualize and conceptualize the concepts you are covering. My CommonsNet structure differs a bit because I have one main js directory, and all subdirectories like directives, controllers and services  inside it. I think it's also an acceptable solution. Imagine that I hadn't had any directives or services directives' files before last Wednesday... Then,  it's also recommended to put index.html at the root of front-end structure. The index.html file will primarily handle loading in all the libraries and Angular elements. Next, controllers are main part of AngularJS apps. It always happens that developers when starting out tend to put too much logic in the controllers. It's a bug. Controllers should never do DOM manipulation or hold DOM selectors, that's where we use directives and ng-model. Likewise business logic should live in services, not controllers. Data should also be stored in services, except where it is being bound to the $scope. Services are singletons that persist throughout the lifetime…

Continue ReadingAngularJS structure and directives

Accepting Stripe payments on behalf of a third-party

{ Repost from my personal blog @ https://blog.codezero.xyz/accepting-stripe-payments-on-behalf-of-a-third-party } In Open Event, we allow the organizer of each event to link their Stripe account, so that all ticket payments go directly into their account. To make it simpler for the organizer to setup the link, we have a Connect with stripe button on the event creation form. Clicking on the button, the organizer is greeted with a signup flow similar to Login with Facebook or any other social login. Through this process, we're able to securely and easily obtain the credentials required to accept payments on behalf of the organizer. For this very purpose, stripe provides us with an OAuth interface called as Stripe Connect. Stripe Connect allows us to connect and interact with other stripe accounts through an API. We'll be using Python's requests library for making all the HTTP Requests to the API. You will be needing a stripe account for this. Registering your platform Goto https://dashboard.stripe.com/account/applications/settings and register your platform by filling in all the details. This will provide you with a Client ID that we'll be using when redirect users for OAuth Signup. The OAuth Flow The OAuth flow is similar to most platforms. The user is redirected to an authorization page where they login to their stripe account and authorize your app to access their account The user is then redirected back to a callback URL with an Authorization code The server makes a request to the Token API with the Authorization code to retrieve the access_token, refresh_token and other credentials. Implementing the flow Redirect the user to the Authorization URL. https://connect.stripe.com/oauth/authorize?response_type=code&client_id=ca_8x1ebxrl8eOwOSqRTVLUJkWtcfP92YJE&scope=read_write&redirect_uri=http://localhost/stripe/callback The authorization url accepts the following parameters. client_id - The client ID acquired when registering your platform.required. response_type - Response type. The value is always code. required. redirect_uri - The URL to redirect the customer to after authorization. scope - Can be read_write or read_only. The default is read_only. For analytics purposes, read_only is appropriate; To perform charges on behalf of the connected user, We will need to request read_write scope instead. The user will be taken to stripe authorization page, where the user can login to an existing account or create a new account without breaking the flow. Once the user has authorized the application, he/she is taken back to the Callback URL with the result. Requesting the access token with the authorization code The user is redirected back to the callback URL. If the authorization failed, the callback URL has a query string parameter error with the error name and a parameter error_description with the description of the error. If the authorization was a success, the callback URL has the authorization code in the code query string parameter. import requests data = { 'client_secret': 'CLIENT_SECRET', 'code': 'AUTHORIZATION_CODE', 'grant_type': 'authorization_code' } response = requests.post('https://connect.stripe.com/oauth/token', data=data) The client_secret is also obtained when registering your platform. The codeparameter is the authorization code. On making this request, a json response will be returned. If the request was a success, the following response will be obtained. { "token_type": "bearer", "stripe_publishable_key":…

Continue ReadingAccepting Stripe payments on behalf of a third-party

Writing your first Dockerfile

In this tutorial, I will show you how to write your first Dockerfile. I got to learn Docker because I had to implement a Docker deployment for our GSoC project Open Event Server. First up, what is Docker ? Basically saying, Docker is an open platform for people to build, ship and run applications anytime and anywhere. Using Docker, your app will be able to run on any platform that supports Docker. And the best part is, it will run in the same way on different platforms i.e. no cross-platform issues. So you build your app for the platform you are most comfortable with and then deploy it anywhere. This is the fundamental advantage of Docker and why it was created. So let’s start our dive into Docker. Docker works using Dockerfile (example), a file which specifies how Docker is supposed to build your application. It contains the steps Docker is supposed to follow to package your app. Once that is done, you can send this packaged app to anyone and they can run it on their system with no problems. Let’s start with the project structure. You will have to keep Dockerfile at the root of your project. A basic project will look as follows - - app.py - Dockerfile - requirements.txt - some_app_folder/ - some_file - some_file Dockerfile starts with a base image that decides on which image your app should be built upon. Basically “Images” are nothing but apps. So for example you want your run your application in Ubuntu 14.04 VM, you use ubuntu:14.04 as the base image. FROM ubuntu:14.04 MAINTAINER Your Name <your@email.com> These are usually the first two lines of a Dockerfile and they specify the base image and Dockerfile maintainer respectively. You can look into Docker Hub for more base images. Now that we have started our Dockerfile, it’s time to do something. Now think, if you are trying to run your app on a new system of Ubuntu, what will be the first step you will do… You update the package lists. RUN apt-get update You may possibly want to update the packages too. RUN apt-get update RUN apt-get upgrade -y Let’s explain what’s happening. RUN is a Docker command which instructs to run something on the shell. Here we are running apt-get update followed by apt-get upgrade -y on the shell. There is no need for sudo as Docker already runs commands with root user previledges. The next thing you will want to do now is to put your application inside the container (your Ubuntu VM). COPY command is just for that. RUN mkdir -p /myapp WORKDIR /myapp COPY . . Right now we were at the root of the ubuntu instance i.e. in parallel with /var, /home, /root etc. You surely don’t want to copy your files there. So we create a ‘myapp’ directory and set it as WORKDIR (project’s directory). From now on, all commands will run inside it. Now that copying the app has been done, you may want…

Continue ReadingWriting your first Dockerfile

PayPal Express Checkout in Python

As per the PayPal documentation ... Express Checkout is a fast, easy way for buyers to pay with PayPal. Express Checkout eliminates one of the major causes of checkout abandonment by giving buyers all the transaction details at once, including order details, shipping options, insurance choices, and tax totals. The basic steps for using express checkout to receive one-time payments are: Getting the PayPal API credentials. Making a request to the API with the transaction details to get a token Using the token to send the users to the PayPal payment page Capturing the payment and charging the user after the user completes the payment at PayPal. We will be using PayPal's Classic NVP (Name-value pair) API for implementing this. Getting PayPal API Credentials To begin with, we'll need API Credentials. We'll be using the Signature API credentials which consists of API Username API Password Signature To obtain these, you can follow the steps at Creating and managing NVP/SOAP API credentials - PayPal Developer. You'll be getting two sets of credentials. Sandbox and Live. We'll just stick to the Sandbox for now. Now, we need sandbox test accounts for making and receiving payments. Head over to Creating Sandbox Test Accounts - PayPal Developer and create two sandbox test accounts. One would be the facilitator and one would be the buyer. PayPal NVP Servers All the API actions will take place by making a request to the PayPal server. PayPal has 4 different NVP servers for 4 different purposes. https://api-3t.sandbox.paypal.com/nvp - Sandbox "testing" server for use with API signature credentials. https://api-3t.paypal.com/nvp- PayPal "live" production server for use with API signature credentials. https://api.sandbox.paypal.com/nvp - Sandbox "testing" server for use with API certificate credentials. https://api.paypal.com/nvp - PayPal "live" production server for use with API certificate credentials. We'll be using the Sandbox "testing" server for use with API signature credentials. Creating a transaction and obtaining the token To create a transaction, we'll need to make a request with all the transaction details. We can use Python requests library to easily make the requests. All requests are POST. We'll be calling the SetExpressCheckout method of the NVP API to obtain the token. import requests import urlparse data = { 'USER': credentials['USER'], 'PWD': credentials['PWD'], 'SIGNATURE': credentials['SIGNATURE'], 'SUBJECT': credentials['FACILITATOR_EMAIL'], 'METHOD': 'SetExpressCheckout', 'VERSION': 93, 'PAYMENTREQUEST_0_PAYMENTACTION': 'SALE', 'PAYMENTREQUEST_0_AMT': 100, 'PAYMENTREQUEST_0_CURRENCYCODE': 'USD', 'RETURNURL': 'http://localhost:5000/paypal/return/', 'CANCELURL': 'http://localhost:5000/paypal/cancel/' } response = requests.post('https://api-3t.sandbox.paypal.com/nvp', data=data) token = dict(urlparse.parse_qsl(response.text))['TOKEN'] Here, USER represents your Sandbox API Username. PWD represents your Sanbox API Password. SIGNATURE represents your Sandbox Signature. SUBJECT represents the facilitator's email ID. PAYMENTREQUEST_0_AMT is the total transaction amount. PAYMENTREQUEST_0_CURRENCYCODE is the 3 digit ISO 4217 Currency code. RETURNURL is where the user will be sent to after the transaction CANCELURL is where the user will be sent to if he/she cancels the transaction. A URL-Encoded, Name-value pair response would be obtained. We can decode that into a dict by using Python's urlparse modules. From the response, we're extracting the TOKEN which we will use to generate the payment URL for the user. This token…

Continue ReadingPayPal Express Checkout in Python

Integrating Stripe in the Flask web framework

{ Repost from my personal blog @ https://blog.codezero.xyz/integrating-stripe-in-flask } Stripe is a developer and a user-friendly payment infrastructure provider. Stripe provides easy to use SDKs in different programming languages allowing us to easily collect payments on our website or mobile application. Flask is a web microframework for Python based on Werkzeug, Jinja 2. Flask makes building web applications in python a breeze. Make sure you have your Flask app ready. Let's start with installing the required dependency. The Stripe python SDK. You can get it by running. pip install stripe Don't forget to add the same in your requirements.txt. (if you have one that is.) Now, head over to Stripe: Register and create a new Stripe account to get your test keys. If you don't wish to create an account at this time, you can use the following test keys, but you'll not be able to see the payments in the stripe dashboard. Publishable Key: pk_test_6pRNASCoBOKtIshFeQd4XMUh Secret Key: sk_test_BQokikJOvBiI2HlWgH4olfQ2 We'll need to set the secret key in the SDK. import stripe STRIPE_PUBLISHABLE_KEY = 'pk_test_6pRNASCoBOKtIshFeQd4XMUh' STRIPE_SECRET_KEY = 'sk_test_BQokikJOvBiI2HlWgH4olfQ2' stripe.api_key = STRIPE_SECRET_KEY Let's create a page with a form for us to handle the Stripe payment. <!DOCTYPE html> <html> <head> <title>Pay now</title> </head> <body> <h4>Pay $250.00 by clicking on the button below.</h4> <form action="/payment" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh" data-description="A payment for the Hello World project" data-name="HelloWorld.com" data-image="/images/logo/hw_project.png" data-amount="25000"></script> </form> </body> </html> We're using Stripe's Checkout library to get the payment details from the user and process. Also, keep in mind that the checkout library has to be loaded directly from https://checkout.stripe.com/checkout.js. Downloading it and serving locally will not work. The script tag, accepts a lot of parameters. A few important ones are, data-key - The Publishable Key. data-amount - The amount to be charged to the user in the lowest denomination of the currency. (For example, 5 USD should be represented as 500 cents) data-name - The name of your site or company that will be displayed to the user. data-image - The path to an image file (maybe a logo) that you'd like to be displayed to the user. More configuration options can be seen at Stripe: Detailed Checkout Guide. This script would automatically create a Pay with Card button which would open the stripe Checkout lightbox when clicked by the user. Once the payment process is completed the following parameters are submitted to the form's action endpoint (the form inside which this script is located), along with any other elements that were in the form. stripeToken - The ID of the token representing the payment details stripeEmail - The email address the user entered during the Checkout process Along with the Billing address details and Shipping address details if applicable and enabled We'll need to write a Flask method to handle the input that were submitted by Stripe to proceed with the transaction and charge the user. Let's add a new Flask route to respond when submitting the form. @app.route('/payment', methods=['POST']) def payment_proceed(): # Amount in cents amount = 25000…

Continue ReadingIntegrating Stripe in the Flask web framework

Creating an API in PHP

One of the key components of my GSoC Project was to have a POST API for the Android App generator. This was required so that the app generator could be plugged into the server and can be called directly instead of someone manually visiting the webpage and entering his/her details. It takes in a JSON input and compiles and emails the app to the organizer based on his email address in the input JSON. The input to the API will look something like this : { “email”: “harshithdwivedi@gmail.com”, “app_name”: “MyApp”, “endpoint”: “https://open-event-dev.herokuapp.com/api/v2" } Once the data is sent, on the server I have a php file which intercepts the requests and performs an action based on the request. <?php function sendResponse($data) { header('Content-type: application/json'); echo json_encode($data); die(); } /* If the request isn't a POST request then send an error message*/ if ($_SERVER['REQUEST_METHOD'] != 'POST') { sendResponse([ "status"=>"error", "code"=>405, "message"=>"Method Not Allowed", ]); } /* Store the input received in a variable named body */ $body = json_decode(file_get_contents('php://input'), true); /* If the user is nissing any important input parameters, don't process the request */ if (!array_key_exists('email', $body) || !array_key_exists('app_name', $body) || !array_key_exists('endpoint', $body)) { sendResponse([ "status"=>"error", "code"=>422, "message"=>"Unprocessable entity", ]); } $uid = mt_rand(1000,9999). "_" .time(); //A random User ID /* Extracting variables from the body */ $email = escapeshellcmd($body['email']); $appName = escapeshellcmd($body["app_name"]); $endpoint = escapeshellcmd($body["endpoint"]); /* Run a script based on the input parameters */ exec("sudo python /var/www/html/api/appgenserver.py $email $appName $endpoint"); The code above is pretty much self explanatory. So basically, first we check for a valid request (GET/POST) and throw an error if it is invalid. Next up, for a valid request we store the body into a variable and then execute a followup script as per our needs using data from this response. This PHP file should be located in the public-html (/var/www/data) of the server so as to be accessible from outside of the server. You can test out this API by calling it directly by prepending the server’s ip address to the name of php file containing this code. Something like : domain-name.com/api/api.php You can also use Postman for Chrome or RESTClient for Firefox for making API calls easily. Well, that’s it then! You can easily modify the PHP code provided and modify it to suite your needs for making you own API. Let me know your thoughts and your queries in the “response” ;) below. Until next time.

Continue ReadingCreating an API in PHP