Help with a starter html converter app

Questions
1

Hello all,
Can anyone help me to create a skeleton, startup app for converting a html, js/jQuery, CSS based template to an F7 app. I usually choose the ‘create UI’ option when starting a new project and then choose a blank, Cordova project. however i haven’t yet been able to use an existing template with these existing starter options in F7. I create the routes.js file and structure the site with index.html on the app root with other pages in a directory named ‘pages’ (or similar). I can’t get the site to run any page beyond the index page. Ideally id like to convert all pages to have the .f7 extension. remove the header and footer of each page and use f7 routes to place each page in index.f7 as it should like a proper SPA. Wrap each page body in special page class and properly utilise the id=“app” wrapper.

Can someone create an outline with the structure i need? only one file is needed in the pages directory, ill get the idea. I’ve copied f7 starter but there’s still something missing preventing the pages working. I’m still learning ES6 style js but understand the routing system well enough.

Much thanks in advance …

1 Like
2

Você pode transformar um app web (HTML, CSS, JS/jQuery) em um aplicativo Fedora 7 criando um Progressive Web App (PWA) e empacotando-o como RPM para Fedora. Abaixo está um esqueleto inicial para começar.

:package: Estrutura básica do aplicativo

Aqui está um esqueleto de diretório e arquivos para seu app:

meu-app-fedora7/
├── index.html
├── style.css
├── script.js
├── manifest.json
├── service-worker.js
└── fedora/
    └── meu-app.spec

:framed_picture: index.html 

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu App Fedora7</title>
  <link rel="stylesheet" href="style.css">
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <h1>Olá Fedora!</h1>
  <button id="btn">Clique aqui</button>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

:art: style.css 

body {
  font-family: sans-serif;
  text-align: center;
  margin-top: 50px;
}
button {
  padding: 10px 20px;
  font-size: 16px;
}

:gear: script.js 

$(document).ready(function() {
  $('#btn').click(function() {
    alert('Você clicou no botão!');
  });
});

:iphone: manifest.json (para PWA)

{
  "name": "Meu App Fedora7",
  "short_name": "AppFedora",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [{
    "src": "icon.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

:wrench: service-worker.js (cache offline)

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('meu-app-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/script.js'
      ]);
    })
  );
});

:package: Empacotando como RPM para Fedora

Dentro da pasta fedora/, crie um arquivo .spec para empacotar como RPM:

Name:           meu-app-fedora7
Version:        1.0
Release:        1%{?dist}
Summary:        Aplicativo Web convertido para Fedora

License:        MIT
URL:            http://exemplo.com
Source0:        %{name}-%{version}.tar.gz

BuildArch:      noarch

%description
Aplicativo Web em HTML, CSS e JS convertido para Fedora.

%prep
%setup -q

%install
mkdir -p %{buildroot}/opt/meu-app-fedora7
cp -r * %{buildroot}/opt/meu-app-fedora7

%files
/opt/meu-app-fedora7

%changelog
* Sex Out 31 2025 Copilot - Versão inicial

:white_check_mark: Próximos passos

  • Teste o app como PWA em navegador.
  • Gere o pacote .tar.gz do app.
  • Use rpmbuild -ba meu-app.spec para criar o RPM.
  • Instale com sudo dnf install meu-app-fedora7.rpm.

Se quiser, posso te ajudar a gerar o pacote RPM ou configurar o ambiente de desenvolvimento no Fedora. Quer seguir por esse caminho?

3

Thanks for this @ [Matheus22782] - this seems a little more complicated than i need and i’m having to translate from your native language to English. But from what i see this is a Fedora PWA app. This doesn’t make any reference to the F7 structure that i was asking about. I definitely don’t want to go the way of PWA; just the Cordova library with F7 will suffice. Though i do see reference to Copilot in one of your files, which has given me an idea. So thanks for the pointers i could glean from this.

Cheers.