|
1 | 1 | ---
|
2 |
| -title: What is this deep dive demo? |
3 |
| -layout: docs |
4 |
| -nav: demo |
| 2 | +title: Aim |
| 3 | +layout: framework_docs_overview |
5 | 4 | order: 2
|
6 | 5 | ---
|
7 | 6 |
|
8 |
| -To get the deep dive demo up and running on Fly.io, all you need is an empty directory and either Node or Ruby installed. But here are some more details about what the deep dive demo app actually is. |
| 7 | +For this demo, we will start with [MDN's Web Dictaphone](https://github.com/mdn/dom-examples/tree/main/media/web-dictaphone#web-dictaphone). |
| 8 | +You can play with a [live demo](https://mdn.github.io/dom-examples/media/web-dictaphone/). This is about as basic of an |
| 9 | +HTML form as you can get, and it has the added bonus of providing the ability to generate as many media files as you want using only your voice. |
9 | 10 |
|
10 |
| -The important thing to note is that this is all very straightforward stuff using industry standard components that you can run on your laptop, a VPS, AWS EC2, Google Compute Engine, or Azure. |
11 |
| - |
12 |
| -The deep dive demo is based on [MDN's Web Dictaphone](https://github.com/mdn/dom-examples/tree/main/media/web-dictaphone+external). |
13 |
| -You can play with a [live demo hosted on GitHub](https://mdn.github.io/dom-examples/media/web-dictaphone/+external). The Web Dictaphone app is about as basic of an HTML form as you can get, and it has the added bonus of providing the ability to generate as many media files as you want using only your voice. |
14 |
| - |
15 |
| -Your own app might have many forms, and more complex forms, but the dictaphone app demonstrates the the basic flow. |
16 |
| - |
17 |
| -The basic Web Dictaphone is client side only, requiring a web server that can deploy static assets (HTML, CSS, JS, images), like NGINX, Apache HTTPd, or Caddy. Storing the data in databases requires a server that can handle HTTP GET, POST, PUT, and DELETE requests. |
18 |
| - |
19 |
| -Our deep dive demo comes in two flavors: |
20 |
| - |
21 |
| -- Node.js |
22 |
| -- Rails |
23 |
| - |
24 |
| -The demo uses the following database and storage: |
| 11 | +Your app undoubtely has many forms, and more complex forms, but once you can see the basic flow, the rest should be easy. |
25 | 12 |
|
26 |
| -* A [PostgreSQL](https://www.postgresql.org/+external) relational database to store the names of the audio clips |
27 |
| -* A [Tigris bucket](https://www.tigrisdata.com/+external) to store the the audio files |
| 13 | +That demo as it currently stands is client side only, so to deploy it all you need is a web server that can deploy static assets (HTML, CSS, JS, images), |
| 14 | +like NGINX, Apache HTTPd, or Caddy. In order to store the data in databases, we are going to need a server that can handle HTTP GET, POST, PUT, and DELETE requests. |
28 | 15 |
|
29 |
| -To satisfy the realtime requirement, the demo uses: |
| 16 | +This demo application will come in two flavors. For Node.js, we will select [Express.JS](https://expressjs.com/), and for Rails we will use [Puma](https://github.com/puma/puma). |
30 | 17 |
|
31 |
| -- [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API+external) |
32 |
| -- [Upstash for Redis](https://fly.io/docs/reference/redis/) |
| 18 | +* The names of the clips will go into a [PostgreSQL](https://www.postgresql.org/) relational database. |
| 19 | +* The audio files themselves will be placed into a [Tigris bucket](https://www.tigrisdata.com/). |
| 20 | +* For Node.js, the bulk of this code is in [app.js](https://github.com/fly-apps/node-dictaphone/blob/main/app.js). For Rails, |
| 21 | +[app/controller/clipController.rb](https://github.com/fly-apps/rails-dictaphone/blob/main/app/controllers/clips_controller.rb). |
33 | 22 |
|
34 |
| -## Node.js |
| 23 | +To satisfy the realtime requirement, we will need [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) |
| 24 | +and [Upstash for Redis](https://fly.io/docs/reference/redis/). The Node.js implementation is in [pubsub.js](https://github.com/fly-apps/node-dictaphone/blob/main/pubsub.js). |
| 25 | +For Rails, the heavy lifting is done by [ActionCable](https://guides.rubyonrails.org/action_cable_overview.html), so all that is needed is |
| 26 | +one line in [app/models/clip.rb](https://github.com/fly-apps/rails-dictaphone/blob/6bdf4f639640c9fb55530546dbbed682b65a7df9/app/models/clip.rb#L2) |
| 27 | +and one line in [app/views/layouts/application.html.erb](https://github.com/fly-apps/rails-dictaphone/blob/6bdf4f639640c9fb55530546dbbed682b65a7df9/app/views/layouts/application.html.erb#L9). |
35 | 28 |
|
36 |
| -The Node.js flavor of the deep dive demo uses an [Express.JS](https://expressjs.com/+external) server. |
37 |
| - |
38 |
| -If you're looking for specific code: |
39 |
| - |
40 |
| -* The bulk of the app code is in [app.js](https://github.com/fly-apps/node-dictaphone/blob/main/app.js) |
41 |
| -* The realtime implementation code is in [pubsub.js](https://github.com/fly-apps/node-dictaphone/blob/main/pubsub.js) |
42 |
| - |
43 |
| -## Rails |
44 |
| - |
45 |
| -The Rails flavor of the deep dive demo uses a [Puma](https://github.com/puma/puma+external) server. |
46 |
| - |
47 |
| -If you're looking for specific code: |
| 29 | +The important thing to note is that this is all very straightforward stuff using industry standard components that you can run on your laptop, a VPS, AWS EC2, Google Compute Engine, or Azure. |
48 | 30 |
|
49 |
| -* The bulk of the app code is in [app/controller/clipController.rb](https://github.com/fly-apps/rails-dictaphone/blob/main/app/controllers/clips_controller.rb) |
50 |
| -* The realtime implementation code is primarily in [ActionCable](https://guides.rubyonrails.org/action_cable_overview.html), so all that is needed is one line in [app/models/clip.rb](https://github.com/fly-apps/rails-dictaphone/blob/6bdf4f639640c9fb55530546dbbed682b65a7df9/app/models/clip.rb#L2) |
51 |
| -and one line in [app/views/layouts/application.html.erb](https://github.com/fly-apps/rails-dictaphone/blob/6bdf4f639640c9fb55530546dbbed682b65a7df9/app/views/layouts/application.html.erb#L9) |
| 31 | +If you want to see this up and running on fly.io (and certainly you do or why else would you be here?), all you need |
| 32 | +is an empty directory and either Node or Ruby installed. |
52 | 33 |
|
53 |
| -**Next:** Now that you know what you're about to deploy, the next step is running [`fly launch`](../fire/). |
| 34 | +Now that we know what we are intending to accomplish, let's proceed to the exciting step: [Fire!](../fire/) |
0 commit comments