Gallery
Pack Building Roadmap - Maker Stories Webinar
Share
Explore

icon picker
Roadmap

Copy this doc
Sign up for Coda

Making the Travel Brief App with Packs

A New Coder’s Journey

My Story

Lynn here, co-owner of a Mom & Pop service business. We use Coda to improve many of our workflows, from time reporting, managing supplies, tracking data, and reporting metrics - all saving us valuable time. Also, we maintain a research wiki doc that provides a single source of critical data for meeting compliance with external entities. As business conditions change, Coda allows us to manage these changes on the fly and in-house.
During the Coda block party in October of 2021, I watched Eric Koleda’s inspired presentation about the new Packs feature. (Link: .) I was so impressed with the power of the concept. Coda was encouraging makers to extend and customize their docs. We would be able to create new formulas and column formats, sync tables, and manage data integrations to APIs. How cool is that! However, I am not a programmer. Undaunted, I moved forward with determination, knowing that Coda would provide the support I needed.
This Pack Building Roadmap doc is a summary of my journey.

What is the Travel Brief App?

The fetches and displays useful travel data for all countries around the world. I designed the doc for both web and mobile viewing. The can be printed to PDF for reference.
Fetching data from an API seemed like magic, and complicated! Therefore, I decided to start with a simple API that did not require authentication. I settled on the API to summarizes worldwide data for my family members who love to travel abroad.

Pack Making Journey

The Learning process

After signing up for the Beta program, I received an introductory Coda doc in an email that referenced both the Coda software development kit (SDK) and several useful starter tips:
After reading through the SDK, I was keenly aware of my limitations and searched for a user friendly JavaScript tutorial. I settled on , for a cost of $15, and completed the basic training. At the time, I was unaware that the Coda SDK makes references to some terms that are not JavaScript, and that was a bit confusing at first, but knowing the basic concepts of JavaScript (e.g. variables, objects, arrays, functions, methods, etc.) is necessary to move forward with building the various .

First successes

I started by executing each of the 4 pack code samples in the Coda individually, and then using them in a sample doc. Next, I executed multiple variations of the Hello World sample code, and it was satisfying to build these variations, ultimately without errors. The process gave me the confidence to take the next step and tackle the Travel Brief API project.

Struggles

There have been numerous struggles along the way, and sometimes, I think my head will explode! Coding is exact, and thus, I learned to build a bit at a time, and then test, so that I could catch errors along the way. I am continuously searching through my online resources to understand the terms in the sample code.
Specifically, I had a mental block about how to use the software, Postman.com, for fetching data from an API. Postman allows you to confirm both the API call (with GET) and the data returned in JSON format. The API data structure informs your pack code and the design to retrieve and present the API data in the Coda doc.
Ultimately, I figured out that the GET API call in Postman is simple. Also, Postman is free to use for the basic functions and their YouTube channel tutorials will help you get started.

Goals

As a citizen developer, my goal is to be able to extend my Coda docs and add more functionality to them, with custom formulas, actions, and simple API calls, especially for processes that are repeated throughout multiple docs. It’s one more tool in the Coda toolkit, and is, in part, what makes Coda so powerful. 👏

Advice to Others

image.png
Start with a small win. For example, open the Hello World code in the pack interface, build the pack and then test the pack in a sample doc. Next, experiment with changing portions of the code and repeat the process, until you are comfortable with the workflow.
Study the sample code provided in the SDK and cross reference with online JavaScript resources, such as: . I’m a bit of a pack rat when it comes to collecting sample code in a separate folder in my Coda workspace.
Start by identifying your pack’s objective, and find the sample code in the Coda SDK that fits that objective. Copy the code to the builder and edit the code to suit your specific use case. Don’t worry about understanding every line of code! Instead, try to grasp the concept of the different blocks of code. The Coda samples provide good step-by-step documentation.
As you make more changes to the sample packs’ code, your code inevitably will generate errors. Add a little bit of code at a time while building and test for errors after each step. This process allows you to discover more easily where you went wrong. Also, you can retrieve previous versions of the pack that worked and revise your code from there.
JS code is picky. Double check for spelling errors and the alignment of your beginning and end brackets.
Consider using the as a template. The resulting doc will be repository of your pack making process. Document what you learned in the Notes section for future reference.
Don’t spin your wheels! Seek help from the Coda SDK, online resources, or the Coda Community. Also, during the Beta, you can schedule a 30 minute Zoom session with Eric.
For simple pack ideas, think of something you might do over and over again across multiple docs. Financial formulas are one example. Creating a custom greeting is another.
And finally, have fun! Embrace the challenge! Persist in your efforts, and you’ll go ahead of the pack. 😆

Quick Links

Designed for
web & mobile

Summary of
basic elements
To-Do List for
pack building

App data &
formulas
JavaScript
course
Coda pack
builder
Software Dev
Kit (SDK)
Postman for
API
Share
 
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.