jinsi ya Kutengeneza app | hatua ya 1 | Manifest File (manifest.json) Kwa App

Kama unataka Faulink.com iwe app inayoweza ku-install kwenye simu au kompyuta, hatua ya kwanza ni kutengeneza faili muhimu sana liitwalo Web App Manifest au manifest.json.
Hili ndilo faili linaloeleza:

Jina la app

Icon za app

Rangi za app

Screen mode

Page ya kuanza (start_url)

Na jinsi browser inapaswa kuonyesha app kwenye home screen

Kwa kifupi, manifest.json ndilo linaifanya website iwe kama app halisi.

🔥 Manifest File Ni Nini?

Manifest ni faili la JSON ambalo linaiambia browser kuwa website yako inaweza ku-installika kama app (PWA — Progressive Web App).
Bila faili hili, hakuna simu au browser inaweza kutoa button ya:

“Install App”
au
“Add to Home Screen”

Ndiyo maana ni hatua ya kwanza na ya msingi.

🛠️ Jinsi ya Kutengeneza manifest.json kwa Faulink.com

Hatua ni rahisi sana — unatengeneza tu faili moja ndani ya root folder ya website yako.

📄 Mfano wa manifest.json (Faulink App)

Huu hapa ni mfano wa kitaalamu unaofaa kwa Faulink.com:

{
"name": "Faulink Official App",
"short_name": "Faulink",
"description": "Faulink App - Mifumo, Matokeo, Mauzo, Uhasibu, Timetable, Mikopo na Elimu ya Teknolojia.",
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a73e8",
"orientation": "portrait",
"icons": [
{
"src": "icons/faulink-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/faulink-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

🧩 Maelezo ya Kila Kipengele
✔ name

Jina kamili la app likionekana wakati wa ku-install.

✔ short_name

Jina fupi litakaloonekana kwenye Home Screen ya simu.

✔ start_url

Page inayofunguka app ikianza — kwa Faulink tunatumia:

/

✔ display

standalone inafanya app ionekane kama app halisi bila address bar.

✔ background_color + theme_color

Rangi za splash screen, status bar na loading screen.

✔ icons

Icon za app (192 na 512 ndio muhimu zaidi kwa Android & Chrome).

📁 Mahali pa Kuweka manifest.json

Weka faili hili hapa:

/faulink.com/manifest.json

Kisha hakikisha icons ziko hapa:

/faulink.com/icons/faulink-192.png
/faulink.com/icons/faulink-512.png

🔗 Hatua inayofuata ni muhimu sana

Baada ya kutengeneza manifest.json, lazima ufanye:

👉 Kuunganisha manifest.json kwenye <head> ya website
👉 Kutengeneza Service Worker (sw.js)
👉 Kufanya site iwe installable

Nitaandaa blog post ya Hatua ya 2 (Kutengeneza Service Worker) ukitaka.

📌 Hitimisho

Hatua ya kutengeneza manifest.json ndiyo msingi wa kubadilisha Faulink.com kuwa PWA App.
Baada ya kuongeza faili hili, tayari umefikisha 25% ya kazi ya kuunda app inayoweza ku-install.