|
| 1 | +--- |
| 2 | +title: Create Your First Application |
| 3 | +--- |
| 4 | + |
| 5 | +import Tabs from '@theme/Tabs'; |
| 6 | +import TabItem from '@theme/TabItem'; |
| 7 | + |
| 8 | +With Harper successfully installed and setup, let's dive into building your first Harper Application, a simple REST API. Harper lets you build powerful APIs with minimal effort. In just a few minutes, you'll have a functional REST API with automatic validation, indexing, and querying—all without writing a single line of code. |
| 9 | + |
| 10 | +## What You Will Learn |
| 11 | + |
| 12 | +- Overview of Harper architecture |
| 13 | +- What are Harper core services, plugins, and applications |
| 14 | +- How to run a Harper application |
| 15 | +- How to define a table using schemas |
| 16 | +- How to automatically create a REST API from a table schema |
| 17 | +- How to interact with the table using the generated REST API |
| 18 | + - Create, Read, Update, and Delete data |
| 19 | + |
| 20 | +## Prerequisites |
| 21 | + |
| 22 | +- Working Harper Installation |
| 23 | + - Complete previous guide [Install and Connect Harper](./install-and-connect-harper) |
| 24 | + |
| 25 | +## Harper Architecture |
| 26 | + |
| 27 | +Before diving into building your first Harper application, it is important to understand a bit about Harper's architecture. The simplest way to think about Harper is as a stack. |
| 28 | + |
| 29 | +``` |
| 30 | +┏━━━━━━━━━━━━━━━━━━┓ |
| 31 | +┃ Applications ┃ |
| 32 | +┠──────────────────┨ |
| 33 | +┃ Plugins ┃ |
| 34 | +┃ - rest ┃ |
| 35 | +┃ - graphqlSchema ┃ |
| 36 | +┃ - ... ┃ |
| 37 | +┠──────────────────┨ |
| 38 | +┃ Core Services: ┃ |
| 39 | +┃ - database ┃ |
| 40 | +┃ - networking ┃ |
| 41 | +┃ - component ┃ |
| 42 | +┃ management ┃ |
| 43 | +┗━━━━━━━━━━━━━━━━━━┛ |
| 44 | +``` |
| 45 | + |
| 46 | +At the bottom are the **core services** that make up the foundation of the Harper platform. This includes the high-performance **database**, extensible **networking** middleware, and **component** management system. Components are extensions of the core Harper system, and are further classified as **plugins** and **applications**. |
| 47 | + |
| 48 | +**Plugins** come next in the stack. Plugins have access to APIs exposing many of Harper's core services, and are capable of implementing more advanced features than what the core services provide. Many of Harper's features are implemented as **built-in plugins**. Additional features can be implemented as **custom plugins**. In this guide, we'll be demonstrating some of Harper's built-in plugins `graphqlSchema` and `rest`. Later guides will demonstrate many more. |
| 49 | + |
| 50 | +And finally, the top of the stack are **applications**. This is where any user-facing functionality is implemented. Applications use plugins to implement their business logic. Everything from database table schemas, to web applications. |
| 51 | + |
| 52 | +The key difference between plugins and applications is that plugins enable the functionality, and applications implement it. Its similar to that of a front-end framework. React on its own doesn't actually do anything, you actually need to build a "React App" for it to do anything meaningful. |
| 53 | + |
| 54 | +## Initialize the Harper Application |
| 55 | + |
| 56 | +Without further a do, lets get started building your first Harper application! |
| 57 | + |
| 58 | +:::tip |
| 59 | +Throughout this guide you'll see tabs like the ones just below that provide different instructions based on your installation choice from the previous guide. The "Local Installation" is for both globally installed and containerized Harper applications; the point being you have access to the file system. The "Fabric" option is for the Harper Fabric platform service deployment and will involve managing applications and modifying files through the Fabric UI within your browser. |
| 60 | + |
| 61 | +These tabs are all synchronized together, so select your installation method and enjoy learning how to build your first Harper application! |
| 62 | +::: |
| 63 | + |
| 64 | +<Tabs groupId="installation"> |
| 65 | + <TabItem value="local" label="Local Installation"> |
| 66 | + |
| 67 | +Get started by cloning the [`HarperFast/create-your-first-application`](https://github.com/HarperFast/create-your-first-application) repo and opening it your editor of choice. If you have installed Harper using a container, make sure to run this within the `dev/` directory that the container was mounted to. |
| 68 | + |
| 69 | +```bash |
| 70 | +git clone https://github.com/HarperFast/create-your-first-application.git first-harper-app |
| 71 | +``` |
| 72 | + |
| 73 | + </TabItem> |
| 74 | + <TabItem value="fabric" label="Fabric"> |
| 75 | + |
| 76 | +From the Cluster page, navigate to the Applications tab and click on "New Application" on the left-hand sidebar. |
| 77 | + |
| 78 | +Give the application a name such as "first-harper-app", and then click on the "Import" tab. |
| 79 | + |
| 80 | +Specify `https://github.com/HarperFast/create-your-first-application` in the "Git Repository URL" field. |
| 81 | + |
| 82 | +Keep the "Install Command" empty and the "Authorization" as "Public Access". |
| 83 | + |
| 84 | +Finally, click the "Import Application" button and wait for the application to be instantiated. |
| 85 | + |
| 86 | + </TabItem> |
| 87 | +</Tabs> |
| 88 | + |
| 89 | +## Create a Table |
| 90 | + |
| 91 | +The core of most Harper applications is the data. Harper's data system is made up of databases and tables. There are many ways to create them, and the primary method is to use a GraphQL-like syntax to define table schemas. These schemas are not true GraphQL, and you don't have to use GraphQL for querying neither. |
| 92 | + |
| 93 | +<Tabs groupId="installation"> |
| 94 | + <TabItem value="local" label="Local Installation"> |
| 95 | + |
| 96 | +Open `schema.graphql` in your text editor. |
| 97 | + |
| 98 | + </TabItem> |
| 99 | + <TabItem value="fabric" label="Fabric"> |
| 100 | + |
| 101 | +Navigate to the Files tab for your new application and open the `schema.graphql` file. |
| 102 | + |
| 103 | + </TabItem> |
| 104 | +</Tabs> |
| 105 | + |
| 106 | +Within `schema.graphql`, add: |
| 107 | + |
| 108 | +```graphql |
| 109 | +type Dog @table { |
| 110 | + id: ID @primaryKey |
| 111 | +} |
| 112 | +``` |
| 113 | + |
| 114 | +Harper has defined custom directives, such as `@table` and `@primaryKey`, to specify special behavior for the table schema. |
| 115 | + |
| 116 | +The `@table` directive is what instructs Harper that this is in fact a table schema versus an arbitrary type. |
| 117 | + |
| 118 | +The `@primaryKey` directive specifies which attribute is meant to be the primary key for indexing. |
| 119 | + |
| 120 | +Next, lets add some more properties to the schema. |
| 121 | + |
| 122 | +```graphql |
| 123 | +type Dog @table { |
| 124 | + id: ID @primaryKey |
| 125 | + name: String |
| 126 | + breed: String |
| 127 | + age: Int |
| 128 | +} |
| 129 | +``` |
| 130 | + |
| 131 | +Harper's schema system piggybacks off of the standard GraphQL field types such as `String`, `Int`, and many more. |
| 132 | + |
| 133 | +:::info |
| 134 | +For a full list of field types, see the [Schema Field Types](../../docs/developers/applications/defining-schemas#field-types) reference documentation. |
| 135 | +::: |
| 136 | + |
| 137 | +Now you have a schema for a `Dog` table with four attributes `id`, `name`, `breed`, and `age`. |
| 138 | + |
| 139 | +The next step is to tell Harper about your schema file. |
| 140 | + |
| 141 | +Open the `config.yaml` file and add the following: |
| 142 | + |
| 143 | +```yaml |
| 144 | +graphqlSchema: |
| 145 | + files: 'schema.graphql' |
| 146 | +``` |
| 147 | +
|
| 148 | +The `config.yaml` file is how Harper applications configure plugins. The `graphqlSchema` plugin is built-in to Harper so there is no additional steps needed to configure it, but custom plugins do require installing dependencies (more on that in another guide). |
| 149 | + |
| 150 | +The `files` property allows you to specify a file glob pattern for the plugin. In this case, we are only specifying a single file, but you can specify any glob pattern here too. |
| 151 | + |
| 152 | +With the `schema.graphql` and `config.yaml` in place, now its time to run your application for the first time. |
| 153 | + |
| 154 | +## Running your Application |
| 155 | + |
| 156 | +<Tabs groupId="installation"> |
| 157 | + <TabItem value="local" label="Local Installation"> |
| 158 | + |
| 159 | +If Harper is still running, shut it down using CTRL/CMD + C for a foreground process or `harperdb stop` for a background process. |
| 160 | + |
| 161 | +Within your application directory, open a command line and run `harperdb dev .` |
| 162 | + |
| 163 | +TODO: Insert description of `dev` command |
| 164 | + |
| 165 | + </TabItem> |
| 166 | + <TabItem value="fabric" label="Fabric"> |
| 167 | + |
| 168 | +Click the restart button |
| 169 | + |
| 170 | +TODO: Fill in actual steps for fabric here |
| 171 | + |
| 172 | + </TabItem> |
| 173 | +</Tabs> |
| 174 | + |
| 175 | +## Interacting with the `Dog` table |
| 176 | + |
| 177 | +<Tabs groupId="installation"> |
| 178 | + <TabItem value="local" label="Local Installation"> |
| 179 | + |
| 180 | +Locally, using the Operations API via the CLI and curl |
| 181 | + |
| 182 | +Inspect the database and table using `describe_database` and `describe_table` |
| 183 | + |
| 184 | +Add a record using `insert` |
| 185 | + |
| 186 | +Hint at additional operations apis for other CRUD ops but encourage the user to read on for REST API guide |
| 187 | + |
| 188 | + </TabItem> |
| 189 | + <TabItem value="fabric" label="Fabric"> |
| 190 | + |
| 191 | +Using the Database UI |
| 192 | + |
| 193 | +Learn about the database and table |
| 194 | + |
| 195 | +Add a record manually |
| 196 | + |
| 197 | +Hint at additional methods for CRUD ops but encourage the user to read on for REST API guide |
| 198 | + |
| 199 | + </TabItem> |
| 200 | +</Tabs> |
| 201 | + |
| 202 | +## Enabling automatic REST API generation |
| 203 | + |
| 204 | +Add @export to schema |
| 205 | +Edit config.yaml with rest: true |
| 206 | + |
| 207 | +## Interacting with the `/Dog` API |
| 208 | + |
| 209 | +### Creating entries with POST and PUT |
| 210 | + |
| 211 | +### Reading entries with GET |
| 212 | + |
| 213 | +#### Querying by attribute |
| 214 | + |
| 215 | +### Updating entries with PUT and PATCH |
| 216 | + |
| 217 | +### Deleting entries with DELETE |
| 218 | + |
| 219 | +## Key Take Aways |
| 220 | + |
| 221 | +## Additional Resources |
0 commit comments