It's recommended to keep it active only for the time strictly necessary to identify and optimize queries. +
+ SQLite Cloud Example: Checking Chinook Customers +
+ +
+
+
+
+
+
+
+
+ Results:
+
+
+```
+ - Lastly, in `sqlitecloud_quickstart/settings.py`, configure `DIRS` in `TEMPLATES` as follows.
+ - `'APP_DIRS': True` tells Django's templating engine to look for template source files inside project apps.
+ - `DIRS` provides the filepath to the correct app's `templates` dir.
+
+```python
+TEMPLATES = [
+ {
+ 'BACKEND': 'django.template.backends.django.DjangoTemplates',
+ 'DIRS': ['albums/templates'],
+ 'APP_DIRS': True,
+ 'OPTIONS': {
+ 'context_processors': [
+ 'django.template.context_processors.debug',
+ 'django.template.context_processors.request',
+ 'django.contrib.auth.context_processors.auth',
+ 'django.contrib.messages.context_processors.messages',
+ ],
+ },
+ },
+]
+```
+
+5. **Run the Django dev server**
+
+```bash
+python manage.py runserver
+```
+
+ - Visit `http://127.0.0.1:8000/albums/` to see your app data.
+
+6. **FOLLOW-UP:**
+This Quickstart goes a bit deeper into the framework than the other Quickstarts since Django requires more boilerplate to get up-and-running with a simple app.
+
+If you're new to Django and want to learn more, we referenced the following Django Tutorial pages extensively when writing this Quickstart:
+ - Part 1
+ - Part 3
+
+And that's it! You've successfully built a Django app that reads data from a SQLite Cloud database.
\ No newline at end of file
diff --git a/sqlite-cloud/quickstart/quick-start-flask.mdx b/sqlite-cloud/quickstart/quick-start-flask.mdx
new file mode 100644
index 0000000..dfe33ec
--- /dev/null
+++ b/sqlite-cloud/quickstart/quick-start-flask.mdx
@@ -0,0 +1,80 @@
+---
+title: Flask Quick Start Guide
+description: Get started with SQLite Cloud using Flask.
+category: getting-started
+status: publish
+slug: quick-start-flask
+---
+
+In this quickstart, we will show you how to get started with SQLite Cloud and Flask by building a simple application that connects to and reads from a SQLite Cloud database.
+
+---
+
+1. **Set up a SQLite Cloud account**
+ - If you haven't already, sign up for a SQLite Cloud account and create a new project.
+ - In this guide, we will use the sample datasets that come pre-loaded with SQLite Cloud.
+
+2. **Create a Flask app**
+ - You should have the latest Python version (3) installed locally.
+
+```bash
+mkdir sqlc-quickstart
+cd sqlc-quickstart
+
+python3 -m venv .venv
+. .venv/bin/activate
+
+pip install flask
+```
+
+3. **Install the SQLite Cloud SDK**
+
+```bash
+pip install sqlitecloud
+```
+
+4. **Query data**
+ - Copy the following code into a new `app.py` file.
+ - In your SQLite Cloud account dashboard, click on a Node, copy the Connection String, and replace `Albums
+-
+ {% for row in albumObjsList %}
+
- {{ row.album }} by {{ row.artist }} + {% endfor %} +
Albums
' + + for row in cursor: + album = f"{row[1]} by {row[2]}" + result += f"Albums
+-
+@foreach ($albums as $album)
+
- {{ $album['albumTitle'] }} by {{ $album['artistName'] }} +@endforeach +
+
+ );
+ } catch (error) {
+ let message = "An unknown error occurred";
+
+ if (error instanceof Error) {
+ message = error.message;
+ }
+ return + Albums (Server Component) +
+-
+ {result.map((album: Album) => (
+
- + {album.title} -{" "} + {album.artist} + + ))} +
Error loading albums: {message}
; + } finally { + db?.close(); + } +} +``` + +10. **Fetch Data in a Client Component** +Since the SQLite Cloud driver can run in the browser, you can use it directly in a Client Component without needing an API route. + +```tsx +// +// src/app/components/GetAlbumsClient.tsx (Client Component) +// + +"use client"; + +import { useEffect, useState } from "react"; +import { Database } from "@sqlitecloud/drivers"; +import { Album } from "@/types"; +import { GET_ALBUMS } from "@/constants/queries"; + +export default function GetAlbumsClient() { + const [albums, setAlbums] = useStateError: {error}
; + + return ( +
+
+ );
+}
+```
+
+11. **Update Data in a Client Component**
+You can also update data directly from a Client Component:
+
+```tsx
+//
+// src/app/components/UpdateAlbumsClient.tsx (Client Component)
+//
+
+"use client";
+
+import { useState, useEffect } from "react";
+
+export default function UpdateAlbumsClient() {
+ const [albums, setAlbums] = useState<
+ { id: number; title: string; artist: string }[]
+ >([]);
+ const [loading, setLoading] = useState(false);
+
+ // Function to fetch albums from the API route
+ async function fetchAlbums() {
+ try {
+ const res = await fetch("/api/albums");
+ if (!res.ok) throw new Error("Failed to fetch albums");
+ const data = await res.json();
+ setAlbums(data);
+ } catch (error) {
+ console.error("Error fetching albums:", error);
+ }
+ }
+
+ // Function to add a new album and then reload the albums list
+ async function addAlbum() {
+ setLoading(true);
+
+ try {
+ // Generate a random album name
+ const randomAlbumTitle = `Album ${Math.random()
+ .toString(36)
+ .substring(7)}`;
+
+ // Generate a random artist ID between 1 and 100
+ const randomArtistId = Math.floor(Math.random() * 100) + 1;
+
+ const res = await fetch("/api/albums", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ title: randomAlbumTitle,
+ artistId: randomArtistId,
+ }),
+ });
+
+ if (!res.ok) throw new Error("Failed to add album");
+
+ await fetchAlbums(); // Refresh album list after adding
+ } catch (error) {
+ console.error("Error adding album:", error);
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ // Fetch albums when component mounts
+ useEffect(() => {
+ fetchAlbums();
+ }, []);
+
+ return (
+ Albums (Client Component)
+ {error ? ( +Error: {error}
+ ) : ( +-
+ {albums.map((album) => (
+
- + {album.title} -{" "} + {album.artist} + + ))} +
+
+
+
+ );
+}
+
+```
+
+12. **Create a Page to Display Components**
+
+Replace the content of `page.tsx` with:
+
+```tsx
+//
+// src/app/page.tsx (Unified Page)
+//
+
+import GetAlbumsClient from "./components/GetAlbumsClient";
+import GetAlbumsServer from "./components/GetAlbumsServer";
+import UpdateAlbumsClient from "./components/UpdateAlbumsClient";
+
+export default function page() {
+ return (
+ Latest Albums
+ {albums.length === 0 ? ( +No albums found.
+ ) : ( +-
+ {albums.map((album) => (
+
- + {album.title} -{" "} + {album.artist} + + ))} +
+
+ );
+}
+```
+
+Replace the content of `layout.tsx` with:
+
+```tsx
+//
+// src/app/layout.tsx
+//
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {/* ✅ Add Tailwind CDN */}
+
+
+ {children}
+
+ );
+}
+
+```
+
+13. **Run Your App**
+```bash
+npm run dev
+```
+
+14. **View Your App**
+ - Open your browser and navigate to the provided localhost link to see your app in action.
+
+
+---
+
+Congratulations! You’ve successfully built a Next.js app that interacts with a SQLite Cloud database.
\ No newline at end of file
diff --git a/sqlite-cloud/quickstart/quick-start-node.mdx b/sqlite-cloud/quickstart/quick-start-node.mdx
new file mode 100644
index 0000000..419a0af
--- /dev/null
+++ b/sqlite-cloud/quickstart/quick-start-node.mdx
@@ -0,0 +1,68 @@
+---
+title: Node.js Quick Start Guide
+description: Get started with SQLite Cloud using Node.js and Express.
+category: getting-started
+status: publish
+slug: quick-start-node
+---
+
+In this quickstart, we will show you how to get started with SQLite Cloud and Node.js by building a simple web server that connects to and reads from a SQLite Cloud database, then serves that data to the client.
+
+---
+
+1. **Set up a SQLite Cloud account**
+ - If you haven't already, sign up for a SQLite Cloud account and create a new project.
+ - In this guide, we will use the sample datasets that come pre-loaded with SQLite Cloud.
+2. **Create a Node.js app**
+ - Navigate to your target directory and run the following command to initialize your Node.js app and install the necessary depedencies:
+```bash
+npm init
+```
+ - After creating your project, install the SQLite Cloud SDK:
+```bash
+npm install express @sqlitecloud/drivers --save
+```
+ - Create a file named `index.js` in the root directory of your project.
+
+3. **Query data**
+ - Grab a connection string by clicking on a node in your dashboard.
+ - Paste the following into your `index.js` file:
+
+```javascript
+const express = require("express");
+const { Database } = require("@sqlitecloud/drivers");
+
+const connectionString = process.env.SQLITECLOUD_CONNECTION_STRING
+const app = express();
+
+app.get("/albums", async (req, res) => {
+ let db = null;
+ try {
+ db = new Database(connectionString)
+ const result = await db.sql(`
+ USE DATABASE chinook.sqlite;
+ SELECT albums.AlbumId as id, albums.Title as title, artists.name as artist
+ FROM albums
+ INNER JOIN artists
+ WHERE artists.ArtistId = albums.ArtistId
+ LIMIT 20;`);
+ res.json(result);
+ } catch (error) {
+ res.status(500).json({ error: error.message });
+ } finally {
+ db?.close();
+ }
+});
+
+app.listen(3000, () => {
+ console.log("Server running on port 3000");
+});
+```
+5. **Run your app**
+```bash
+node index.js
+```
+6. **View your web server response**
+ - Open your browser and navigate to `http://localhost:3000/albums` to see your app in action.
+
+And that's it! You've successfully built a Node.js app that reads and serves data from a SQLite Cloud database.
diff --git a/sqlite-cloud/quickstart/quick-start-prisma.mdx b/sqlite-cloud/quickstart/quick-start-prisma.mdx
new file mode 100644
index 0000000..f0fb1c5
--- /dev/null
+++ b/sqlite-cloud/quickstart/quick-start-prisma.mdx
@@ -0,0 +1,87 @@
+---
+title: Prisma Quick Start Guide
+description: Get started with SQLite Cloud using Prisma ORM.
+category: getting-started
+status: draft
+slug: quick-start-prisma
+---
+
+In this quickstart, we will show you how to get started with SQLite Cloud and Prisma by building a simple application that connects to and reads from a SQLite Cloud database.
+
+---
+
+1. **Set up a SQLite Cloud account**
+ - If you haven't already, sign up for a SQLite Cloud account and create a new project.
+ - In this guide, we will use the sample datasets that come pre-loaded with SQLite Cloud.
+2. **Create a Next.js app**
+ - Create a Next app using ```create-next-app```. The following command creates a very simple app (JS, no Tailwind, uses the latest App Router) to keep the focus on querying the data.
+```bash
+npx create-next-app@latest sqlc-quickstart --js --no-tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm
+```
+3. **Install the SQLite Cloud SDK**
+```bash
+cd sqlc-quickstart && npm install @sqlitecloud/drivers
+```
+4. **Query data**
+ - Replace the code in ```layout.js``` and ```page.js``` with the following snippets.
+ - Click a node in your account dashboard and copy the connection string. Replace ```
+
+ Albums Overview
+ +
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+5. **Run your app**
+```bash
+npm run dev
+```
+6. **View your app**
+ - Open your browser and navigate to the localhost link provided by the previous command to see your app data.
+
+And that's it! You've successfully built a Next app that reads data from a SQLite Cloud database.
\ No newline at end of file
diff --git a/sqlite-cloud/quickstart/quick-start-react-native.mdx b/sqlite-cloud/quickstart/quick-start-react-native.mdx
new file mode 100644
index 0000000..8ba114f
--- /dev/null
+++ b/sqlite-cloud/quickstart/quick-start-react-native.mdx
@@ -0,0 +1,115 @@
+---
+title: React Native Quick Start Guide
+description: Get started with SQLite Cloud using React Native.
+category: getting-started
+status: publish
+slug: quick-start-react-native
+---
+
+In this quickstart, we will show you how to get started with SQLite Cloud and React Native by building a simple application that connects to and reads from a SQLite Cloud database.
+
+---
+
+1. **Set up a SQLite Cloud account**
+ - If you haven't already, sign up for a SQLite Cloud account and create a new project.
+ - In this guide, we will use the sample datasets that come pre-loaded with SQLite Cloud.
+
+2. **Create a React Native project**
+ - If you haven't already, sign up for an Expo account.
+ - Create a new remote EAS project with the name `sqlc-quickstart`.
+ - Link your remote project to a new local project. Replace `{id}` below with the project ID provided by Expo.
+
+```bash
+npm install --global eas-cli
+npx create-expo-app sqlc-quickstart
+cd sqlc-quickstart
+eas init --id {id}
+```
+
+3. **Install the SQLite Cloud JS SDK and peer dependencies**
+
+```bash
+npm install @sqlitecloud/drivers react-native-tcp-socket react-native-fast-base64
+```
+
+4. **Query data**
+ - Replace the code in `app/(tabs)/index.tsx` with the following snippet.
+ - In your SQLite Cloud account dashboard, click on a Node, copy the Connection String, and replace `Albums
+-
+ {res.map(({ id, title, artist }) => (
+
- + {title} by {artist} + + ))} +
+
+
++ + +
+
+
++ + +
+
+
++ + +
+
+
+SQLite Cloud for Go is a powerful package that allows you to interact with the SQLite Cloud database seamlessly. It provides methods for various database operations. This package is designed to simplify database operations in Go applications, making it easier than ever to work with SQLite Cloud. In addition to the standard SQLite statements, several other [commands](server-side-commands) are supported.
\ No newline at end of file
diff --git a/sqlite-cloud/sdks/js/classes/Database.md b/sqlite-cloud/sdks/js/classes/Database.md
index 6c138ca..c625d9a 100644
--- a/sqlite-cloud/sdks/js/classes/Database.md
+++ b/sqlite-cloud/sdks/js/classes/Database.md
@@ -1,7 +1,7 @@
---
title: Database
description: SQLite Cloud Javascript SDK
-customClass: sdk-doc badge-doc js-doc
+customClass: sdk-doc js-doc
category: sdks
status: publish
---
@@ -84,7 +84,7 @@ EventEmitter.constructor
#### Defined in
-[src/drivers/database.ts:33](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L33)
+src/drivers/database.ts:33
• **new Database**(`config`, `mode?`, `callback?`): [`Database`](database)
@@ -106,7 +106,7 @@ EventEmitter.constructor
#### Defined in
-[src/drivers/database.ts:34](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L34)
+src/drivers/database.ts:34
## Properties
@@ -118,7 +118,7 @@ Configuration used to open database connections
#### Defined in
-[src/drivers/database.ts:57](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L57)
+src/drivers/database.ts:57
___
@@ -130,7 +130,7 @@ Database connections
#### Defined in
-[src/drivers/database.ts:60](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L60)
+src/drivers/database.ts:60
___
@@ -215,7 +215,7 @@ calls to retrieve a previously unknown amount of rows.
#### Defined in
-[src/drivers/database.ts:273](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L273)
+src/drivers/database.ts:273
▸ **all**\<`T`\>(`sql`, `params`, `callback?`): [`Database`](database)
@@ -239,7 +239,7 @@ calls to retrieve a previously unknown amount of rows.
#### Defined in
-[src/drivers/database.ts:274](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L274)
+src/drivers/database.ts:274
___
@@ -266,7 +266,7 @@ parameters is emitted, regardless of whether a callback was provided or not.
#### Defined in
-[src/drivers/database.ts:394](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L394)
+src/drivers/database.ts:394
___
@@ -289,7 +289,7 @@ Set a configuration option for the database
#### Defined in
-[src/drivers/database.ts:190](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L190)
+src/drivers/database.ts:190
___
@@ -330,7 +330,7 @@ way to abort execution.
#### Defined in
-[src/drivers/database.ts:312](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L312)
+src/drivers/database.ts:312
▸ **each**\<`T`\>(`sql`, `params`, `callback?`, `complete?`): [`Database`](database)
@@ -355,7 +355,7 @@ way to abort execution.
#### Defined in
-[src/drivers/database.ts:313](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L313)
+src/drivers/database.ts:313
___
@@ -411,7 +411,7 @@ Emits given event with optional arguments on the next tick so callbacks can comp
#### Defined in
-[src/drivers/database.ts:160](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L160)
+src/drivers/database.ts:160
___
@@ -462,7 +462,7 @@ will be emitted on the database object.
#### Defined in
-[src/drivers/database.ts:368](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L368)
+src/drivers/database.ts:368
___
@@ -498,7 +498,7 @@ the only supported way is by column name.
#### Defined in
-[src/drivers/database.ts:235](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L235)
+src/drivers/database.ts:235
▸ **get**\<`T`\>(`sql`, `params`, `callback?`): [`Database`](database)
@@ -522,7 +522,7 @@ the only supported way is by column name.
#### Defined in
-[src/drivers/database.ts:236](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L236)
+src/drivers/database.ts:236
___
@@ -542,7 +542,7 @@ A configuration object
#### Defined in
-[src/drivers/database.ts:176](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L176)
+src/drivers/database.ts:176
___
@@ -564,7 +564,7 @@ Returns first available connection from connection pool
#### Defined in
-[src/drivers/database.ts:67](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L67)
+src/drivers/database.ts:67
___
@@ -588,7 +588,7 @@ Handles an error by closing the connection, calling the callback and/or emitting
#### Defined in
-[src/drivers/database.ts:117](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L117)
+src/drivers/database.ts:117
___
@@ -607,7 +607,7 @@ open to use this function.
#### Defined in
-[src/drivers/database.ts:429](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L429)
+src/drivers/database.ts:429
___
@@ -688,7 +688,7 @@ Loads a compiled SQLite extension into the database connection object.
#### Defined in
-[src/drivers/database.ts:413](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L413)
+src/drivers/database.ts:413
___
@@ -822,7 +822,7 @@ they are bound to the prepared statement before calling the callback.
#### Defined in
-[src/drivers/database.ts:353](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L353)
+src/drivers/database.ts:353
___
@@ -854,7 +854,7 @@ https://github.com/TryGhost/node-sqlite3/wiki/API#runsql--param---callback
#### Defined in
-[src/drivers/database.ts:141](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L141)
+src/drivers/database.ts:141
___
@@ -948,7 +948,7 @@ which it was called to allow for function chaining.
#### Defined in
-[src/drivers/database.ts:202](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L202)
+src/drivers/database.ts:202
▸ **run**\<`T`\>(`sql`, `params`, `callback?`): [`Database`](database)
@@ -972,7 +972,7 @@ which it was called to allow for function chaining.
#### Defined in
-[src/drivers/database.ts:203](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L203)
+src/drivers/database.ts:203
___
@@ -1001,7 +1001,7 @@ metadata in case of insert, update, delete.
#### Defined in
-[src/drivers/database.ts:447](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L447)
+src/drivers/database.ts:447
___
@@ -1017,4 +1017,4 @@ Enable verbose mode
#### Defined in
-[src/drivers/database.ts:181](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/database.ts#L181)
+src/drivers/database.ts:181
diff --git a/sqlite-cloud/sdks/js/classes/SQLiteCloudConnection.md b/sqlite-cloud/sdks/js/classes/SQLiteCloudConnection.md
index e929584..d428d66 100644
--- a/sqlite-cloud/sdks/js/classes/SQLiteCloudConnection.md
+++ b/sqlite-cloud/sdks/js/classes/SQLiteCloudConnection.md
@@ -1,7 +1,7 @@
---
title: SQLiteCloudConnection
description: SQLite Cloud Javascript SDK
-customClass: sdk-doc badge-doc js-doc
+customClass: sdk-doc js-doc
category: sdks
status: publish
---
@@ -55,7 +55,7 @@ Parse and validate provided connectionString or configuration
#### Defined in
-[src/drivers/connection.ts:16](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L16)
+src/drivers/connection.ts:16
## Properties
@@ -67,7 +67,7 @@ Configuration passed by client or extracted from connection string
#### Defined in
-[src/drivers/connection.ts:28](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L28)
+src/drivers/connection.ts:28
___
@@ -79,7 +79,7 @@ Operations are serialized by waiting an any pending promises
#### Defined in
-[src/drivers/connection.ts:31](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L31)
+src/drivers/connection.ts:31
## Accessors
@@ -95,7 +95,7 @@ Returns true if connection is open
#### Defined in
-[src/drivers/connection.ts:74](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L74)
+src/drivers/connection.ts:74
## Methods
@@ -111,7 +111,7 @@ Disconnect from server, release transport.
#### Defined in
-[src/drivers/connection.ts:100](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L100)
+src/drivers/connection.ts:100
___
@@ -133,7 +133,7 @@ Connect will establish a tls or websocket transport to the server based on confi
#### Defined in
-[src/drivers/connection.ts:38](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L38)
+src/drivers/connection.ts:38
___
@@ -154,7 +154,7 @@ ___
#### Defined in
-[src/drivers/connection.ts:56](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L56)
+src/drivers/connection.ts:56
___
@@ -177,7 +177,7 @@ Will log to console if verbose mode is enabled
#### Defined in
-[src/drivers/connection.ts:62](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L62)
+src/drivers/connection.ts:62
___
@@ -200,7 +200,7 @@ Will enquee a command to be executed and callback with the resulting rowset/resu
#### Defined in
-[src/drivers/connection.ts:82](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L82)
+src/drivers/connection.ts:82
___
@@ -223,7 +223,7 @@ Send a command, return the rowset/result or throw an error
#### Defined in
-[src/drivers/connection.ts:59](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L59)
+src/drivers/connection.ts:59
___
@@ -239,4 +239,4 @@ Enable verbose logging for debug purposes
#### Defined in
-[src/drivers/connection.ts:77](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/connection.ts#L77)
+src/drivers/connection.ts:77
diff --git a/sqlite-cloud/sdks/js/classes/SQLiteCloudError.md b/sqlite-cloud/sdks/js/classes/SQLiteCloudError.md
index f080ec1..eea1af3 100644
--- a/sqlite-cloud/sdks/js/classes/SQLiteCloudError.md
+++ b/sqlite-cloud/sdks/js/classes/SQLiteCloudError.md
@@ -1,7 +1,7 @@
---
title: SQLiteCloudError
description: SQLite Cloud Javascript SDK
-customClass: sdk-doc badge-doc js-doc
+customClass: sdk-doc js-doc
category: sdks
status: publish
---
@@ -59,7 +59,7 @@ Error.constructor
#### Defined in
-[src/drivers/types.ts:102](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/types.ts#L102)
+src/drivers/types.ts:102
## Properties
@@ -75,7 +75,7 @@ Error.cause
#### Defined in
-[src/drivers/types.ts:111](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/types.ts#L111)
+src/drivers/types.ts:111
___
@@ -87,7 +87,7 @@ Error code returned by drivers or server
#### Defined in
-[src/drivers/types.ts:113](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/types.ts#L113)
+src/drivers/types.ts:113
___
@@ -99,7 +99,7 @@ Additional error code
#### Defined in
-[src/drivers/types.ts:115](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/types.ts#L115)
+src/drivers/types.ts:115
___
@@ -139,7 +139,7 @@ Additional offset code in commands
#### Defined in
-[src/drivers/types.ts:117](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/types.ts#L117)
+src/drivers/types.ts:117
___
diff --git a/sqlite-cloud/sdks/js/classes/SQLiteCloudRow.md b/sqlite-cloud/sdks/js/classes/SQLiteCloudRow.md
index 104ae7f..d0eea36 100644
--- a/sqlite-cloud/sdks/js/classes/SQLiteCloudRow.md
+++ b/sqlite-cloud/sdks/js/classes/SQLiteCloudRow.md
@@ -1,7 +1,7 @@
---
title: SQLiteCloudRow
description: SQLite Cloud Javascript SDK
-customClass: sdk-doc badge-doc js-doc
+customClass: sdk-doc js-doc
category: sdks
status: publish
---
@@ -50,7 +50,7 @@ Column values are accessed by column name
#### Defined in
-[src/drivers/rowset.ts:9](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L9)
+src/drivers/rowset.ts:9
## Properties
@@ -60,7 +60,7 @@ Column values are accessed by column name
#### Defined in
-[src/drivers/rowset.ts:21](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L21)
+src/drivers/rowset.ts:21
___
@@ -70,7 +70,7 @@ ___
#### Defined in
-[src/drivers/rowset.ts:18](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L18)
+src/drivers/rowset.ts:18
## Methods
@@ -86,7 +86,7 @@ Returns rowset data as a plain array of values
#### Defined in
-[src/drivers/rowset.ts:31](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L31)
+src/drivers/rowset.ts:31
___
@@ -102,4 +102,4 @@ Returns the rowset that this row belongs to
#### Defined in
-[src/drivers/rowset.ts:25](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L25)
+src/drivers/rowset.ts:25
diff --git a/sqlite-cloud/sdks/js/classes/SQLiteCloudRowset.md b/sqlite-cloud/sdks/js/classes/SQLiteCloudRowset.md
index 2bb6c4e..472551d 100644
--- a/sqlite-cloud/sdks/js/classes/SQLiteCloudRowset.md
+++ b/sqlite-cloud/sdks/js/classes/SQLiteCloudRowset.md
@@ -1,7 +1,7 @@
---
title: SQLiteCloudRowset
description: SQLite Cloud Javascript SDK
-customClass: sdk-doc badge-doc js-doc
+customClass: sdk-doc js-doc
category: sdks
status: publish
---
@@ -98,7 +98,7 @@ Array\<SQLiteCloudRow\>.constructor
#### Defined in
-[src/drivers/rowset.ts:41](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L41)
+src/drivers/rowset.ts:41
## Properties
@@ -110,7 +110,7 @@ Actual data organized in rows
#### Defined in
-[src/drivers/rowset.ts:72](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L72)
+src/drivers/rowset.ts:72
___
@@ -122,7 +122,7 @@ Metadata contains number of rows and columns, column names, types, etc.
#### Defined in
-[src/drivers/rowset.ts:69](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L69)
+src/drivers/rowset.ts:69
___
@@ -168,7 +168,7 @@ Array of columns names
#### Defined in
-[src/drivers/rowset.ts:93](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L93)
+src/drivers/rowset.ts:93
___
@@ -184,7 +184,7 @@ Get rowset metadata
#### Defined in
-[src/drivers/rowset.ts:98](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L98)
+src/drivers/rowset.ts:98
___
@@ -200,7 +200,7 @@ Number of columns in row set
#### Defined in
-[src/drivers/rowset.ts:88](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L88)
+src/drivers/rowset.ts:88
___
@@ -216,7 +216,7 @@ Number of rows in row set
#### Defined in
-[src/drivers/rowset.ts:83](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L83)
+src/drivers/rowset.ts:83
___
@@ -236,7 +236,7 @@ https://github.com/sqlitecloud/sdk/blob/master/PROTOCOL.md
#### Defined in
-[src/drivers/rowset.ts:78](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L78)
+src/drivers/rowset.ts:78
## Methods
@@ -522,7 +522,7 @@ Array.filter
#### Defined in
-[src/drivers/rowset.ts:141](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L141)
+src/drivers/rowset.ts:141
___
@@ -726,7 +726,7 @@ Return value of item at given row and column
#### Defined in
-[src/drivers/rowset.ts:103](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L103)
+src/drivers/rowset.ts:103
___
@@ -877,7 +877,7 @@ Array.map
#### Defined in
-[src/drivers/rowset.ts:131](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L131)
+src/drivers/rowset.ts:131
___
@@ -1145,7 +1145,7 @@ Array.slice
#### Defined in
-[src/drivers/rowset.ts:113](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/rowset.ts#L113)
+src/drivers/rowset.ts:113
___
diff --git a/sqlite-cloud/sdks/js/classes/Statement.md b/sqlite-cloud/sdks/js/classes/Statement.md
index 0fa438a..efbb082 100644
--- a/sqlite-cloud/sdks/js/classes/Statement.md
+++ b/sqlite-cloud/sdks/js/classes/Statement.md
@@ -1,7 +1,7 @@
---
title: Statement 
+
++ +
+
++ +
+
++ +
+
++ +
+
+
+## Install
+
+```bash
+npm install @sqlitecloud/drivers
+```
+
+## Usage
+
+```ts
+import { Database } from '@sqlitecloud/drivers'
+
+let database = new Database('sqlitecloud://user:password@xxx.sqlite.cloud:8860/chinook.db')
+
+let name = 'Breaking The Rules'
+
+let results = await database.sql`SELECT * FROM tracks WHERE name = ${name}`
+// => returns [{ AlbumId: 1, Name: 'Breaking The Rules', Composer: 'Angus Young... }]
+```
+
+Use [Database.sql](/docs/sqlite-cloud/sdks/js/classes/database#sql) to execute prepared statements or plain SQL queries asynchronously. This method returns an array of rows for SELECT queries and supports the standard syntax for UPDATE, INSERT, and DELETE.
+
+We aim for full compatibility with the established sqlite3 API, with the primary distinction being that our driver connects to SQLiteCloud databases. This allows you to migrate your SQLite to the cloud while continuing to use your existing codebase.
+
+The package is developed entirely in TypeScript and is fully compatible with JavaScript. It doesn't require any native libraries. This makes it a straightforward and effective tool for managing cloud-based databases in a familiar SQLite environment.
+
+## More
+
+How do I deploy SQLite in the cloud?
++How do I connect SQLite cloud with Javascript? +
+How can I contribute or suggest features? diff --git a/sqlite-cloud/sdks/js/modules.md b/sqlite-cloud/sdks/js/modules.md index 23c8f07..4b9c81d 100644 --- a/sqlite-cloud/sdks/js/modules.md +++ b/sqlite-cloud/sdks/js/modules.md @@ -1,26 +1,27 @@ --- title: Modules description: SQLite Cloud Javascript SDK -customClass: sdk-doc badge-doc js-doc +customClass: sdk-doc js-doc category: sdks status: publish +slug: sdk-js-modules --- ## Table of contents ### Classes -- [Database](classes/database) -- [SQLiteCloudConnection](classes/sqlitecloudconnection) -- [SQLiteCloudError](classes/sqliteclouderror) -- [SQLiteCloudRow](classes/sqlitecloudrow) -- [SQLiteCloudRowset](classes/sqlitecloudrowset) -- [Statement](classes/statement) +- [Database](sqlite-cloud/sdks/js/classes/database) +- [SQLiteCloudConnection](sqlite-cloud/sdks/js/classes/sqlitecloudconnection) +- [SQLiteCloudError](sqlite-cloud/sdks/js/classes/sqliteclouderror) +- [SQLiteCloudRow](sqlite-cloud/sdks/js/classes/sqlitecloudrow) +- [SQLiteCloudRowset](sqlite-cloud/sdks/js/classes/sqlitecloudrowset) +- [Statement](sqlite-cloud/sdks/js/classes/statement) ### Interfaces -- [SQLCloudRowsetMetadata](interfaces/sqlcloudrowsetmetadata) -- [SQLiteCloudConfig](interfaces/sqlitecloudconfig) +- [SQLCloudRowsetMetadata](sqlite-cloud/sdks/js/interfaces/sqlcloudrowsetmetadata) +- [SQLiteCloudConfig](sqlite-cloud/sdks/js/interfaces/sqlitecloudconfig) ### Type Aliases @@ -55,7 +56,7 @@ status: publish #### Defined in -[src/drivers/types.ts:120](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/types.ts#L120) +src/drivers/types.ts:120 ## Functions @@ -77,7 +78,7 @@ Takes a generic value and escapes it so it can replace ? as a binding in a prepa #### Defined in -[src/drivers/utilities.ts:70](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/utilities.ts#L70) +src/drivers/utilities.ts:70 ___ @@ -99,7 +100,7 @@ Parse connectionString like sqlitecloud://username:password@host:port/database?o #### Defined in -[src/drivers/utilities.ts:210](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/utilities.ts#L210) +src/drivers/utilities.ts:210 ___ @@ -122,7 +123,7 @@ Take a sql statement and replaces ? or $named parameters that are properly seria #### Defined in -[src/drivers/utilities.ts:105](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/utilities.ts#L105) +src/drivers/utilities.ts:105 ___ @@ -144,4 +145,4 @@ Validate configuration, apply defaults, throw if something is missing or misconf #### Defined in -[src/drivers/utilities.ts:173](https://github.com/sqlitecloud/sqlitecloud-js/blob/f7cd658/src/drivers/utilities.ts#L173) +src/drivers/utilities.ts:173 diff --git a/sqlite-cloud/sdks/php/getting-started.mdx b/sqlite-cloud/sdks/php/getting-started.mdx deleted file mode 100644 index bdf9084..0000000 --- a/sqlite-cloud/sdks/php/getting-started.mdx +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: PHP SDK Getting Started -description: Get started with SQLite Cloud using PHP. -customClass: sdk-doc badge-doc php-doc -category: sdks -status: publish ---- - - -[![Test and QA][test-qa-img]][test-qa-url] -[![codecov][codecov-img]][codecov-url] -[![Packagist Version][packagist-version-img]][packagist-url] -[![PHP][php-img]][packagist-url] - -## Install - -```bash -$ composer require sqlitecloud/sqlitecloud -``` - -SQLite Cloud is a powerful PHP package that allows you to interact with the SQLite Cloud database seamlessly. It provides methods for various database operations. -This package is designed to simplify database operations in PHP applications, making it easier than ever to work with SQLite Cloud. - -## Example - -```php -connectWithString('sqlitecloud://myhost.sqlite.cloud:8860?apikey=myapikey'); - -// You can autoselect the database during the connect call -// by adding the database name as path of the SQLite Cloud -// connection string, eg: -// $sqlite->connectWithString("sqlitecloud://myhost.sqlite.cloud:8860/mydatabase?apikey=myapikey"); -$db_name = 'chinook.sqlite'; -$sqlite->execute("USE DATABASE {$db_name}"); - - /** @var SQLiteCloudRowset */ -$rowset = $sqlite->execute('SELECT * FROM albums WHERE ArtistId = 2'); - -printf('%d rows' . PHP_EOL, $rowset->nrows); -printf('%s | %s | %s' . PHP_EOL, $rowset->name(0), $rowset->name(1), $rowset->name(2)); -for ($i = 0; $i < $rowset->nrows; $i++) { - printf('%s | %s | %s' . PHP_EOL, $rowset->value($i, 0), $rowset->value($i, 1), $rowset->value($i, 2)); -} - -$sqlite->disconnect(); -``` - -## PHP Admin -To better understand the PHP APIs usage we developed a simple PHP Admin interface that can be used to administer any SQLite Cloud node. - -You can login using admin credentials: - - -And then administer your node with a convenient user interface: - - -PHP Admin source code is available in a [GitHub repo](https://github.com/sqlitecloud/sqlitecloud-php/tree/main/admin). - -## More -[test-qa-img]: https://github.com/sqlitecloud/sqlitecloud-php/actions/workflows/deploy.yaml/badge.svg?branch=main -[test-qa-url]: https://github.com/sqlitecloud/sqlitecloud-php/actions/workflows/deploy.yaml -[codecov-img]: https://codecov.io/gh/sqlitecloud/sqlitecloud-php/graph/badge.svg?token=3FFHULGCOY -[codecov-url]: https://codecov.io/gh/sqlitecloud/sqlitecloud-php -[packagist-version-img]: https://img.shields.io/packagist/v/sqlitecloud/sqlitecloud -[packagist-url]: https://packagist.org/packages/sqlitecloud/sqlitecloud -[php-img]: https://img.shields.io/packagist/dependency-v/sqlitecloud/sqlitecloud/php \ No newline at end of file diff --git a/sqlite-cloud/sdks/php/introduction.mdx b/sqlite-cloud/sdks/php/introduction.mdx new file mode 100644 index 0000000..2d9603a --- /dev/null +++ b/sqlite-cloud/sdks/php/introduction.mdx @@ -0,0 +1,100 @@ +--- +title: PHP SDK Getting Started +description: Get started with SQLite Cloud using PHP. +category: sdks +status: publish +slug: sdk-php-introduction +--- + +This powerful package provides methods that simplify performing database operations in PHP applications, making it easier than ever to work with SQLite in the cloud. We encourage all users to log encountered issues in the SDK’s issues backlog. + +## Install + + - Run the following command to initialize a PHP project and install the SDK. + +```bash +$ composer require sqlitecloud/sqlitecloud +``` + +## Configure your database connection + + - In your SQLite Cloud account dashboard, click on `Show connection strings`, copy the Connection String, and replace `
+
+
+Groovy DSL
+ +```groovy +repositories { + google() + mavenCentral() + maven { url 'https://jitpack.io' } +} +dependencies { + // ... + // Use requery's SQLite instead of Android's built-in SQLite to support loading custom extensions + implementation 'com.github.requery:sqlite-android:3.49.0' + // Both packages below are identical - use either one + implementation 'ai.sqlite:sync:0.8.39' // Maven Central + // implementation 'com.github.sqliteai:sqlite-sync:0.8.39' // JitPack (alternative) +} +``` + +
+
+
+### 2. Update AndroidManifest.xml
+
+Add `android:extractNativeLibs="true"` to your `Kotlin DSL
+ +```kotlin +repositories { + google() + mavenCentral() + maven(url = "https://jitpack.io") +} +dependencies { + // ... + // Use requery's SQLite instead of Android's built-in SQLite to support loading custom extensions + implementation("com.github.requery:sqlite-android:3.49.0") + // Both packages below are identical - use either one + implementation("ai.sqlite:sync:0.8.39") // Maven Central + // implementation("com.github.sqliteai:sqlite-sync:0.8.39") // JitPack (alternative) +} +``` + +SQLite WASM with SQLite Sync Example
+Open the directory in the terminal and type: npx serve .
Check the browser console for output.
+ + + + + + ``` + +3. Create the JavaScript file (load_extension.js) that initializes the SQLite WASM worker and verifies the extension is loaded: + + ```javascript + /** + * This example uses the package `@sqliteai/sqlite-wasm`. + * This version of SQLite WASM is bundled with SQLite Sync and SQLite Vector extensions. + * Extensions cannot be loaded at runtime in the browser environment. + * + * Run: `npx serve .` + */ + + import { sqlite3Worker1Promiser } from '@sqliteai/sqlite-wasm'; + + const log = console.log; + const error = console.error; + + const initializeSQLite = async () => { + try { + log('Loading and initializing SQLite3 module with sqlite-sync extension...'); + + const promiser = await new Promise((resolve) => { + const _promiser = sqlite3Worker1Promiser({ + onready: () => resolve(_promiser), + }); + }); + + const configResponse = await promiser('config-get', {}); + log('Running SQLite3 version', configResponse.result.version.libVersion); + + const openResponse = await promiser('open', { + filename: 'file:mydb.sqlite3', + }); + const { dbId } = openResponse; + + await promiser('exec', { + dbId, + sql: 'SELECT cloudsync_version();', // or vector_version() + callback: (result) => { + if (!result.row) { + return; + } + log('Include SQLite Sync version: ', result.row[0]); + } + }); + + } catch (err) { + if (!(err instanceof Error)) { + err = new Error(err.result.message); + } + error(err.name, err.message); + } + }; + + initializeSQLite(); + ``` + +## Usage Example + +Check out the React/Vite app for a complete implementation of using the SQLite CloudSync extension to sync data across devices. diff --git a/sqlite-cloud/sqlite-ai/sqlite-sync/quick-starts/windows.md b/sqlite-cloud/sqlite-ai/sqlite-sync/quick-starts/windows.md new file mode 100644 index 0000000..1397ad9 --- /dev/null +++ b/sqlite-cloud/sqlite-ai/sqlite-sync/quick-starts/windows.md @@ -0,0 +1,227 @@ +--- +title: Windows Quick Start +description: SQLite Sync is a multi-platform extension that brings a true local-first experience to your applications with minimal effort. +category: platform +status: publish +slug: sqlite-sync-quick-start-windows +--- + +This guide explains how to install SQLite on Windows with support for loading extensions. + +## Using SQLite with Python + +1. **Download Python** + + Get the latest Python for Windows from python.org. + +2. **Install Python** + + - Run the installer. + - Make sure to check **"Add Python to PATH"**. + - SQLite comes bundled with Python, no extra steps needed. + +3. **Check your installation** + Open Command Prompt and run: + + ```bash + python --version + python -c "import sqlite3; print('SQLite version:', sqlite3.sqlite_version)" + ``` + +4. **Download the Extension** + + Go to sqlite-sync releases and download the extension. + +5. **Load Extension** + ```python + import sqlite3 + import os + + # Path to your compiled extension (.dll for Windows) + EXTENSION_PATH = os.path.abspath("cloudsync") + + # Connect to SQLite and enable extension loading + conn = sqlite3.connect(":memory:") + conn.enable_load_extension(True) + + # Load the extension + try: + conn.load_extension(EXTENSION_PATH) + print("Extension loaded successfully.") + except sqlite3.OperationalError as e: + print(f"Failed to load extension: {e}") + + conn.enable_load_extension(False) + + # Optionally test it (e.g., call a custom SQL function) + cursor = conn.execute("SELECT cloudsync_version();") + print(cursor.fetchone()) + ``` + +## Using SQLite with C# + +This guide shows how to load a native SQLite extension (e.g., **`cloudsync.dll`**) from a C# app on **Windows** using **`Microsoft.Data.Sqlite`**. + +### Prerequisites + +- Windows x64 +- .NET 6+ SDK +- NuGet package manager +- The native extension file: `cloudsync.dll` (x64 build) - download from sqlite-sync releases + +> **Important:** Your app, `e_sqlite3.dll` (bundled by `Microsoft.Data.Sqlite`), and `cloudsync.dll` must all be the **same architecture** (typically x64). + +--- + +### 1. Install the SQLite package + +Install the `Microsoft.Data.Sqlite` NuGet package: + +```bash +dotnet add package Microsoft.Data.Sqlite +``` + +### 2. Set up your project structure + +Place `cloudsync.dll` in your project and configure it to copy to the output folder. + +Example directory structure: + +``` +MyApp/ + Program.cs + Native/ + cloudsync.dll + MyApp.csproj +``` + +Configure your `MyApp.csproj` file: + +```xml +${ + attractionFeatures[0].properties.title + }
${attractionFeatures[0].properties.distance.toFixed( + 2 + )} ${units} away
` + ) + .addTo(mapRef.current); + } + + // update the `geometry` state to hold the returned Polygon and attraction Point features + setGeometry([ + { + type: 'Feature', + geometry: { + type: 'Polygon', + coordinates: [JSON.parse(polygonCoords[0]['geopoly_json(_shape)'])], + }, + }, + ...attractionFeatures, + ]); + } + + function drawFeatureCollection() { + const sourceId = 'newyork'; + + if (!mapRef.current.getSource(sourceId)) { + mapRef.current.addSource(sourceId, { + type: 'geojson', + data: { + type: 'FeatureCollection', + features: geometry, + }, + }); + + mapRef.current.addLayer({ + id: 'polygon', + type: 'fill', + source: sourceId, + paint: { + 'fill-color': '#888888', + 'fill-opacity': 0.4, + }, + filter: ['==', '$type', 'Polygon'], + }); + + mapRef.current.addLayer({ + id: 'outline', + type: 'line', + source: sourceId, + layout: {}, + paint: { + 'line-color': '#000', + 'line-width': 1, + }, + }); + } else { + mapRef.current.getSource(sourceId).setData({ + type: 'FeatureCollection', + features: geometry, + }); + } + } + + function handleClick(feature) { + const center = feature.geometry.coordinates; + const { id, title, distance } = feature.properties; + + mapRef.current.flyTo({ + center, + zoom: 15, + }); + + const popUps = document.getElementsByClassName('mapboxgl-popup'); + if (popUps[0]) { + popUps[0].remove(); + } + + new mapboxgl.Popup({ closeOnClick: false }) + .setLngLat(center) + .setHTML(`${title}
${distance.toFixed(2)} ${units} away
`) + .addTo(mapRef.current); + + const activeItem = document.getElementsByClassName('active'); + if (activeItem[0]) { + activeItem[0].classList.remove('active'); + } + + const listing = document.getElementById(`listing-${id}`); + listing.classList.add('active'); + } + + useEffect(() => { + // create, style, and center the map + mapRef.current = new mapboxgl.Map({ + container: mapContainerRef.current, + style: 'mapbox://styles/mapbox/streets-v12', + center: [lng, lat], + zoom, + }); + + // apply 3 controls to the top right of the map + // an address search input + const geocoder = new MapboxGeocoder({ + accessToken: mapboxgl.accessToken, + mapboxgl, + zoom: 12, + }); + + // toggle fullscreen mode + const fullscreenCtrl = new mapboxgl.FullscreenControl({ + container: mapContainerRef.current, + }); + + // locate the user on the map + const geolocateCtrl = new mapboxgl.GeolocateControl({ + fitBoundsOptions: { + maxZoom: 12, + }, + positionOptions: { + enableHighAccuracy: true, + }, + trackUserLocation: true, + }); + + mapRef.current.addControl(geocoder); + mapRef.current.addControl(fullscreenCtrl); + mapRef.current.addControl(geolocateCtrl); + + // track the map center coordinates and zoom level (displayed on the top left of the app) + function updateCoordinates() { + const { lng, lat } = mapRef.current.getCenter(); + setLng(lng.toFixed(4)); + setLat(lat.toFixed(4)); + setZoom(mapRef.current.getZoom().toFixed(2)); + } + + mapRef.current.on('move', updateCoordinates); + + // call the `queryGeopoly` function when the user clicks a geocoder result + geocoder.on('result', (e) => { + const existingMarkers = document.getElementsByClassName('marker'); + while (existingMarkers[0]) { + existingMarkers[0].remove(); + } + + const popUps = document.getElementsByClassName('mapboxgl-popup'); + while (popUps[0]) { + popUps[0].remove(); + } + + const [lng, lat] = e.result.geometry.coordinates; + queryGeopoly(lng, lat); + }); + + return () => { + mapRef.current.removeControl(geocoder); + mapRef.current.removeControl(fullscreenCtrl); + mapRef.current.removeControl(geolocateCtrl); + mapRef.current.off('move', updateCoordinates); + mapRef.current.remove(); + }; + }, []); // eslint-disable-line react-hooks/exhaustive-deps + + // triggered by a `geometry` state update + useEffect(() => { + if (geometry.length !== 0) { + // draw the returned Polygon, its outline, and attraction Points on the map + drawFeatureCollection(); + } + }, [geometry]); // eslint-disable-line react-hooks/exhaustive-deps + + return ( + <> +
+
+
+
+ );
+}
+
+export default App;
+```
+
+**8. Create a helper function**
+
+ - Create `src/helpers/getBbox.js`. Copy and paste in the following code:
+
+```js
+export function getBbox(sortedEvents, locationLng, locationLat) {
+ const lons = [
+ sortedEvents[0].geometry.coordinates[0],
+ locationLng,
+ ];
+ const lats = [
+ sortedEvents[0].geometry.coordinates[1],
+ locationLat,
+ ];
+ const sortedLons = lons.sort((a, b) => {
+ if (a > b) {
+ return 1;
+ }
+ if (a.distance < b.distance) {
+ return -1;
+ }
+ return 0;
+ });
+ const sortedLats = lats.sort((a, b) => {
+ if (a > b) {
+ return 1;
+ }
+ if (a.distance < b.distance) {
+ return -1;
+ }
+ return 0;
+ });
+
+ // return a bounding box, defined by a southwest coordinate pair and northeast coordinate pair
+ return [
+ [sortedLons[0], sortedLats[0]],
+ [sortedLons[1], sortedLats[1]],
+ ];
+}
+```
+
+**9. Run your app!**
+
+ - Replace your `package.json` code with the following, which includes all dependencies needed to run the app:
+
+```json
+{
+ "name": "sqlc-geopoly-demo",
+ "version": "1.0.0",
+ "private": true,
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "create-tables": "node src/helpers/createDatabase.js"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app"
+ ]
+ },
+ "browserslist": [
+ "defaults",
+ "not ie 11"
+ ],
+ "author": "",
+ "license": "ISC",
+ "type": "module",
+ "dependencies": {
+ "@mapbox/mapbox-gl-geocoder": "^5.0.2",
+ "@sqlitecloud/drivers": "^1.0.193",
+ "@turf/turf": "^7.0.0",
+ "mapbox-gl": "^3.5.2",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "react-scripts": "^5.0.1"
+ },
+ "devDependencies": {
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+ "dotenv": "^16.4.5"
+ }
+}
+```
+
+ - From your project dir, install the dependencies and start your local dev server.
+
+```bash
+npm i
+npm start
+```
+
+ - Visit `http://localhost:3000/` (adjust the port as-needed) in your browser to view the app.
+
+**10. Find attractions!**
+
+ - On app load, the map is centered on Central Park, NY.
+
+ - In the geocoder (i.e. search input) at the top right of the map, enter "Empire" and click on the "Empire State Building" result. You can also search coordinates (see reverse geocoding).
+
+ - When you select a geocoder result:
+ - a polygon is generated by Geopoly, added to your `polygons` table, and displayed on the map; and
+
+ - all attractions in your `attractions` table inside the polygon area are listed in the left sidebar AND marked on the map. NOTE: the sidebar upsorts attractions nearest your searched location, in this case the "Empire State Building".
+
+ - To see the inserted polygon data, in your SQLite Cloud account dashboard's left nav, click Console. In the database dropdown, select `geopoly-demo`. Copy, paste in, and run the following query.
+
+ - The `geopoly_json` function parses the `_shape` column's `[object ArrayBuffer]` data into an array of coordinate pairs representing the polygon's vertices: `[[-73.9355,40.7485],[-73.9359,40.7547], ...,[-73.9359,40.7422],[-73.9355,40.7485]]`. The array should contain (1 + # of polygon sides) coordinate pairs. The polygon is closed, so the first and last pairs both represent the same vertex.
+
+```sql
+SELECT rowid, geopoly_json(_shape) FROM polygons;
+```
+
+ - The map zooms in to the nearest attraction to your searched location and highlights its corresponding top listing in the sidebar.
+
+ - You can click on any attraction listing or marker to fly/ zoom to and center on that attraction on the map.
+
+ - Turf.js uses the Haversine formula to account for global curvature when calculating the distance between your searched location and each attraction. However, you should still expect discrepancies between this app's calculated distances vs, say, Google or Apple Maps.
+
+And that’s it! You’ve successfully built a local attractions finder app that utilizes Geopoly to write geodata to and read from a SQLite Cloud database.
+
+### Additional Guidance on Overpass:
+
+ - To fetch other attractions or any other kind of location data in NY or another area of interest to you, refer to OpenStreetMap's Map features documentation. As a starting point, modify the area or key-value pairs in the NY query.
+
+ - NOTE: The app works only with Point features (represented in the Map features tables' `Element` columns by an icon with a single dot). Be sure to query only nodes and the key-value pairs that can return Point data. For example, don't use most of the values available for the Boundary key.
+
+ - To implement more complex or granular Point queries, refer to the Overpass QL documentation.
+
+ - If you run a custom Overpass query:
+ - Add to or replace the FeatureCollection in `geodata.json`.
+ - In your SQLite Cloud account dashboard's left nav, click Databases. In the `geopoly-demo` row, click the down chevron and then Delete Database.
+ - Create Database with the same name.
+ - From your project dir, run `npm run create-tables`. Your database tables will be re-created, and the `attractions` table will be populated with your updated geodata.
+
+ - If you queried and stored attractions near your location, then after the app's initial load, click on the GeolocateControl icon at the top right of the map and allow the browser to quickly center the map on your location. Search away!
\ No newline at end of file
diff --git a/sqlite-cloud/write-data.mdx b/sqlite-cloud/write-data.mdx
index 64d5acf..42e629a 100644
--- a/sqlite-cloud/write-data.mdx
+++ b/sqlite-cloud/write-data.mdx
@@ -3,48 +3,49 @@ title: Writing data to your database
description: Learn how to write data to your SQLite Cloud cluster.
category: getting-started
status: publish
+slug: write-data
---
+import VideoPlayer from '@commons-components/Video/VideoPlayer.astro';
+import studioInsert from '@docs-website-assets/introduction/video/dashboard_studio.mp4';
After you've created a database in SQLite Cloud, you can start writing data to it. You can write data to your cluster using the SQLite Cloud UI, API, or client libraries.
+---
+
## Writing data with the SQLite Cloud UI
-Navigate to the console tab in the left-hand navigation. From here, you can run SQL commands against your cluster. Use the optional dropdown menus to select a database and table.
+Navigate to the Studio tab from the left-hand navigation. From here, you can run SQL commands directly on your cluster.
+If needed, use the dropdown menus to select the database and table where you want to insert or update data.
+
+Alternatively, you can also interact directly with the table view to add new records or update existing ones without writing SQL manually.
+
-
+
+
+ Center Lat: {lat}
+Center Long: {lng}
+Current Zoom: {zoom}
+
+
+
+ Attractions Nearby:
+
+ {places.map((place, index) => (
+
+
+ handleClick(place)}>
+ {place.properties.title}
+
+
+ ))}
+
+ {place.properties.distance.toFixed(2)} {units} away
+
+