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

Web development on iPad using PaizaCloud Cloud IDE as iPad IDE

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

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

Do you have an iPad?

With iPad, we can edit e-mail, browse the web, create documents or spreadsheets or presentation, browser photos or movies quite handy. With millions of applications on App Store, iPad can even be more useful than PC.

Isn't it more useful if we can develop web or other applications on iPad?

So, here comes PaizaCloud Cloud IDE. PaizaCloud is a browser-based web development environment in the Cloud. With PaizaCloud, we can develop web applications or other applications on iPad!

PaizaCloud supports iPad, and have browser-based editor, terminal, browser-in-browser, file manager for building applications. PaizaCloud has development environments like Ruby on Rails, Django, Node.js, Laravel, PHP, Java(tomcat), MySQL, Jupyter Notebook... You don't need to struggle with annoying installing and setting up development environment.

As you can use the same environment from any devices, you can develop on PC today, and continue development on a cafe using iPad tomorrow.

In this article, we actually build a BBS application on iPad using PaizaCloud and Ruby on Rails. We can build the application just in 10 seconds just following the instruction.

Getting started with PaizaCloud Cloud IDE

So, here is the website of PaizaCloud Cloud IDE.

https://paiza.cloud/

Just sign up with email and tap 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

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

Here, you can choose "Ruby on Rails", "phpMyAdmin", and "MySQL", and tap "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 tap 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 '[application 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 "myapp", where I can manage the list of posts.

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

So, lets type:

$ rails new myapp --database=mysql

f:id:paiza:20180403160018p:plain

In the file finder view at the left side of the page, you'll see the "myapp" directory. Tap the folder to open it to see inside the directory.

f:id:paiza:20180402171847p: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.

Start Ruby on Rails server

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

Change the directory by "cd myapp", and type "rails server" to start the server!

$ cd myapp
$ 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.

Tap 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 "posts" with fields "title", "body", and "published".

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

$ rails generate scaffold post title:string body:text published:boolean

f:id:paiza:20180402171820p:plain

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

$ rake db:create
$ rake db:migrate

f:id:paiza:20180402171806p:plain

Done! Put "http://localhost:3000/posts/" 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 posts.

f:id:paiza:20180403160110p:plain

You can see the database table using phpMyAdmin.

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

f:id:paiza:20180403160134p:plain

Edit files

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

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

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

f:id:paiza:20180402171658p:plain

Then, change the title inside <h1>.

myapp/app/views/posts/index.html.erb:

<h1>Welcome to My BBS!</h1>

f:id:paiza:20180403160213p:plain

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

f:id:paiza:20171213235606p:plain

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

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

config/route.rb:

  root to: redirect('/posts/')

f:id:paiza:20171214000215p:plain

Now, the basics of the application is done!

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:20180403161451p:plain

Although we used PaizaCloud on floating window mode, you can switch to tab windows mode for full-screen editing by tapping window bar's maximize button, or by tapping blue button with PaizaCloud button to open a menu and choose "Tab Window Mode".

f:id:paiza:20180403160725p:plain

Summary

With PaizaCloud Cloud IDE, we created a Ruby on Rails application on iPad. 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