Welcome to the workshop! 👋
We'll be creating a sequence explorer to search and collect sequences from the On-line Encyclopedia of Integer Sequences (OEIS).
The completed workshop will include search and collection views:
Please ensure you have installed node
and git
on your machine before the workshop begins. We will have little time, and installing these beforehand will help the workshop run smoothly.
- Install git: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
- Install node: https://nodejs.org/en/download
If you already have node
on your machine, check that you have v18.0.0
or newer.
You'll also want to install a code editor on your machine. We'd recommend VSCode, but any code editor will be fine.
Clone the ODD App Template repository:
git clone https://github.com/oddsdk/odd-app-template.git
The directory will be cloned into the directory where you run this command. It might be convenient to run this command from your Desktop to have the project readily available.
Install the project dependencies:
cd causal-islands-workshop-2023
npm install
Run the app:
npm run dev
Open a web browser and navigate to localhost:5173, and you should see the app running. Ask for help if you don't!
Now that the app is running, we can start writing some code. 🙌
The starter code implements an OEIS search and displays matching sequences. Using the ODD SDK, we'll save sequences to the Webnative File System (WNFS). We'll also view the saved sequences on IPFS and explore content identifiers (CIDs).
All of the exercises are in two files:
- Search component: https://github.com/oddsdk/odd-app-template/blob/causal-islands-2023/src/routes/sequences/components/Search.svelte
- Collection component: https://github.com/oddsdk/odd-app-template/blob/causal-islands-2023/src/routes/sequences/components/Collection.svelte
These files are Svelte components, but you will only need to write JavaScript to complete the exercises. Each time you save a file, the web app should update without running another command.
Connect as a new user in the app and navigate to the Sequences
page from the sidebar.
Open the Search and Collection components in your code editor:
- Search component:
src/routes/sequences/components/Search.svelte
- Collection component:
src/routes/sequences/components/Collection.svelte
Start with the Search component, then move on to the Collection component.
Each file has exercises marked with TODO
and comments describing the exercise. A few additional exercises are marked OPTIONAL ADVANCED EXERCISE
. Save these for last, and don't worry if you don't complete them! They are advanced for a reason.