{ "version": "https://jsonfeed.org/version/1", "title": "Fahri NH Blog", "home_page_url": "https://fahri.blog/posts/", "description": "Fahri NH Blog", "items": [ { "id": "https://fahri.blog/posts/building-an-offline-first-react-web-app-using-watermelondb-in-phoenix-elixir/", "content_html": "

We will build a web application that supports local db synced with remote db. This post is a continuation from the previous post: How to Build WatermelonDB Sync Backend in Elixir.

\n

Installing Dependencies​

\n
$ cd assets
$ npm i react react-dom uuid @nozbe/watermelondb @nozbe/with-observables
$ npm i -D @babel/preset-react @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime
\n

Configure assets/.babelrc:

\n
{
    \"presets\": [
        \"@babel/preset-env\", \"@babel/preset-react\"
    ],
    \"plugins\": [
        [\"@babel/plugin-proposal-decorators\", { \"legacy\": true }],
        [\"@babel/plugin-proposal-class-properties\", { \"loose\": true }],
        [
          \"@babel/plugin-transform-runtime\",
           {
             \"helpers\": true,
             \"regenerator\": true
           }
        ]
      ]
}
\n

Let's Code​

\n

Remove entirely lib/blog_app_web/templates/page/index.html.eex and replace it with this code:

\n
<div id=\"blog-app\" />
\n

All frontend code related to blog app will be located in assets/js/blog.\nSo, we will import entry point of blog app in assets/js/app.js:

\n
// assets/js/app.js
import \"../css/app.scss\"
import \"phoenix_html\"
import \"./blog\"
\n

Setup Database​

\n
// assets/js/blog/index.js
import React from 'react';
import { render } from 'react-dom';
import { Database } from '@nozbe/watermelondb'
import LokiJSAdapter from '@nozbe/watermelondb/adapters/lokijs'
import DatabaseProvider from '@nozbe/watermelondb/DatabaseProvider'

import schema from './model/schema'
import Post from './model/Post'

import App from './App'

const adapter = new LokiJSAdapter({
  schema,
  useWebWorker: false,
  useIncrementalIndexedDB: true,
  onIndexedDBVersionChange: () => {
    if (checkIfUserIsLoggedIn()) {
      window.location.reload()
    }
  },
})

const database = new Database({
  adapter,
  modelClasses: [
    Post,
  ],
  actionsEnabled: true,
})

const rootElement = document.getElementById('blog-app');

render(
  <DatabaseProvider database={database}>
    <App />
  </DatabaseProvider>,
  rootElement);
\n

Schema​

\n
// assets/js/blog/model/schema.js
import { appSchema, tableSchema } from '@nozbe/watermelondb'

const mySchema = appSchema({
    version: 1,
    tables: [
        tableSchema({
            name: 'posts',
            columns: [
                { name: 'title', type: 'string' },
                { name: 'content', type: 'string' },
                { name: 'likes', type: 'number' },
                { name: 'created_at', type: 'number' },
                { name: 'updated_at', type: 'number' },
            ]
        })
    ]
})

export default mySchema
\n

Model​

\n
// assets/js/blog/model/Post.js
import { Model } from '@nozbe/watermelondb'
import { field, date, readonly } from '@nozbe/watermelondb/decorators'

export default class Post extends Model {
    static table = 'posts'

    @field('title') title
    @field('content') content
    @field('likes') likes
    @readonly @date('created_at') createdAt
    @readonly @date('updated_at') updatedAt
}
\n

App.js​

\n

\"BlogApp

\n

<App/> consists of:

\n\n

As parent component, App handles all actions related to form (Add New/Reset, Save, Sync) and row data (Edit, Delete).

\n
// assets/js/blog/App.js
import React, { useState } from 'react';
import { useDatabase } from '@nozbe/watermelondb/hooks'
import { v4 as uuidv4 } from 'uuid';

import syncData from './sync'
import PostList from './PostList'
import PostForm from './PostForm'

export default function App() {
    const database = useDatabase()
    const [post, setPost] = useState()
    const postsCollection = database.collections.get(\"posts\");

    function clearPost() {
        setPost(undefined)
    }

    function onEdit(selectedPost) {
        setPost(selectedPost)
    }

    async function onDelete(selectedPost) {
        await database.action(async () => {
            await selectedPost.markAsDeleted()
        })
    }

    async function createPost(inputtedForm) {
        await database.action(async () => {
            const newPost = await postsCollection.create(post => {
                post._raw.id = uuidv4()
                post.title = inputtedForm.title
                post.content = inputtedForm.content
                post.likes = inputtedForm.likes
            });
        })
    }

    async function updatePost(currentPost, inputtedForm) {
        await database.action(async () => {
            await currentPost.update(post => {
                post.title = inputtedForm.title
                post.content = inputtedForm.content
                post.likes = inputtedForm.likes
            });
        })
    }

    return (
        <div>
            <PostForm post={post} clearPost={clearPost} createPost={createPost} updatePost={updatePost} syncData={() => syncData(database)} />
            <PostList onEdit={onEdit} onDelete={onDelete} />
        </div>
    )
}
\n

PostForm.js​

\n
// assets/js/blog/PostForm.js
import React, { useState, useEffect } from 'react';

export default function PostForm({ post, clearPost, createPost, updatePost, syncData }) {
    const [title, setTitle] = useState(post ? post.title : \"\")
    const [content, setContent] = useState(post ? post.content : \"\")
    const [likes, setLikes] = useState(post ? post.likes : \"\")

    useEffect(() => {
        setTitle(post ? post.title : \"\")
        setContent(post ? post.content : \"\")
        setLikes(post ? post.likes : \"\")
    }, [post])

    const onReset = (e) => {
        e.preventDefault()
        clearForm()
    }

    const onSync = (e) => {
        e.preventDefault()
        syncData()
    }

    const onSubmit = async (e) => {
        e.preventDefault()

        const inputtedForm = { title, content, likes: parseInt(likes) }

        if (post) {
            await updatePost(post, inputtedForm)
        } else {
            await createPost(inputtedForm)
            clearForm()
        }
    }

    const clearForm = () => {
        setTitle(\"\")
        setContent(\"\")
        setLikes(\"\")
        clearPost()
    }

    return (
        <form>
            <label>
                Title:
                <input type=\"text\" value={title} onChange={(e) => setTitle(e.target.value)} />
            </label>
            <label>
                Content:
                <input type=\"text\" value={content} onChange={(e) => setContent(e.target.value)} />
            </label>
            <label>
                Likes:
                <input type=\"number\" value={likes} onChange={(e) => setLikes(e.target.value)} />
            </label>
            <button className=\"button button-outline\" onClick={onReset}>Add New / Reset</button>
            <button onClick={onSubmit}>Save</button>
            <button className=\"button button-clear\" onClick={onSync}>Sync</button>
        </form>
    )
}
\n

PostList.js​

\n

PostList is enhanced component wrapped with withObservables to become reactive whenever data in posts get added or deleted.

\n
// assets/js/blog/PostList.js
import React from 'react';
import withObservables from \"@nozbe/with-observables\";
import { withDatabase } from '@nozbe/watermelondb/DatabaseProvider'
import PostRow from './PostRow'

const PostList = ({ posts, onEdit, onDelete }) => (
    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Content</th>
                <th>Likes</th>
                <th>Created At</th>
                <th>Updated At</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {posts.map(post => <PostRow key={post._raw.id} post={post} onEdit={onEdit} onDelete={onDelete} />)}
        </tbody>
    </table>
)

export default withDatabase(withObservables([], ({ database }) => ({
    posts: database.collections.get('posts').query().observe(),
}))(PostList))
\n

PostRow.js​

\n

PostRow is also reactive component. It will automatically rerender the component whenever data changes (i.e. post get updated).

\n
// assets/js/blog/PostRow.js
import React from 'react';
import withObservables from \"@nozbe/with-observables\";

const PostRow = ({ post, onEdit, onDelete }) => (
    <tr key={post._raw.id}>
        <td>{post.title}</td>
        <td>{post.content}</td>
        <td>{post.likes}</td>
        <td>{post.createdAt.toString()}</td>
        <td>{post.updatedAt.toString()}</td>
        <td>
            <button onClick={(e) => {onEdit(post)}}>Edit</button>
            <button onClick={(e) => {onDelete(post)}}>Delete</button>
        </td>
    </tr>
)

export default withObservables([\"post\"], ({ post }) => ({
    post: post.observe()
}))(PostRow)
\n

sync.js​

\n

Along with the backend, this is the core of sync capability in our app.\nOn the previous post, I have explained in detail why it needs a workaround.\nPlease read that first.

\n
// assets/js/blog/sync.js
import { synchronize } from '@nozbe/watermelondb/sync'

export default async function syncData(database) {
    let latestVersionOfSession = 0
    let changesOfSession = {}

    await synchronize({
        database,
        pullChanges: async ({ lastPulledAt }) => {
            const response = await fetch(`http://localhost:4000/api/sync/pull?lastPulledVersion=${lastPulledAt || 0}`)
            if (!response.ok) {
                throw new Error(await response.text())
            }

            const { changes, latestVersion } = await response.json()
            latestVersionOfSession = latestVersion
            changesOfSession = changes

            return { changes, timestamp: latestVersion }
        },
        pushChanges: async ({ changes, lastPulledAt }) => {
            const response = await fetch(`http://localhost:4000/api/sync/push?lastPulledVersion=${lastPulledAt || 0}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(changes)
            })
            if (!response.ok) {
                throw new Error(await response.text())
            }
            const { changes: changesFromPush, latestVersion } = await response.json()
            latestVersionOfSession = latestVersion
            changesOfSession = changesFromPush
        },
    })

    await synchronize({
        database,
        pullChanges: async ({ lastPulledAt }) => {
            return { changes: changesOfSession, timestamp: latestVersionOfSession }
        },
        pushChanges: async ({ changes, lastPulledAt }) => {
            throw new Error(await response.text())
        },
    })
}
\n

Run the Application​

\n
$ cd ../ # cd to project directory (blog_app)
$ mix phx.server
\n

Open http://localhost:4000

\n

Final Source Code​

\n

All code (sync backend and frontend app) is available on https://github.com/fahrinh/blog-labs/tree/master/2020-04-24/blog_app

", "url": "https://fahri.blog/posts/building-an-offline-first-react-web-app-using-watermelondb-in-phoenix-elixir/", "title": "Building an Offline-First React Web App Using WatermelonDB in Phoenix (Elixir)", "summary": "Build an offline-first React web application with WatermelonDB and a Phoenix (Elixir) sync backend.", "date_modified": "2020-04-29T03:58:39.000Z", "author": { "name": "Fahri Nurul Hidayat", "url": "https://github.com/fahrinh" }, "tags": [ "React", "Phoenix", "WatermelonDB", "Offline First App" ] }, { "id": "https://fahri.blog/posts/how-to-build-watermelondb-sync-backend-in-elixir/", "content_html": "

WatermelonDB​

\n

WatermelonDB is a reactive database for React frontend application that supports data synchronization.

\n

\"WatermelonDB\"

\n

What I like about this database is you can bring your own sync backend (HTTP-based) as long as it complies with this spec:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
OperationRequest Params / BodyResponse Body
Pull- lastPulledAt: integer, Unix time in milliseconds (ms)- changes: (JSON)
- timestamp: integer, Unix time in milliseconds (ms)
Push- changes: (JSON)
- lastPulledAt: integer, Unix time in milliseconds (ms)		X
\n

The following is a brief how pull and push operation works. Please refer to Sync documentation for the details

\n

Pull Operation​

\n

Request:

\n\n

Response:

\n\n

Push Operation​

\n

Request:

\n\n

Response:

\n\n

changes Example​

\n
{
    \"posts\": {
        \"created\": [
            {
                \"id\": \"d1633195-156f-4f9d-9ccf-7740203b080e\",
                \"_status\": \"created\",
                \"_changed\": \"\",
                \"title\": \"Phoenix\",
                \"content\": \"Phoenix is a web framework for Elixir\",
                \"likes\": 200,
                \"created_at\": 1588400731806,
                \"updated_at\": 1588400731806
            }
        ],
        \"updated\": [
            {
                \"id\": \"2d7c6a82-eb04-47b1-be52-6f8f6cf806ff\",
                \"_status\": \"updated\",
                \"_changed\": \"updated_at,title,content,likes\",
                \"title\": \"Elixir\",
                \"content\": \"Elixir is amazing\",
                \"likes\": 100,
                \"created_at\": 1588389279195,
                \"updated_at\": 1588400691047
            }
        ],
        \"deleted\": [
            \"2b130e52-079d-4b31-9f42-ce257cf546f0\"
        ]
    },
    \"comments\": {
        \"created\": [],
        \"updated\": [
            {
                \"id\": \"1e945c88-baf2-4db7-aa39-286b6865b3fb\",
                \"comment\": \"That's good!\"
            }
        ],
        \"deleted\": []
    }
}
\n\n

Sync Flow​

\n

Based on the documentation and sync code example (synchronize()) on client side, this is what will be expected from sync backend:

\n

\"WatermelonDB

\n

Proposed Alternative Sync Approach​

\n

While in iterations of prototyping sync backend, I took another approach for tracking changes and made a workaround for an issue in regard to WatermelonDB sync behaviour on client side.

\n

Using Auto-incrementing Counter (Version) + Timestamp for Tracking Changes​

\n

WatermelonDB sync documentation is good enough to gives a tips for implementing sync backend by using timestamp. It also states:

\n
\n

This protects against weird edge cases related to server clock time changes (NTP time sync, leap seconds, etc.) (Alternatively, instead of using timestamps, you could use auto-incrementing couters, but you'd have to ensure they are consistent across the whole database, not just one table)

\n
\n

I followed its suggestion to use auto-incrementing counter. In my approach, for tracking changes, it needs these server DB setup: a global sequence (version_seq) & each table have columns: version (int), version_created (int), created_at_server (timestamp), updated_at_server (timestamp), and deleted_at_server (timestamp).

\n

Please see Database Design to know how this is implemented in practice.

\n

Workaround for Sync on Client Side​

\n

There is a problem if we use sync code example (synchronize()) for client side on the documentation.

\n

Please look again at Sync Flow diagram above.

\n

In 8, after WatermelonDB receives changes & timestamp, internally, timestamp value is set as lastPulledAt for the next pull operation. That is not problem.

\n

At first, I assume it will have same mechanism for push operation.\nWe got new timestamp that will be become the next lastPulledAt.\nBut I am wrong.\nLook at 15.\nNo response at all for push operation AND no way to explicitly set lastPulledAt on the push operation.\nIt means for the next pull operation, we will get changes that we've just pushed on previous push operation. Well, it actually mentioned in the documentation:

\n
\n

Current limitations

\n
\n
\n
    \n
  1. During next sync pull, changes we've just pushed will be pulled again, which is unnecessary. It would be better if server, during push, also pulled local changes since lastPulledAt and responded with NEW timestamp to be treated as lastPulledAt.
    2. \n
\n
\n

I don't know why this library designed to behave like this. It raised an issue complaining/questioning about that.

\n

Sync Flow Workaround​

\n

So this is what I did for a temporary solution/workaround:

\n

\"WatermelonDB

\n\n

This is workaround for the client side. The code is available on the next post.

\n

Application Example: BlogApp​

\n

Let's say we want to build a blog app (web based) that supports data synchronization.\nUser can submit, edit, and delete a post content. If user click Sync button, data located on current browser will be synced to server. So if user open another browser (another client device), data will be automically synced and available on that browser.

\n

This tutorial only covers how to build sync backend implementation. Frontend (ReactJS) implementation is available on the next post: Building an Offline First React Web App Using WatermelonDB in Phoenix (Elixir).

\n

Database Design​

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
LocalDBServerDB
WatermelonDB
posts table		PostgreSQL
posts table
ColumnTypeColumnTypeDefault
idstring (UUID format)iduuid (binary)-
titlestringtitlevarchar-
contentstringcontentvarchar-
likesnumberlikesinteger-
created_atnumber
(UNIX timestamp in ms)		created_attimestamp (in μs)-
updated_atnumber
(UNIX timestamp in ms)		updated_attimestamp (in μs)-
--created_at_servertimestamp (in μs)-
--updated_at_servertimestamp (in μs)-
--deleted_at_servertimestamp (in μs)-
--versionbigintnextval('version_seq')
--version_createdbigintnextval('version_seq')
\n

Determining Data Changes​

\n

For push operation:

\n\n

For pull operation:

\n\n

Sync Backend Implementation​

\n

Sync Backend consists of four main components: SyncController, Sync context, Blog context, and Repo. If you come from another framework, context is kind of like service.

\n

\"BlogApp

\n

We will build sync backend using Elixir 1.10 and Phoenix 1.5.1

\n

Install Phoenix 1.5.1:

\n
$ mix archive.uninstall phx_new
$ mix archive.install hex phx_new 1.5.1
\n

Generate a new Phoenix web app:

\n
$ mix phx.new blog_app
\n

We will use PostgreSQL on Docker with password and database name specified on config/dev.exs:

\n
$ docker run --name blog-db -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=blog_app_dev -d -p 5432:5432 postgres:12.2
\n

Create the database:

\n
$ cd blog_app
$ mix ecto.create
\n

Create version_seq sequence that will generate version for each data changes :

\n
$ mix ecto.gen.migration create_version_seq
\n
# priv/repo/migrations/xxx_create_version_seq.exs
defmodule BlogApp.Repo.Migrations.CreateVersionSeq do
  use Ecto.Migration

  def change do
    execute \"CREATE SEQUENCE version_seq\"
  end
end
\n
$ mix ecto.migrate
\n

Generate Post schema:

\n
$ mix phx.gen.schema Blog.Post posts title:string content:string likes:integer push_id:integer created_at:utc_datetime_usec updated_at:utc_datetime_usec created_at_server:utc_datetime_usec updated_at_server:utc_datetime_usec deleted_at_server:utc_datetime_usec version:integer version_created:integer --binary-id
\n

Set default value of version* columns with a incremental number generated by version_seq.\nAs it may increase overtime, change version* columns type to bigint to support bigger value.\nWe don't need inserted_at and updated_at columns generated by Phoenix so we omit timestamps().\nEdit xxx_create_posts.exs:

\n
# priv/repo/migrations/xxx_create_posts.exs
defmodule BlogApp.Repo.Migrations.CreatePosts do
  use Ecto.Migration

  def change do
    create table(:posts, primary_key: false) do
      add :id, :binary_id, primary_key: true
      add :title, :string
      add :content, :string
      add :likes, :integer
      add :created_at, :utc_datetime_usec
      add :updated_at, :utc_datetime_usec
      add :created_at_server, :utc_datetime_usec
      add :updated_at_server, :utc_datetime_usec
      add :deleted_at_server, :utc_datetime_usec
      add :push_id, :integer
-     add :version, :integer
+     add :version, :bigint, default: fragment(\"nextval('version_seq')\")
-     add :version_created, :integer
+     add :version_created, :bigint, default: fragment(\"nextval('version_seq')\")

-     timestamps()
    end
  end
end
\n

To enable JSON encoding for Post schema, annotate it with @derive Jason.Encoder for certain columns only:

\n
# lib/blog_app/blog/post.ex
defmodule BlogApp.Blog.Post do
  use Ecto.Schema
  import Ecto.Changeset

  @primary_key {:id, :binary_id, autogenerate: true}
  @foreign_key_type :binary_id
+ @derive {Jason.Encoder, only: [:id, :title, :content, :likes]}
  schema \"posts\" do
    field :title, :string
    field :content, :string
    field :likes, :integer
    field :created_at, :utc_datetime_usec
    field :updated_at, :utc_datetime_usec
    field :created_at_server, :utc_datetime_usec
    field :updated_at_server, :utc_datetime_usec
    field :deleted_at_server, :utc_datetime_usec
    field :push_id, :integer
    field :version, :integer
    field :version_created, :integer

-   timestamps()
  end
  # ...
end
\n
$ mix ecto.migrate
\n

Sync Endpoint​

\n

Sync endpoint will be handled by:

\n\n

Edit lib/blog_app_web/router.ex

\n
# lib/blog_app_web/router.ex
defmodule BlogAppWeb.Router do
    # ...
    scope \"/api\", BlogAppWeb do
      pipe_through :api

      post \"/sync/push\", SyncController, :push
      get \"/sync/pull\", SyncController, :pull
    end
    # ...
end
\n

Controller​

\n

Create lib/blog_app_web/controllers/sync_controller.ex

\n
# lib/blog_app_web/controllers/sync_controller.ex
defmodule BlogAppWeb.SyncController do
  use BlogAppWeb, :controller
  alias BlogApp.Sync

  def push(
        %Plug.Conn{
          body_params: req_body,
          query_params: %{\"lastPulledVersion\" => last_pulled_version}
        } = conn,
        _params
      ) do

    resp =  Sync.push(req_body, String.to_integer(last_pulled_version))
    json(conn, resp)
  end

  def pull(
        %Plug.Conn{
          query_params: %{\"lastPulledVersion\" => last_pulled_version}
        } = conn,
        _params
      ) do

    resp = Sync.pull(String.to_integer(last_pulled_version))
    json(conn, resp)
  end
end
\n

Push​

\n

Changes have to be recorded in a DB transaction.\nIf there is a failed data operation, every operation must be rolled back.

\n

In a push operation, data that will be recorded are also annotated with a push_id.\nLater on, after push operation has been successfully applied, all changes since last_pulled_version are retrieved to become push response except those have already been applied (filtered with push_id).

\n

BlogApp.Sync.push/2:

\n
# lib/blog_app/sync.ex
defmodule BlogApp.Sync do
  alias BlogApp.{Repo, Blog}

  def push(changes, last_pulled_version) do
    push_id = Enum.random(1..1_000_000_000)

    Ecto.Multi.new()
    |> Blog.record_posts(changes[\"posts\"], last_pulled_version, push_id)
    |> Repo.transaction()

    pull(last_pulled_version, push_id)
  end
  # ...
end
\n

BlogApp.Blog.record_posts/4:

\n
# lib/blog_app/blog.ex
defmodule BlogApp.Blog do
  import Ecto.Query
  alias Ecto.Multi
  alias BlogApp.Repo
  alias BlogApp.Blog.Post

  def record_posts(%Multi{} = multi, post_changes, last_pulled_version, push_id) do
    multi
    |> Multi.run(:check_conflict_posts, fn _, _changes ->
      case check_conflict_version_posts(post_changes, last_pulled_version) do
        :no_conflict -> {:ok, :no_conflict}
        :conflict -> {:error, :conflict}
      end
    end)
    |> record_created_posts(post_changes[\"created\"] |> set_push_id(push_id))
    |> record_updated_posts(post_changes[\"updated\"] |> set_push_id(push_id))
    |> record_deleted_posts(post_changes[\"deleted\"], push_id)
  end
  # ...
  defp set_push_id(posts, push_id) do
    posts
    |> Enum.map(fn post -> post |> Map.put(\"push_id\", push_id) end)
  end
  # ...
end
\n

Conflict Detection​

\n

Conflict happens when other users/clients have modified data that we're pushing.

\n

Blog.check_conflict_version_posts/2 :

\n
# lib/blog_app/blog.ex
defmodule BlogApp.Blog do
  # ...
  def check_conflict_version_posts(post_changes, last_pulled_version) do
    ids =
      Enum.concat(post_changes[\"created\"], post_changes[\"updated\"])
      |> Enum.map(fn post -> post[\"id\"] end)
      |> Enum.concat(post_changes[\"deleted\"])

    count =
      Post
      |> select([p], count(p.version))
      |> where([p], p.id in ^ids)
      |> where([p], p.version > ^last_pulled_version or p.version_created > ^last_pulled_version)
      |> Repo.one()

    case count do
      0 -> :no_conflict
      _ -> :conflict
    end
  end
  # ...
end
\n

Storing Record Changes​

\n

Data changes are saved on database in bulk using INSERT INTO CONFLICT on PostgreSQL.\nThis is also known as UPSERT (update or insert).

\n

Blog.upsert_posts/3 handle both create & update case.\nBlog.record_created_posts/2 & Blog.record_updated_posts/2 :

\n
# lib/blog_app/blog.ex
defmodule BlogApp.Blog do
  # ...
  def record_created_posts(%Multi{} = multi, created_changes),
    do: upsert_posts(multi, :create_posts, created_changes)

  def record_updated_posts(%Multi{} = multi, updated_changes),
    do: upsert_posts(multi, :update_posts, updated_changes)

  def upsert_posts(%Multi{} = multi, _name, changes) when is_nil(changes),
    do: multi

  def upsert_posts(%Multi{} = multi, name, changes) do
    now = DateTime.utc_now()

    posts =
      changes
      |> Enum.map(fn row ->
        row
        |> Map.put(\"created_at\", row[\"created_at\"] * 1000 |> DateTime.from_unix!(:microsecond))
        |> Map.put(\"updated_at\", row[\"updated_at\"] * 1000 |> DateTime.from_unix!(:microsecond))
        |> Map.put(\"created_at_server\", now)
        |> Map.put(\"updated_at_server\", now)
        |> Map.take([\"id\", \"title\", \"content\", \"likes\", \"created_at\", \"updated_at\", \"created_at_server\", \"updated_at_server\", \"push_id\"])
        |> key_to_atom()
      end)

    Multi.insert_all(multi, name, Post, posts,
      conflict_target: :id,
      on_conflict: {:replace_all_except, [:id, :version_created, :created_at_server, :deleted_at_server]},
      returning: true
    )
  end

  def key_to_atom(map) do
    Enum.reduce(map, %{}, fn
      {key, value}, acc when is_atom(key) -> Map.put(acc, key, value)
      {key, value}, acc when is_binary(key) -> Map.put(acc, String.to_existing_atom(key), value)
    end)
  end
  # ...
end
\n

Blog.record_deleted_posts/3 :

\n
# lib/blog_app/blog.ex
defmodule BlogApp.Blog do
  # ...
  def record_deleted_posts(%Multi{} = multi, deleted_ids, _push_id) when is_nil(deleted_ids),
    do: multi

  def record_deleted_posts(%Multi{} = multi, deleted_ids, push_id) do
    now = DateTime.utc_now()

    posts =
      deleted_ids
      |> Enum.map(fn id ->
        %{id: id, deleted_at_server: now, push_id: push_id}
      end)

    Multi.insert_all(multi, :delete_posts, Post, posts,
      conflict_target: :id,
      on_conflict: {:replace, [:deleted_at_server, :version, :push_id]},
      returning: true
    )
  end
  # ...
end
\n

Pull​

\n

Pull endpoint calls Sync.pull without push_id specified.\nIt means all data changes since last_pulled_version become the response of pull operation.

\n
# lib/blog_app/sync.ex
defmodule BlogApp.Sync do
  # ...
  def pull(last_pulled_version, push_id \\\\ nil) do
    %{latest_version: latest_version_posts, changes: posts_changes} =
      Blog.list_posts_changes(last_pulled_version, push_id)

    latest_version =
      [last_pulled_version, latest_version_posts]
      |> Enum.max()

    %{
      \"latestVersion\" => latest_version,
      \"changes\" => %{
        \"posts\" => posts_changes
      }
    }
  end
end
\n

Blog.list_posts_changes/2:

\n
# lib/blog_app/blog.ex
defmodule BlogApp.Blog do
  # ...
  def list_posts_changes(last_pulled_version, push_id) do
    posts_latest =
      Post
      |> where([p], p.version_created > ^last_pulled_version or p.version > ^last_pulled_version)
      |> Repo.all()

    posts_changes =
      posts_latest
      |> Enum.reject(fn post -> is_just_pushed(post, push_id) end)
      |> Enum.group_by(fn post ->
        cond do
          post.version_created > last_pulled_version and is_nil(post.deleted_at_server) -> :created
          post.created_at_server != post.updated_at_server and is_nil(post.deleted_at_server) -> :updated
          not is_nil(post.deleted_at_server) -> :deleted
        end
      end)
      |> Map.update(:created, [], fn posts -> posts end)
      |> Map.update(:updated, [], fn posts -> posts end)
      |> Map.update(:deleted, [], fn posts -> posts |> Enum.map(fn post -> post.id end) end)

    latest_version = find_latest_version(posts_latest)

    %{latest_version: latest_version, changes: posts_changes}
  end

  defp find_latest_version(posts) do
    posts
    |> Enum.flat_map(fn post -> [post.version, post.version_created] end)
    |> Enum.max(fn -> 0 end)
  end
  # ...
  defp is_just_pushed(_post, push_id) when is_nil(push_id), do: false
  defp is_just_pushed(post, push_id), do: post.push_id == push_id
end
\n

Run the Backend​

\n
$ mix phx.server
\n

Sync endpoint will be available on

\n\n

What's Next ?​

\n

We have build a sync backend for WatermelonDB frontend application.\nOn the next post, we will continue to code the frontend application with sync capability: Building an Offline First React Web App Using WatermelonDB in Phoenix (Elixir)

", "url": "https://fahri.blog/posts/how-to-build-watermelondb-sync-backend-in-elixir/", "title": "How to Build WatermelonDB Sync Backend in Elixir", "summary": "WatermelonDB is a reactive database for React frontend application that supports data synchronization. This tutorial explains the concept and shows step by step how to build sync backend using Phoenix (Elixir).", "date_modified": "2020-04-24T14:27:12.000Z", "author": { "name": "Fahri Nurul Hidayat", "url": "https://github.com/fahrinh" }, "tags": [ "Elixir", "Phoenix", "WatermelonDB", "Sync Backend" ] }, { "id": "https://fahri.blog/posts/generate-sequential-uuidv4-in-elixir/", "content_html": "

The idea is simple. Sequential UUIDv4 (128 bit) consists of unix timestamp (32 bit) + random bytes (96 bit)

\n

UUIDv4​

\n

Basic form of normal UUIDv4 (128 bit) in hex numbers (32 digits) 1 :

\n
xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
\n\n

Sequential UUIDv4​

\n

A bit modification on normal form where first 32 bits are UNIX timestamp (or 8 digit in hex number) and remaining bits comply with UUIDv4 spec as explained above.

\n
tttttttt-xxxx-4xxx-yxxx-xxxxxxxxxxxx
\n\n

Or in binary representation, the 128-bit sequential UUIDv4 consists of five segments:

\n
[unixtime:32][random:16]['4':4][random:12]['2'(first two bits of `y`):2][random:62]
\n

Implementation in Elixir​

\n

Thanks to binary pattern matching. The implementation in Elixir is trivial.

\n
defmodule SeqUUIDv4 do
  def generate() do
    unix_time = DateTime.utc_now() |> DateTime.to_unix()

    <<_r0::32, r1::16, _r2::4, r3::12, _r4::2, r5::62>> = :crypto.strong_rand_bytes(16)
    <<unix_time::32, r1::16, 4::4, r3::12, 2::2, r5::62>>
  end
end
\n

The output of generate/0 is binary.\nTo encode as hex numbers use Base.encode16/1:

\n
SeqUUIDv4.generate() |> Base.encode16()
\n\n

Footnotes​

\n
    \n
  1. \n

    https://stackoverflow.com/questions/19989481/how-to-determine-if-a-string-is-a-valid-v4-uuid/19989922#19989922 ↩

    \n
    2. \n
  2. \n

    http://tools.ietf.org/html/rfc4122#section-4.4 ↩

    \n
    3. \n
\n
", "url": "https://fahri.blog/posts/generate-sequential-uuidv4-in-elixir/", "title": "Generate Sequential UUIDv4 in Elixir", "summary": "Generate time-ordered UUIDv4 values in Elixir using a Unix timestamp prefix.", "date_modified": "2020-04-19T05:38:13.000Z", "author": { "name": "Fahri Nurul Hidayat", "url": "https://github.com/fahrinh" }, "tags": [ "Elixir", "UUIDv4" ] }, { "id": "https://fahri.blog/posts/file-downloading-in-headless-chrome-using-chromedriver-and-hound/", "content_html": "

Recently, I am making a simple Elixir application performing some actions to a website in an automated way.

\n

The automated testing tool is a perfect candidate to be used to help to build application like that.\nI use Hound as browser automation library\nand Chrome as a controlled browser.\nFor the browser driver, I use ChromeDriver.

\n

Problem​

\n

Back to building my application.

\n

One of the tasks my application doing is downloading a file on the website.\nThat is not a problem in a normal setup. However, the file is not downloaded when\nthe headless mode is enabled.

\n

After Google has enlightened me, in security perspective, that behaviour is\nneeded to prevent\nmalicious website quietly download unwanted files through the browser in headless mode.

\n

Solution​

\n

For the solution, we have to instruct ChromeDriver via REST API to allow file downloading

\n
POST http://localhost:9515/session/<session_id>/chromium/send_command
\n
{
    \"cmd\": \"Page.setDownloadBehavior\",
    \"params\": {
        \"behavior\": \"allow\",
        \"downloadPath\": \"/path/download\"
    }

}
\n

Note: 9515 is ChromeDriver default port

\n

Using Hound​

\n

Unfortunately, Hound does not provide send_command as its API method. But, we\ncan use Hound.RequestUtils.make_req to send API request to ChromeDriver.

\n

For the complete demonstration, these are steps to build a sample application that\ndownload file (Docs.zip) in https://elixir-lang.org/docs.html

\n

Chrome & ChromeDriver Setup​

\n\n

Building Application​

\n

Generate a new application

\n
$ mix new file_downloader
$ cd file_downloader
\n

Add hound as a dependency library

\n
# file_downloader/mix.exs
defmodule FileDownloader.MixProject do
  use Mix.Project

  def project do
    [
      app: :file_downloader,
      version: \"0.1.0\",
      elixir: \"~> 1.9\",
      start_permanent: Mix.env() == :prod,
      deps: deps()
    ]
  end

  def application do
    [
      extra_applications: [:logger]
    ]
  end

  defp deps do
    [
      {:hound, \"~> 1.1.0\"} # <- add hound library
    ]
  end
end
\n

Download the dependencies

\n
$ mix deps.gets
\n

Config hound to use ChromeDriver and Chrome in headless mode

\n
# file_downloader/config/config.exs
use Mix.Config

config :hound, driver: \"chrome_driver\", browser: \"chrome_headless\"
\n

Code the logic of our application. Step 3 describes how to enable file downloading in\nheadless mode.

\n
# file_downloader/lib/file_downloader.ex
defmodule FileDownloader do
  use Hound.Helpers
  import Hound.RequestUtils

  def download_elixir_docs do
    # 1) Start hound session
    Hound.start_session()

    # 2) Visit the website
    navigate_to(\"https://elixir-lang.org/docs.html\")

    # 3) By using 'Hound.RequestUtils.make_req', enable file downloading
    {:ok, download_path} = File.cwd()
    session_id = Hound.current_session_id()

    make_req(
      :post,
      \"session/#{session_id}/chromium/send_command\",
      %{
        cmd: \"Page.setDownloadBehavior\",
        params: %{behavior: \"allow\", downloadPath: download_path}
      }
    )

    # 4) Find download link and click it to download file
    download_link = {:xpath, \"//*[@id='stable']/small/a\"}
    download_link |> click()

    # 5) Wait until download process is completed
    wait_download_started(download_path)
    wait_download_completed(download_path)

    # 6) Stop hound session
    Hound.end_session()
  end

  defp wait_download_started(download_path) do
    wait_crdownload(download_path, true)
  end

  defp wait_download_completed(download_path) do
    wait_crdownload(download_path, false)
  end

  defp wait_crdownload(dir, exist?, wait_time \\\\ 1000) do
    count_crdownload =
      dir
      |> Path.join(\"*.crdownload\")
      |> Path.wildcard()
      |> Enum.count()

    unless((count_crdownload != 0 && exist?) || (count_crdownload == 0 && !exist?)) do
      Process.sleep(wait_time)
      wait_crdownload(dir, exist?, wait_time)
    end
  end
end
\n
\n

Full source code:\nhttps://github.com/fahrinh/blog-labs/tree/master/2019-09-16/file_downloader

\n
\n

Running the Application​

\n

Run the application and wait until it is finished.

\n
$ mix run -e FileDownloader.download_elixir_docs
\n

The downloaded file (Docs.zip) will be available in the current directory (file_downloader).

\n

Troubleshooting​

\n

If you got a runtime error (invalid session id) like this :

\n
$ mix run -e FileDownloader.download_elixir_docs
Compiling 1 file (.ex)
** (RuntimeError) invalid session id
    (hound) lib/hound/request_utils.ex:52: Hound.RequestUtils.handle_response/3
    (file_downloader) lib/file_downloader.ex:13: FileDownloader.download_elixir_docs/0
    (stdlib) erl_eval.erl:680: :erl_eval.do_apply/6
    (elixir) lib/code.ex:240: Code.eval_string/3
    (elixir) lib/enum.ex:783: Enum.\"-each/2-lists^foreach/1-0-\"/2
    (elixir) lib/enum.ex:783: Enum.each/2
    (mix) lib/mix/tasks/run.ex:141: Mix.Tasks.Run.run/5
\n

it might be caused by different versions of Chrome and ChromeDriver.\nYou can check the log of running ChromeDriver.

\n
$ chromedriver --verbose
...

[1578222297.224][INFO]: Failed to connect to Chrome. Attempting to kill it.
[1578222297.244][INFO]: [e5d2ce77a1b56643db3d11b6fad7d946] RESPONSE InitSession ERROR session not created: This version of ChromeDriver only supports Chrome version 77

...
", "url": "https://fahri.blog/posts/file-downloading-in-headless-chrome-using-chromedriver-and-hound/", "title": "File Downloading in Headless Chrome Using ChromeDriver and Hound", "summary": "Download files from a website using headless Chrome, ChromeDriver, and Hound in Elixir.", "date_modified": "2019-09-16T06:10:45.000Z", "author": { "name": "Fahri Nurul Hidayat", "url": "https://github.com/fahrinh" }, "tags": [ "Elixir", "Headless Chrome", "ChromeDriver", "Hound" ] }, { "id": "https://fahri.blog/posts/how-to-update-pomera-dm100-firmware/", "content_html": "

Pomera DM100 is a distraction-free digital writing tool. Think mini laptop with only text editor application loaded.

\n

It comes from Japan. It means its manual is in all Japanese. It becomes hard when you want to do the crucial procedure (like upgrading firmware) AND Google Translate doesn't help you much.

\n

I can only follow some steps in its updating guide web page and the rest of important steps in PDF are not translatable by Google Translate.

\n

In the end, I have successfully updated my Pomera DM100 to the latest firmware.

\n

Here are the steps:

\n

Prerequisites​

\n
    \n
  1. \n

    An SD Card.

    \n

    Make sure you have backed up your data in this SD card AND in the internal memory of Pomera DM100

    \n
    2. \n
  2. \n

    An USB 2.0 A to Mini-B cable.

    \n
    3. \n
\n

Steps to Update Firmware​

\n
    \n
  1. \n

    Download the latest firmware : https://www.kingjim.co.jp/resource-files/download/pomera/dm100/DM100_V15000.zip

    \n
    2. \n
  2. \n

    Extract the zip file

    \n
    $ unzip DM100_V15000.zip
    Archive:  DM100_V15000.zip
    inflating: DM100_V15000/Pomera_Update_Dm100_V15000.bin
    \n
    3. \n
  3. \n

    Format the SD card as MS-DOS (FAT) and set name to POMERA.\nOn Mac :

    \n
      \n
    1. Open Disk Utility
      2. \n
    2. In sidebar, make sure you choose your SD Card
      3. \n
    3. Click Erase on header bar menus
      4. \n
    4. Set Name to POMERA
      5. \n
    5. Format as MS-DOS (FAT)
      6. \n
    6. Click Erase button\n\"disk-utility\"
      7. \n
    \n
    4. \n
  4. \n

    Copy Pomera_Update_Dm100_V15000.bin to the SD card

    \n
    $ cp DM100_V15000/Pomera_Update_Dm100_V15000.bin /Volumes/POMERA/
    \n
    5. \n
  5. \n

    Connect Pomera DM100 to PC using USB A to Mini-B cable

    \n
    6. \n
  6. \n

    Update firmware on Pomera DM100

    \n
      \n
    1. Open Pomera DM100
      2. \n
    2. Click Menu button on the device
      3. \n
    3. Setting > About DM100
      4. \n
    4. Press F1
      5. \n
    \n
    7. \n
  7. \n

    Updating process will begin. Wait until following dialog appears. (Update is complete. Disconnect the USB cable to restart the DM100)\n\"reduced-1-updated-complete\"

    \n
    8. \n
  8. \n

    Disconnect the USB cable. Wait until the reboot has finished.

    \n
    9. \n
  9. \n

    After restarted, a dialog appears. It means we have to connect again USB cable to the PC\n\"reduced-2-connect-again\"

    \n
    10. \n
  10. \n

    Updating process continues.\n\"reduced-3-update-continues\"

    \n
    11. \n
  11. \n

    If succeeded, the main screen is displayed. We can unplug the USB cable. DONE

    \n
    12. \n
\n

Change Display Language​

\n

But it seems reverted back to the original setting, Japanese as display language. To set English as display language :

\n
    \n
  1. Click Menu button on the device
    2. \n
  2. Choose top-right menu then choose Language. Pick English then click Enter
    3. \n
", "url": "https://fahri.blog/posts/how-to-update-pomera-dm100-firmware/", "title": "How to Update Pomera DM100 Firmware", "summary": "Step-by-step guide to updating the Pomera DM100 firmware.", "date_modified": "2017-11-21T23:13:35.000Z", "author": { "name": "Fahri Nurul Hidayat", "url": "https://github.com/fahrinh" }, "tags": [ "Gear", "Pomera DM100" ] }, { "id": "https://fahri.blog/posts/java-how-to-autodetect-the-charset/", "content_html": "

TLDR;​

\n

Required dependencies (pom.xml) :

\n
<dependency>
    <groupId>com.ibm.icu</groupId>
    <artifactId>icu4j</artifactId>
    <version>60.1</version>
</dependency>
<dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.6</version>
</dependency>
\n

Autodetect the charset encoding of a text file or input stream then 'remove' (skip) Byte Order Mark (BOM) while reading based on detected charset :

\n
File inputFile = new File(\"/Users/fahri/Downloads/UNKNOWN_TEXT.txt\");

BOMInputStream bomInputStream = new BOMInputStream(new BufferedInputStream(new FileInputStream(inputFile)),
        ByteOrderMark.UTF_8, ByteOrderMark.UTF_16BE, ByteOrderMark.UTF_16LE, ByteOrderMark.UTF_32BE, ByteOrderMark.UTF_32LE);

System.out.println(\"HAS BOM : \" + bomInputStream.hasBOM());

CharsetDetector detector = new CharsetDetector();
detector.setText(bomInputStream);

CharsetMatch charsetMatch = detector.detect();
System.out.println(\"CHARSET MATCH : \" + charsetMatch.getName());

BufferedReader br = new BufferedReader(new InputStreamReader(bomInputStream, charsetMatch.getName()));
for (String line = br.readLine(); line != null; line = br.readLine()) {
    System.out.println(line);
}
br.close();
\n

Problem​

\n

You got a text file and you have no idea why your application could not process (parse) that file.

\n

This is a sample of that file: UNKNOWN_TEXT.txt

\n

Analyze The Content​

\n

cat​

\n

If we inspect the content using cat :

\n

\"ss-cat-unknown\"

\n

The content looks normal. But, wait.
\nWhat is that weird characters at the beginning and end ? (�� and %)

\n

more​

\n

Display the content using another tool, more :\n\"ss-more-unknown\"

\n

It looks weirder. <FF><FE> at the beginning and ^@ between the characters.

\n

file​

\n

What file command says ?

\n
$ file UNKNOWN_TEXT.txt
UNKNOWN_TEXT.txt: Little-endian UTF-16 Unicode text
\n

The text file is a Little-Endian UTF-16 text and our viewer (iTerm2 on OSX, in this case) only supports UTF-8. That is why it looks not normal and your application can not process (parse) further.

\n

hexdump​

\n

If we investigate in more detail using hexdump :

\n
$ hexdump UNKNOWN_TEXT.txt
0000000 ff fe 31 00 7c 00 43 00 65 00 6c 00 6c 00 32 00
0000010 31 00 7c 00 31 00 32 00 33 00 34 00 7c 00 32 00
0000020 30 00 31 00 37 00 2f 00 31 00 30 00 2f 00 32 00
0000030 30 00 0a 00 32 00 7c 00 43 00 65 00 6c 00 6c 00
0000040 32 00 32 00 7c 00 35 00 36 00 37 00 38 00 7c 00
0000050 32 00 30 00 31 00 37 00 2f 00 31 00 30 00 2f 00
0000060 32 00 30 00
0000064
\n

We can conclude that <FF><FE> and ^@ represents value ff fe and 00 in hex, respectively.

\n

Endianness​

\n

UTF-16 represents a character using two bytes (2x8 byte=16, make sense, huh?). There are two ways to determine the order of the bytes 1 :

\n\n

For the concrete example, these are characters Z in various encoding :

\n
Character                    : Z
ASCII (in hex)               : 5A
UTF16 Little Endian (in hex) : 5A 00
UTF16 Big Endian (in hex)    : 00 5A
\n

Byte Order Mark (BOM)​

\n

You already know the meaning of 00. Then, what exactly is ff fe in the first bytes ?

\n\n

Footnotes​

\n
    \n
  1. \n

    https://www.cs.umd.edu/class/sum2003/cmsc311/Notes/Data/endian.html ↩

    \n
    2. \n
\n
", "url": "https://fahri.blog/posts/java-how-to-autodetect-the-charset/", "title": "Java: How To Autodetect The Charset Encoding of A Text File and Remove Byte Order Mark (BOM)", "summary": "Detect a text file's charset and remove a byte order mark in Java.", "date_modified": "2017-11-07T21:42:36.000Z", "author": { "name": "Fahri Nurul Hidayat", "url": "https://github.com/fahrinh" }, "tags": [ "Java", "BOM", "Byte Order Mark", "Charset Encoding" ] }, { "id": "https://fahri.blog/posts/oracle-xe-11g-on-docker/", "content_html": "
$ docker pull wnameless/oracle-xe-11g
$ docker run -d -p 1022:22 -p 1521:1521 -e ORACLE_ALLOW_REMOTE=true wnameless/oracle-xe-11g
$ docker ps -a
CONTAINER ID        IMAGE                     COMMAND                  CREATED             STATUS              PORTS               NAMES
4fe7a1024ed3        wnameless/oracle-xe-11g   \"/bin/sh -c '/usr/...\"   5 weeks ago         Exited (137) 4 days ago                       practical_williams
$ docker start practical_williams
# or
$ docker start 4fe7a1024ed3
\n

Database connection configuration:

\n
hostname: localhost
port: 1521
sid: xe
username: system
password: oracle
\n

Password for SYS and SYSTEM:

\n
oracle
\n

Log in with SSH:

\n
ssh root@localhost -p 1022
password: admin
\n

Source: https://github.com/wnameless/docker-oracle-xe-11g

", "url": "https://fahri.blog/posts/oracle-xe-11g-on-docker/", "title": "Oracle XE 11g with Docker", "summary": "Run Oracle XE 11g with Docker.", "date_modified": "2017-07-22T23:26:06.000Z", "author": { "name": "Fahri Nurul Hidayat", "url": "https://github.com/fahrinh" }, "tags": [ "Mini Tips", "Oracle", "Docker" ] }, { "id": "https://fahri.blog/posts/static-blogging-with-hugo/", "content_html": "

Github​

\n\n

Travis CI​

\n\n
language: go

go:
  - master # This uses automatically the latest version of go

install:
  - pip install --user pygments
  - go get github.com/spf13/hugo # This provides the latest version of Hugo to Travis CI

script:
  - hugo version
  - hugo --theme=hugo-pacman-theme # This commands builds your website on travis
  - cp CNAME public
  - ls public

deploy:
  local_dir: public # Default static site output dir for Hugo
  repo: fahrinh/fahrinh.github.io # This is the slug of the repo you want to deploy your site to
  target_branch: master # GitHub pages branch to deploy to (in other cases it can be gh-pages)
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN # This is the authentication which you will setup in the next step in travis-ci dashboard
  email: fahri.cyber@gmail.com
  name: \"Fahri Nurul Hidayat\"
  on:
    branch: master
\n\n

Cloudflare​

\n\n

Source: https://martinkaptein.github.io/blog/hugo-with-travis-ci-on-gh-pages/

", "url": "https://fahri.blog/posts/static-blogging-with-hugo/", "title": "Static Blogging with Hugo, GitHub Pages (Travis CI, Cloudflare)", "summary": "Set up a static blog with Hugo, GitHub Pages, Travis CI, and Cloudflare.", "date_modified": "2017-07-22T14:02:09.000Z", "author": { "name": "Fahri Nurul Hidayat", "url": "https://github.com/fahrinh" }, "tags": [ "Hugo", "Github Pages", "Travis CI" ] }, { "id": "https://fahri.blog/posts/hello-world/", "content_html": "
class HelloWorld {
  static public void main( String args[] ) {
    System.out.println( \"Hello World!\" );
  }
}
\n
fun main(args : Array<String>) {
    println(\"Hello, world!\")
}
\n
console.log(\"Hello World\");
\n
defmodule HelloWorld do
  IO.puts \"Hello, World!\"
end
\n
package main

import \"fmt\"

func main() {
  fmt.Printf(\"Hello World\\n\")
}
\n

Source: https://helloworldcollection.github.io

", "url": "https://fahri.blog/posts/hello-world/", "title": "Hello World", "summary": "Hello World examples in Java, Kotlin, JavaScript, Elixir, and Go.", "date_modified": "2017-07-22T09:20:01.000Z", "author": { "name": "Fahri Nurul Hidayat", "url": "https://github.com/fahrinh" }, "tags": [] } ] }