Paiza Engineering Blog

Engineering blog of browser-based web development environment PaizaCloud Cloud IDE ( https://paiza.cloud/ ), online compiler and editor Paiza.IO( https://paiza.IO/ )

Google Home Development Tutorial with Ruby, PaizaCloud

f:id:paiza:20180119011449j:plain
(Japanese article is here)

f:id:paiza:20151217152725j:plainHello, I'm Tsuneo(@).

Are you using smart speaker?

I just started using Google Home. At first, I thought I don't need such a device. But, once start using Google Home, I cannot go back the life without the Google Home.

With Google home, I don't need to pick up my mobile phone but I can just speak to use it without using hands. As the result of evolving machine learning and AI technology, I feel the speech recognition is practical level.

On a research, 18% of the adults in the US have a smart speaker, and 65% of that wouldn't go back to life without one. (Ref: National Public Media The Smart Audio Report from NPR and Edison Research).

And, we can write programs for the Google Home to extend and add features!

Google Home itself is quite useful, but by adding your own feature, it becomes more fun and useful!

As platform handle speech recognition, you can easily write code just by handling simple string.

Everyone can use the smart speaker just by voice. It is fun that your family, friends, or colleague can use your voice application right away.

But, creating and running the Google Home application requires installing and setting up the development environment, and a server to run the Google Home application. Those can be annoying when we just want to create a simple Google Home program.

So, here comes PaizaCloud Cloud IDE, a browser-based online web and application development environment.

As PaizaCloud have Google Home application development environment, you can just start coding for the Google Home application program in your browser.

And, as you can develop in the cloud, you can just run the Google Home application on the same machine without setting up another server and deploying to it.

Here, we develop a Google Home application reading tweets on Twitter using Ruby on the PaizaCloud Cloud IDE.

Following the instruction below, you'll create and run the Google Home application just in 10 minutes.

Getting started with PaizaCloud Cloud IDE

Let's start!

Here is the website of PaizaCloud Cloud IDE.

https://paiza.cloud/

Just sign up with email and click a link in the confirmation email. You can also sign up with GitHub or Google.

Create new server

Let's create a new server for the development workspace.

f:id:paiza:20171214154558p:plain

Click "new server" to open a dialog to set up the server. Just click "New Server" button in the dialog without any settings.

f:id:paiza:20171219143410p:plain

Just in 3 seconds, you'll get a browser-based online development environment for creating Google Home application using Ruby.

f:id:paiza:20180116171931p:plain

Create Google Assistant application

We can add features to Google Home by creating a Google Assistant application.

The Google Assistant application can be built on a web site called Actions on Google.

Open the Actions on Google page below:

https://console.actions.google.com/

f:id:paiza:20180119104802p:plain

Click "Add/import project" button.

f:id:paiza:20180119104824p:plain

As "Add project" dialog box is shown, input your project name and the country name. Here, we input "MyTweet" to the project name, and set country to "Japan". Then, click "CREATE PROJECT" button.

f:id:paiza:20180119105027p:plain

A project is created on the Actions on Google. To build speech application for the project, we use Dialogflow.

Click "BUILD" button on "Dialogflow".

f:id:paiza:20180119105054p:plain f:id:paiza:20180119105155p:plain Click "CREATE ACTIONS ON DIALOGFLOW" button to create a Dialogflow action.

If you are required to login or authenticate, login to the service.

f:id:paiza:20180119105117p:plain

Switch "DEFAULT LANGUAGE" to your language(Ex: Japanese), and click "CREATE" button.

f:id:paiza:20180119105330p:plain

An agent for the conversation application is created on the Dialogflow.

The first conversation

At first, let the Google assistant application say something!

On Dialogflow menu, click "Intents".

f:id:paiza:20180131174517p:plain

Click "Default Welcome Intent", which is the place to write action just after the application starts.

Go "Response" section. "Text response" is the place to set what the application says. Click trash icon to remove the default message. Click "ADD MESSAGE CONTENT" button and choose "Text response" to add a message. Here, we set the message to "Welcome to My Twitter".

Then, click "SAVE" button on the top of the page to save the configuration.

f:id:paiza:20180131174714p:plain

Next, we set up Google Assistant application on Actions on Google.

Open https://console.actions.google.com/ , and click the project we created(My Twitter).

f:id:paiza:20180119110016p:plain

We set up the application on "Overview" page. While we need to set up correctly when we publish the application. For now, we just need to put something on the all required fields.

Go "App information" and click "EDIT".

To change the language, you can click "Add Language" to choose the language(Ex: "Japanese").

f:id:paiza:20180119110125p:plain

Set the application name and the pronunciation for that. Here, we can set "My Twitter" to both application name and pronunciation field, and click "NEXT" button.

As we launch the application by talking "OK Google, talk to My Twitter", you need to set the name easy to pronounce.

f:id:paiza:20180131174912p:plain

On "Details" section, set "Assistant app introduction"、"Short description"、"Full description". We can set like "Read tweets on Twitter". Then, click "NEXT" button.

f:id:paiza:20180131175115p:plain

On "Images" section, set the application images. For now, we can set any image files as placeholders.

f:id:paiza:20180119110752p:plain

On "Contact details" section, set your e-mail address.

f:id:paiza:20180119110821p:plain

On "Privacy and consent" section, set the application's privacy policy("Privacy Policy"). you can set something like "https://privaci.policy/" as a placeholder for now.

f:id:paiza:20180119110834p:plain

On "Additional Information", choose the category(Category) for your application. Set "Social & comminication", and click "Save" button.

f:id:paiza:20180119110924p:plain

After setting up everything for the application, click "TEST DRAFT" button. The actions Simulator launches.

f:id:paiza:20180131175612p:plain

Let's type "Talk to My Twitter".

f:id:paiza:20180131175810p:plain

A message "Welcome to My Twitter" we set was written, and was speeched.

Now, we can use the application from your Google Home. Let's talk to your Google Home like "OK Google, talk to My Twitter".

Now, Google Home says the response message!

Call conversation program

Next, let's the application read tweets from Twitter.

Open Dialogflow console( https://console.dialogflow.com/ ).

To call external service from Dialogflow, we use Fulfillment.

On menu, choose Fulfillment.

f:id:paiza:20180119111425p:plain

Now, we set the URL of the external service to the URL field. The service runs on PaizaCloud have hostname "[SERVER-NAME".paiza-user.cloud".

On PaizaCloud, the server name is "[SERVER NAME].paiza-user.cloud". The port number of "Sinatra" application we'll create is "4567". As you can automatically use HTTPS instead of HTTP on PaizaCloud, the protocol of the URL is HTTP. And, we'll use path name '/webhook' .

So, the URL is " https://[SERVER-NAME].paiza-user.cloud:4567/webhook "(Replace "[SERVER-NAME]" to your server name on PaizaCloud).

f:id:paiza:20180119111600p:plain

Click "SAVE" button to save the settings.

Next, on the menu, choose "Intents", and "Default Welcome Intent". Now, we can see "Fulfillment" section, so click the "Fullfillment" to open, and click "User webhook". Now, when the application launch, the Google Home application connect to the server running on the PaizaCloud.

f:id:paiza:20180119111642p:plain

Create server program

Now, we create a program on PaizaCloud. Here, we use Ruby and Sinatra to create the server.

On PaizaCloud, you can create and edit the file in the browser. On PaizaCloud, click "New File" button at the left-side of the page.

f:id:paiza:20171219143513p:plain

As a dialog box to put filename is shown, type a filename "server.rb" and click "Create" button.

f:id:paiza:20180131175926p:plain

The file is created!

Let's write a simple application just return the fixed message. Write a Ruby program like below.

server.rb:

require 'sinatra'
require 'sinatra/reloader'
require 'sinatra/json'

post '/webhook' do
  return json({
      speech: "Here is the server program."
  });
end

get '/' do
  return "Hello World"
end

f:id:paiza:20180131180151p:plain

Then, click "Save" button to save the file.

Let's see the code. On "post /webhook'" block, we write the action for POST "/webhook" request. The return value for the block will be the HTTP response.

As Dialogflow's Fulfillment Webhook requires the response message on JSON format, we use json() method here.

"speech" field of the return object is the message the application speech. Here, we set the fixed message "Here is the server program.".

Also, to test the program, we write the action for GET '/' request to "get '/'" block. Here, we just return a text "Hello World".

Then, let's run the Slack bot program we created. To run the program, run a command "ruby ./server.rb -o 0". As Sinatra listen only on localhost and does not accept connection from out of the server by default, we add "-o 0"(or, "-o 0.0.0.0") option to listen on the global address to accept connection from the clients.

On PaizaCloud, you can use a Terminal application in the browser to run the command.

Click "Terminal" button at the left side of the PaizaCloud page.

f:id:paiza:20171214154805p:plain

The Terminal launched. Type the command "ruby ./server.rb -o 0", and type enter key.

$ ruby ./server.rb -o 0

f:id:paiza:20180115171054p:plain

The command started. The text "tcp://0:4567" means that the server is running on port 4567.

Now, you see a button with a label "4567" at the left-side of the PaizaCloud page.

f:id:paiza:20180115171204p:plain

Sinatra listens on port 4567. PaizaCloud detects the port number 4567, and add the button for the port 4567 to launch browser automatically.

By clicking the button, browser(a browser on PaizaCloud) launch and you see the message from the server "Hello World".

f:id:paiza:20180115171236p:plain

Now, let's test the program.

On Dialogflow, see the right side of the page and click "See how it works in Google Assistant." to run the action Simulator. (Or, on "Actions on Google" project menu, click "Simulator")

f:id:paiza:20180119112015p:plain

Type "talk to My Twitter". The message "Here is the server program." was written. We got the response message from the Ruby server program we just created!

Now, let's talk to Google Home.

Say "talk to My Twitter" to the Google Home.

f:id:paiza:20180131181225p:plain

The Google Home says "Here is the server program"! Yeah, it just works!

Retrieving tweets on Twitter

Then, let's the application read tweets on Twitter.

To read tweets from Twitter on the program, we need Twitter API key. Create the Twitter API key following the article below.

http://paiza.hatenablog.com/entry/paizacloud_twitter_bot_ruby/2018/01/10#twitter_apikey

Then, create a configuration file(twitter-config.rb) on PaizaCloud, and set API keys like below.

Here, replace YOUR_CONSUMER_KEY / YOUR_CONSUMER_SECRET / YOUR_ACCESS_TOKEN / YOUR_ACCESS_SECRET to your application's API key you just created.

twitter-config.rb:

require 'twitter'

config = {
    consumer_key: "YOUR_CONSUMER_KEY",
    consumer_secret: "YOUR_CONSUMER_SECRET",
    access_token: "YOUR_ACCESS_TOKEN",
    access_token_secret: "YOUR_ACCESS_SECRET",
}

$twitterRestClient = Twitter::REST::Client.new(config)
$twitterStreamingClient = Twitter::Streaming::Client.new(config)

Then, change the server program to read tweets.

server.rb:

require 'sinatra'
require 'sinatra/reloader'
require 'sinatra/json'
require './config'

post '/webhook' do
  tweets = $restClient.home_timeline
  text = tweets[0].text
  return json({
      speech: "Reading the latest tweets using API." + text
  });
end

get '/' do
  return "Hello World"
end

Let's test the application.

On Dialogflow, see the right side of the page and click "See how it works in Google Assistant." to run the action Simulator. (Or, on "Actions on Google" project menu, click "Simulator")

Let's type "talk to My Twitter".

You got the latest tweet message!

Then, let's talk to Google Home.

Say "OK Google, talk to My Twitter".

Google Home read the latest tweet on Twitter!

Search tweet on Twitter

Next, let's add a feature to search a tweet from Twitter.

Let's make the application response to the message "search xxx".

Open Dialogflow( https://console.dialogflow.com/ ). On the menu, choose "Intents" and click "CREATE INTENT" button to show the page to create the Intent.

Set expected user's voice to "User says" field.

At first, type "Search foo".

f:id:paiza:20180131180338p:plain

As the part of "foo" is not fixed, set the part as a parameter. Choose the area "foo" and click it. As the list is shown, choose "@sys.any".

f:id:paiza:20180131180502p:plain

Set "keyword" to "PARAMETER NAME". Now, the part of "foo" can be anything and can be referred as "keyword" parameter of the message.

f:id:paiza:20180131180642p:plain

As the parameter is required, check "REQUIRED" checkbox. To set the message for the case user's message doesn't containers the parameter, click "Define prompts...".

f:id:paiza:20180131180759p:plain Here, we set "Set search keyword like: search whatever".

f:id:paiza:20180131180827p:plain As we use the server program on PaizaCloud, click "Fulfillment", and check "Use Fulfillment", and check "Use webhook".

f:id:paiza:20180119111642p:plain

Click "SAVE" button to save the settings.

Change the Ruby server program("server.rb") like below:

server.rb:

require 'sinatra'
require 'sinatra/reloader'
require 'sinatra/json'
require './config'

post '/webhook' do
    obj = JSON.parse(request.body.read)
    keyword = obj['result']['parameters']['keyword']
    puts "keyword=#{keyword}"
    if ! keyword
        tweets = $twitterRestClient.home_timeline
        text = tweets[0].text
        return json({
            speech: "I'm reading the latest tweet on Twitter. " + text
        });
    else
        tweets = $twitterRestClient.search(keyword).take(5)
        if tweets[0]
            text = tweets[0].text
            return json({
                speech: "I'm reading a tweet of the search result for keyword #{keyword}." + text
            });
        else
            return json({
                speech: "I cannot find any tweet for keyword #{keyword}."
            });
        end
            
    end
end

get '/' do
  return "Hello World"
end

Let's see the code. For the user's message "Search for xxx", the keyword part "xxx" is passed to the program as HTTP request body as JSON format. So, convert it to the object using JSON.parse(). As the parameters are passed as "result", "parameters" field, we get the "keyword" parameter from it.

Let's test the program.

On Dialogflow, see the right side of the page, and click "See how it works in Google Assistant." to start action Simulator(Or, on "Actions on Google" project menu, click "Simulator".)

Type "talk to My Twitter". Then input "search by ...".

We got the search result!

Next, let's talks to the Google Home.

Say "OK Google, talk to My Twitter", the say "search by ...".

Google Home says the Twitter search result! It's succeeded!

Now, we created the Google Home application to speech tweets on Twitter!

Note that on PaizaCloud free plan, the server will be suspended. To run the bot continuously, please upgrade to the BASIC plan.

Summary

We created a Google Home application on PaizaCloud using Ruby, and run it on the same environment.

We can create Google Home application without implementing speech recognition. It is fascinating that everyone can easily use the voice application. It is quite fun to create the application thinking what to response to the user's message. Now, it is the time to create your own application!

 


With「PaizaCloud Cloud IDE」, you can flexibly and easily develop your web application or server application, and publish it, just in your browser. https://paiza.cloud


Create and Run Slack bot with Ruby on PaizaCloud Cloud IDE

f:id:paiza:20180115170315p:plain
(Japanese article is here)

f:id:paiza:20151217152725j:plainHello I'm Tsuneo(@).

Now, Slack is one of the most major communication tools. And, by creating a Slack bot program, the bot program can communicate with people using text message.

As Slack bot program only handle text messages, it is easy to write code for the Slack bot program. And, as people can easily use the Slack bot just by sending text messages, the bot developer can easily get feedback from the user and it motivates us to improve the Slack bot. So, for the programming beginner, developing Slack bot will be the good practice.

But, creating and running the Slack bot requires installing and setting up the development environment, and a server to run the Slack bot. Those can be annoying when we just want to create a simple Slack bot program.

So, here comes PaizaCloud Cloud IDE, a browser-based online web and application development environment.

As PaizaCloud have Slack bot development environment, you can just start coding for the Slack bot program in your browser.

And, as you can develop in the cloud, you can just run the Slack bot on the same machine without setting up another server and deploying to it.

Here, we develop a Slack bot using Ruby on the PaizaCloud Cloud IDE.

Following the instruction below, you'll create and run the Slack bot just in 5 minutes.

Getting started with PaizaCloud Cloud IDE

Let's start!

Here is the website of PaizaCloud Cloud IDE.

https://paiza.cloud/

Just sign up with email and click a link in the confirmation email. You can also sign up with GitHub or Google.

Create new server

Let's create a new server for the development workspace.

f:id:paiza:20171214154558p:plain

Click "new server" to open a dialog to set up the server. Just click "New Server" button in the dialog without any settings.

f:id:paiza:20171219143410p:plain

Just in 3 seconds, you'll get a browser-based online development environment for creating Slack bot using Ruby.

f:id:paiza:20180116171931p:plain

Create Slack application

We need to create a Slack application to run a Slack bot. So, let's create the Slack application.

Open the Slack application page below.

https://api.slack.com/apps

f:id:paiza:20180115170344p:plain

If you have not signed up, click a "sign in to your Slack account" link, and open "https://api.slack.com/apps", again.

f:id:paiza:20180115170402p:plain

You'll see the list of application. To create an application, click "Create New App" button.

f:id:paiza:20180115170417p:plain

You'll see a dialog box to create the Slack application. Put your application name and select your Slack workspace. Here, we set the application name "MyBot" as an example. And, click a "Create App" button to create the application.

Now, the Slack application is created, you'll see the Slack application page below.

f:id:paiza:20180115170432p:plain

Create Slack command

At first, let's create a Slack command. Slack command is a command text begin with a slash('/'). For example, if you type a Slack command "/who" in the channel, you'll see the list of users in the channel.

Here, we create a Slack command "/time" to display the date and time.

On application page, in the "Add features and functionality", click "Slash Commands".

f:id:paiza:20180115170456p:plain

Click "Create New Command" button.

f:id:paiza:20180115170919p:plain

As a command creation page is shown, put a command name "/time" to the "Command" field.

Put a URL for the server program we will create on PaizaCloud to the "Request URL" field.

On PaizaCloud, the server name is "[SERVER NAME].paiza-user.cloud". The port number of "Sinatra" application we'll create is "4567". As you can automatically use HTTPS instead of HTTP on PaizaCloud, the protocol of the URL is HTTP.

So, the URL is " https://[SERVER-NAME].paiza-user.cloud:4567/ "(Replace "[SERVER-NAME]" to your server name on PaizaCloud).

Put the description of your bot to "Short Description" field, and put your command's usage to "Usage Hint" field.

Then, click "Save" button to save the settings.

Now, you have created the Slack command. You'll see the list of commands like below.

f:id:paiza:20180115170938p:plain

Then, to use the Slack application, install the Slack application to your Slack workspace.

Select "Install App" from the menu. On the installation page, click "Install App to Workspace" button.

f:id:paiza:20180115173815p:plain

You see the authorization page. Click "Authorize" button to authorize the Slack application.

f:id:paiza:20180115173829p:plain

Now, create a Ruby program to run when the Slack command is sent.

On PaizaCloud, you can create and edit the file in the browser. On PaizaCloud, click "New File" button at the left-side of the page.

f:id:paiza:20171219143513p:plain

As a dialog box to put filename is shown, type a filename "command.rb" and click "Create" button.

f:id:paiza:20180116172115p:plain The file is created!

Let's write a simple Slack command program using Ruby and Sinatra. Write a program like below.

command.rb:

require 'sinatra'
require 'sinatra/reloader'
require 'sinatra/json'

post '/slack/command' do
    text = params['text']
    return json({
        text: "The command succeeded! The command parameter is #{text}.",
        response_type: 'in_channel',
    })
end

get '/' do
  return "Hello World"
end

f:id:paiza:20180116172209p:plain Click "Save" button to save the file.

Let's see the program. The "post '/slack/command'" block define an action for POST "/slack command" requests. You see the request parameter as "params". For the Slack command message, you can get the parameter text following the command by "params['text']".

The object returned in the block will be the response to the request. Put reply message to "text" field, and put 'in_channel' to the "response_type" field to show the message to not only you but also the members of the channel.

Here, we set the reply message to "The command succeeded! The command parameter is #{text}".("#{text}" is the command message's parameter text). Add an action to GET '/' request to check that the service is running.

Then, let's run the Slack bot program we created. To run the program, run a command "ruby ./command.rb -o 0". As Sinatra listen only on localhost and does not accept connection from out of the server by default, we add "-o 0"(or, "-o 0.0.0.0") option to listen on the global address to accept connection from the clients.

On PaizaCloud, you can use a Terminal application in the browser to run the command.

Click "Terminal" button at the left side of the PaizaCloud page.

f:id:paiza:20171214154805p:plain

The Terminal launched. Type the command "ruby ./command.rb -o 0", and type enter key.

$ ruby ./command.rb -o 0

f:id:paiza:20180115171054p:plain

The command started. The text "tcp://0:4567" means that the server running on port 4567.

Now, you see a button with a label "4567" at the left-side of the PaizaCloud page.

f:id:paiza:20180115171204p:plain

Sinatra listens on port 4567. PaizaCloud detects the port number 4567, and add the button for the port 4567 to launch browser automatically.

By clicking the button, browser(a browser on PaizaCloud) launch and you see the message from the server "Hello World".

f:id:paiza:20180115171236p:plain

Then, let's send a Slack command. Type "/time TestTest" message on the Slack.

f:id:paiza:20180116172521p:plain

You got the response for the command! Slack command works!

Next, change the program to reply the date and time like below.

command.rb:

require 'sinatra'
require 'sinatra/reloader'
require 'sinatra/json'

ENV['TZ'] = 'JST-9'  # Timezone

post '/slack/command' do
    text = params['text']
    if text =~ /now/i
        now = Time.now
        responseText = "Now is #{now.hour}:#{now.min}:#{now.sec} ."
    elsif text =~ /today/i
        today = Time.now
        responseText = "Today is #{today.year}-#{today.month}-#{today.day} ."
    elsif text =~ /tomorrow/i
        tomorrow = Time.now + (60*60*24)
        responseText = "Tomorrow is #{today.year}-#{today.month}-#{today.day} ."
    else
        responseText = "Example: Now/Today/Tomorrow"
    end
    json({
        text: responseText,
        response_type: 'in_channel',
    })
end

get '/' do
  return "Hello World"
end

The code checks whether the message text contains strings(now/today/tomorrow) using regular expressions, and send reply message by returning a object with the replying text message.

Exit the command("ruby ./command.rb -o 0") by typing Ctrl-C, and re-run the command.

Let's see. Type the Slack commands like below on Slack.

/time What time is it now ?
/time What date is it today ?
/time How about tomorrow ?

You got the reply! You successfully created a Slack command to reply date and time.

f:id:paiza:20180116173615p:plain

Create Slack bot

While the program can answer for the Slack command, you need to send the specific Slack command as a message.

To make the bot program to handle other than Slack command, we can create Slack bot.

To create the Slack bot, go to Slack application page(https://api.slack.com/apps), and choose the Slack application, and choose "Basic information" from the menu.

f:id:paiza:20180115174145p:plain

Click "Add features and functionality", and choose "Bots" from the list.

f:id:paiza:20180115172052p:plain

On the Bot User creation page, click "Add Bot User" button.

f:id:paiza:20180115172103p:plain

If permission changing is requested, click "Click Here" link, and on the next page, click "Authorize" button to allow changing the permission.

f:id:paiza:20180115172119p:plain f:id:paiza:20180115172129p:plain

To create a Slack bot, we need Bot User OAuth Access Token.

On application page menu, click "Auth & Permission" on "Features", and notes the "Bot User OAuth Access Token" string begin with "xoxb-".

f:id:paiza:20180115172349p:plain

Now, let's write a Slack bot program in Ruby.

Slack bot requires WebSocket. So, we use a Ruby gem library called "faye-websocket". Run the command below to install the "faye-websocket" Ruby gem.

$ sudo gem install faye-websocket

f:id:paiza:20180115172448p:plain

Create a file "bot.rb", and write Ruby code like below. The program reply date and time, as the Slack command we just created.

Here, replace "OAUTH-TOKEN" to the "Bot User OAuth Access Token" string that begins with "xoxb-".

bot.rb:

require 'http'
require 'json'
require 'eventmachine'
require 'faye/websocket'

TOKEN='***OAUTH-TOKEN***'

ENV['TZ'] = 'JST-9' # Timezone

response = HTTP.get("https://slack.com/api/rtm.connect", params: {token: TOKEN})
resposeObj = JSON.parse(response.body)

url = resposeObj['url']

EM.run do
  puts "Connecting to #{url}..."
  ws = Faye::WebSocket::Client.new(url)

  ws.on :open do |event|
    p [:open]
  end

  ws.on :message do |event|
    msg = JSON.parse(event.data)
    p [:message, JSON.parse(event.data)]
    
    if msg["type"] != 'message'
        next
    end
    text = msg["text"]

    if text =~ /now/i
        now = Time.now
        responseText = "Now is #{now.hour}:#{now.min}:#{now.sec} ."
    elsif text =~ /today/i
        today = Time.now
        responseText = "Today is #{today.year}-#{today.month}-#{today.day} ."
    elsif text =~ /tomorrow/i
        tomorrow = Time.now + (60*60*24)
        responseText = "Tomorrow is #{tomorrow.year}-#{tomorrow.month}-#{tomorrow.day} ."
    end
    
    reply = {
        type: 'message',
        text: responseText,
        channel: msg['channel'],
    }
    puts "Replying: #{reply}"
    ws.send(reply.to_json)
  end

  ws.on :close do |event|
    p [:close, event.code, event.reason]
    ws = nil
    EM.stop
  end

end

Let's see the code. It accesses to "https://slack.com/api/rtm.connect" with the TOKEN parameter to retrieve WebSocket URL, and assign the URL to "url" variable.

It connects to the WebSocket URL using eventmachine(EM) and faye-weboskcket(Faye::WebSocket::Client).

"ws.on :message" block handles WebSocket messages. We only handle the message with type 'message'. msg["text"] is the message text. It checks whether the message text contains strings(now/today/tomorrow) using regular expressions, and send reply message using "ws.send" method. On the "ws.send" parameter, set 'message' to the "type" field, message text to the "text" field, and the channel to response(here, the channel of the sent message) to the "channel" field.

Now, let's run the Slack bot! Run a command "ruby ./bot.rb" on the Terminal on PaizaCloud.

$ ruby ./bot.rb

As the Slack bot can only read message on the channel it joined, invite the bot user to the channel.

Now, let's send the message !

f:id:paiza:20180116174406p:plain

Yay! We got the message from the Slack bot we created!

We successfully create the Slack bot using Ruby on PaizaCloud!

Note that on PaizaCloud free plan, the server will be suspended. To run the bot continuously, please upgrade to the BASIC plan.

Summary

We created and ran a Slack bot using Ruby on PaizaCloud. It is quite simple to create and run the Slack bot. It is fun to think how the Slack bot works, and improve the bot. Now, let's create your own Slack bot on PaizaCloud!


With「PaizaCloud Cloud IDE」, you can flexibly and easily develop your web application or server application, and publish it, just in your browser. https://paiza.cloud


Creating Twitter bot with Ruby on PaizaCloud without setting up server

f:id:paiza:20180110115336p:plain
(Japanese article is here)

f:id:paiza:20151217152725j:plainHello, I'm Tsuneo(@).

When we learned programming, we'll want to build some product and release it! It is actually the best way to learn coding, and feedback from others motivate us.

In the sense, building Twitter bot is the best fit.

Writing Twitter bot program is relatively easy as it only needs to handle text. And, everyone in the world can easily use your Twitter bot.

While it is easy to write code, setting up the development environment or the server environment can be hard.

So, here, we use PaizaCloud.

PaizaCloud is a browser-based development environment. We no longer need to install and set up the development environment. With PaizaCloud, we can just start Twitter bot development in your browser right now.

Here, we'll create a Twitter bot with Ruby on the PaizaCloud.

Following the instruction, you'll create and run your Twitter bot in about 5 minutes.

Getting started with PaizaCloud Cloud IDE

Let's start!

Here is the websites of PaizaCloud Cloud IDE.

https://paiza.cloud/

Just sign up with email and click a link in the confirmation email. You can also sign up with GitHub or Google.

Create new server

Let's create a new server for the development workspace.

f:id:paiza:20171214154558p:plain

Click "new server" to open a dialog and set up the server. Just click "New Server" button in the dialog without any settings.

f:id:paiza:20171219143410p:plain

Just in 3 seconds, you'll get a browser-based development environment for the Twitter bot.

Creating Twitter API Key

You'll use Twitter API to use Twitter from programs like the Twitter bot. Twitter API requires API Key to be used. So, let's create the API Key.

To create the API key, you'll create an application on the Twitter application management web page.

After logging in the Twitter, open "Twitter Apps" page below.

apps.twitter.com

f:id:paiza:20180110102619p:plain

Then, click "Crete New App" button to create the Twitter application.

f:id:paiza:20180110102655p:plain f:id:paiza:20180110102712p:plain

Put the program name to "Name", program's description to "Description". And, put your web site to "Website", but if you don't have it, you can put placeholder like "https://example.com/".

Read and check the "Developer Agreement", then, click "Create your Twitter application" button to create the application.

If you have not registered your mobile phone number, you'll get following error message.

f:id:paiza:20180110102738p:plain

In this case, you can go to phone setting page ( https://twitter.com/settings/add_phone ), and add your phone number, then put the verification code sent by SMS.

f:id:paiza:20180110154229p:plain

Now, you have created the application.

Next, create the API Key for the application. Choose your application and select "Keys and Access Tokens" tab.

f:id:paiza:20180110104343p:plain f:id:paiza:20180110104354p:plain

If the "Access Level" is "Read-only", click "modify app permissions" link and change it to "Read and Write".

Next, you'll also need to change the Access Level of "Access Token" to Read-Write mode.

At "Application Actions", click "Regenerate Consumer Key and Secret" link, check that "Access level" in the "Your Access Token" is "Read-Write".

That's it for creating the API Key!

Now, you have 4 strings to access Twitter API, so note those.

  • Consumer Key (API Key)
  • Consumer Secret (API Secret)
  • Access Token
  • Access Token Secret

Writing code

Next, let's create your Twitter bot program.

At first, to set the API Key, create a file named "config.rb".

On PaizaCloud, you can create and edit the file in your browser.

On PaizaCloud, click "New File" at the left side of the page.

f:id:paiza:20171219143513p:plain

You'll see the dialog box, so put the filename "config.rb", and click the "Create" button.

f:id:paiza:20180110154442p:plain As you got "config.rb" file, let's write Twitter bot configuration for the API Key like below.

You need to replace "YOUR_CONSUMER_KEY" / "YOUR_CONSUMER_SECRET" / "YOUR_ACCESS_TOKEN" / "YOUR_ACCESS_SECRET" with your API Key you just created.

config.rb:

require 'twitter'

config = {
    consumer_key: "YOUR_CONSUMER_KEY",
    consumer_secret: "YOUR_CONSUMER_SECRET",
    access_token: "YOUR_ACCESS_TOKEN",
    access_token_secret: "YOUR_ACCESS_SECRET",
}

@restClient = Twitter::REST::Client.new(config)
@streamingClient = Twitter::Streaming::Client.new(config)

f:id:paiza:20180110154706p:plain

Then, click "Save" button to save the file. As you use "twitter" ruby gem to read or write tweets, write "require 'twitter'" to load the "twitter" gem. And, create objects with API Key to read-write the tweets.

As the "twitter" gem uses different classes for REST API and Streaming API, you'll create "Twitter::REST::Client", and "Twitter::Streaming::Client" object with API Key respectively.

Your first tweet

Now, let's tweet something.

We use "irb" command to use Ruby interactively.

On PaizaCloud, we can use "Terminal" in the browser to run commands.

At the left-side of the page, click "Terminal" button.

f:id:paiza:20171214154805p:plain

The Terminal application starts. Write command like "irb -r ./config.rb" and push Enter key.

$ irb -r ./config.rb

f:id:paiza:20180110105842p:plain

"irb" command starts. Now, let's tweet. You can use "@restClient.update" method to tweet.

@restClient.update("My tweet from Ruby on https://paiza.cloud/ !")

f:id:paiza:20180110162851p:plain

Open Twitter in your browser and see what happens.

You can see that you tweeted from Ruby on PaizaCloud!

f:id:paiza:20180110162942p:plain

Creating Bot

Now, let's create the Twitter bot response to the mention.

Here, we'll create a Bot answering current time, today's date, and tomorrow's date.

At the left-side of the page, click "New File" button to create a file "bot.rb".

Here replace "USERNAME" with your twitter username (without '@').

bot.rb:

require 'twitter'
require './config'

ENV['TZ'] = 'JST-9'
username = "USERNAME"

@streamingClient.user do |tweet|
    if tweet.class == Twitter::Tweet && tweet.text.include?("@#{username}") && !tweet.in_reply_to_status_id
        puts "Found tweet: #{tweet}"
        if tweet.text.downcase.include?("time")
            now = Time.now
            @restClient.update("@#{tweet.user.screen_name} Now is #{now.hour}:#{now.min}:#{now.sec}.", in_reply_to_status_id: tweet.id)
        end
        if tweet.text.downcase.include?("today")
            today = Time.now
            @restClient.update("@#{tweet.user.screen_name} Today is #{today.year}-#{today.month}-#{today.day}.", in_reply_to_status_id: tweet.id)
        end
        if tweet.text.downcase.include?("tomorrow")
            tomorrow = Time.now + (60*60*24)
            @restClient.update("@#{tweet.user.screen_name} Tomorrow is #{tomorrow.year}-#{tomorrow.month}-#{tomorrow.day}", in_reply_to_status_id: tweet.id)
        end
    end
end

We set TZ environment variable to set timezone. @streamClient.user monitor tweets. When it finds a tweet, the block will be executed with argument "tweet". To avoid response to the response, check that the tweet is not reply.

Then, see whether the tweet message contains "time", "today", or "tomorrow", and reply using "@restClient.update".

Run the Twitter bot

That's it!

On PaizaCloud Terminal, run the Twitter bot!

$ ruby bot.rb

f:id:paiza:20180110114713p:plain

Now, try to send mention on Twitter!

f:id:paiza:20180110163312p:plain

You got reply message! Now, the Twitter bot is done!

Note that on PaizaCloud free plan, the server will be suspended. To run the bot continuously, please upgrade to the BASIC plan.

Summary

We created a Twitter bot with Ruby on PaizaCloud.

A Twitter bot can be created with a short code, and can be changed easily. It is fun to create a bot thinking what to answer to users' tweet message. The bot created on PaizaCloud can run and publish right away. It is also fun to be used by friends or people around the world! Now, let's create your own Twitter bot!


With「PaizaCloud Cloud IDE」, you can flexibly and easily develop your web application or server application, and publish it, just in your browser. https://paiza.cloud


Jupyter Notebook online in 3 seconds with PaizaCloud Cloud IDE

f:id:paiza:20171227154920p:plain
(English article is here)

f:id:paiza:20151217152725j:plainHello I'm Tsuneo(@).

Python is one of the most popular programming languages for data processing, Web service, Web scraping, or creating bots. Nowadays, Python is getting more popular for machine learning and AI because it has great libraries for it.

But, Python alone does not have the graphical features like showing tables, graphs, or figures that is essential for analyzing data.

Here comes Jupyter Notebook.

With Jupyter Notebook, you can write Python code in your browser, and view the graphs or figures in it.

Also, Jupyter Notebook enables you to write documents using Markdown. So, you can put the program and document together, and even share it with others.

Yes, Jupyter Notebook is an all-in-one package to start Python programming.

But, to use Jupyter Notebook on your PC, you need to install Python, Jupyter Notebook, or libraries and set up those. Because each PC has a different OS, version, software, or configuration, installation often fails with errors, or may break other software environment.

If you have PCs at home and at your office, you may need to install it to both PCs, and you cannot share data with those PCs.

So, here, we use PaizaCloud .

PaizaCloud is a browser-based development environment. You no longer need to install and set up the development environment. You can casually just start Web or application development right now.

PaizaCloud have pre-installed Jupyter Notebook So, you can start Python programming, anywhere, anytime. Also, major libraries like NumPy, SciPy, Pandas, or Django are also installed.

As PaizaCloud have browser-based file management, text editor, terminal, and browser(browser-in-browser), you can easily combine Python with other tools or files.

As Jupyter Notebook runs in the cloud with PaizaCloud, you can also create the note on Windows or Mac, and view it on tablet like iPad.

As both Jupyter Notebook and PaizaCloud are for casual development, those are the best combination for Python development.

Now, let's start Python programming with Jupyter Notebook and PaizaCloud!

Getting started with PaizaCloud Cloud IDE

Let's start!

Here is the website of PaizaCloud Cloud IDE.

https://paiza.cloud/

Just sign up with email and click a link in the confirmation email. You can also sign up with GitHub or Google.

Create new server

Next, let's create a new server for the development workspace.

f:id:paiza:20171214154558p:plain

Click "new server" to open a dialog to set up the server.

Here, you can choose "Jupyter Notebook", and click "New Server" button.

f:id:paiza:20171228150413p:plain Just click "New Server" button in the dialog without any settings. s

f:id:paiza:20171229003417p:plain

Just in 3 seconds, you'll get a browser-based development environment.

Start Jupyter Notebook server

As you set "Jupyter Notebook" on the server creation, you already have Jupyter Notebook running!

f:id:paiza:20171227140611p:plain

You can also manually start Jupyter Notebook. Let's see.

At first, choose "Terminal" icon button and click it.

f:id:paiza:20171213234317p:plain

Terminal starts. Jupyter Notebook can start with a command "jupyter notebook". Type the command and push enter key.

$ jupyter notebook

f:id:paiza:20171227140023p:plain

The Jupyter Notebook server starts, and browser(in the browser) for the Jupyter Notebook automatically opens.

You'll also get a new button with text "8888" on the left side of the page.

Jupyter Notebook server runs on port 8888. PaizaCloud Cloud IDE detects the port number(3000), and automatically adds the button to open a browser for the port. You can also open the browser(in the browser) by clicking the button.

f:id:paiza:20171227140319p:plain

Using Jupyter Notebook

Jupyter Notebook manage Python program as "notebook"(The notebook has ".ipynb" file extension.)

Let's create a notebook. Click "New" button and choose "Python 3" on the menu.

f:id:paiza:20171227140418p:plain

The new notebook is created, and a new browser opens for the notebook.

f:id:paiza:20171227140737p:plain

You'll see a text box just right of a label "In [ ]: ". Here comes your Python code.

Now, let's print a string. Type "Hello " + "Paiza", and push "Run" button or Shift-Enter key to run the code.

'Hello ' + 'Paiza'

Jupyter notebook print the result string "Hello Paiza"!

f:id:paiza:20171227140822p:plain

Next, let's calculate.

2**10
2**100

You got the results!

f:id:paiza:20171227140920p:plain

Plot graph

Now, let's plot a graph. As PaizaCloud have a library "matplotlib" for plotting graph, or "NumPy" for data processing, you can just use it now.

Let's plot a sin function.

To show figures or graphs, add "%matplotlib inline" to show visuals inline. Use NumPy to create data points of sin function, and call "plot" function to plot the points.

%matplotlib inline
import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 10, 100)
y  = np.sin(x)
plt.plot(x, y)

You got the graph of sin function!

f:id:paiza:20171227141055p:plain

Let's plot a histogram. Here, we create a graph of normal distribution from random data. Create 10,000 random numbers using "randn" function, and plot them using "hist" function. "bins=100" means you have 100 boxes.

%matplotlib inline
from numpy.random import *
import matplotlib.pyplot as plt

R = randn(10000)
plt.hist(R, bins=100)
plt.show()

f:id:paiza:20171227141410p:plain

Now, you see a normal distribution like graph.

Try to change the number of random numbers, or the number of boxes.

Show image

You can create and show images. Use "imgshow" function to show the images.

Let's try!

%matplotlib inline
import pylab as plt
import numpy as np


Z=np.array(((1,2,3,4,5),(4,5,6,7,8),(7,8,9,10,11)))
im = plt.imshow(Z, cmap='hot')
plt.colorbar(im, orientation='horizontal')
plt.show()

(Ref :python - How can I display a np.array with pylab.imshow() - Stack Overflow)

You get a cool image!

f:id:paiza:20171227141540p:plain

Calculating Pi

Next, let's calculate Pi(the ratio of the circumference of a circle to its diameter) with Jupyter Notebook and PaizaCloud using Monte Carlo method. With Monte Carlo method, you'll create and put random points and calculate the number of points in the circle.

Here, create 1,000 points, and calculate the number of points in the circle. Also, make it visible by showing the points in the graph.

%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt

SAMPLES=1000

xs = np.random.rand(SAMPLES)
ys = np.random.rand(SAMPLES)

inner = 0
for i in range(SAMPLES):
    x = xs[i]
    y = ys[i]
    if x**2 + y**2 < 1:
        inner += 1
print(inner *4 / SAMPLES)   # 3.1x

c1 = plt.Circle((0, 0), radius=1, fc="None", ec="r", linewidth=3)
ax = plt.gca()
ax.add_patch(c1)

plt.axis("scaled")
plt.xlim(0, 1)
plt.ylim(0, 1)

plt.scatter(xs, ys, marker="x")
plt.show()

f:id:paiza:20171227141838p:plain

While it is not so accurate, you got Pi value, and the figure with points for the calculation! It is more easy to understand with figures.

While we put 1,000 points here, you can try to change the number of points by changing a line "SAMPLES=1000".

Show graph from CSV file

Next, let's plot the world population.

The CSV file of the population of countries is available as CSV file, so let's use it. We can use Pandas to load the CSV file. As the Pandas is pre-installed on PaizaCloud, you can try right now.

Read the CSF file using "pandas.read_csv" function, select records where "CountryCode" is "WLD" using Pandas, and plot it using "plot" function.

%matplotlib inline
import requests
url = 'https://datahub.io/core/population/r/population.csv'
response = requests.get(url)

with open('population.csv', 'wb') as csv_file:
    csv_file.write(response.content)

import pandas
population = pandas.read_csv('population.csv', index_col=2)

plot = population[population['Country Code'] == 'WLD'].plot(title='World Population', lw=2, colormap='jet', marker='.', markersize=10)
plot.set_xlabel("Year")
plot.set_ylabel("Population")

The saved CSV file is available in the file finder(on the left side of the page). You can download or open the file. Let's double-click the CSV file to open it with text editor.

f:id:paiza:20171229002927p:plain Here, we retrieve the CSV file using Python code, but you can use other tools like "wget" to download it. You can also save the data to file and reuse it, or process it with the other tools. Like this, PaizaCloud allows you to use not only Jupyter Notebook alone but also Linux Server features.

Japanese title in the graph

In the previous example, we saw the world population. Now, let's plot the population of a specific country like Japan.

Change the "Country Code" from "WLD"(World) to "JPN"(Japan).

As PaizaCloud has Japanese fonts installed, you can use Japanese titles for the graph.

%matplotlib inline
import requests
url = 'https://datahub.io/core/population/r/population.csv'
response = requests.get(url)

with open('population.csv', 'wb') as csv_file:
    csv_file.write(response.content)

import pandas
population = pandas.read_csv('population.csv', index_col=2)

plot = population[population['Country Code'] == 'JPN'].plot(title='日本の人口', lw=2, colormap='jet', marker='.', markersize=10)
plot.set_xlabel("年")
plot.set_ylabel("人口")

f:id:paiza:20171227142457p:plain

Let's change the country or area, and plot the population!

Scraping

Next, let's retrieve a HTML file and parse it.

Use "request.get" to retrieve the HTML file, then parse the HTML file to get an image url from the "img" tag using "lxml", and show the images using matplotlib.

With Jupyter Notebook, you can directly show the images.

%matplotlib inline
import requests, lxml.html, io
from PIL import Image
import matplotlib.pyplot as plt

res = requests.get("http://paiza.hatenablog.com/entry/paizacloud_sinatra/2017/12/19")
root = lxml.html.fromstring(res.text).getroottree()

for imgElement in root.xpath('//img')[0:10]:
    url = imgElement.attrib['src']
    res = requests.get(imgElement.attrib['src'])
    image = Image.open(io.BytesIO(res.content))
    plt.figure(figsize = (2,2))
    plt.imshow(image)

f:id:paiza:20171227142821p:plain

You got the images embedded in the blog.

Try to change the URL!

Summary

We make Python programs with Jupyter Notebook and PaizaCloud.

As we can see the result as figure or graph, it is easy to change program and see what's happens.

As the PaizaCloud server runs in the cloud without installation or setting up, you can just try it in any PC or in tablet.

It is convenience for data processing, scraping or machine learning. Let's try to write the code !


With「PaizaCloud Cloud IDE」, you can flexibly and easily develop your Web application or server application, and publish it, just in your browser. https://paiza.cloud


Advantages of Developing Apps with MEAN Stack

MEAN is a collection of JavaScript-based programs that includes MongoDB, Express.js, AngularJS, and Node.js. You can understand more by the acronym of these technologies. It offers a robust platform to develop hybrid apps in less time. This is latest JavaScript technology and helps developers develop the slimmest and fastest applications and websites, providing an efficient environment, designed from both front end and back end, appropriately synced, and stored in a database that ultimately improves the functionality of your website and app. A stack is an organizer to manage the various frameworks and tools needed during the development process.  If you want to succeed as a web developer, a MEAN stack course can help you and you will be able to develop JavaScript apps easily.

 

Features of MEAN Stack:

The complete code is available in JavaScript and therefore is considered the most preferred programming language from client to the server.

  • Great back up to the MVC (Model View Controller) architecture.
  • MEAN components are open source, so automatic updates add a value-added feature.
  • Easy, efficient & reliable
  • Fully customizable according to your requirement
  • Cost-effective

Here are the standard benefits of developing an app in MEAN STACK.

One Language Policy:

The main advantage of it is the complete code is written in JavaScript, from client to server. You may understand its importance by considering the LAMP stack, which has a code written using PHP on your server, query MySQL data using SQL and utilizing JavaScript on the client side. So you would have to manage all these languages simultaneously. This could prove difficult and expensive. On the other hand, the MEAN stack allows you to use an expert JavaScript developer (MEAN Stack Developer) in order to achieve the desired result.

 

Avoid Common SQL Issues

When working with RDBMS, most programmers have to deal with a variety of issues associated with SQL. MongoDB is a schemaless database designed as a NoSQL. It is also globally used as a document database. The performance-driven model offered by NoSQL allows MongoDB to manage the bulk of structured and unstructured data effectively. Moreover, MongoDB has various integrated features to solve various SQL related issues.

Deploy Applications in the Cloud

Now, most companies deploy websites in the cloud to gain flexibility and scalability while minimizing cost. Contrary to conventional RDBMS, MongoDB runs seamlessly on cloud platforms. Furthermore, web developers can use MongoDB Atlas to establish, scale and control their database deployments effectively in the cloud.

Flexibility:

Contrary to My-SQL, it does not compel you to integrate data into tables. If you want to put personal information, you just need to add the field to your form, turn it up with the help of data in JSON document & integrate it into MongoDB collection. Also, it provides full cluster support along with automatic replication. Web apps become easy to build, test, and host using the cloud infrastructure.

 

Faster Speed:

Node.js is scalable and faster because of its non-blocking architecture. Angular.js is an open-source client-side JavaScript framework that offers reusability, maintenance, and testability. One of the amazing things about this framework is its powerful directives that evolve into domain-specific language & offers great testability.

Isomorphic Coding:

An important feature of this infrastructure is that if you have written code in a particular framework and have wanted to place it in another one, you can shift it over easily, and it runs mostly in the same way. This feature of MEAN stack makes it stand out from the crowd in the field of program development.

No wonder, MEAN stack is a growing technology that is taking over the world of programming. It is simple and is likely to stay for long.  

Basic Acronym for MEAN is

 

MongoDB: It is free of cost and is a cross-platform database that developers use for JavaScript. It uses a JSON document addressing style that aids entire data representation. The prominent reason responsible for the selection of this technology is to bind us to fair single language (JavaScript) for the whole app development.

 

ExpressJS: It represents one of the most dynamic tools used for developing actual functioning mobile and web applications. It provides the negligible framework used for web development such as Node.js. It functions quite enormously and makes it possible to design an entire website simply using Node.js and Express.js. This combination empowers us to design even software on the server-side. It means Node.js becomes really vital and Express.js supports in publishing the app on web domain.

 

AngularJS: It is a front-end JS framework that expands HTML along with new characteristics. It is known globally and is used in creating client-side apps with integrated code, and data needed for User Interface. It is categorically ideal in the sense that it is easy to learn and can be used to develop Single Page Applications.

 

Node.js: It is an open source cross-platform that prevails on a larger scale. It operates JavaScript-based run-time framework specifically designed for Google Chrome’s JSV8 engine. It is used by developers globally as it offers a free platform that integrates with ExpressJS to cater to application development.

Now you see, there are several benefits to using and learning mean stack. Think about where you are headed as an IT professional and do your research about which program to learn next. Of course, we love Mean Stack and would scream from rooftops about their awesomeness. But don’t listen to us, look around you decide for yourself.

Author’s Bio: Danish Wadhwa is a strategic thinker and an IT Pro. With more than six years of experience in the digital marketing industry, he is more than a results-driven individual. He is well-versed in providing high-end technical support, optimizing sales and automating tools to stimulate productivity for businesses.


With「PaizaCloud Cloud IDE」, you can flexibly and easily develop your web application or server application, and publish it, just in your browser. https://paiza.cloud


Creating your PaizaCloud Cloud IDE Apps with HTML, JavaScript.

f:id:paiza:20171222165948p:plain
(Japanese article is here)

f:id:paiza:20151217152725j:plainHi, I'm Tsuneo(@).

PaizaCloud Cloud IDE is a browser-based Web development environment running in your browser, which can be used like Desktop OS(Windows, Mac) to casually develop Web applications.

As it runs on the browser, you don't need to do the cumbersome tasks like installation or setting up the development environment. You can just write code anywhere, anytime.

PaizaCloud have tools to operate the server, like file manager, text editor, terminal, or browser(browser-in-browser).

Those tools work for daily use. But, isn't it cool if you can add other tools like adding apps in PCs or smartphones.

So, here comes PaizaCloud Apps. By installing PaizaCloud Apps, you can add tools and features. You can install PaizaCloud Apps someone made. Or, you can create your own PaizaCloud App.

Isn't it fun if your friends use tools you made?

You can create the PaizaCloud Apps with HTML and JavaScript, just like Web pages.

Here, we'll create a simple drawing tool as an example PaizaCloud App.

Getting started with PaizaCloud Cloud IDE

Let's start!

Here is the website of PaizaCloud Cloud IDE.

https://paiza.cloud/

Just sign up with email and click a link in the confirmation email. You can also sign up with GitHub or Google.

Create new server

Next, let's create a new server for the development workspace.

f:id:paiza:20171214154558p:plain

Click "new server" to open a dialog to set up the server. Just click "New Server" button in the dialog without any settings.

f:id:paiza:20171219143410p:plain

Just in 3 seconds, you'll get a browser-based development environment.

How to use standard tools(Apps)

Before creating a new PaizaCloud App, let's see how standard tools work. Standard tools are listed on the left side of the page.

Upmost button with text "New file" is for a Text Editor. Click 'New file' button.

f:id:paiza:20171219143513p:plain

Now, we see the dialog box to set filename. Set the filename, and click 'Create' button.

f:id:paiza:20171218232517p:plain

After writing some text, click 'Save' button or type "Ctrl-S" or "Command-S" shortcut to save to the file. When you see the file finder on the left side of the page, you will also see the file "myapp.rb" you just created.

In these ways, you can load, edit and save text files. PaizaCloud has other tools like terminal or browser. Let's play with those tools.

Install PaizaCloud Apps

Now, let's see about PaizaCloud Apps.

PaizaCloud Apps is available as a button with text "Apps" and a PaizaCloud logo.

Create the PaizaCloud Apps button. You'll see the dialog to install PaizaCloud Apps.

f:id:paiza:20171222170153p:plain

Choose PaizaCloud App, and click "Install" button to install the PaizaCloud App.

Once installed, a button for the PaizaCloud App will appear on the left side of the page.

But for now, to create our own PaizaCloud app, let's click a button 'Create PaizaCloud App'.

Dialog to create PaizaCloud

You'll see a dialog box to create a PaizaCloud App.

f:id:paiza:20171222034107p:plain

Let's input the name of the application. You can also add an icon image, description, or extensions associated with the PaizaCloud App.

In the textarea, you can write codes using HTML or JavaScipt. You already have the template files to create a simple text editor. So, let's start with the template.

Creating PaizaCloud apps

Click 'save' button, and you'll see browser view for previewing the App.

f:id:paiza:20171222034247p:plain

Now, you can write HTML or JavaScript viewing the browser preview. (You can specify an external URL by clicking "External URL").

Let's change some title text and click 'Save' button. You'll get an updated browser preview right away.

PaizaCloud Apps JavaScript API

You cannot communicate with PaizaCloud to use features provided by PaizaCloud only by HTML or CSS. You'll need to use PaizaCloud JavaScript API to communicate with PaizaCloud.

You can call functions like file operation with this API.

PaizaCloud API uses a library Penpal.

To use the API, you need to connect PaizaCloud as below.

const connection = window.Penpal.connectToParent({methods: ...});

In the methods options, you can add function to handle calls from PaizaCloud. The following API functions are available.

API function feature
openFile(filename) On double click a file in the file finder

To use PaizaCloud features from the PaizaCloud app, you can use the "connection" object to call API functions. Following API functions are available.

API function feature
openSaveModal(options) Open modal dialog for saving.
openLoadModal(options) Open modal dialog for loading.
writeFile(file, data, options) Write data to a file.
readFile(file, data, options) Load data from a file.
execFile(file, args, options) Execute a file(program).

You can call those functions by adding the function name to the "connection" object. As you can get the result with Promise, you can call those functions like below.

connection.[function name](arguments).then((result) => { /* handle the result */});"

For about writeFile / readFile / execFile functions, the usage is the same as Node.js functions. (However, the result will be available as a Promise instead of a callback.)

In the template App, you can see those functions for reading and writing files in the "script.js". Check it out!

Creating a drawing App

Now, let's create a drawing App based on the template created.

In the HTML file, create canvas element to draw.

index.html:

<html>
<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <div class="header">
    <span>My Paint App</span>
    <button type="button" class="btn btn-default save">Save</button>
    <button type="button" class="btn btn-default load">Load</button>
  </div>
  <div class="main">
    <canvas class="absolute w-100 h-100" style="border: solid 1px black;"></canvas>
  </div>
  <script src="https://unpkg.com/penpal/dist/penpal.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Next, make a style sheet.

style.css:

body{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.main{
  flex: 1 1 auto;
  position: relative;
}
.absolute{
  position: absolute;
}
canvas{
    border: solid 1px black;
    cursor: pointer;
}
.w-100{
  width: 100%;
}
.h-100{
  height: 100%;
}

Then, write JavaScript code. To handle mouse operation, add event listeners for "mousedown", "mousemove", or "mouseup" events. Draw to the canvas based on the mouse moves.

script.js:

// PaizaCloud App APIs:
//   Initialize:
//     * Penpal.connectToParent(options)
//   Call from App to PaizaCloud:
//     * openSaveModal(options)
//     * openLoadModal(options)
//     * writeFile(file, data, options, callback)
//     * readFile(file, data, options, callback)
//     * execFile(file, args, options, callback)
//   Call from PaizaCloud to App:
//     * openFile(filename)

var connection = window.Penpal.connectToParent({
  methods: {
    openFile: (filename) => {
      openFile(filename);
    }
  }
});
let parent;
connection.promise.then((parent_) => {
    parent = parent_;
    console.log('Penpal connected');
});

function openFile(filename) {
  parent.readFile(filename, {encoding: 'base64'}).then((result) => {
    var dataUrl = "data:image/png;base64," + result.data;
    var img = new Image();
    img.onload = function(){
        context.drawImage(img, 0, 0);
    }
    img.src = dataUrl;

  });
}
function saveFile(filename) {
    let dataUrl = canvas.toDataURL(); // data:image/png;base64,xxxxx
    let base64 = dataUrl.substr(22);
    parent.writeFile(filename, base64, {encoding: 'base64'});
}

$(".save").on('click', () => {
  parent.openSaveModal({extensions: ['txt']}).then((filename) => {
    saveFile(filename);
  });
});

$(".load").on('click', () => {
  parent.openLoadModal({extensions: ['txt']}).then((filename) => {
    openFile(filename);
  });
});

$('canvas').attr('width', $(".main").width());
$('canvas').attr('height', $(".main").height());

var canvas = $("canvas")[0];
var context = canvas.getContext('2d');

function getPos(event) {
    var x = event.clientX - canvas.getBoundingClientRect().x + canvas.scrollLeft;
    var y = event.clientY - canvas.getBoundingClientRect().y + canvas.scrollTop;
    return [x, y];
}
let lastPos;

$("canvas").on('mousedown', (event) => {
    lastPos = getPos(event);
});
$("canvas").on('mousemove', (event) => {
    if(!lastPos){return;}
    const p = getPos(event);
    context.beginPath();
    context.moveTo(lastPos[0], lastPos[1]);
    context.lineTo(p[0], p[1]);
    context.stroke();
    lastPos = p;
})
$("canvas").on('mouseup', (event) => {
    lastPos = null; 
});

That's it!

Click 'Save' button to save the App.

Install the drawing App

Now, let's install the App we just created.

Click 'My servers' to show the workspace page. Then, click "+ Apps" icon to open PaizaCloud App installation dialog box.

On the dialog box, choose the application created, and click 'Install' button.

After the installation, we'll see the App's icon on the left side of the page.

f:id:paiza:20171222034609p:plain

If you click the icon, you can launch the App! You can draw pictures, save the image to the file, or load the image from the file. Let's try!

f:id:paiza:20171222034806p:plain

f:id:paiza:20171222170325p:plain

Summary

We created a drawing PaizaCloud App and install it.

With PaizaCloud Apps, you can make your environment more convenient and comfortable.

As you can create the PaizaCloud App just with HTML and JavaScript, let's create Apps! Also, it would be more fun to share the PaizaCloud Apps with your friends or others!


With「PaizaCloud Cloud IDE」, you can flexibly and easily develop your Web application or server application, and publish it, just in your browser. https://paiza.cloud


Quick web development in browser using Ruby+Sinatra+PaizaCloud Cloud IDE!

f:id:paiza:20171219143149p:plain
(Japanese article is here)

f:id:paiza:20151217152725j:plainHi, I'm Tsuneo(@).

Everyone knows about Ruby on Rails, the Web application framework. sYes, Ruby on Rails is a major full-fledged MVC framework used in large-scale web applications.

At the same time, it is not very easy to use especially for beginners because there are many things to know in order to use Ruby on Rails.

Here comes Sinatra, yet another Ruby web application framework. Sinatra is a quite simple framework, so those who just learned Ruby can easily start writing.

When you start your first application, it is better to start with a small program, and then grow it step by step. With Sinatra, you can start with from 4 lines of code!

Well, it is another troublesome task to install and set up a Sinatra development environment and deploy it to the server. Because every PC has its own OS, application, and configuration, the setting up development environment often fails with errors.

Here comes PaizaCloud Cloud IDE, a browser-based web development environment. PaizaCloud Cloud IDE is quite flexible, and can be used not only for Ruby on Rails but also Sinatra. As both Sinatra and PaizaCloud Cloud IDE are simple and easy, it is the best combination for Ruby web development.

In this article, we'll actually develop a web service using Sinatra and PaizaCloud. We'll start with small program, and then create a web service that lookup a location from a host name, and shows it on the map.

By following the instructions, you'll create the application in about 10 minutes.

Getting started with PaizaCloud Cloud IDE

Let's start!

Here is the website of PaizaCloud Cloud IDE.

https://paiza.cloud/

Just sign up with email and click a link in the confirmation email. You can also sign up with GitHub or Google.

Create new server

Let's create a new server for the development workspace.

f:id:paiza:20171214154558p:plain

Click "new server" to open a dialog to set up the server. Just click "New Server" button in the dialog without any settings.

f:id:paiza:20171219143410p:plain

Just in 3 seconds, you'll get a browser-based development environment for Ruby on Rails.

Create application

Let's create a Sinatra application.

Create a Ruby file for Sinatra application. Here, we create a file "myapp.rb".

Click 'New file' button on the left side of the page.

f:id:paiza:20171219143513p:plain

Now, we see the dialog box to set filename. Set filename to "myapp.rb", and click 'Create' button.

f:id:paiza:20171219143628p:plain Now, let's create your first Sinatra code.

myapp.rb:

require 'sinatra'
get '/'
  'Hello ' + 'World'
end

f:id:paiza:20171218232517p:plain

After the coding, click 'Save' button or type "Ctrl-S" or "Command-S" shortcut to save to the file. When we see file finder on the left side of the page, we see a file "myapp.rb" that you just created.

Yes, it's a real web application with 4 lines of code.

Start Sinatra server

Then let's start the application.

To start the application, you need to run Ruby command. With PaizaCloud, you can use browser-based "Terminal" to run commands.

Click 'Terminal' button on the left side of the workspace.

f:id:paiza:20171214154805p:plain

Now, the Terminal started. Type commands like "ruby myapp.rb" and type enter key.

$ ruby myapp.rb

f:id:paiza:20171218232646p:plain

On the left side of workspace, you'll see a button with earth icon and "4567".

f:id:paiza:20171218232727p:plain

Sinatra server runs on port 4567. PaizaCloud Cloud IDE detects the port number(4567), and automatically adds the button to open a browser for the port.

Click the button, and you'll get Browser application(a browser application in the PaizaCloud). Now, you'll see web page with "Hello World".

f:id:paiza:20171219000404p:plain

Show HTML file

Next, instead of one message 'Hello World', let's create and show a HTML file.

Change "myapp.rb" to show HTML file as below. We use ERB template format to write Ruby code in the HTML file. We'll load "sinatra/reloader" to reload ruby code from the file after changing the code automatically.

myapp.rb:

require 'sinatra'
require 'sinatra/reloader'

get '/' do
    erb :index
end

Then, create a HTML(ERB) file.

On the left side of the workspace, right-click the home directory("/home/ubuntu"), and select "New Directory" to create a directory with name "views".

Then right-click the "views" directory, and select "New File", and create a file with filename "index.erb".

index.erb:

<h1>Host/IP Map</h1>

At the Terminal, type Ctrl-C to exit the running Sinatra application. Then, type "ruby myapp.rb" to restart Sinatra. As we load 'sinatra/reloader', we won't need to restart Sinatra from now.

Now, let's reload the Browser(in PaizaCloud). You'll see the HTML file created!

Install a package(gem)

We install a library to lookup locations from IP addresses. Ruby have a bunch of gem package, and we can add many features to the program. For now, we'll install a gem package called "maxminddb". We also download a database for the lookup.

Run following commands in the Terminal.

$ sudo gem install maxminddb
$ curl http://geolite.maxmind.com/download/geoip/database/GeoLite2-City.mmdb.gz -O
$ gunzip GeoLite2-City.mmdb.gz

f:id:paiza:20171218235045p:plain

At PaizaCloud, you can install whatever additional packages like this!

Show location, map

With maxminddb gem, let's lookup the location from the host's IP address. Also, show the map of the location using Google Maps.

Change the code("myapp.rb") like below. At "post" block, we can refer the hostname with field name "host" as "params['host']". Then, lookup IP address from the hostname, lookup location using the maxminddb, and set it to a instance variable "@geo". Instance variables like "@geo" can be referred from the ERB file.

Also, load "erubis" library to escape HTML automatically.

myapp.rb:

require 'sinatra'
require 'sinatra/reloader'
require 'maxminddb'
require 'erubis'
set :erb, :escape_html => true

db = MaxMindDB.new('./GeoLite2-City.mmdb')

get '/' do
    erb :index
end
post '/' do
    host = params['host']
    @ip = IPSocket::getaddress(host)
    @geo = db.lookup(@ip)
    erb :index
end

Change the ERB file. Add input tag to input a hostname or an IP address. When the form is submitted, show the contents of @geoip. <% if @geoip %> ... <% end %> means, the HTML inside the "if" block is shown only when the variable "@geoip" is available.

Also, show a map using iframe and Google Maps.

(We use Google Maps Embed API. Get your API key from here , and put it after "key=" of the URL.)

Also, let's add a CSS framework Milligram to make the HTML beautiful.

views/index.erb:

<html>
<head>
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
    <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
    <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
</head>
<body>
    <div class="container">
    <h1>IP&Host Map</h1>
    <form method="post">
        <input type="text" name="host" value="<%= params['host'] %>" placeholder="www.example.com or 127.0.0.1">
        <input type="submit">
    </form>

    <% if @geo %>
        <table>
            <tr>
                <td>IP</td>
                <td><%= @ip %></td>
            </tr>
            <tr>
                <td>Country</td>
                <td><%= @geo.country.name %></td>
            </tr>
            <tr>
                <td>Subdivision</td>
                <td><%= @geo.subdivisions[0].name %></td>
            </tr>
            <tr>
                <td>City</td>
                <td><%= @geo.city.name %></td>
            </tr>
        </table>
        <iframe src="https://www.google.com/maps/embed/v1/place?q=<%= @geo.location.latitude %>,<%= @geo.location.longitude %>&zoom=10&key=AIzaSyAAb1Nx1f7E6uNrEEiukZV5z9XX3TqkDNw" 
    width="600" height="300" allowfullscreen="allowfullscreen"></iframe>
        (<div>This product includes GeoLite2 data created by MaxMind, available from
<a href="http://www.maxmind.com">http://www.maxmind.com</a>.</div>)
    <% end %>
</body>    
</html>

That's it! You did it!

Let's open the web application in the browser(in PaizaCloud). You see the location and the map of the hostname you put!

(If you get an error, try to restart Sinatra. Exit "ruby myapp.rb" by "Ctrl-C", and run the command again.)

f:id:paiza:20171218235726p:plain

Summary

With PaizaCloud Cloud IDE, we created a Sinatra application just in your browser, without installing or setting up any development environments. The combination of Sinatra and PaizaCloud is one of the fastest and shortest way to create web application. Now, let's create your own Sinatra application!


With「PaizaCloud Cloud IDE」, you can flexibly and easily develop your web application or server application, and publish it, just in your browser. https://paiza.cloud