Build a small blog example · checklist · don’t mix with Aura

1. Create a post (read → edit → write → route)

async function createBlog(title, author, content, tags = [], category = 'Uncategorized') {
  await window.waitForAppStorage?.();

  let blogIndex = { blogs: {}, metadata: { total: 0, last_updated: '' } };
  const result = await appifio_client.appifio_readFile('blog.json');
  if (result?.success && result.data?.exists && result.data.content) {
    try { blogIndex = JSON.parse(result.data.content); } catch (e) {}
  }

  const blogId = Date.now().toString();
  const slug = appifio_client.appifio_generateSlug(title);
  const now = new Date().toISOString().slice(0, 19).replace('T', ' ');

  blogIndex.blogs[blogId] = {
    id: blogId, title, slug, author, content,
    tags, category, created_at: now, updated_at: now
  };
  blogIndex.metadata.total = Object.keys(blogIndex.blogs).length;
  blogIndex.metadata.last_updated = now;

  const save = await appifio_client.appifio_writeFile(
    'blog.json',
    JSON.stringify(blogIndex, null, 2)
  );
  if (!save.success) throw new Error(save.message);

  // REQUIRED - without a route the post URL = 404
  await appifio_client.appifio_addRoute(slug, 'blog/detail.html', 'blog');

  return { success: true, blog: blogIndex.blogs[blogId] };
}

2. Detail page (blog/detail.html)

document.addEventListener('DOMContentLoaded', async () => {
  await window.waitForAppStorage?.();
  const slug = appifio_client.appifio_getRouteSlug();

  const r = await appifio_client.appifio_readFile('blog.json');
  if (!r.success || !r.data.exists) {
    document.body.innerHTML = '

No posts yet.

';
    return;
  }
  const data = JSON.parse(r.data.content);
  const post = Object.values(data.blogs || {}).find(b => b.slug === slug);
  if (!post) {
    document.body.innerHTML = '

Post not found.

';
    return;
  }

  document.getElementById('title').textContent = post.title;
  document.getElementById('date').textContent =
    appifio_client.appifio_formatDateTime(post.created_at, 'date');
  document.getElementById('content').innerHTML = post.content;
});

3. Delete a post - remember to remove the route

async function deleteBlogBySlug(slug) {
  await window.waitForAppStorage?.();
  const r = await appifio_client.appifio_readFile('blog.json');
  if (!r.success || !r.data.exists) return;
  const data = JSON.parse(r.data.content);
  const id = Object.keys(data.blogs).find(k => data.blogs[k].slug === slug);
  if (!id) return;
  delete data.blogs[id];
  data.metadata.total = Object.keys(data.blogs).length;
  await appifio_client.appifio_writeFile('blog.json', JSON.stringify(data, null, 2));
  await appifio_client.appifio_removeRoute(slug);
}

4. Pre-delivery checklist

5. Easy vs Aura - quick recall

Details: BR02 · choosing the tab: F01.

Appifio Creator · User guide · EM09