App School II (Full-Stack)
Last updated
Last updated
In App School I you learned about the structure of a Gall agent. In this course, we'll walk through the writing of a full agent that serves as the backend for a React application which we'll also write.
We'll write a simple journal app, called "Journal". In the browser, users will be able to add plaintext journal entires organized by date. They'll be able to scroll through their entires in ascending date order, with more entries loaded each time the bottom of the list is reached. They'll be able to edit and delete old entries, and search through entries by specifying a date range.
The Journal app we'll be writing can be installed from ~pocwet/journal, and its source code is available here.
This walkthrough doesn't cover every aspect of building the app in full depth. Rather, its purpose is to demonstrate the process of creating a full-stack app, showing how everything fits together, and how concepts you learned in App School I are applied in practice. Consequently, the example app is fairly simple and runs on a local ship only, rather than one with more complex inter-ship networking.
Each section of this walkthrough will list additional resources and learning material at the bottom of the page, which will cover the concepts discussed in a more comprehensive manner.
Here is the basic structure of the app we'll be building:
1. Types - Creating the /sur structure file for our %journal agent.
2. Agent - Creating the %journal agent itself.
3. JSON - Writing a library to convert between our agent's marks and JSON. This lets our React front-end poke our agent, and our agent send updates back to it.
4. Marks - Creating the mark files for the pokes our agent takes and updates it sends out.
5. Eyre - A brief overview of how the webserver vane Eyre works.
6. React App Setup - Creating a new React app, installing the required packages, and setting up some basic things for our front-end.
7. React App Logic - Analyzing the core logic of our React app, with particular focus on using methods of the Urbit() class from @urbit/http-api to communicate with our agent.
8. Desk and Glob - Building and "globbing" our front-end, and putting together a desk for distribution.
9. Summary - Some final comments and additional resources.
