From 990f6cdd8dd1c411185f7b01ad257cc749fa2dd2 Mon Sep 17 00:00:00 2001 From: leogdion Date: Wed, 14 Aug 2024 13:03:42 -0400 Subject: [PATCH 1/8] Create introduction.md --- docs/introduction.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 docs/introduction.md diff --git a/docs/introduction.md b/docs/introduction.md new file mode 100644 index 0000000..8250b19 --- /dev/null +++ b/docs/introduction.md @@ -0,0 +1,5 @@ +# Why + +## Brief overview of Heartwitch: The inspiration behind gBeat + +## Introduction to gBeat: A health and fitness live streaming app From 8903107c94e2fbade5fe6f516ec3c1b74aa5b180 Mon Sep 17 00:00:00 2001 From: Leo Dion Date: Wed, 14 Aug 2024 13:44:03 -0400 Subject: [PATCH 2/8] added first paragraph to Heartwitch Story --- docs/introduction.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/introduction.md b/docs/introduction.md index 8250b19..dcfc3d0 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -1,5 +1,14 @@ # Why +It's one thing to create a server-side app which works for your iPhone and runs a simple service but I wanted to create an app which was dynamic and used Apple's tiniest device - the Apple Watch. + + ## Brief overview of Heartwitch: The inspiration behind gBeat + +I am a fan of classic retro video games and over the last 10 years a culture of speed running `What is Speedrunning` has emerged. As one can imagine when you are trying to beat `a video game` in record time, your heart rate can get high. There are a class of devices which specifically for this. However if one were to already wear a smart device which read the user's heart rate while speed running, it would remove the need for third party devices and remove one extra layer of inconvenience. + +This became the genesis of **Heartwitch** an app dedicated to Twitch live streamers who wished to share their heart rate while playing video games. not just speed runners but also horror games as well. + ## Introduction to gBeat: A health and fitness live streaming app + From d435b02df3669ea6bb5bc45371ed53511fcc72fe Mon Sep 17 00:00:00 2001 From: Leo Dion Date: Tue, 20 Aug 2024 10:36:16 -0400 Subject: [PATCH 3/8] adding more sections --- docs/full-stack-swift.md | 41 +++++++++++++++++++++++++ docs/gbeat.md | 40 ++++++++++++++++++++++++ docs/introduction.md | 5 ++- media/gBeat-Works-2024-08-20-142518.svg | 1 + 4 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 docs/full-stack-swift.md create mode 100644 docs/gbeat.md create mode 100644 media/gBeat-Works-2024-08-20-142518.svg diff --git a/docs/full-stack-swift.md b/docs/full-stack-swift.md new file mode 100644 index 0000000..71addf3 --- /dev/null +++ b/docs/full-stack-swift.md @@ -0,0 +1,41 @@ +# The Power of Full Stack Swift + +As has been stated there's a lot of benefit to building a Full Stack Swift app. + +## Unified Language Ecosystem + +We have one language for passing models and sharing business logic across devices and servers. + + +## Type Safety Across the Stack + +We can take advantage of the safety Swift has to offer for developer. + + +## Performance Benefits + +There's plenty of benefits when it comes to performance especially when going with a more budget-friendly host. + + +## Apple's Ecosystem Integration + +Along with sharing server-side code, we have the ability to port our app to all of Apple's devices easily. + + +## Growing Server-Side Swift Community + + + + +## Simplified Deployment and Scaling + +Server-Side Swift is friendly to services like Heroku but importantly Docker which is universally accepted and well supported. + +## Developer Productivity + +Being able to easily debug and analyze server-side and device side code via Xcode is a huge boost to developer productivity. + + +## Case Study: gBeat's Experience with Full Stack Swift + +Let's now talk about how gBeat took advatage of this. diff --git a/docs/gbeat.md b/docs/gbeat.md new file mode 100644 index 0000000..52e35dd --- /dev/null +++ b/docs/gbeat.md @@ -0,0 +1,40 @@ +# The gBeat Ecosystem + +## How the applications work + +```mermaid +flowchart TD + A(Apple Watch) -->|Sends Health Stats| B(Vapor Server) + B --> |Sends Health Stats| C + C(Web Browser) --> |Opens Web Socket| B + + 2. Integration with Apple Watch + 3. User experience highlights +``` + +![How it works Diagram](/media/gBeat-Works-2024-08-20-142518.svg) + +### Participant +1. User Signs in with Apple +2. User Enters Code for Workout Class +3. User Starts Workout + +### Instructor +1. Instructor Signs In With Apple +2. Instructor Creates a Workout Class with an optional schedule. +3. Instructor Starts the Class +4. Instructor Shares Web Browser in Streaming Platform +5. Instructors Shares Workout Class Code +6. Class Begins! + +## Integration with Apple Watch + +1. Restricts User Interface to Simplest Possible +2. (Independent without iPhone App) Reduces exposure to App Store +3. Developer Challenges +4. Wish there was another way without the code. + +## User experience highlights + +1. Simple Authentication Experience on Apple Watch. +2. Quick ... \ No newline at end of file diff --git a/docs/introduction.md b/docs/introduction.md index dcfc3d0..a2a0fee 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -6,9 +6,12 @@ It's one thing to create a server-side app which works for your iPhone and runs ## Brief overview of Heartwitch: The inspiration behind gBeat -I am a fan of classic retro video games and over the last 10 years a culture of speed running `What is Speedrunning` has emerged. As one can imagine when you are trying to beat `a video game` in record time, your heart rate can get high. There are a class of devices which specifically for this. However if one were to already wear a smart device which read the user's heart rate while speed running, it would remove the need for third party devices and remove one extra layer of inconvenience. +I am a fan of classic retro video games and over the last 10 years a culture of speed running `What is Speed running` has emerged. As one can imagine when you are trying to beat `a video game` in record time, your heart rate can get high. There are a class of devices which specifically for this. However if one were to already wear a smart device which read the user's heart rate while speed running, it would remove the need for third party devices and remove one extra layer of inconvenience. This became the genesis of **Heartwitch** an app dedicated to Twitch live streamers who wished to share their heart rate while playing video games. not just speed runners but also horror games as well. ## Introduction to gBeat: A health and fitness live streaming app + in 2021 I was contracted by founders, Chris Hart `photo` and Chelsea Kmiec `photo` about a new app for the Apple Watch - gBeat. With a pandemic gripping the world, people weren't visiting their local gyms. What if there was an app, which could allow people to work out from home and share their heart rate in real time. `photo of gBeat in use`. + + Having heard me speak about Heartwitch on social media and my podcast, Chris was convinced gBeat could co-opt much of the same APIs and technologies in gBeat. \ No newline at end of file diff --git a/media/gBeat-Works-2024-08-20-142518.svg b/media/gBeat-Works-2024-08-20-142518.svg new file mode 100644 index 0000000..3d83cc4 --- /dev/null +++ b/media/gBeat-Works-2024-08-20-142518.svg @@ -0,0 +1 @@ +

Sends Health Stats

Sends Health Stats

Opens Web Socket

Apple Watch

Vapor Server

Web Browser

 \ No newline at end of file From 1501085b2b04269214b84c45b00b20767f97500a Mon Sep 17 00:00:00 2001 From: Leo Dion Date: Wed, 21 Aug 2024 13:51:05 -0400 Subject: [PATCH 4/8] adding authentication piece --- .gitignore | 36 +++++++++++++++++++++++++++++++ docs/technology/authentication.md | 25 +++++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 .gitignore create mode 100644 docs/technology/authentication.md diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9735178 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# Created by https://www.toptal.com/developers/gitignore/api/macos +# Edit at https://www.toptal.com/developers/gitignore?templates=macos + +### macOS ### +# General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +### macOS Patch ### +# iCloud generated files +*.icloud + +# End of https://www.toptal.com/developers/gitignore/api/macos diff --git a/docs/technology/authentication.md b/docs/technology/authentication.md new file mode 100644 index 0000000..3f32157 --- /dev/null +++ b/docs/technology/authentication.md @@ -0,0 +1,25 @@ +# Authentication with no UI + +- It's difficult to enter information on the Apple Watch - let alone username and password +- How can we avoid the user having to enter anything +- Heartwitch solution was to link their account via iCloud +- gBeat used Sign in with Apple + +## Implementation across iOS and watchOS + +- gBeat uses Sign in with Apple for the user to authenticate via iPhone and Apple Watch + +## Challenge: Sign in with Apple not available on Apple Watch simulator + +- Developing for the Apple Watch can be a challenge `how is Apple Watch a challenge` +- Using the Simulator makes it even easier +- Simulator can fake HealthKit stats be not Sign In With Apple `what happens` +- How can we fake **sign in with apple** + +### Impact on development and testing process + +- On development server save the token as a file on the Mac and copy it to the simulator directly +- Login via web site +- Simulator then watches for the file and _logs in_ + +### Workarounds and solutions \ No newline at end of file From 6d8eacc3426edf5e02b7e83fc741b093c29b4d1d Mon Sep 17 00:00:00 2001 From: leogdion Date: Wed, 21 Aug 2024 13:52:18 -0400 Subject: [PATCH 5/8] fixing mermaid chart --- docs/gbeat.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/gbeat.md b/docs/gbeat.md index 52e35dd..f5468a2 100644 --- a/docs/gbeat.md +++ b/docs/gbeat.md @@ -7,10 +7,9 @@ flowchart TD A(Apple Watch) -->|Sends Health Stats| B(Vapor Server) B --> |Sends Health Stats| C C(Web Browser) --> |Opens Web Socket| B - +``` 2. Integration with Apple Watch 3. User experience highlights -``` ![How it works Diagram](/media/gBeat-Works-2024-08-20-142518.svg) @@ -37,4 +36,4 @@ flowchart TD ## User experience highlights 1. Simple Authentication Experience on Apple Watch. -2. Quick ... \ No newline at end of file +2. Quick ... From 074d0e5763a36302aeeafd4cd65e87b39c960366 Mon Sep 17 00:00:00 2001 From: Leo Dion Date: Wed, 21 Aug 2024 13:57:12 -0400 Subject: [PATCH 6/8] ordering sections --- docs/{introduction.md => 01. introduction.md} | 0 docs/{full-stack-swift.md => 02. full-stack-swift.md} | 0 docs/{gbeat.md => 03. gbeat.md} | 0 .../authentication.md => 04. technology/01. authentication.md} | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename docs/{introduction.md => 01. introduction.md} (100%) rename docs/{full-stack-swift.md => 02. full-stack-swift.md} (100%) rename docs/{gbeat.md => 03. gbeat.md} (100%) rename docs/{technology/authentication.md => 04. technology/01. authentication.md} (100%) diff --git a/docs/introduction.md b/docs/01. introduction.md similarity index 100% rename from docs/introduction.md rename to docs/01. introduction.md diff --git a/docs/full-stack-swift.md b/docs/02. full-stack-swift.md similarity index 100% rename from docs/full-stack-swift.md rename to docs/02. full-stack-swift.md diff --git a/docs/gbeat.md b/docs/03. gbeat.md similarity index 100% rename from docs/gbeat.md rename to docs/03. gbeat.md diff --git a/docs/technology/authentication.md b/docs/04. technology/01. authentication.md similarity index 100% rename from docs/technology/authentication.md rename to docs/04. technology/01. authentication.md From 03f76430726bb499c2a18eee4a90c01feb99f733 Mon Sep 17 00:00:00 2001 From: Leo Dion Date: Wed, 21 Aug 2024 14:05:58 -0400 Subject: [PATCH 7/8] fixing names and README --- README.md | 65 ++++++++++++++++++- ...01. introduction.md => 01-introduction.md} | 0 ...-stack-swift.md => 02-full-stack-swift.md} | 0 docs/{03. gbeat.md => 03-gbeat.md} | 0 .../01-authentication.md} | 0 5 files changed, 64 insertions(+), 1 deletion(-) rename docs/{01. introduction.md => 01-introduction.md} (100%) rename docs/{02. full-stack-swift.md => 02-full-stack-swift.md} (100%) rename docs/{03. gbeat.md => 03-gbeat.md} (100%) rename docs/{04. technology/01. authentication.md => 04-technology/01-authentication.md} (100%) diff --git a/README.md b/README.md index 086b8b8..18de22f 100644 --- a/README.md +++ b/README.md @@ -1 +1,64 @@ -# server-side-swift-workout-real-world \ No newline at end of file +# How does Server Side Swift Workout in the Real World? +1. [Introduction](docs/01-introduction.md) + 1. Brief overview of Heartwitch: The inspiration behind gBeat + 2. Introduction to gBeat: A health and fitness live streaming app +2. [The Power of Full Stack Swift](docs/02-full-stack-swift.md) + 1. Unified Language Ecosystem + 2. Type Safety Across the Stack + 3. Performance Benefits + 4. Apple's Ecosystem Integration + 5. Growing Server-Side Swift Community + 6. Simplified Deployment and Scaling + 7. Developer Productivity + 8. Future-Proofing + 9. Case Study: gBeat's Experience with Full Stack Swift +3. [The gBeat Ecosystem](docs/03-gbeat.md) + 1. How the applications work + 2. Integration with Apple Watch + 3. User experience highlights +4. [Technical Deep Dive: Full Stack Swift Implementation](docs/04-technology) + 1. [Authentication system with Sign in with Apple](docs/04-technology/01-authentication.md) + 1. Implementation across iOS and watchOS + 2. Challenge: Sign in with Apple not available on Apple Watch simulator + 1. Impact on development and testing process + 2. Workarounds and solutions + 2. Development Server Auto-discovery (emphasize this as a key technical issue) + 3. Communication with Redis and WebSockets + 4. Implementing Apple Push Notification System (APNs) + 5. OpenAPI Integration + 1. Generating API documentation + 2. Ensuring consistency between API specification and implementation + 3. Benefits for frontend-backend communication and third-party integrations + 6. Web Development: Building the gBeat Website + 1. Choosing VueJS as the frontend framework + 1. Advantages for a fitness streaming application + 2. Integration with Swift backend + 2. Implementing TypeScript for improved type safety + 1. Benefits in a large-scale application + 2. Synergies with Swift's strong typing + 3. Utilizing Vite for build tooling + 1. Fast development experience + 2. Optimized production builds + 4. Webpack configuration for advanced scenarios + 5. Challenges and solutions in creating a responsive fitness streaming interface + 6. Performance optimizations for live video streaming +5. Challenges and Solutions + 1. Android integration + 1. Integrating Firebase Cloud Messaging (FCM) for cross-platform support + 2. Implementing Sign in with Google + 2. Creating a White Label app + 1. Issues with React Native and how Swift addressed them + 3. Developing a Chrome Extension for YouTube Workouts + 1. Bridging the gap between gBeat and popular YouTube fitness content + 2. Technical challenges in integrating with YouTube's player + 3. User experience considerations for seamless workout tracking + 4. How this extension complements the core gBeat application +6. Deployment and CI/CD + 1. Deploying to Heroku + 2. Setting up Continuous Integration with GitLab and GitHub +7. Future Plans + 1. Upcoming features or improvements + 2. Potential expansions of the gBeat platform +8. Conclusion + 1. Recap of key learnings + 2. Encouragement for attendees to explore Full Stack Swift for their projects \ No newline at end of file diff --git a/docs/01. introduction.md b/docs/01-introduction.md similarity index 100% rename from docs/01. introduction.md rename to docs/01-introduction.md diff --git a/docs/02. full-stack-swift.md b/docs/02-full-stack-swift.md similarity index 100% rename from docs/02. full-stack-swift.md rename to docs/02-full-stack-swift.md diff --git a/docs/03. gbeat.md b/docs/03-gbeat.md similarity index 100% rename from docs/03. gbeat.md rename to docs/03-gbeat.md diff --git a/docs/04. technology/01. authentication.md b/docs/04-technology/01-authentication.md similarity index 100% rename from docs/04. technology/01. authentication.md rename to docs/04-technology/01-authentication.md From 974db8184d79e3e1101b5108f4fc53fb99100da3 Mon Sep 17 00:00:00 2001 From: leogdion Date: Wed, 21 Aug 2024 14:07:34 -0400 Subject: [PATCH 8/8] Create README.md --- docs/04-technology/README.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/04-technology/README.md diff --git a/docs/04-technology/README.md b/docs/04-technology/README.md new file mode 100644 index 0000000..28c2be1 --- /dev/null +++ b/docs/04-technology/README.md @@ -0,0 +1 @@ +# Technology Deep Dive