Um clone do Twitter com Phoenix e Vue.js

Um clone do Twitter com Phoenix e Vue.js @philipsampaio

Sobre Twitter

Sobre Vue.js

Sobre Phoenix

Philip Sampaio @philipsampaio @philss

github.com/philss/ﬂoki

magnetis.com.br/dev

Twitter

Twitter é importante!

Não podemos correr esse risco

Precisamos de uma alternativa

Será feito, aqui e agora

Um MVP do Twitter

MVP que eu possa twittar

MVP que eu possa seguir

MVP que eu possa ver tweets

Um nome

sabiah

Falando em pássaros

Poderoso

Poderoso Herda os superpoderes da Elixir

Produtivo

Produtivo Geradores, guides, metaprogramação

Produtivo Um pouco parecido com Rails

sabiah

sabiah ⏳ 1. tweetar 2. seguir 3. ver timeline com
tweets de quem sigo

mix phoenix.new sabiah

sabiah ⏳ 1. tweetar 2. seguir 3. ver timeline com
tweets de quem sigo

Uma timeline estática Tweetar

Timeline é onde vejo novos tweets de quem sigo  (também
os meus tweets)

Começa pelo router.ex

scope "/", Sabiah do pipe_through :browser # Use the default
browser stack get "/", TimelineController, :index end web/router.ex

TimelineController

defmodule Sabiah.TimelineController do use Sabiah.Web, :controller def index(conn, _params) do
render conn, "index.html" end end web/controllers/timeline_controller.ex

defmodule Sabiah.TimelineView do use Sabiah.Web, :view end web/views/timeline_view.ex

<h2>Timeline</h2> <div id='timeline-app'> <input type='text' v-model='newTweet' placeholder='What is happening?'> <button
@click='postTweet' class='button'>Tweet</button> <ul class='timeline'> <li class='tweet' v-for='tweet in tweets'> <span class='tweet__content'>{{ tweet }}</span> </li> </ul> </div> web/templates/timeline/index.html.eex

{{ }} ?

<!doctype html> <html> <body> <div id='app'> <input type='text' v-model='message'> {{
message }} </div> <script src=‘https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.min.js'></script> <script> new Vue({ el: '#app', data: { message: 'Hello world' } }); </script> </body> </html> priv/examples/vue.html

new Vue({ el: '#app', data: { message: 'Hello world' }
}); priv/examples/vue.html

<div id='app'> <input type='text' v-model='message'> {{ message }} </div> priv/examples/vue.html

Timeline

@click='postTweet' class='button'>Tweet</button> <ul class='timeline'> <li class='tweet' v-for='tweet in tweets'> <span class='tweet__content'>{{ tweet }}</span> </li> </ul> </div> web/templates/timeline/index.html.eex

Precisamos da app Vue.js

npm install --save vue

Zero de conﬁguração

import 'phoenix_html'; import Vue from 'vue/dist/vue'; new Vue({ el: '#timeline-app',
data: { newTweet: '', tweets: [] }, methods: { postTweet: function() { this.tweets.unshift(this.newTweet); this.newTweet = ''; } } }); web/static/js/app.js

@click='postTweet' class='button'>Tweet</button> <ul class='timeline'> <li class='tweet' v-for='tweet in tweets'> <span class='tweet__content'>{{ tweet.content }}</span> </li> </ul> </div> web/templates/timeline/index.html.eex

Temos uma timeline

Enviando tweets Tweetar

Web Sockets

Phoenix Channels

Um canal

Uma timeline por usuário

mix phoenix.gen.channel Timeline

$ novo tweet timeline:42 Philip, id 42

defmodule Sabiah.UserSocket do use Phoenix.Socket channel "timeline:*", Sabiah.TimelineChannel transport :websocket,
Phoenix.Transports.WebSocket end web/channels/user_socket.ex

conecta timeline:42 Philip, id 42 $

Conectamos pelo cliente JS

import socket from './socket'; const userId = 42; let channel
= socket.channel(`timeline:${userId}`, {}); channel.join() .receive('ok', resp => { console.log('Joined successfully', resp) }) .receive('error', resp => { console.log('Unable to join', resp) }); // The app ... web/static/js/app.js

No Phoenix, aceitamos ou não

defmodule Sabiah.TimelineChannel do use Sabiah.Web, :channel def join("timeline:", _payload, _socket)
do {:error, %{reason: "User id is missing."}} end def join("timeline:" <> user_id, _payload, socket) do socket = assign(socket, :user_id, user_id) {:ok, socket} end def handle_in("new_tweet", payload, socket) do broadcast socket, "new_tweet", payload {:noreply, socket} end end web/channels/timeline_channel.ex

Nosso canal aceita tweets

novo tweet timeline:42 Philip, id 42 $

O Phoenix envia a resposta

novo tweet timeline:42 Philip, id 42 tweet $

Salvando Tweets Tweetar

É necessário um model

Tweet user_id, content

mix phoenix.gen.model Tweet tweets user_id:references:users content

defmodule Sabiah.Tweet do use Sabiah.Web, :model schema "tweets" do field
:content, :string belongs_to :user, Sabiah.User timestamps() end @doc """ Builds a changeset based on the `struct` and `params`. """ def changeset(struct, params \\ %{}) do struct |> cast(params, [:user_id, :content]) |> validate_required([:user_id, :content]) end end web/models/tweet.ex

Precisamos salvar esse tweet

alias Sabiah.Tweet def handle_in("new_tweet", %{ "content" => content } =
payload, socket) do user_id = socket.assigns[:user_id] tweet_changeset = Tweet.changeset(%Tweet{}, %{user_id: user_id, content: content}) Repo.insert!(tweet_changeset) broadcast socket, "new_tweet", payload {:noreply, socket} end web/channels/timeline_channel.ex

Pronto. Salvando tweets!

Mas o que é um changeset?

alias Sabiah.Tweet def handle_in("new_tweet", %{ "content" => content } =
payload, socket) do user_id = socket.assigns[:user_id] tweet_changeset = Tweet.changeset(%Tweet{}, %{user_id: user_id, content: content}) Repo.insert!(tweet_changeset) broadcast socket, "new_tweet", payload {:noreply, socket} end web/channels/timeline_channel.ex

– Ecto.Changeset - https://hexdocs.pm/ecto/Ecto.Changeset.html “Changesets allow ﬁltering, casting, validation and
deﬁnition of constraints when manipulating structs.”

def changeset(struct, params \\ %{}) do struct |> cast(params, [:user_id,
:content]) |> validate_required([:user_id, :content]) end web/models/tweet.ex

Transforma e valida

Pronto. Salvando tweets!

sabiah ⏳ 1. tweetar ✅ 2. seguir 3. ver timeline
com tweets de quem sigo

Tweets para seguidores Seguir

Seguidores

Um model

Follower

Follower user_id, followed_user_id

E o botão “Seguir”?

No template, temos forms

<%= for user <- @users do %> <tr> <td><%= user.name
%></td> <td><%= user.username %></td> <td> <%= form_for follower_changeset(user.id),  follower_path(@conn, :create), fn f -> %> <%= hidden_input f, :followed_user_id, value: user.id %> <%= submit "+ follow", class: "button" %> <% end %> </td> </tr> <% end %> web/templates/user/index.html.eex

O form recebe um changeset

defmodule Sabiah.UserView do use Sabiah.Web, :view alias Sabiah.Follower def follower_changeset(user_id)
do Follower.changeset(%Follower{followed_user_id: user_id}) end end web/views/user_view.ex

Só falta o controller

def create(conn, %{"follower" => params}) do user_id = get_session(conn, :user_id)
params = Map.put(params, "user_id", user_id) changeset = Follower.changeset(%Follower{}, params) case Repo.insert(changeset) do {:ok, follow} -> conn |> put_flash(:info, "You are now following #{follow.followed_user_id}") |> redirect(to: user_path(conn, :index)) {:error, changeset} -> IO.inspect(changeset) conn |> put_flash(:error, "You seems to be logged out. Create an user to continue.") |> redirect(to: user_path(conn, :new)) end end web/views/user_view.ex

sabiah ⏳ 1. tweetar ✅ 2. seguir ✅ 3. ver
timeline com tweets de quem sigo

( ) $ * novo tweet ??? $

Broadcaster

def handle_in("new_tweet", %{"content" => content}, socket) do user_id = socket.assigns[:user_id]
tweet = save_tweet!(user_id, content) response_payload = decorate_payload(user_id, %{"content" => content}) broadcast socket, "new_tweet", response_payload TweetBroadcaster.broadcast_to_followers(tweet, response_payload) {:noreply, socket} end web/channels/timeline_channel.ex

( ) $ * novo tweet broadcast! $

defmodule Sabiah.TweetBroadcaster do alias Sabiah.{Endpoint, Repo} import Ecto.Query def broadcast_to_followers(tweet,
payload) do followers_ids_query = from f in "followers", where: f.followed_user_id == ^tweet.user_id, select: f.user_id followers_ids = Repo.all(followers_ids_query) Enum.map(followers_ids, fn(user_id) -> Endpoint.broadcast!("timeline:#{user_id}", "new_tweet", payload) end) end end web/channels/tweet_broadcaster.ex

( ) $ * novo tweet broadcast! $

sabiah ⏳ 1. tweetar ✅ 2. seguir ✅ 3. ver
timeline com tweets de quem sigo

Há um detalhe faltando

Salvar a timeline de cada usuário

Veremos ao vivo

[Perigo iminente]

Conclusão

Phoenix

Vue.js

Escolha a ferramenta

Divirta-se!

github.com/philss/sabiah

• ElixirSchool - https://elixirschool.com/pt/ • Phoenix Guides - http://www.phoenixframework.org/docs/overview •
Vue.js - http://vuejs.org/

Obrigado! @philipsampaio @philss

Um clone do Twitter com Phoenix e Vue.js

Um clone do Twitter com Phoenix e Vue.js

More Decks by Philip Sampaio

Other Decks in Programming

Featured

Transcript