使用 Sinatra 和 Heroku 创建简单 Hyakunin-Issyu 应用程序的教程

本文由 Tomomichi Onishi 撰写，发表在《软件开发者杂志》的“精选集”刊号上。您可以在 SDJ 网站上找到更多文章。 

概述 

在本教程中，我们将学习如何使用轻量级 Ruby 框架 Sinatra 创建一个 Web 应用程序，以及如何将其部署到 Web 应用程序托管服务 Heroku 上。

我们以美丽的日本古诗选集——百人一首——为主题，创建一个简单的 Web 应用程序作为示例。

这个应用程序只有两个页面：一个页面显示所有诗歌的列表，另一个页面显示每首诗歌的详细信息。

（如果您从未听说过百人一首，请不用担心。在本介绍的结尾，您将看到一个快速指南。）

您将学到...

通过本教程，您将学到以下内容。

• 如何使用 Sinatra 框架
• 如何将您的应用程序部署到 Heroku
• 对百人一首的总体理解

您应该了解...

本教程期望您了解。

• Ruby
• 使用 Bundler 进行 Gem 管理
• Git
• Haml

 

关于百人一首

百人一首，即“百人百首诗”，是由中世纪一位著名诗人选出的 100 首三十一音节的日本和歌。  

http://en.wikipedia.org/wiki/Ogura_Hyakunin_Isshu – 百人一首的维基百科页面

和歌由三十一个音节组成，前半部分是五、七、五，后半部分是七、七。

由于在如此有限的词语中无法包含大量信息，因此感受诗歌的余味非常重要。

用精选的词语创作诗歌，描绘细腻的情感和美丽的自然风景，这是一种非常禅意的生活方式，也是我们日本人应该引以为傲的文化。

在日本新年假期，我们经常玩名为“歌留多”的百人一首纸牌游戏。

歌留多游戏的基本理念是能够快速确定一副牌中哪张牌是需要的，然后迅速抓取该牌，以免被对手抢走。

以歌留多为主题的漫画《ちはやふる》在日本大获成功，现在这项传统文化又重新流行起来。

如果您有兴趣，请看看这部漫画。

http://www.youtube.com/watch?v=rxebYxY9NXE – 《ちはやふる》动画片头

好了，我想介绍得够多了。

现在是开始教程的时候了。

使用 Sinatra

本教程的前半部分是使用 Sinatra 创建一个简单的应用程序。

Sinatra 的基础知识

最小结构 

要开始一个尽可能小的项目，您只需要两个文件。

列表 1. 项目文件结构

    |-sample
        |-main.rb
        |-Gemfile

应用程序的核心部分将写在 main.rb 中。

目前，我们只需要为根目录 ('/') 添加路由。所以任何对 '/' 的请求都将在这里处理。

在此示例中，我们将输出一个简单的“hello world”。

列表 2. main.rb 的最小实现

    #main.rb  
    require "sinatra"  
    
    get '/' do
      "hello world."
    end

接下来，为 gem 管理创建一个 Gemfile。现在您只需要一个 Sinatra gem。

列表 3. Gemfile 中的 Gem 列表

    #Gemfile
    source :rubygems 
    ruby '2.0.0'
    
    gem 'sinatra'

在终端中，运行“bundle install”来安装项目 gem。

项目设置基本完成！

切换到项目根目录，并在终端中运行“ruby main.rb”。

应用程序将在端口 4567 上运行（您机器上的端口可能不同，请务必检查终端中的输出）。

在浏览器中打开并访问“localhost:4567”。

如果成功，您应该会在那里看到“hello world”字样。

 

添加更多页面

好的，现在我们要为这个应用程序添加更多页面（否则它太简单了！）。

编辑 main.rb 来实现这一点

列表 4. main.rb 添加更多页面

    #main.rb
    ...
    get '/poem' do
      "this is another page!"
    end 

做得好！现在我们有了另一个带有 '/poem' 路由的页面。

通过运行“ruby main.rb”重启项目，然后在浏览器中访问“localhost:4567/poem”。

您现在应该看到“this is another page!”显示在那里。

自动重新加载 Sinatra

每次更改代码中的某些内容时，都需要重新启动进程，这会很乏味。

为了让事情变得更简单，让我们在应用程序中引入自动重新加载。

列表 5. 在 Gemfile 中添加 sinatra-contrib

    #Gemfile
    ...
    gem 'sinatra-contrib' 

将此行添加到 Gemfile 并再次运行“bundle install”。

然后在 main.rb 中 require sinatra/reloader。

列表 6. 在 main.rb 中 require sinatra/reloader

    #main.rb
    require 'sinatra'
    require 'sinatra/reloader'
    ... 

这就够了。尝试再次重启 main.rb（这是最后一次，我保证！），然后在浏览器中访问“localhost:4567”。

接下来，更改 main.rb 中的“hello world”消息并刷新页面。如果一切顺利，您现在将看到消息已更改，而无需重新启动。

接受参数 

这个部分最后要做的就是接受带有参数的 URL，例如“/poem/13”，以便页面内容根据这个新值更新。

列表 7. 在 main.rb 中接受参数

    #main.rb
    get '/poem/:id' do
      "this page shows the detail of poem-#{params[:id]}"
    end 

将 :id 添加到 get 部分，并使用 params[:id] 来处理该参数。

现在尝试访问“localhost:4567/poem/13”。内容应该已经改变了。

开发主要部分

好了，我们现在已经完成了项目的大部分核心部分。

我制作了一个 HyakuninIssyu gem，可以轻松使用诗歌数据，所以让我们安装它。

（别担心，文件里也包含英文数据）

如果您想了解如何使用这个 gem，请在此查看。

https://github.com/Tomomichi/HyakuninIssyu - Tomomichi/HyakuninIssyu

安装 HyakuninIssyu gem

将 gem 添加到 Gemfile 并再次运行“bundle install”。

列表 8. 将 HyakuninIssyu gem 添加到 Gemfile

    #Gemfile
    gem ...
    gem 'HyakuninIssyu'

您还需要在 main.rb 中“require”它。

列表 9. 在 main.rb 中 require HyakuninIssyu gem

    #main.rb
    require ...
    require 'HyakuninIssyu'

完成之后，请进行验证以确保它正常工作。

列表 10. 添加示例代码来测试 gem

    #main.rb
    get '/' do
      data = HyakuninIssyu.new
      data.poem(1).kanji
    end 

将此代码添加到 main.rb，然后在浏览器中访问“localhost:4567”。

您是否找到了天智天皇的诗（这次是日语的）？

这首诗描绘了农民悲惨的生活，但皇帝写出这样的诗不是很奇怪吗？他怎么能理解那些人的感受呢？

这是百人一首的奥秘之一。

首页

好了，我们现在将使用这个 gem 完成首页。

此页面显示所有诗歌的列表。使用 gem 的 poems 方法。

列表 11. 在首页列出所有诗歌

    #main.rb
    get '/' do
      data = HyakuninIssyu.new
      @poems = data.poems
    end 

    

就是这样。我们将所有诗歌数据设置为 @poem。

现在是时候完成视图文件了。

使用单独的视图文件 

如果您将所有 HTML 文档都写在 main.rb 中，那会很混乱，所以我们将代码分开，并使用单独的视图文件。

列表 12. 添加视图文件后的项目结构

    |-sample
        |-...
        |-views
            |-index.haml
            |-poem.haml 

添加一个 views 目录并在其中创建 haml 文件。

安装 haml gem 来使用 haml 文件。

列表 13. 在 Gemfile 中添加 haml gem

    #Gemfile
    ...
    gem 'haml' 

现在创建一个 index.haml 文件来显示诗歌列表。

列表 14. Index.haml

    #views/index.haml
    %h1 INDEX
    - @poems.each do |poem|
      - unless poem.nil?
        %p #{poem.kanji}
        %small #{poem.en} 

最后要做的是在 main.rb 中声明使用 haml 文件。

列表 15. 声明使用 haml 文件

    #main.rb
    get '/' do
      ...
      haml :index
    end 

这仅仅意味着它将 views/index.haml 作为视图文件使用。

现在，让我们再次访问“localhost:4567”来查看 index.haml 的内容是否在那里显示。

请记住，我们在 main.rb 中使用了 @poems。

这使我们能够将该变量传递给视图文件。

现在首页已完成。让我们继续第二个页面。

诗歌详情页 

由于我们已经启用了参数处理，我们将其用于从 gem 中获取诗歌数据。

列表 16. 开发诗歌详情页

    #main.rb
    ...
    get '/poem/:id' do
      id = params[:id].to_i  #treat the parameter as an integer
      data = HyakuninIssyu.new
      @poem = data.poem(id)
      @poet = data.poet(id)
    
      haml :poem
    end 

我们将诗歌数据设置为 @poem 和 @poet，并声明我们使用 views/poem.haml 作为视图文件。

poem.haml 文件应该如下所示

列表 17. poem.haml 的内容

    #views/poem.haml
    %h1 POEM
      %div
        %h2 Poem Info
        %p #{@poem.kanji}
        %small #{@poem.en}
      %div
        %h2 Poet Info
        %p #{@poet.name.ja}
        %small #{@poet.name.en} 

在浏览器中访问“localhost:4567/poem/13”，也许是不同的诗歌编号，并检查诗歌数据是否正确显示。

完成开发 

为了完成这个应用程序的开发，我们将链接这两个页面。

列表 18. 在 index.haml 中添加链接

    #views/index.haml
    %h1 INDEX
    - @poems.each do |poem|
      %p
        %a(href="/poem/#{poem.id}") #{poem.kanji}
      %small #{poem.en} 

并在 poem.haml 中添加一个非常简单的返回链接。

列表 19. 在 poem.haml 中添加链接

    #views/poem.haml
    ...
    %a(href="/") Back

好了，我们现在已经完成了这个非常简单的 Sinatra Web 应用程序的开发。

它显示了百人一首所有诗歌的列表，您可以查看每首诗歌的详细信息。

现在让我们尝试将其部署到 Heroku。

Heroku 部署

本教程的后半部分是将 Sinatra 应用程序部署到 Heroku。

在继续之前，请注册并创建您的 Heroku 账户。

https://id.heroku.com/signup – Heroku 注册

您还需要 Heroku Toolbelt 才能使用 heroku 命令。

请从下面的链接下载：

https://toolbelt.heroku.com/ - Heroku Toolbelt

好的，现在我们开始吧。

创建 Heroku 应用

首先，您需要创建一个 Heroku 应用程序。

切换到新的项目根目录并运行以下命令

列表 20. 创建一个新的 heroku 应用

    heroku create YOUR-APP-NAME 

就这样。Heroku 上创建了一个空的应用程序，并已添加到您的 git 远程仓库。

（您可以通过运行“git remote”命令来检查）

创建系统启动文件

在部署应用程序之前，您需要系统启动文件才能在 Heroku 上运行您的应用程序。

创建一个 config.ru 文件，如下所示

列表 21. 创建一个 config.ru 文件

    #config.ru
    require 'bundler'
    Bundler.require
    
    require './main'   #requiring main.rb
    run Sinatra::Application  

引入 git 版本管理

由于我们使用 git 命令将应用程序部署到 Heroku，

我们需要引入 git 并提交到目前为止的更改。

列表 22. 引入 git 版本管理

    git init
    git commit -m "initial commit"

如果您不熟悉 git，请查看 Git Book 或其他教程。

https://git-scm.cn/book – Git Book

现在我们准备好部署了！

部署到 Heroku

部署到 Heroku 非常简单。只需运行以下命令

列表 23. 部署到 Heroku 的命令

    git push heroku master

就是这样。在 Heroku 上成功构建您的应用程序后，运行“heroku open”或

访问“APP-NAME.heroku-app.com”即可看到您的应用程序。

您的应用程序运行正常吗？如果您发现任何错误，请运行“heroku logs”来查看问题所在。

好了，教程到此结束。

最终版本的代码在我的 GitHub 仓库中。

如果您的代码不起作用，请在那里检查并与您的代码进行比较。

还有更多...

本教程为了保持简单，只涵盖了 Sinatra 和 Heroku 的基础知识。

如果您觉得它们很有趣，请进一步了解它们。

以下主题将是您的下一个挑战

Sinatra

• 在视图中使用布局/共享文件
• 使用 Helper
• 引入 SCSS、CoffeeScript
• 应用程序的国际化
• 使用 Rspec 进行测试
• 使用 Sorcery 引入登录管理

Heroku

• 使用 Heroku Scheduler 防止 Heroku 应用休眠
• 使用 NewRelic 监控应用性能
• 使用 thin 服务器代替 webrick
• 构建预发布应用程序
• 连接到数据库并进行备份
• 使用 Travis CI 进行自动化测试和持续部署

百人一首 

• 学习百人一首的诗歌并记住它们
• 阅读《ちはやふる》以更多地了解这些诗歌。
• 参加歌留多比赛。

如果您对这些主题感兴趣，我将写下一篇文章。

请发送电子邮件至 tomomichi.onishi@gmail.com 告诉我您接下来想要什么。

SDJournal 的一些解释

上次我们把 CodeProject 的读者弄糊涂了，所以我们想道歉并解释一下。我们修改了之前发布在 CodeProject 网站上的文章，以补充作者信息。然后这些文章以“新发布”文章的形式出现在主站上。事实上——它们几年前就已在此发布。

这不是我们想要的，而且很多人问我们为什么发布旧文本。我们没有，但实际上我们修改了它们，使它们看起来像新文章。我们深表歉意。以后我们会更加小心。如果您想给我们写关于本文的评论（本文发表在我们这里的“精选集”刊号上：），我们将非常感激。另外，如果您喜欢我们的工作，我们可能有一个特别的订阅优惠给您：。希望您喜欢今天的学习。