diff --git a/content/.gitkeep b/content/.gitkeep deleted file mode 100644 index e69de29bb..000000000 diff --git a/content/00-Overview/Home.md b/content/00-Overview/Home.md new file mode 100644 index 000000000..c9958f16d --- /dev/null +++ b/content/00-Overview/Home.md @@ -0,0 +1,25 @@ +# ⚡ Electron.js Crash Course + +**University:** +**Semester:** +**Students:** ~__ | Background: Basic HTML/CSS + +--- + +## 📋 Sessions + +| # | Title | Status | +| --- | ----------------------------------------------- | ------- | +| 1 | [[Session 1 - How Electron Works]] | ✅ Ready | +| 2 | [[Session 2 - JavaScript Bootcamp]] | ✅ Ready | +| 3 | [[Session 3 - Windows Menus & Native Features]] | ✅ Ready | +| 4 | [[Session 4 - IPC Communication]] | ✅ Ready | +| 5 | [[Session 5 - App Design & WebSockets Intro]] | ✅ Ready | +| 6 | [[Session 6 - WebSocket Server]] | ✅ Ready | +| 7 | [[Session 7 - Connecting UI to WebSocket]] | ✅ Ready | +| 8 | [[Session 8 - Packaging & Distribution]] | ✅ Ready | + +--- + +## 🏁 Final Project +[[Final Project - LAN Chat App]] diff --git a/content/01-Sessions/Session 1 - How Electron Works.md b/content/01-Sessions/Session 1 - How Electron Works.md new file mode 100644 index 000000000..365dfc55a --- /dev/null +++ b/content/01-Sessions/Session 1 - How Electron Works.md @@ -0,0 +1,126 @@ +--- +tags: [electron, setup, architecture] +session: 1 +duration: 2 hours +status: ready +--- + +# Session 1 — The Desktop Web: How Electron Works + +## 🎯 Objectives +- Understand what Electron is and why it exists +- Set up the development environment +- Run a working Electron app +- Understand the Main vs Renderer process model + +--- + +## 🧠 Concepts Covered + +### What is Electron? +Electron lets you build desktop apps using HTML, CSS, and JavaScript. +It bundles two things together: +- **Chromium** → renders your UI (like a built-in browser) +- **Node.js** → gives you access to the filesystem, OS, and more + +> Real apps built with Electron: VS Code, Slack, Discord, Figma, Notion + +### Desktop vs Web Apps +| Web App | Desktop App | +|---------|-------------| +| Runs in browser | Runs natively on OS | +| No file system access | Full file system access | +| URL-based | Has its own window/icon | +| Auto-updated | Needs packaging/installer | + +### The Two-Process Model ⚠️ (Most Important Concept) +``` +┌─────────────────────────────┐ +│ MAIN PROCESS │ ← Node.js world +│ - Creates windows │ File system, OS APIs +│ - App lifecycle │ +│ - Background logic │ +└────────────┬────────────────┘ + │ IPC (messages) +┌────────────▼────────────────┐ +│ RENDERER PROCESS │ ← Browser world +│ - Displays your HTML/CSS │ DOM, UI events +│ - One per window │ +└─────────────────────────────┘ +``` + +**Key rule:** Renderer cannot directly access Node.js. They communicate via IPC (covered in Session 4). + +--- + +## 🖥 Talking Points + +1. Open VS Code and show the folder structure of a blank Electron app +2. Walk through `package.json` — point out `"main": "main.js"` +3. Open `main.js` — explain `app.whenReady()` and `BrowserWindow` +4. Open `index.html` — show it's just normal HTML +5. Run `npm start` — a window appears! + +--- + +## 💻 Live Demo +```js +// main.js — bare minimum Electron app +const { app, BrowserWindow } = require('electron') + +function createWindow() { + const win = new BrowserWindow({ + width: 800, + height: 600 + }) + win.loadFile('index.html') +} + +app.whenReady().then(createWindow) +``` +```html + + + + My First App + +

Hello Electron! 👋

+ + +``` + +--- + +## 🛠 Hands-on Exercise (45 min) + +**Goal:** Get a window running and customize it + +1. Install Node.js from nodejs.org +2. Run in terminal: +```bash + mkdir my-electron-app + cd my-electron-app + npm init -y + npm install --save-dev electron +``` +3. Create `main.js` and `index.html` from the demo above +4. Add to `package.json`: `"start": "electron ."` +5. Run `npm start` + +**Challenges (pick one or more):** +- Change the window title +- Change the window size to 400x400 +- Add your name in big text to `index.html` +- Set `resizable: false` on the window + +--- + +## 📦 Resources +- [Electron Docs](https://electronjs.org/docs) +- [Node.js Download](https://nodejs.org) +- [[Session 2 - JavaScript Bootcamp]] ← next session + +## ✅ Checklist +- [ ] Node.js installed on lab machines +- [ ] Starter repo shared with students +- [ ] Demo code tested on Windows + Mac diff --git a/content/01-Sessions/Session 2 - JavaScript Bootcamp.md b/content/01-Sessions/Session 2 - JavaScript Bootcamp.md new file mode 100644 index 000000000..f12de224b --- /dev/null +++ b/content/01-Sessions/Session 2 - JavaScript Bootcamp.md @@ -0,0 +1,140 @@ +--- +tags: [javascript, fundamentals, dom] +session: 2 +duration: 2 hours +status: ready +--- + +# Session 2 — JavaScript Crash Bootcamp + +## 🎯 Objectives +- Write and understand modern JavaScript +- Manipulate the DOM +- Use Node.js modules with `require` +- Install and use an npm package + +--- + +## 🧠 Concepts Covered + +### Variables & Functions +```js +// Prefer const and let over var +const name = "Alice" +let count = 0 + +// Arrow function +const greet = (name) => { + return `Hello, ${name}!` +} + +// Short form +const double = (n) => n * 2 +``` + +### DOM Manipulation +```js +// Select an element +const btn = document.getElementById('myButton') +const title = document.querySelector('h1') + +// Change content +title.textContent = "New Title" +title.style.color = "blue" + +// Listen for events +btn.addEventListener('click', () => { + console.log('Button clicked!') +}) +``` + +### Node.js Modules +```js +// Built-in Node module +const path = require('path') +const fs = require('fs') + +// Read a file +const content = fs.readFileSync('notes.txt', 'utf-8') +console.log(content) +``` + +### npm Packages +```bash +npm install moment # installs a package +``` +```js +const moment = require('moment') +console.log(moment().format('MMMM Do YYYY')) +``` + +### Async Basics +```js +// Things that take time use callbacks or async/await +setTimeout(() => { + console.log("This runs after 2 seconds") +}, 2000) +``` + +--- + +## 🖥 Talking Points + +1. Show the browser DevTools console — students can try JS right there +2. Demo DOM changes live in the browser +3. Show `require` in Node.js vs `import` (keep it simple, use require) +4. Explain why `const` is preferred + +--- + +## 🛠 Hands-on Exercise (50 min) + +**Build a click counter app, then load it in Electron** + +Part 1 — Build in browser first: +```html + + + + + + +

Click Counter

+
0
+ + + + + +``` + +Part 2 — Load it in Electron: +- Drop this `index.html` into their Electron project from Session 1 +- Run `npm start` — it's now a desktop app! + +**Challenges:** +- Add a reset button +- Show a congratulations message at 20 clicks +- Change the background color based on click count + +--- + +## 📦 Resources +- [MDN JavaScript Guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide) +- [[Session 1 - How Electron Works]] ← previous +- [[Session 3 - Windows Menus & Native Features]] ← next +- \ No newline at end of file diff --git a/content/01-Sessions/Session 3 - Windows Menus & Native Features.md b/content/01-Sessions/Session 3 - Windows Menus & Native Features.md new file mode 100644 index 000000000..4eaefe76d --- /dev/null +++ b/content/01-Sessions/Session 3 - Windows Menus & Native Features.md @@ -0,0 +1,112 @@ +--- +tags: [electron, BrowserWindow, menus, dialogs, filesystem] +session: 3 +duration: 2 hours +status: ready +--- + +# Session 3 — Windows, Menus & Native Features + +## 🎯 Objectives +- Configure BrowserWindow with different options +- Build a native application menu +- Open and save files using system dialogs +- Read and write files with Node.js `fs` + +--- + +## 🧠 Concepts Covered + +### BrowserWindow Options +```js +const win = new BrowserWindow({ + width: 1000, + height: 700, + minWidth: 400, + title: "My App", + backgroundColor: '#1e1e1e', + frame: true, // set false for frameless window + resizable: true, + webPreferences: { + preload: path.join(__dirname, 'preload.js') + } +}) +``` + +### App Lifecycle Events +```js +app.on('window-all-closed', () => { + if (process.platform !== 'darwin') app.quit() +}) + +app.on('activate', () => { + if (BrowserWindow.getAllWindows().length === 0) createWindow() +}) +``` + +### Native Menus +```js +const { Menu, MenuItem } = require('electron') + +const menu = Menu.buildFromTemplate([ + { + label: 'File', + submenu: [ + { label: 'Open', accelerator: 'CmdOrCtrl+O', click: openFile }, + { label: 'Save', accelerator: 'CmdOrCtrl+S', click: saveFile }, + { type: 'separator' }, + { role: 'quit' } + ] + }, + { role: 'editMenu' }, + { role: 'viewMenu' } +]) + +Menu.setApplicationMenu(menu) +``` + +### File Dialogs & fs +```js +const { dialog } = require('electron') +const fs = require('fs') + +async function openFile() { + const result = await dialog.showOpenDialog({ + filters: [{ name: 'Text Files', extensions: ['txt', 'md'] }] + }) + if (!result.canceled) { + const content = fs.readFileSync(result.filePaths[0], 'utf-8') + // send content to renderer via IPC (next session!) + } +} +``` + +--- + +## 🛠 Hands-on Exercise — Markdown Notepad (60 min) + +Build a simple text editor: + +**Features to implement:** +1. A `