16 安装 Phoenix，产出新专案

尽管我们的游戏还是有漏洞，写法也还不太满意，
因为篇幅的关西，还是先记着进到下个阶段好了。

安装 phoenix

phoenix 在前几天升到 1.6 版了，
我们在这里就直接用新的

phoenix 官网
里面的 guide 里面有完整的安装教学，
另外要注意的是，我们这一次不会使用资料库，
所以可以跳过安装 postgresql 的部分

先装最新的 phoenix 进去电脑的 hex package

终端机

mix archive.install hex phx_new

在建立新的专案之前，我们可以先看看有什麽选项可以用

mix help phx.new

我们这次要使用的是 --no-ecto

mix phx.new card --no-ecto

card 是这个专案名称，可以改成你想要的
送出就开始帮我们产生新的 phoenix 专案

在遇到 Fetch and install dependencies? [Yn] 的时候选Y

完成之後所有的东西都会装在 card 资料夹里
我们 cd 进去 card 资料夹後

执行

mix phx.server

开启浏览器 打开 http://localhost:4000
就可以看到 phoenix 的预览画面。

来把它换掉吧 XD

新增一个页面

每次向这个 phoenix 网页服务器送出要求的时候
都会先到 router.ex 这个档案

  scope "/", CardWeb do
    pipe_through :browser

    get "/", PageController, :index
  end

在这一区有看到，我们把目前连到 "/" 的要求都导到 PageController 的 :index 方法
这个写法是传统的 MVC 写法，这边应该是没空题，不过有用过类似网页框架的话应该会满快就懂的。

没关系 我们这次直接使用新的 liveview 做法，两者之间没有太大的关联。

我们把

  get "/", PageController, :index

改成

  live "/", PageLive.Index, :index

再去网页看看

会看到他抱怨 module CardWeb.PageLive.Index is not available
我们就帮他建一个
我们在lib/card_web/底下，新增一个叫 live 的资料夹，
并在底下再新增 page_live 资料夹
路径变成 lib/card_web/live/page_live
再给他一个 index.ex 档案

按照他想要的在里面新增 CardWeb.PageLive.Index module

defmodule CardWeb.PageLive.Index do

end

存档在看页面就发现他抱怨的东西改成只有 function CardWeb.PageLive.Index.live/0 is undefined

因为我们在 router 用 live 来连到这个 module
自然他会在这里面找 liveview 的东西，

defmodule CardWeb.PageLive.Index do
  use CardWeb, :live_view

end

使用 use CardWeb, :live_view 帮他加上 liveview 的方法之後，
抱怨的东西变成 render/1 was not implemented

下面还给我们范例，我还不复制贴上，

好拉改一下里面的字

defmodule CardWeb.PageLive.Index do
  use CardWeb, :live_view

  def render(assigns) do
    ~H"""
    我的第一个烘培机
    """
  end
end

就写好了，但这样好像没什麽意义
我们明天来做的互动的按钮之类的来练一下 liveview 整个流程