Paircast Video

This repository was created with Paircast.

Watch on Paircast to see this project built line-by-line.

Paircast records file changes, desktop video, camera, microphone, and open applications as you code.

---

Now it's time to make th readme. Read me That kind of says Oh, hey, you know if there's no, really it says, Hey, this is made with pear cast some thing it did. Was it get branched? So now we're on a branch of the future location of this pair cast recording. I could get into that later. ^00:01

Code.exe > readme.md - electron-notify - Visual Studio Code ^00:10 A But so we're not gonna be overriding any work in master's going on ly be working in that guest branch. ^00:20

And you'll notice here that we're watching for changes in electron Notify. So, for example, if I let just say I make a new file here. ^00:28

And we'll call it main.js, which I think this is what Victoria wants. ^00:36

Code.exe > readme.md - electron-notify - Visual Studio Code ^00:40

Um and I just heave our Abel's be say that hair cast has noticed that file and you'll notice that it also gave you a confirmation. It's tracking, so things are working. ^00:41

I think we actually want this to be my main JSF. Things were working out and we're going to continue with our tutorial. We know it works. We know it's tracking, and we can keep looking at sarcastic and firm. As we go. You'll also notice there's a max length here that's determined by your plan. ^00:57

^01:11

And any plan you get two hours. The free trial is currently half an hour. ^01:11

So for our tutorial here, we're going to copy and paste from the electron docks. If you're doing it tutorial yourself. You're probably be a little bit more hands on a little more talkative, probably explaining things a lot more. Here we go again. We're talking about here cast, so let's just copy and paste that ^01:17

chrome.exe > Quick Start Guide | Electron - Google Chrome ^01:20

^01:32

Commit 6bcac6bd0aa0c19a4adae2e376b448c54a8ef704
--- main.js
+++ main.js
@@ -1 +1,28 @@
-var a = b;
+const { app, BrowserWindow } = require('electron')
+
+function createWindow() {
+    const win = new BrowserWindow({
+        width: 800,
+        height: 600,
+        webPreferences: {
+            nodeIntegration: true
+        }
+    })
+
+    win.loadFile('index.html')
+    win.webContents.openDevTools()
+}
+
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit()
+    }
+})
+
+app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+        createWindow()
+    }
+})

We'll see again. Pair cast has detected that change. One deletion 20th edition, So it's working greats. ^01:33

On our way. ^01:39

chrome.exe > Quick Start Guide | Electron - Google Chrome ^01:40

Tutorial here tells us to make an index dot html. So let's make a new file. ^01:42

We'll call that index dot html boom again. Parka sees it. Um, I know already. This needs tohave him. Ah, you know, I'll show that on screen. We also need a package. Jason. So let's take this package. Jason here. ^01:46

Code.exe > ● index.html - electron-notify - Visual Studio Code ^01:50

^02:00

chrome.exe > Quick Start Guide | Electron - Google Chrome ^02:00

We'll open up the one that we've got, and we will put it there. Great. So packet Jason's been modified and we should be able to now go into terminal and run A P. M start. ^02:03

^02:05

Commit 2ef4c173670c6b3f371d93c96413f24ae4e38428
--- package.json
+++ package.json
@@ -1,15 +1,8 @@
 {
-  "name": "electron-notify",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "name": "my-electron-app",
+  "version": "0.1.0",
+  "main": "main.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "electron": "^10.1.5"
+    "start": "electron ."
   }
 }

Paircast.exe > Paircast ^02:10

Boom. Okay, so that gives us our Hello, World electron tutorial. ^02:15

ConEmu64.exe > Cmder ^02:20

And what we're going to do now is modified a little bit, so if we just simply add a style tag. ^02:20

Code.exe > ● index.html - electron-notify - Visual Studio Code ^02:30

Text Yes. ^02:30

How'd we do? ^02:33

Back ground color whites ^02:34

^02:37

Commit 05edbcd27e25e4c5c94e924f482a4c4b6f1b19c5
--- index.html
+++ index.html
@@ -5,6 +5,9 @@
     <meta charset="UTF-8">
     <title>Hello World!</title>
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+    <style type="text/css">
+        background-color: white;
+    </style>
 </head>
 
 <body>

I always forget to write body here. Okay, There we go. Save it. So I made a mistake there and that'll show up in the transcript. I'll show you later How we can edit out a mistake like that. But here we can see its detected all those changes. You know, again. We're still logging. What's going on? ^02:38

^02:42

Commit 7190655488ad4e3764c5839ec2c0fe739602bcfb
--- index.html
+++ index.html
@@ -6,7 +6,10 @@
     <title>Hello World!</title>
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
     <style type="text/css">
-        background-color: white;
+        body {
+            background-color: white;
+
+        }
     </style>
 </head>
 

^02:43

Commit cb363786cce500701d210c808f41bec7c6a60788
--- index.html
+++ index.html
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <title>Hello World!</title>
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
-    <style type="text/css">
-        body {
-            background-color: white;
-
-        }
-    </style>
-</head>
-
-<body>
-    <h1>Hello World!</h1>
-    We are using node
-    <script>document.write(process.versions.node)</script>,
-    Chrome
-    <script>document.write(process.versions.chrome)</script>,
-    and Electron
-    <script>document.write(process.versions.electron)</script>.
-</body>
-
-</html>

Paircast.exe > Paircast ^02:50

Um, so we've modified that file over three minutes in. If we start the APP to get the white background that's great. ^02:54

^03:00

ConEmu64.exe > Cmder ^03:00

So we're going to do now is work with electron notifications. ^03:05

It isthe notifications notifications on vacation there, But there they are. ^03:09

chrome.exe > Documentation | Electron - Google Chrome ^03:10

And we're just going to copy and paste this file here. ^03:16

chrome.exe > Notifications (Windows, Linux, macOS) | Electron - Google Chrome ^03:20

Into the main Js. ^03:22

And this is going to enable us to use notifications Electron. So now when I run this code, we got a basic notification from electron. ^03:25

^03:27

Commit 8b55da3f7207c1efa9975653d2f6ec8877d93b54
--- index.html
+++ index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
+    <style type="text/css">
+        body {
+            background-color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Hello World!</h1>
+    We are using node
+    <script>document.write(process.versions.node)</script>,
+    Chrome
+    <script>document.write(process.versions.chrome)</script>,
+    and Electron
+    <script>document.write(process.versions.electron)</script>.
+</body>
+
+</html>

^03:27

Commit 8b55da3f7207c1efa9975653d2f6ec8877d93b54
--- main.js
+++ main.js
@@ -1,5 +1,17 @@
 const { app, BrowserWindow } = require('electron')
 
+const { Notification } = require('electron')
+
+function showNotification() {
+    const notification = {
+        title: 'Basic Notification',
+        body: 'Notification from the Main process'
+    }
+    new Notification(notification).show()
+}
+
+app.whenReady().then(createWindow).then(showNotification)
+
 function createWindow() {
     const win = new BrowserWindow({
         width: 800,

ConEmu64.exe > Cmder ^03:30

Great. ^03:35

Already. So to recap here. ^03:38

obs64.exe > OBS 25.0.8 (64-bit, windows) - Profile: Untitled - Scenes: Untitled ^03:40

We've tracked all our changes, or about four minutes in ^03:45

Again. We have this branch or working out of this pair cast branch. And if you noticed here if we do a get log ^03:48

ConEmu64.exe > Cmder ^03:50

Bring us into interview. I'll keep it there. ^03:55

If we do get Logue, you'll notice that paradise is automatically made a bunch of commits for us so we can see ^03:59

^04:05

The history of all of our changes, So let's leave that ^04:05

And now we're going to finish and publish. ^04:10