29:null 2a:["$","title",null,{"children":"Chapter 4: Services | Jerry Jäppinen | Observable"}] 2f:[] 2d:{"id":"bc6cc884dafb2d8a","slug":"new-programmers-handbook-chapter-4","title":"Chapter 4: Services","thumbnail":"83b09ee8525617beafff167f622332100f2f0710b696354923ff1805d49925a5","access_level":"public","create_time":"$D2023-12-03T12:26:36.505Z","update_time":"$D2025-12-05T14:22:42.054Z","view_time":null,"first_public_time":"$D2023-12-03T12:26:36.505Z","has_unpublished_edits":null,"fork":{"id":"48bb3c6ec575227e","slug":"new-programmers-handbook-chapter-6","title":"Chapter 6: AI","owner":{"id":"78ae8536857bb3ab","login":"jerryjappinen","name":"Jerry Jäppinen"}},"stars":2,"starred":false,"owner":{"type":"team","id":"78ae8536857bb3ab","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":"starter_2024"},"version":7516,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e1c1d34cf3c138c","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":null}],"members":[{"type":"individual","id":"5e1c1d34cf3c138c","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"611699796bedd90d","slug":"learn-programming","title":"New Programmer’s Handbook","owner":{"id":"78ae8536857bb3ab","login":"jerryjappinen","name":"Jerry Jäppinen"}},"type":"notebook","body":{"title":"Chapter 4: Services","cells":[{"id":6757,"value":"chapterTitle(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6704,"value":"chapterProgress(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6728,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2775,"value":"So far, we have written many programs as part of this e-book. But how do you write a program, and then actually _use_ it?\n\nThe user of a program might be another human, or another program. Some programs don’t interact with either. Nowadays, programs are often used over the internet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6720,"value":"toc = getToc(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6715,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6848,"value":"## Programs for humans","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7042,"value":"How do you deliver a program in a useful form to humans? Some options:\n\n- Write simple programs that run within the context of larger programs, e.g. formulas in _Google Sheets_.\n- Use online platforms like _Observable_, _Softr_ or _Appwrite_.\n- Build your own web site that users can access with their web browser using a domain like _mykillerservice.com_.\n- Develop a mobile app and publish it on _App Store_ or _Google Play_.\n- Develop a desktop computer app that users can download and run on their computer.\n- Develop for a specific device like a [Playdate](https://play.date/dev/) or [Arduino](https://www.arduino.cc/en/software) using a dedicated _SDK_ (software development kit).\n\nWe will talk about some of these options in the next chapter.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7157,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7072,"value":"### Graphical interfaces","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7155,"value":"Humans usually interact with programs using _graphical user interfaces_, meaning visual and interactive elements on a screen. This is a graphical interface:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7354,"value":"

\n ${Inputs.button(\"Get cookie\", {\n disabled: !(total_cookies < 4),\n reduce() {\n if (total_cookies < 4) {\n mutable total_cookies++;\n }\n }\n })}\n

${cookieLine}

\n\n ${total_cookies < 4 ? \"\" : html`

${Inputs.button(\"Reset\", {\n reduce() {\n mutable total_cookies = 0;\n }\n })}

`}\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7350,"value":"How exactly you write these interfaces will depend on the programming environment. On the web, you usually use _HTML_, _CSS_ and _JavaScript_, whereas on mobile devices you might use _Flutter_.\n\nYou have already used graphical interfaces throughout this book. Graphical interfaces are very common, but not the only way that people can interact with programs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7054,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7064,"value":"### Non-graphical interfaces","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7055,"value":"Interfaces can also be non-graphical. Many programs are run on the _command line_ using just text. In early computing, this was the only interface we had.\n\nText-only interfaces might seem old-school, but they are still in common use, for example when interacting with _servers_. We’ll talk about servers later in this chapter.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7429,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7431,"value":"You could also build a non-digital interface. For example, many people build tools using Raspberry Pis where a user can give input by pressing physical buttons.\n\nIn games, audio is important: it might be crucial for usability to play a sound when a player tries to open a door that is locked. Some games might accept input through a microphone, which is also a non-graphical interface.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6827,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7091,"value":"## Autonomous programs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7092,"value":"Imagine you have a _sensor_ measuring ambient light outside a window.\n\nA program could use this data to calculate the appropriate amount of light needed to properly light up a room, and then adjust a light bulb accordingly. It could also turn the light bulb off at a certain time of the day.\n\nWhile this type of program is using sensor data as _input_, it requires no interaction from a human or another program.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7089,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7009,"value":"## APIs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6800,"value":"Programs give ${sectionLink(1, 'input', 'input and output')} to each other. For example, one program might find the user’s current location, and another program could fetch the weather for that location.\n\n_APIs_ (application programming interfaces) define how exactly this works. If one program expects a location as input, its API documentation might specify:\n\n> _Given two decimal numbers inside square brackets, e.g. `[60.1699, 24.9384]`, this program will return an integer representing the current temperature at this location in Celsius degrees._\n\nWith this information, we can send the location in a format that the other program is able to read.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6814,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6815,"value":"### Networking","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6820,"value":"Often an API is exposed over the internet. This allows other services to use its data and programming logic easily.\n\nFor example, Open-Meteo’s API allows you to build a weather app by simply fetching data from their service:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6925,"value":"viewof latitude = Inputs.range([0.01, 90], {\n label: varLabel(\"latitude\"),\n step: 0.01,\n value: 60.192059\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6918,"value":"viewof longitude = Inputs.range([0.01, 90], {\n label: varLabel(\"longitude\"),\n step: 0.01,\n value: 24.945831\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6897,"value":"open_meteo_url = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t=temperature_2m,wind_speed_10m&hourly=temperature_2m,wind_speed_10m`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6892,"value":"Inputs.button(\"Request weather data from Open-Meteo\", {\n async reduce () {\n mutable open_meteo_response = (await fetch(open_meteo_url)).json()\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6932,"value":"mutable open_meteo_response = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6948,"value":"{\n if (open_meteo_response && open_meteo_response.current) {\n return \"Temperature at this location is \" + open_meteo_response.current.temperature_2m + \" \" + open_meteo_response.hourly_units.temperature_2m\n }\n\n return 'Request weather data to show current temperature'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7194,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7213,"value":"### Client and server","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7189,"value":"What is the internet, actually? Simply put, it is a huge network of computers. When you go to a web site, you are sending a _network request_ to another computer. It accepts your request and sends you a web site in response.\n\nThis is an example of _client-server_ communication, where your web browser is the _client_, and the other computer is the _server_. A server is a computer running 24/7, connected to the internet and always listening for incoming network requests.\n\nA web site is a text document formatted as HTML. When your browser receives it from the server, it will render it in the visual format that you are familiar with.\n\nExactly the same way, we can send a request to Open-Meteo’s server – but instead of a web site, the response is weather data formatted as JSON. The program above takes the current temperature from that JSON and displays it as text.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6831,"value":"## Deploy a program","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6844,"value":"When you first write a program, you might be simply running it on your own computer. But others probably cannot connect to your computer. How do you make your program available to others?\n\nWe usually draw a distinction between the program’s _source code_ and its _running instance_. An instance means that your program has been copied to another computer (often a server) and started. This is called _deployment_.\n\nThis is exactly what the people at Open-Meteo have done to provide you with weather data. This is how a _program_ has become a service.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6740,"value":"chapterFooter(chapterIndex)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6749,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6750,"value":"aboutAuthor","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7484,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7385,"value":"cookieLine = {\n const arr = [];\n for (let i = 0; i < total_cookies; ++i) {\n arr.push(\"🍪\");\n }\n\n return `${!arr.length ? \"I want cookies!\" : \"\"}${arr.join(\"\")}${\n arr.length < 4 ? \"\" : \" I have enough 😶\"\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7356,"value":"mutable total_cookies = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6738,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6733,"value":"chapterIndex = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2777,"value":"import {\n getToc,\n tocCopyButton,\n note,\n youtube,\n bookStyles,\n chapters,\n chapterTitle,\n chapterProgress,\n chapterFooter,\n sectionLink,\n aboutAuthor,\n colors,\n varLabel\n} from \"b20b90ae4c08d3fb\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7479,"value":"tocCopyButton(toc)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7359,"value":"bookStyles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"