git.iko.soy/urbit.org
on master help sign in
fixed web-apps to reflect click code from examples repo; updated instructions to match
021ce99Henry Ault
docs/arvo/web-apps.md+23−23
compare with master
unifiedsplit
@@ -19,7 +19,7 @@ poke it. There'll be a button to poke the app, and line of text
19below it saying how many times the app has been poked. We can
19below it saying how many times the app has been poked. We can
20update this by subscribing our page to the relevant path on its app.
20update this by subscribing our page to the relevant path on its app.
21
21
22−Let's first write the app, `/app/click.hoon`:
22+Let's first checkout the app `/app/examples/click.hoon`:
23
23
24```
24```
25/? 314
25/? 314
@@ -29,15 +29,15 @@ Let's first write the app, `/app/click.hoon`:
29--
29--
30!:
30!:
31|_ {hid/bowl clicks/@}
31|_ {hid/bowl clicks/@}
32−++ poke-click
32+++ poke-examples-click-click
33 |= click/$click
33 |= click/$click
34 ~& [%poked +(clicks)]
34 ~& [%poked +(clicks)]
35 :_ +>.$(clicks +(clicks))
35 :_ +>.$(clicks +(clicks))
36 %+ turn (prey /the-path hid)
36 %+ turn (prey /the-path hid)
37− |=({o/bone *} [o %diff %clicks +(clicks)])
37+ |=({o/bone *} [o %diff %examples-click-clicks +(clicks)])
38++ peer-the-path
38++ peer-the-path
39 |= pax/path
39 |= pax/path
40− [[[ost.hid %diff %clicks clicks] ~] +>.$]
40+ [[[ost.hid %diff %examples-click-clicks clicks] ~] +>.$]
41--
41--
42```
42```
43
43
@@ -48,7 +48,7 @@ all our subcribers the new value. When someone subscribes to us
48on the path `/the-path`, we immediately give them the current
48on the path `/the-path`, we immediately give them the current
49number of clicks.
49number of clicks.
50
50
51−Let's take a look at the new marks. Here's `/mar/click.hoon`:
51+Let's take a look at the new marks. Here's `/mar/examples/click/click.hoon`:
52
52
53```
53```
54|_ click/$click
54|_ click/$click
@@ -63,7 +63,7 @@ Let's take a look at the new marks. Here's `/mar/click.hoon`:
63--
63--
64```
64```
65
65
66−The mark `click` has hoon type `%click`, which means the only
66+The mark `examples-click-click` has hoon type `%click`, which means the only
67valid value is `%click`. We can convert from `noun` by just
67valid value is `%click`. We can convert from `noun` by just
68producing `%click`.
68producing `%click`.
69
69
@@ -83,22 +83,22 @@ is true.
83> the core `jo`. Our case is actually simple enough that the
83> the core `jo`. Our case is actually simple enough that the
84> `?>` line could have been `?> =([%s 'click'] jon)`.
84> `?>` line could have been `?> =([%s 'click'] jon)`.
85
85
86−We can test this mark from the command line (don't forget to start your app with `|start %click`)
86+We can test this mark from the command line (don't forget to start your app with `|start %examples-click`)
87
87
88```
88```
89−~fintud-macrep:dojo> &click %click
89+~fintud-macrep:dojo> &examples-click-click %click
90%click
90%click
91−~fintud-macrep:dojo> &click &json [%s 'click']
91+~fintud-macrep:dojo> &examples-click-click &json [%s 'click']
92%click
92%click
93−~fintud-macrep:dojo> &click &json &mime [/text/json (taco '"click"')]
93+~fintud-macrep:dojo> &examples-click-click &json &mime [/text/json (taco '"click"')]
94%click
94%click
95−~fintud-macrep:dojo> &click &json &mime [/text/json (taco '"clickety"')]
95+~fintud-macrep:dojo> &examples-click-click &json &mime [/text/json (taco '"clickety"')]
96/~fintud-macrep/home/0/mar/click:<[7 5].[8 11]>
96/~fintud-macrep/home/0/mar/click:<[7 5].[8 11]>
97ford: casting %json to %click
97ford: casting %json to %click
98ford: cast %click
98ford: cast %click
99```
99```
100
100
101−And `/mar/clicks.hoon`:
101+And `/mar/examples/click/clicks.hoon`:
102
102
103```
103```
104|_ clicks/@
104|_ clicks/@
@@ -110,7 +110,7 @@ And `/mar/clicks.hoon`:
110--
110--
111```
111```
112
112
113−`clicks` is just an atom. We convert to json by creating an
113+`examples-clicks-clicks` is just an atom. We convert to json by creating an
114object with a single field "clicks" with our value.
114object with a single field "clicks" with our value.
115
115
116> Be sure to checkout section 3bD, JSON and XML, in zuse.hoon
116> Be sure to checkout section 3bD, JSON and XML, in zuse.hoon
@@ -118,10 +118,8 @@ object with a single field "clicks" with our value.
118> produces a JSON object with one element.
118> produces a JSON object with one element.
119
119
120```
120```
121−~fintud-macrep:dojo> &json &clicks 6
121+~fintud-macrep:dojo> &json &examples-click-clicks 6
122[%o p={[p='clicks' q=[%n p=~.6]]}]
122[%o p={[p='clicks' q=[%n p=~.6]]}]
123−~fintud-macrep:dojo> &mime &json &clicks 6
124−[[%text %json ~] p=12 q='{"clicks":6}']
125```
123```
126
124
127Now that we know the marks involved, take another look at the app
125Now that we know the marks involved, take another look at the app
@@ -129,16 +127,18 @@ above. Everything should be pretty straightforward. Let's poke
129the app from the command line.
127the app from the command line.
130
128
131```
129```
132−~fintud-macrep:dojo> |start %click
130+~fintud-macrep:dojo> |start %examples-click
133>=
131>=
134−~fintud-macrep:dojo> :click &click %click
132+~fintud-macrep:dojo> :examples-click &examples-click-click %click
135[%poked 1]
133[%poked 1]
136>=
134>=
137−~fintud-macrep:dojo> :click &click %click
135+~fintud-macrep:dojo> :examples-click &examples-click-click %click
138[%poked 2]
136[%poked 2]
139>=
137>=
140```
138```
141
139
140+Please pardon the awkwardness of the name 'examples-click-click', but we used it to stay true to our examples naming convention.
141+
142**Exercise**:
142**Exercise**:
143
143
144- Modify `:sink` from the subcriptions chapter to listen to
144- Modify `:sink` from the subcriptions chapter to listen to
@@ -177,22 +177,21 @@ To view the frontend, point your browser at `ship-name.urbit.org/~~/click` if yo
177We have a button labeled "Poke!" and a div with id `clicks` where
177We have a button labeled "Poke!" and a div with id `clicks` where
178we'll put the number of clicks. We also include a small
178we'll put the number of clicks. We also include a small
179javascript file where the client-side application logic can be
179javascript file where the client-side application logic can be
180−found. It's in `/web/click/main.js`:
180+found. It's in `/web/pages/examples/click.js`:
181
181
182```
182```
183+
183$(function() {
184$(function() {
184 var clicks, $go, $clicks, $err
185 var clicks, $go, $clicks, $err
185
186
186 $go = $('#go')
187 $go = $('#go')
187 $clicks = $('#clicks')
188 $clicks = $('#clicks')
188 $err = $('#err')
189 $err = $('#err')
189−
190− window.urb.appl = "click"
191
190
192 $go.on("click",
191 $go.on("click",
193 function() {
192 function() {
194 window.urb.send(
193 window.urb.send(
195− "click", {mark: "click"}
194+ "click", {mark: "examples-click-click"}
196 ,function(err,res) {
195 ,function(err,res) {
197 if(err)
196 if(err)
198 return $err.text("There was an error. Sorry!")
197 return $err.text("There was an error. Sorry!")
@@ -205,6 +204,7 @@ $(function() {
205 })
204 })
206 })
205 })
207
206
207+ window.urb.appl = "examples-click"
208 window.urb.bind('/the-path',
208 window.urb.bind('/the-path',
209 function(err,dat) {
209 function(err,dat) {
210 clicks = dat.data.clicks
210 clicks = dat.data.clicks