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/ )

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


How to create Ruby on Rails app in browser with PaizaCloud Cloud IDE

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

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

When starting Ruby on Rails, what's the most difficult thing? Is it Ruby syntax, object-oriented programming, or web technology? Actually, the hardest thing is installing and setting up the development environment!

You'll bump into issue like these:

  • No instruction for the latest version released today.
  • Installation error. (Ex: Nokogiri...)
  • The requirement of another software or libraries on the platform.
  • Instructions that works only on Mac, but not on Windows.
  • Conflicts with other software installed.
  • Finally, it is installed and configured. But other software was broken because of this.
  • etc.

You can ask your friends, but they have already lost how to install, or they are using older versions, or they have customized things too much...

Also, if you publish the service, feedbacks from your friends or others will motivate you. But, this requires "deployment" of the service. The "deployment" also frustrates us...

So, here comes PaizaCloud Cloud IDE. PaizaCloud Cloud IDE enables you to develop web services using Ruby on Rails just in your browser, without installing and setting up any development environment. Actually, you can create your own service in 5 minutes, and even publish it on the Internet to share it with friends.

Getting started with PaizaCloud Cloud IDE

So, 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.

Here, you can choose "Ruby on Rails", "phpMyAdmin", and "MySQL", and click "New Server" button.

f:id:paiza:20171214154330p:plain

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

Create an application

Then, let's create your Ruby on Rails application.

You can use "rails new" command to create Ruby on Rails application.

On PaizaCloud Cloud IDE, you can use PaizaCloud's "Terminal" application to run the commands in your browser.

Let's click the "Terminal" button at the left side of the page.

f:id:paiza:20171214154805p:plain

Now, the "Terminal" application launch. So, let's type "rails new [application name]" command in the Terminal.

f:id:paiza:20171213234417p:plain

The '[applicatio name]' is the name of the application you are creating. You can choose whatever you want, like "music-app" or "game-app".

Here, I'll choose the application name "boardgame-app", where I can manage the list of board games.

Also, let's add "--database=mysql" to use MySQL database.

So, lets type:

$ rails new boardgame-app --database=mysql

In the file finder view at the left side of the page, you'll see the "boardgame-app" directory. Click the folder to open it to see inside the directory.

f:id:paiza:20171213234518p:plain

You'll see a bunch of files for the Ruby on Rails application.

You'll already have a MySQL server running because you checked it on the server setting. But if not, you can always manually start like:

$ sudo systemctl enable mysql
$ sudo systemctl start mysql

On PaizaCloud Cloud IDE, you can install packages on root privilege.

Then, create a database for the application. Change current directory to the application directory, and type "rake db:create".

$ cd boardgame-app
$ rake db:create

f:id:paiza:20180922200831p:plain

A database "boardgame-app_development" for the application is created.

Start Ruby on Rails server

Now, you can already run the application. Let's start the application.

Change the directory by "cd boardgame-app", and type "rails server" to start the server!

$ cd boardgame-app
$ rails server

f:id:paiza:20171213234757p:plain

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

f:id:paiza:20171213234820p:plain

Ruby on Rails server runs on port 3000. PaizaCloud Cloud IDE detects the port number(3000), 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 about Ruby on Rails, that is your application!

f:id:paiza:20171213234947p:plain

Create new database table

Next, let's use database on the application.

On Ruby on Rails, you can just use "rails generate scaffold" command to create all files or a database table, a model, a controller, or a routing.

Here, we create a table with "name" fields for the name of the boardgame, and "player" fields for the number of players.

Now, open another terminal(or, type 'Ctrl-C' to exit "rails server") and type:

$ rails generate scaffold game name players

f:id:paiza:20181207141345p:plain

After that, run commands for creating and migrating database table.

$ rake db:create
$ rake db:migrate

f:id:paiza:20171213235143p:plain

Done! Put "http://localhost:3000/games/" in the URL bar of the PaizaCloud browser application.

Then, you'll get the list of the board game. Let's try to add or delete the board game information.

f:id:paiza:20171213235249p:plain

You can see the database table using phpMyAdmin.

On PaizaCloud browser application, put "http://localhost/phpmyadmin/" in the URL bar.

f:id:paiza:20171214003801p:plain

Edit files

Now, let's change the title by editing the file.

To edit a file, double-click the file on the file finder view.

Open "boardgame-app/app/views/games/index.html.erb" for editing.

f:id:paiza:20171213235414p:plain

Then, change the title inside <h1>.

boardgame-app/app/views/games/index.html.erb:

<h1>My Board Games!</h1>

Then, click "Save" button, or push "Command-S", or "Ctrl-S".

f:id:paiza:20171213235606p:plain

Let's add an image file to "boardgame-app/app/assets/images" directory. You can drag and drop a file on your PC for uploading.

f:id:paiza:20181207133959p:plain

Edit "index.html.erb" to show the image file.

boardgame-app/app/views/games/index.html.erb:

<h1>My Board Games!</h1>
<%= image_tag 'boardgame.jpg' , width: '100', height: '100' %>

To see the list from top page, let's redirect from top page to the "/games/" page.

Open "config/route.rb", and append routing for the root page like below.

config/route.rb:

  root to: redirect('/games/')

f:id:paiza:20171214000215p:plain

Now, the basics of the application is done!

f:id:paiza:20171214155455p:plain

Uploading image

Then, let's add a feature to uploading an image file for the board game.

On Ruby on Rails, you can install "gem" packages to add features like this.

Here, to use the "paperclip" gem for uploading files, add "gem 'paperclip'" to a file called "Gemfile".

Gemfile:

gem 'paperclip'

f:id:paiza:20171214000430p:plain

Then, add "picture" field for uploaded files to the "game" table by running commands:

~/boardgame-app$ bundle install
~/boardgame-app$ rails generate paperclip game picture

Now, you have a migration file like "~/boardgae-app/db/migrations/201xxxxx_add_attachment_picture_to_games.rb".

Add [5.2] to the end of "ActiveRecord::Migration".

~/boardgae-app/db/migrations/201xxxxx_add_attachment_picture_to_games.rb:

class AddAttachmentPictureToGames < ActiveRecord::Migration[5.2]

f:id:paiza:20171214000553p:plain

Run migration to apply to the database.

$ rake db:migrate

To manage images, add tags to HTML files for posting form and showing data.

~/boardgame-app/app/views/games/_ form.html.erb:

  <%= form.file_field :picture %>

~/boardgame-app/app/views/games/index.html.erb

        <td><%= image_tag game.picture.url(:thumb) %></td>

Add a field "picture" to the controller.

~/boardgame-app/app/controllers/games_controller.rb

    def game_params
      params.require(:game).permit(:name, :players, :picture)
    end

Change the model to manage uploaded files.

app/models/game.rb

class Game < ApplicationRecord
    has_attached_file :picture, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/images/:style/missing.png"
    do_not_validate_attachment_file_type :picture
end

Adding CSS framework

To make the page beautiful, let's add a minimalist CSS framework Milligram.

app/views/layouts/aplication.html.erb

  <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">

f:id:paiza:20171214001352p:plain

Now, it's done! Isn't it cool!?

f:id:paiza:20171214155235p:plain

Summary

With PaizaCloud Cloud IDE, we created a Ruby on Rails application just in your browser, without installing or setting up any development environments. Now, let's create your own Ruby on Rails 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