2a:null 2b:["$","title",null,{"children":"Create an API | Brett Evans | Observable"}] 30:[] 2e:{"id":"06ec6632f9a00477","slug":"create-an-api","title":"Create an API","thumbnail":"d5d72d0613f2797d91acf02a3eeb8055a87a1d33ea3fa3416e8e4ac97feafa5f","access_level":"public","create_time":"$D2020-02-25T18:05:19.731Z","update_time":"$D2024-05-23T21:19:25.520Z","view_time":null,"first_public_time":"$D2020-02-25T18:26:10.854Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"449e0b3293e43c7e","login":"brettevans","name":"Brett Evans","avatar_url":"https://avatars-next.observableusercontent.com/f7ca50cfdb0505f95b3712d27c81b99ecb2e7c773015fe0a3509a468964c66d2","tier":"starter_2024"},"version":288,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ef763ceb6b36059","login":"brettevans","name":"Brett Evans","avatar_url":"https://avatars-next.observableusercontent.com/aa4f6a772b809cb9a74d9a34545d3df546e3f68cfa1ae09a1c2a6dc28950a726","tier":null}],"members":[{"type":"individual","id":"8ef763ceb6b36059","login":"brettevans","name":"Brett Evans","avatar_url":"https://avatars-next.observableusercontent.com/aa4f6a772b809cb9a74d9a34545d3df546e3f68cfa1ae09a1c2a6dc28950a726","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":28,"collection":{"id":"bca3eb7286b969f1","slug":"api-lecture","title":"API Lecture","owner":{"id":"449e0b3293e43c7e","login":"brettevans","name":"Brett Evans"}},"type":"notebook","body":{"titling":"auto","title":"Create an API","cells":[{"id":0,"value":"md`# Create an API\n\nNow we know what APIs are let's create one that we can share.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Step 1: Create a New Google Sheet\n\n[Create New Sheet](https://sheets.new)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## Step 2: Create a Sheety Account\n\n[Sheety](https://sheety.co)\n\nThen give it the *URL* of your Google Sheet.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"viewof sheetyUrl = Inputs.text({placeholder: 'Sheety URL'})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Step 3: Call Your API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"shops = (await fetch(sheetyUrl)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Step 4: Render Your Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"viewof map = {\n const container = html`

`;\n yield container; // Give the container dimensions.\n let map = container.value = new mapboxgl.Map({\n container,\n center: [-104.991531, 39.742043],\n zoom: 10,\n style: \"mapbox://styles/brettpevans/ck9xbompw19p51kniomp3o2fd\"\n });\n invalidation.then(() => map.remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`## Step 4: Update your Sheet\n\nAnd refresh the fetch to your API with Shift + Enter. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"viewof url = Inputs.text({placeholder: \"URL\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"viewof name = Inputs.text({placeholder: \"Name\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"viewof long = Inputs.text({placeholder: \"Longitude\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"viewof lat = Inputs.text({placeholder: \"Latitude\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"resp = (await fetch(new Request(sheetyUrl, {\n method: 'POST', \n body: JSON.stringify({\n denverCoffeeShop: {\n name,\n website: url,\n longitude: long,\n latitude: lat\n }\n }),\n headers: {\n 'Content-Type': 'application/json',\n }})));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`## Ideas for Further Exploration\n\n1. Create a Google Form and expose the data as an API.\n2. Create a [Mobile App](https://www.glideapps.com/) from your API.\n3. [Pull data in to your Sheet](https://mixedanalytics.com/api-connector/).\n4. Create a [*Content Management System*](https://steinhq.com/).\n5. [Sell your API.](https://rapidapi.com/enterprise/partner-api-hub/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"container = {\n let temp = {};\n temp.type = \"Feature\";\n temp.geometry = {};\n temp.geometry.type = \"Point\";\n \n return temp;\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"geoJson = {\n let points = shops.sheet1.map(item => {\n let tmp = {};\n \n tmp.type = \"Feature\";\n tmp.geometry = {};\n tmp.geometry.type = \"Point\";\n tmp.geometry.coordinates = [item.longitude, item.latitude,];\n tmp.properties = {};\n tmp.properties.name = item.name;\n tmp.properties.description = `${item.name}`;\n tmp.properties.icon = \"coffee\";\n \n return tmp;\n })\n\n let obj = {};\n obj.type = \"geojson\";\n obj.data = {};\n obj.data.type = \"FeatureCollection\";\n obj.features = points;\n\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1\");\n if (!gl.accessToken) {\n // https://www.mapbox.com/help/how-access-tokens-work/\n gl.accessToken = \"pk.eyJ1IjoiYnJldHRwZXZhbnMiLCJhIjoiY2x3amtwMGRiMTRpdTJxbGVkN3c0b3h2YiJ9.uh6bUry4fctwvJIamJjUeg\";\n const href = await require.resolve(\"mapbox-gl@1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"geoJson.features.map(marker => {\n\n // create a HTML element for each feature\n var el = document.createElement('div');\n var span = document.createElement('span');\n span.className = 'emoji';\n var coffee = document.createTextNode(\"☕️\");\n span.appendChild(coffee);\n el.appendChild(span);\n el.className = 'marker';\n\n // make a marker for each feature and add to the map\n new mapboxgl.Marker(el)\n .setLngLat(marker.geometry.coordinates)\n .setPopup(new mapboxgl.Popup({ offset: 15 }) // add popups\n .setHTML('

' + marker.properties.description + '

'))\n .addTo(map);\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1"}} 2f:"$2e:body"