217 lines
4 KiB
Markdown
217 lines
4 KiB
Markdown
# MacOS con Capacitor Electon
|
||
|
||
creare un foder
|
||
|
||
inizializza Capacitor
|
||
|
||
```
|
||
npm install @capacitor/core @capacitor/cli
|
||
npx cap init "MyApps" "it.patachina.myapps" --web-dir=web
|
||
```
|
||
inserisci in name il nome che vuoi x es MyApps
|
||
|
||
in id xesemoio it.patachina.myapps
|
||
|
||
in Web asset directory metti web (la dir dove si trova il file statico)
|
||
|
||
aggiungi Electon
|
||
|
||
```
|
||
npm install @capacitor-community/electron electron
|
||
npx cap add @capacitor-community/electron
|
||
```
|
||
copia il file statico nella cartella web
|
||
|
||
per esempio
|
||
|
||
```
|
||
/web/index.html
|
||
/web/style.css
|
||
/web/app.js
|
||
```
|
||
|
||
build e sync
|
||
|
||
```
|
||
npx cap sync
|
||
```
|
||
avvia l'app macOS per testare se funziona
|
||
|
||
```
|
||
npx cap open @capacitor-community/electron
|
||
```
|
||
|
||
crea il pacchetto .app
|
||
|
||
```
|
||
npm install electron-builder --save-dev
|
||
```
|
||
|
||
modifica il tuo package.json inserendo alla fine
|
||
|
||
```
|
||
"scripts": {
|
||
"electron:build": "electron-builder -c electron-builder.json"
|
||
}
|
||
```
|
||
|
||
oppure per una versione più semplice
|
||
|
||
```
|
||
"scripts": {
|
||
"electron:build": "electron-builder"
|
||
}
|
||
```
|
||
|
||
inserisci anche i campi name,version,description,author,main
|
||
|
||
inoltre
|
||
|
||
```
|
||
"electron": "^39.2.7"
|
||
```
|
||
deve essere in devDependencies non dependencies
|
||
il file deve diventare
|
||
|
||
```
|
||
{
|
||
"name": "MyApps",
|
||
"version": "1.0.0",
|
||
"description": "Cross-platform launcher built with Capacitor and Electron",
|
||
"author": "Fabio",
|
||
"main": "electron/main.js",
|
||
"dependencies": {
|
||
"@capacitor-community/electron": "^5.0.1",
|
||
"@capacitor/cli": "^7.4.4",
|
||
"@capacitor/core": "^8.0.0"
|
||
},
|
||
"devDependencies": {
|
||
"electron": "^39.2.7",
|
||
"electron-builder": "^26.0.12"
|
||
},
|
||
"scripts": {
|
||
"electron:build": "electron-builder -c electron-builder.json"
|
||
}
|
||
}
|
||
```
|
||
nella root aggiungi il file electron-builder.json
|
||
|
||
```
|
||
{
|
||
"appId": "it.fabio.myapps",
|
||
"productName": "MyApps",
|
||
"directories": {
|
||
"output": "dist-electron"
|
||
},
|
||
"files": [
|
||
"electron/**/*",
|
||
"web/**/*"
|
||
],
|
||
"mac": {
|
||
"category": "public.app-category.productivity",
|
||
"icon": "electron/assets/casina.icns",
|
||
"identity": null,
|
||
"hardenedRuntime": false,
|
||
"gatekeeperAssess": false,
|
||
"notarize": false
|
||
},
|
||
"win": {
|
||
"target": "nsis"
|
||
},
|
||
"linux": {
|
||
"target": "AppImage"
|
||
}
|
||
}
|
||
```
|
||
visti i tempi lunghi di certificazione solo quando va bene puoi modificare in
|
||
|
||
```
|
||
"identity": "MyCustomCert",
|
||
```
|
||
vedi sotto come creare la MyCustomCert
|
||
|
||
copiare casina.icns (macos vuole solo quella estensione)
|
||
|
||
```
|
||
cp icons/casina.icns electron/assets/
|
||
```
|
||
|
||
in electron/assets/
|
||
|
||
creare in electron il file main.js
|
||
|
||
```
|
||
nano electron/main.js
|
||
```
|
||
e inserire
|
||
|
||
```
|
||
// electron/main.js
|
||
const { app, BrowserWindow } = require('electron');
|
||
const path = require('path');
|
||
|
||
function createWindow() {
|
||
const win = new BrowserWindow({
|
||
width: 1200,
|
||
height: 800,
|
||
webPreferences: {
|
||
preload: path.join(__dirname, 'preload.js')
|
||
}
|
||
});
|
||
|
||
win.loadFile(path.join(__dirname, '../web/index.html'));
|
||
}
|
||
|
||
app.whenReady().then(() => {
|
||
createWindow();
|
||
|
||
app.on('activate', () => {
|
||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||
});
|
||
});
|
||
|
||
app.on('window-all-closed', () => {
|
||
if (process.platform !== 'darwin') app.quit();
|
||
});
|
||
```
|
||
|
||
ora puoi builare
|
||
|
||
```
|
||
npm run electron:build
|
||
```
|
||
|
||
|
||
## Genera chiave privata + certificato con estensioni Code Signing
|
||
|
||
```
|
||
openssl req -x509 -nodes -days 365 \
|
||
-newkey rsa:2048 \
|
||
-keyout mycert.key \
|
||
-out mycert.crt \
|
||
-config codesign.cnf
|
||
```
|
||
Unisci chiave + certificato in un PEM
|
||
|
||
```
|
||
cat mycert.key mycert.crt > mycert.pem
|
||
```
|
||
|
||
Importa nel portachiavi login
|
||
````
|
||
security import mycert.pem -k ~/Library/Keychains/login.keychain-db -A
|
||
```
|
||
|
||
rendere il certificato attendibile per la firma codice
|
||
|
||
1️⃣ Apri Accesso Portachiavi
|
||
Applicazioni → Utility → Accesso Portachiavi
|
||
|
||
2️⃣ Colonna sinistra → seleziona login
|
||
3️⃣ Colonna centrale → vai su I miei certificati
|
||
4️⃣ Fai doppio clic su MyCustomCert
|
||
5️⃣ Vai nella sezione Attendibilità
|
||
6️⃣ Imposta:
|
||
👉 Quando si usa questo certificato: Considera sempre attendibile
|
||
7️⃣ Chiudi la finestra
|
||
macOS ti chiede la password → conferma.
|