First Application
This section will guide you through creating your first application using OSI. We'll create a simple file manager that demonstrates the basic usage of OSI's core features.
- Node.js Application
- Electron Application
Project Setup
- Create a new directory and initialize the project:
mkdir osi-test
cd osi-test
npm init -y
- Install required dependencies:
npm install osi.onpremises typescript
npm install --save-dev @types/node
Implementation
Main Application (index.ts)
import { fs, os } from 'osi.onpremises';
async function main() {
try {
// List files in current directory
const files = await fs.ls('.');
console.log('Files in current directory:');
files.forEach(file => {
console.log(`${file.name} (${file.size} bytes)`);
});
// Get system information
const cpuInfo = await os.cpu();
console.log('\nSystem Information:');
console.log(`Architecture: ${cpuInfo.architecture}`);
console.log(`Processor: ${cpuInfo.processor}`);
} catch (error) {
console.error('Error:', error);
}
}
main();
Running the Application
- Add the following script to your
package.json:
{
"scripts": {
"start": "ts-node src/index.ts"
}
}
- Start the application:
npm start
Project Setup
- Create a new directory and initialize the project:
mkdir osi-test
cd osi-test
npm init -y
- Install required dependencies:
npm install electron osi.onpremises typescript
npm install --save-dev @types/node
Implementation
1. Main Process (main/index.ts)
import { app, BrowserWindow, ipcMain } from 'electron';
import { fs, Process, EventWatcher, os, db } from 'osi.onpremises';
import path from 'path';
let mainWindow: BrowserWindow;
async function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
});
await mainWindow.loadFile('index.html');
}
// IPC Handlers
ipcMain.handle('list-files', async (_, dirPath: string) => {
try {
const files = await fs.ls(dirPath);
return files;
} catch (error) {
console.error('Error listing files:', error);
throw error;
}
});
ipcMain.handle('get-system-info', async () => {
try {
const cpuInfo = await os.cpu();
return cpuInfo;
} catch (error) {
console.error('Error getting system info:', error);
throw error;
}
});
app.whenReady().then(createWindow);
2. Preload Script (preload.js)
import { contextBridge, ipcRenderer } from 'electron';
contextBridge.exposeInMainWorld('osi', {
listFiles: (dirPath: string) => ipcRenderer.invoke('list-files', dirPath),
getSystemInfo: () => ipcRenderer.invoke('get-system-info')
});
3. Renderer Process (index.html)
<!DOCTYPE html>
<html>
<head>
<title>OSI File Manager</title>
</head>
<body>
<h1>File Manager</h1>
<div id="file-list"></div>
<div id="system-info"></div>
<script>
async function loadFiles() {
try {
const files = await window.osi.listFiles('.');
const fileList = document.getElementById('file-list');
fileList.innerHTML = files.map(file =>
`<div>${file.name} (${file.size} bytes)</div>`
).join('');
} catch (error) {
console.error('Error loading files:', error);
}
}
async function loadSystemInfo() {
try {
const info = await window.osi.getSystemInfo();
const systemInfo = document.getElementById('system-info');
systemInfo.innerHTML = `
`;
} catch (error) {
console.error('Error loading system info:', error);
}
}
// Load initial data
loadFiles();
loadSystemInfo();
</script>
</body>
</html>
Running the Application
- Add the following script to your
package.json:
{
"scripts": {
"start": "electron ."
}
}
- Start the application:
npm start
What We've Learned
This example demonstrates:
- Setting up an application with OSI
- Using the FileSystem module to list files
- Using the OS module to get system information
- Proper error handling
- IPC communication (Electron only)
Next Steps
Now that you have a basic understanding of OSI, you can:
- Explore the Core Components documentation
- Learn about the API Reference
- Check out Best Practices for more advanced usage