25 | ${state.cache(ViewMessages, 'viewMessages').render()}
26 | ${users(state, emit)}
27 |
28 |
7 | 
8 |
13 |
14 | ___
15 |
16 | ## Goal
17 |
18 | Introduce the audience to Dat and its core modules. Learn about P2P architectures and it's differences with the common client/server scenario of regular web apps. Also learn how to combine Dat and web app business logic creating this way, P2P web apps.
19 |
20 | ## About the app
21 | We will be working on a P2P/WebRTC chat app, the final result looks like: [Olaf](https://olafchat.netlify.com/) and it works like a P2P PWA, one user create a room then shares it (dat link) with the rest and that's it! :cat2:
22 | [Try olaf chat](https://olafchat.netlify.com/)
23 |
24 | ## Getting started
25 |
26 | 1. `$ git clone https://github.com/geut/dat-workshop.git`
27 | 2. `npm install`
28 |
29 | (This way we are going to save installation time on the workshop and we will be ready to start immediately.)
30 |
31 | ## Running the workshop
32 |
33 | 1. `npm start`, will launch a docsify instance with the whole workshop on it.
34 | 2. There is no step 2 :stuck_out_tongue_closed_eyes:
35 |
36 | ### What is Dat?
37 |
38 | Dat is a community and an open source data-sharing protocol for applications of the future.
39 |
40 | ## Cool people behind Dat
41 |
42 | It's important to say thanks, so here it is a big thanks to:
43 |
44 | - Karissa McKelvey
45 | - Mathias Buus
46 | - Tara Vancil
47 | - Paul Frazee
48 | - Jim Pick
49 | - Max Ogden
50 | - **and many others!**
51 |
52 | Special thanks to Karissa McKelvey, her work on [chatmesh](https://github.com/karissa/chatmesh-db) (and early work on cabal) was a huge inspiration for this workshop.
53 |
54 |
55 |
--------------------------------------------------------------------------------
/_navbar.md:
--------------------------------------------------------------------------------
1 | - Translations
2 | - [:uk: English](/)
3 | - [:es: Spanish](/es/)
4 |
--------------------------------------------------------------------------------
/_sidebar.md:
--------------------------------------------------------------------------------
1 | * [Intro](/)
2 | * Problems
3 | * [Problem 1](/problems/01/)
4 | * [Problem 2](/problems/02/)
5 | * [Problem 3](/problems/03/)
6 | * [Problem 4](/problems/04/)
7 | * [Problem 5](/problems/05/)
8 | * [Problem 6](/problems/06/)
9 | * [Problem 7](/problems/07/)
10 | * [Problem 8](/problems/08/)
11 | * [Problem 9](/problems/09/)
12 | * [Problem 10](/problems/10/)
13 | * [Problem 11](/problems/11/)
14 | * [Terms](/terms)
15 | * Modules
16 | * [dat](/dat)
17 | * [hypercore](/hypercore)
18 | * [hyperdb](/hyperdb)
19 | * [random-access-memory](/random-access-memory)
20 | * [pump](/pump)
21 | * [flush-write-stream](/flush-write-stream)
22 | * [hyperid](/hyperid)
23 | * [codecs](/codecs)
24 | * [geut-discovery-swarm-webrtc](/geut-discovery-swarm-webrtc)
25 |
--------------------------------------------------------------------------------
/assets/geut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geut/dat-workshop/de3da8cc58b77de3e72d06ccea201d0c1db6f49f/assets/geut.png
--------------------------------------------------------------------------------
/assets/replicate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geut/dat-workshop/de3da8cc58b77de3e72d06ccea201d0c1db6f49f/assets/replicate.png
--------------------------------------------------------------------------------
/assets/saga.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geut/dat-workshop/de3da8cc58b77de3e72d06ccea201d0c1db6f49f/assets/saga.jpg
--------------------------------------------------------------------------------
/assets/theolaf.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/geut/dat-workshop/de3da8cc58b77de3e72d06ccea201d0c1db6f49f/assets/theolaf.jpg
--------------------------------------------------------------------------------
/i18n/es/README.md:
--------------------------------------------------------------------------------
1 | # dat-workshop
2 | > Bienvenido al workshop: `Construyendo aplicaciones web P2P usando Dat`
3 |
4 | Sponsored by
5 |
6 |
8 |
9 |
10 | This workshop was originally crafted for NodeConf Ar 2018. 11 |
12 | 10 | This workshop was originally crafted for NodeConf Ar 2018. 11 |
7 |
8 |
13 |
14 | ___
15 |
16 | ## Objetivo
17 |
18 | Familiarizar a la audiencia con el proyecto Dat y sus modulos principales. Aprender sobre arquitecturas P2P y las diferencias que hay con escenarios mas comunes como el típico cliente/servidor de las aplicaciones web. Ademas, veremos como combinar los conceptos detras de Dat con la lógica de negocios de nuestro proyecto, creando de esta manera, aplicaciones web P2P.
19 |
20 | ## Sobre la app
21 | Vamos a estar trabajando en un chat P2P/WebRTC, el resultado final seria como: [Olaf](https://olafchat.netlify.com/)
22 | y podes utilizarla como PWA, un usuario crea una sala y comparte el dat link para que se conecten y eso es todo! :cat2:
23 | [Prueba olaf chat](https://olafchat.netlify.com/)
24 |
25 | ## Comenzando
26 |
27 | 1. `$ git clone https://github.com/geut/dat-workshop.git`
28 | 2. `npm install`
29 | (De esta forma vamos a ahorrar tiempo de instalación al comienzo del workshop.)
30 |
31 | ## Corriendo el workshop
32 |
33 | Es muy simple,
34 |
35 | 1. `npm start`, para levantar una instancia local de docsify.
36 | 2. No hay paso 2 :stuck_out_tongue_closed_eyes:
37 |
38 | ### Qué es Dat?
39 |
40 | Dat es una comunidad y un protocolo open source para compartir archivos pensado para las aplicaciones del futuro.
41 |
42 | ## Personas importantes de la comunidad
43 |
44 | Es importante decir _gracias_, por eso aquí tenemos un **gracias especial** para:
45 |
46 | - Karissa McKelvey
47 | - Mathias Buus
48 | - Tara Vancil
49 | - Paul Frazee
50 | - Jim Pick
51 | - Max Ogden
52 | - **Y muchos mas!**
53 |
54 | Finalmente, una mención especial para Karissa McKelvey, su trabajo en [chatmesh](https://github.com/karissa/chatmesh-db) (y todo el trabajo inicial de cabal), fueron una gran inspiración para este workshop.
55 |
56 |
--------------------------------------------------------------------------------
/i18n/es/_sidebar.md:
--------------------------------------------------------------------------------
1 | * [Introducción](/es/)
2 | * Problemas
3 | * [Problema 1](/es/problems/01/)
4 | * [Problema 2](/es/problems/02/)
5 | * [Problema 3](/es/problems/03/)
6 | * [Problema 4](/es/problems/04/)
7 | * [Problema 5](/es/problems/05/)
8 | * [Problema 6](/es/problems/06/)
9 | * [Problema 7](/es/problems/07/)
10 | * [Problema 8](/es/problems/08/)
11 | * [Problema 9](/es/problems/09/)
12 | * [Problema 10](/es/problems/10/)
13 | * [Problema 11](/es/problems/11/)
14 | * [Terminología](/es/terms)
15 | * Módulos
16 | * [dat](/dat)
17 | * [hypercore](/hypercore)
18 | * [hyperdb](/hyperdb)
19 | * [random-access-memory](/random-access-memory)
20 | * [pump](/pump)
21 | * [flush-write-stream](/flush-write-stream)
22 | * [hyperid](/hyperid)
23 | * [codecs](/codecs)
24 | * [geut-discovery-swarm-webrtc](/geut-discovery-swarm-webrtc)
25 |
--------------------------------------------------------------------------------
/i18n/es/terms.md:
--------------------------------------------------------------------------------
1 | # Terminologia
2 |
3 | ## feed
4 | Nuestra instancia de hypercore es un feed de datos. Los feeds son estructuras de datos que
5 | pueden ser compartidas y sincronizadas por medio de una red.
6 |
7 | ## owner
8 | Peer que tiene permisos de escritura en el feed. Es decir, que tiene una secret key para escribir en el feed
9 | o que su public key fue autorizada en una instancia de Hyperdb.
10 |
11 | ## pipe
12 | Termino que recibe el conectar 2 o mas streams.
13 | ```
14 | a | b | c
15 | ```
16 |
17 | ## replicar stream
18 | Los feed pueden crear con `replicate()` un stream que puede ser conectado (piped) a un peer con un feed remoto.
19 | Es utilizado para sincronizar feeds.
20 |
21 | ## swarm
22 | Podemos definir a un swarm como un grupo de peers conectados para un proposito, servicio o recurso mutuo.
23 |
24 | ## peer
25 | Llamamos _peer_ a cualquier nodo con IP:PORT conectado a un red.
26 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
8 |
9 |
10 | Este workshop fue originalmente creado para NodeConf Ar 2018. 11 |
12 | 10 | Este workshop fue originalmente creado para NodeConf Ar 2018. 11 |
34 |
`
43 | }
44 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/icons/clipboard.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 |
3 | module.exports = function clipboardIcon () {
4 | return html``
19 | }
20 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/icons/key.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 |
3 | module.exports = function keyIcon () {
4 | return html`
5 |
22 | `
23 | }
24 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/icons/moon.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 |
3 | module.exports = function moonIcon () {
4 | return html`
5 |
6 | `
7 | }
8 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/icons/sun.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 |
3 | module.exports = function sunIcon () {
4 | return html`
5 |
6 | `
7 | }
8 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/icons/users.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 |
3 | module.exports = function usersIcon () {
4 | return html`
5 |
22 | `
23 | }
24 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/init-modal.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 |
3 | module.exports = function modal (props, emit, events) {
4 | const { username, key } = props
5 |
6 | return html`
7 |
52 | `
53 |
54 | function join (e) {
55 | e.stopPropagation()
56 | e.preventDefault()
57 | if (username && username.length > 0 && key && key.length > 0) {
58 | emit(events.INIT_ROOM)
59 | }
60 | }
61 |
62 | function createRoom (e) {
63 | e.stopPropagation()
64 | e.preventDefault()
65 | if (username && username.length > 0) {
66 | emit(events.INIT_ROOM, true)
67 | }
68 | }
69 |
70 | function updateUsername (e) {
71 | emit(events.UPDATE_USERNAME, e.target.value)
72 | }
73 |
74 | function updateKey (e) {
75 | emit(events.UPDATE_KEY, e.target.value)
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/input-msg.js:
--------------------------------------------------------------------------------
1 | const Component = require('choo/component')
2 | const html = require('choo/html')
3 |
4 | module.exports = class InputMsg extends Component {
5 | constructor (name, state, emit) {
6 | super(name)
7 | this.state = state
8 | this.emit = emit
9 | }
10 |
11 | update () {
12 | return false
13 | }
14 |
15 | sendMessage = (e) => {
16 | e.preventDefault()
17 | const { events } = this.state
18 | const input = this.element.querySelector('#input-msg')
19 |
20 | if (input.value.length === 0) {
21 | return
22 | }
23 |
24 | this.emit(events.WRITE_MESSAGE, input.value)
25 | input.value = ''
26 | };
27 |
28 | createElement () {
29 | return html`
30 |
50 | `
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/key-modal.js:
--------------------------------------------------------------------------------
1 | const Component = require('choo/component')
2 | const html = require('choo/html')
3 | const copy = require('copy-to-clipboard')
4 | const QRCode = require('qrcode')
5 |
6 | const clipboardIcon = require('./icons/clipboard')
7 |
8 | const url = window.location.protocol + '//' + window.location.host
9 |
10 | module.exports = class KeyModal extends Component {
11 | constructor (name, state, emit) {
12 | super(name)
13 | this.state = state
14 | this.emit = emit
15 | }
16 |
17 | update ({ key }) {
18 | if (this.key !== key) {
19 | return true
20 | }
21 | }
22 |
23 | load (el) {
24 | this.loadQRCode(el)
25 | }
26 |
27 | afterupdate (el) {
28 | this.loadQRCode(el)
29 | }
30 |
31 | loadQRCode (el) {
32 | QRCode.toCanvas(el.querySelector('#qrcode'), `${url}?key=${this.key}`)
33 | }
34 |
35 | hideModalKey = () => {
36 | const { events: { HIDE_MODAL_KEY } } = this.state
37 | this.emit(HIDE_MODAL_KEY)
38 | };
39 |
40 | copyToClipboard = (e) => {
41 | e.preventDefault()
42 | copy(`${url}?key=${this.key}`)
43 | };
44 |
45 | createElement ({ key }) {
46 | this.key = key
47 |
48 | return html`
49 |
61 | `
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/message.js:
--------------------------------------------------------------------------------
1 | const Component = require('choo/component')
2 | const html = require('choo/html')
3 | const raw = require('choo/html/raw')
4 | const tinydate = require('tinydate').default
5 | const anchorme = require('anchorme').default
6 | const fileType = require('file-type')
7 |
8 | const stamp = tinydate('{HH}:{mm}:{ss}')
9 |
10 | const parseMessage = message => {
11 | const anchor = anchorme(message, { list: true })
12 | if (anchor.length) {
13 | // detect file type
14 | return Promise.all(anchor.map(async anchorData => {
15 | const controller = new window.AbortController()
16 | const signal = controller.signal
17 |
18 | const fetchPromise = window.fetch(anchorData.raw, { signal })
19 |
20 | // 5 second timeout:
21 | setTimeout(() => controller.abort(), 5000)
22 | const response = await fetchPromise
23 |
24 | if (!response) return ''
25 | const ab = await response.arrayBuffer()
26 | const ft = fileType(ab)
27 | if (ft && ft.mime.includes('image')) {
28 | return html`
35 |
37 | olaf 🐱
36 |
38 | ${iconButton(state.ui.toggleTheme ? moonIcon() : sunIcon(), toggleTheme, null)}
39 | ${iconButton(keyIcon(), showModalKey, null)}
40 | ${iconButton(usersIcon(), toggleFriends, 'db dn-ns')}
41 |
42 |
36 | ${out.filter(img => img)}
37 |
38 | `
39 | })
40 | } else {
41 | return Promise.resolve()
42 | }
43 | }
44 |
45 | class Message extends Component {
46 | constructor (id, choo, f, opts) {
47 | super()
48 | this.local = {
49 | extra: ''
50 | }
51 | this.parent = {}
52 | this.parent.updateHeight = opts.updateHeight
53 | }
54 |
55 | update ({ message }) {
56 | if (this.local.message !== message) return true
57 | }
58 |
59 | load (el) {
60 | parseMessage(this.local.message)
61 | .then(msg => {
62 | if (msg) {
63 | this.local.extra = msg
64 | this.rerender()
65 | }
66 | })
67 | .catch(console.log)
68 | }
69 |
70 | createElement (props, color = 'green') {
71 | const { username, message, timestamp } = props
72 | const { extra } = this.local
73 |
74 | this.local.message = message
75 |
76 | const date = stamp(new Date(timestamp))
77 |
78 | const colorStyle = color ? `color: ${color}` : ''
79 |
80 | return html`
81 |
82 |
104 |
105 | `
106 | }
107 |
108 | afterupdate () {
109 | if (this.parent.updateHeight) {
110 | this.parent.updateHeight(this.element.scrollHeight)
111 | }
112 | }
113 | }
114 |
115 | module.exports = Message
116 |
--------------------------------------------------------------------------------
/problems/10/olaf/src/components/user.js:
--------------------------------------------------------------------------------
1 | const html = require('choo/html')
2 |
3 | module.exports = ({ owner = false, username, timestamp, color = 'green' }) => {
4 | if (!username || !timestamp) {
5 | return ''
6 | }
7 |
8 | let connectionTime = 'right now'
9 | const difference = Math.abs(new Date() - new Date(timestamp))
10 | let time = Math.floor(difference / 36e5) // hours
11 | if (time > 0) {
12 | connectionTime = `${time} hours ago`
13 | } else {
14 | time = Math.floor(difference / 6e4) // minutes
15 | if (time > 0) {
16 | connectionTime = `${time} minutes ago`
17 | }
18 | }
19 |
20 | const colorStyle = color ? `color: ${color}` : ''
21 |
22 | return html`
23 |
26 | ${username}${owner ? ' (you)' : ''}
27 |
28 |
29 | ${connectionTime}
30 |
31 |