End-to-end routesAppifio Creator · Lesson AM12 · Worked examples
9 end-to-end examples
copy · adjust · run
Blog admin/public, a separate auth panel, contact & checkout forms - each example is a shortened block that still keeps every important call.
CMS file names: Examples use blog.json (CMS off). Aura CMS on → swap to blog-posts.json, shop-orders.json… per the manifest (AM11).
Method detail: AM02 (indexed) · AM05 (routes) · AM06 (auth) · AM08 (helpers) · AM10 (URL/empty/rate limit).
Auth: The client keeps the session after login - never read/write login.json.
Example 1
Create a blog post + tag + category + route
Client examplesWhen: Custom admin panel - publish a new post with a public URL.
Steps: (1) validateAdminSession (2) generateSlug (3) appendData (4) addRoute for the post (5) addRoute for tag/category if missing.
async function createBlog(title, author, content, tags = [], category = 'Uncategorized') {
await appifio_client.validateAdminSession()
const slug = appifio_client.appifio_generateSlug(title)
const save = await appifio_client.appifio_appendData('blog.json', {
title, slug, author, content, tags, category,
excerpt: (content || '').replace(/<[^>]+>/g,'').slice(0,150)
})
if (!save.success) throw new Error(save.message)
await appifio_client.appifio_addRoute(slug, 'blog/detail.html', 'blog')
for (const tag of tags) {
const ts = appifio_client.appifio_generateSlug(tag)
if (ts) await appifio_client.appifio_addRoute('tag/' + ts, 'blog/tag.html', 'tag')
}
const cs = appifio_client.appifio_generateSlug(category)
if (cs) await appifio_client.appifio_addRoute('category/' + cs, 'blog/category.html', 'category')
return { id: save.data.id, slug }
}Example 2
Delete a post + removeRoute
When: Admin deletes a post - avoid ghost 404s or slugs pointing at deleted data.
Steps: (1) validate (2) readFile(id) for slug (3) updateData(null) (4) removeRoute.
async function deleteBlog(blogId) {
await appifio_client.validateAdminSession()
const item = await appifio_client.appifio_readFile('blog.json', blogId)
const slug = item.data?.content?.slug
if (!slug) throw new Error('Post not found')
await appifio_client.appifio_updateData('blog.json', blogId, null)
await appifio_client.appifio_removeRoute(slug)
}Example 3
Blog detail page (blog/detail.html)
When: Visitor opens a post slug - public, no token.
Steps: (1) waitForAppStorage (2) getRouteSlug (3) readList to find id (4) readFile(id) (5) formatDateTime.
document.addEventListener('DOMContentLoaded', async () => {
await window.waitForAppStorage()
const slug = appifio_client.appifio_getRouteSlug()
const list = await appifio_client.appifio_readList('blog.json', ['id','slug'])
const match = (list.data?.content || []).find(b => b.slug === slug)
if (!match) return showError('Post not found')
const detail = await appifio_client.appifio_readFile('blog.json', match.id)
const blog = detail.data?.content
if (!blog) return showError('Post not found')
document.getElementById('blog-title').textContent = blog.title
document.getElementById('blog-date').textContent =
appifio_client.appifio_formatDateTime(blog.created_at, 'date')
document.getElementById('blog-content').innerHTML = blog.content
})Example 4
Tag page (blog/tag.html)
When: URL like /urlname/tag/javascript.
Steps: Parse slug after tag/ → readList → filter by tag (compare generateSlug) → link with getAbsoluteUrl(post.slug).
await window.waitForAppStorage()
const parts = window.location.pathname.split('/').filter(Boolean)
const tagIdx = parts.indexOf('tag')
const tagSlug = tagIdx >= 0 ? parts[tagIdx + 1] : ''
const res = await appifio_client.appifio_readList('blog.json',
['id','title','slug','tags','created_at'])
const tagged = (res.data?.content || []).filter(b =>
(b.tags || []).some(t => appifio_client.appifio_generateSlug(t) === tagSlug)
)
tagged.forEach(post => {
const when = appifio_client.appifio_formatDateTime(post.created_at, 'date')
// …
})
Storage for formsAppifio Creator · Method series · AM12