튜토리얼: React Native 애플리케이션을 PowerSync로 마이그레이션

mongoimport --version

[
  {
    "isComplete": false,
    "summary": "Complete project documentation",
    "owner_id": "mockUserId"
  },
  {
    "isComplete": true,
    "summary": "Buy groceries",
    "owner_id": "mockUserId"
  },
  {
    "isComplete": false,
    "summary": "Schedule dentist appointment",
    "owner_id": "mockUserId"
  },
  {
    "isComplete": false,
    "summary": "Prepare presentation for next week",
    "owner_id": "mockUserId"
  },
  {
    "isComplete": true,
    "summary": "Pay utility bills",
    "owner_id": "mockUserId"
  },
  {
    "isComplete": false,
    "summary": "Fix bug in login system",
    "owner_id": "mockUserId2"
  },
  {
    "isComplete": false,
    "summary": "Call mom",
    "owner_id": "mockUserId"
  },
  {
    "isComplete": true,
    "summary": "Submit expense reports",
    "owner_id": "mockUserId2"
  },
  {
    "isComplete": false,
    "summary": "Plan team building event",
    "owner_id": "mockUserId2"
  },
  {
    "isComplete": false,
    "summary": "Review pull requests",
    "owner_id": "mockUserId2"
  }
]

mongoimport --uri="<connection-string>" --db=PowerSync --collection=Item
--file=sample.json --jsonArray

10 document(s) imported successfully. 0 document(s) failed to import.

bucket_definitions:
  user_buckets:
    parameters: SELECT request.user_id() as user_id
    data:
      - SELECT _id as id, * FROM "Item" WHERE bucket.user_id = 'global'
        OR owner_id = bucket.user_id

SELECT * FROM Item

git clone https://github.com/takameyer/realm2powersync
cd realm2powersync
git checkout 00-Start-Here

npm install

import React from 'react';
import { StyleSheet, View, ActivityIndicator } from 'react-native';
import { RealmProvider } from '@realm/react';
import { App } from './App';
import { Item } from './ItemSchema';
const LoadingIndicator = () => {
  return (
    <View style={styles.activityContainer}>
      <ActivityIndicator size="large" />
    </View>
  );
};
export const AppWrapper = () => {
  return (
    <RealmProvider schema={[Item]} fallback={LoadingIndicator}>
      <App />
    </RealmProvider>
  );
};
const styles = StyleSheet.create({
  activityContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10,
  },
});

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { LogoutButton } from './LogoutButton';
import { ItemListView } from './ItemListView';
import { OfflineModeButton } from './OfflineModeButton';
const Stack = createStackNavigator();
const headerRight = () => {
  return <OfflineModeButton />;
};
const headerLeft = () => {
  return <LogoutButton />;
};
export const App = () => {
  return (
    <>
      {/* All screens nested in RealmProvider have access
             to the configured realm's hooks. */}
      <SafeAreaProvider>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Your To-Do List"
              component={ItemListView}
              options={{
                headerTitleAlign: 'center',
                //headerLeft,
                //headerRight,
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
        <View style={styles.footer}>
          <Text style={styles.footerText}>
            Log in with the same account on another device or simulator to see
            your list sync in real time.
          </Text>
        </View>
      </SafeAreaProvider>
    </>
  );
};
const styles = StyleSheet.create({
  footerText: {
    fontSize: 12,
    textAlign: 'center',
    marginVertical: 4,
  },
  hyperlink: {
    color: 'blue',
  },
  footer: {
    paddingHorizontal: 24,
    paddingVertical: 12,
  },
});

import React, { useCallback, useState, useEffect } from 'react';
import { BSON } from 'realm';
import { useRealm, useQuery } from '@realm/react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Alert, FlatList, StyleSheet, Switch, Text, View } from 'react-native';
import { Button, Overlay, ListItem } from '@rneui/base';
import { CreateToDoPrompt } from './CreateToDoPrompt';
import { Item } from './ItemSchema';
import { colors } from './Colors';
export function ItemListView() {
  const realm = useRealm();
  const items = useQuery(Item).sorted('_id');
  const user = { id: 'mockUserId' };
  const [showNewItemOverlay, setShowNewItemOverlay] = useState(false);
  const [showAllItems, setShowAllItems] = useState(true);
  // createItem() takes in a summary and then creates an Item object with that summary
  const createItem = useCallback(
    ({ summary }: { summary: string }) => {
      // if the realm exists, create an Item
      realm.write(() => {
        return new Item(realm, {
          summary,
          owner_id: user?.id,
        });
      });
    },
    [realm, user],
  );
  // deleteItem() deletes an Item with a particular _id
  const deleteItem = useCallback(
    (id: BSON.ObjectId) => {
      // if the realm exists, get the Item with a particular _id and delete it
      const item = realm.objectForPrimaryKey(Item, id); // search for a realm object with a primary key that is an objectId
      if (item) {
        if (item.owner_id !== user?.id) {
          Alert.alert("You can't delete someone else's task!");
        } else {
          realm.write(() => {
            realm.delete(item);
          });
        }
      }
    },
    [realm, user],
  );
  // toggleItemIsComplete() updates an Item with a particular _id to be 'completed'
  const toggleItemIsComplete = useCallback(
    (id: BSON.ObjectId) => {
      // if the realm exists, get the Item with a particular _id and update it's 'isCompleted' field
      const item = realm.objectForPrimaryKey(Item, id); // search for a realm object with a primary key that is an objectId
      if (item) {
        if (item.owner_id !== user?.id) {
          Alert.alert("You can't modify someone else's task!");
        } else {
          realm.write(() => {
            item.isComplete = !item.isComplete;
          });
        }
      }
    },
    [realm, user],
  );
  return (
    <SafeAreaProvider>
      <View style={styles.viewWrapper}>
        <View style={styles.toggleRow}>
          <Text style={styles.toggleText}>Show All Tasks</Text>
          <Switch
            trackColor={{ true: '#00ED64' }}
            onValueChange={() => {
              setShowAllItems(!showAllItems);
            }}
            value={showAllItems}
          />
        </View>
        <Overlay
          isVisible={showNewItemOverlay}
          overlayStyle={styles.overlay}
          onBackdropPress={() => setShowNewItemOverlay(false)}>
          <CreateToDoPrompt
            onSubmit={({ summary }) => {
              setShowNewItemOverlay(false);
              createItem({ summary });
            }}
          />
        </Overlay>
        <FlatList
          keyExtractor={item => item._id.toString()}
          data={items}
          renderItem={({ item }) => (
            <ListItem key={`${item._id}`} bottomDivider topDivider>
              <ListItem.Title style={styles.itemTitle}>
                {item.summary}
              </ListItem.Title>
              <ListItem.Subtitle style={styles.itemSubtitle}>
                <Text>{item.owner_id === user?.id ? '(mine)' : ''}</Text>
              </ListItem.Subtitle>
              <ListItem.Content>
                {!item.isComplete && (
                  <Button
                    title="Mark done"
                    type="clear"
                    onPress={() => toggleItemIsComplete(item._id)}
                  />
                )}
                <Button
                  title="Delete"
                  type="clear"
                  onPress={() => deleteItem(item._id)}
                />
              </ListItem.Content>
            </ListItem>
          )}
        />
        <Button
          title="Add To-Do"
          buttonStyle={styles.addToDoButton}
          onPress={() => setShowNewItemOverlay(true)}
        />
      </View>
    </SafeAreaProvider>
  );
}
const styles = StyleSheet.create({
  viewWrapper: {
    flex: 1,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  addToDoButton: {
    backgroundColor: colors.primary,
    borderRadius: 4,
    margin: 5,
  },
  completeButton: {
    backgroundColor: colors.primary,
    borderRadius: 4,
    margin: 5,
  },
  showCompletedButton: {
    borderRadius: 4,
    margin: 5,
  },
  showCompletedIcon: {
    marginRight: 5,
  },
  itemTitle: {
    flex: 1,
  },
  itemSubtitle: {
    color: '#979797',
    flex: 1,
  },
  toggleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
  },
  toggleText: {
    flex: 1,
    fontSize: 16,
  },
  overlay: {
    backgroundColor: 'white',
  },
  status: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#d3d3d3',
    backgroundColor: '#ffffff',
    alignSelf: 'flex-end',
  },
  delete: {
    alignSelf: 'flex-end',
    width: 65,
    marginHorizontal: 12,
  },
  statusCompleted: {
    borderColor: colors.purple,
  },
  statusIcon: {
    textAlign: 'center',
    fontSize: 17,
    color: colors.purple,
  },
});

npx pod-install
npm run ios

npm run android

npm install @powersync/react-native @journeyapps/react-native-quick-sqlite @azure/core-asynciterator-polyfill bson

import '@azure/core-asynciterator-polyfill';
import 'react-native-get-random-values';
import {AppRegistry} from 'react-native';
import {AppWrapper} from './source/AppWrapper';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => AppWrapper);

import {column, Schema, Table} from '@powersync/react-native';
export const ItemSchema = new Table({
  isComplete: column.integer,
  summary: column.text,
  owner_id: column.text,
});
export const AppSchema = new Schema({
  Item: ItemSchema,
});
export type Database = (typeof AppSchema)['types'];
export type Item = Database['Item'];

import React from 'react';
import {App} from './App';
import {AppSchema} from './ItemSchema';
import {PowerSyncContext, PowerSyncDatabase} from '@powersync/react-native';
const powerSync = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'powersync.db',
  },
});
powerSync.init();
export const AppWrapper = () => {
  return (
    <PowerSyncContext.Provider value={powerSync}>
      <App />
    </PowerSyncContext.Provider>
  );
};

// createItem() takes in a summary and then creates an Item object with that summary
const createItem = useCallback(
  async ({summary}: {summary: string}) => {
    try {
      // start a write transaction to insert the new Item
      db.writeTransaction(async tx => {
        await tx.execute(
          'INSERT INTO Item (id, summary, owner_id, isComplete) VALUES (?, ?, ?, ?)',
          [new ObjectId().toHexString(), summary, user?.id, false],
        );
      });
    } catch (ex: any) {
      Alert.alert('Error', ex?.message);
    }
  },
  [db],
);

// deleteItem() deletes an Item with a particular _id
const deleteItem = useCallback(
  async (id: String) => {
    // start a write transaction to delete the Item
    try {
      db.writeTransaction(async tx => {
        await tx.execute('DELETE FROM Item WHERE id = ?', [id]);
      });
    } catch (ex: any) {
      Alert.alert('Error', ex?.message);
    }
  },
  [db],
);
// toggleItemIsComplete() updates an Item with a particular _id to be 'completed'
const toggleItemIsComplete = useCallback(
  async (id: String) => {
    // start a write transaction to update the Item
    try {
      db.writeTransaction(async tx => {
        await tx.execute(
          'UPDATE Item SET isComplete = NOT isComplete WHERE id = ?',
          [id],
        );
      });
    } catch (ex: any) {
      Alert.alert('Error', ex?.message);
    }
  },
  [db],
);

<FlatList
  keyExtractor={item => item.id}
  data={items}
  renderItem={({item}) => (
    <ListItem key={`${item.id}`} bottomDivider topDivider>
      <ListItem.Title style={styles.itemTitle}>
        {item.summary}
      </ListItem.Title>
      <ListItem.Subtitle style={styles.itemSubtitle}>
        <Text>{item.owner_id === user?.id ? '(mine)' : ''}</Text>
      </ListItem.Subtitle>
      <ListItem.Content>
        <Pressable
          accessibilityLabel={`Mark task as ${
            item.isComplete ? 'not done' : 'done'
          }`}
          onPress={() => toggleItemIsComplete(item.id)}
          style={[
            styles.status,
            item.isComplete && styles.statusCompleted,
          ]}>
          <Text style={styles.statusIcon}>
            {item.isComplete ? '✓' : '○'}
          </Text>
        </Pressable>
      </ListItem.Content>
      <ListItem.Content>
        <Pressable
          accessibilityLabel={'Remove Item'}
          onPress={() => deleteItem(item.id)}
          style={styles.delete}>
          <Text style={[styles.statusIcon, {color: 'blue'}]}>
            DELETE
          </Text>
        </Pressable>
      </ListItem.Content>
    </ListItem>
  )}
/>

npm install -D react-native-dotenv

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['module:react-native-dotenv'],
};

declare module '@env' {
  export const AUTH_TOKEN: string;
  export const POWERSYNC_ENDPOINT: string;
}

POWERSYNC_ENDPOINT=<endpoint>
AUTH_TOKEN=<dev-token>

import { AppSchema } from './ItemSchema';
import {
  AbstractPowerSyncDatabase,
  PowerSyncDatabase,
} from '@powersync/react-native';
import { AUTH_TOKEN, POWERSYNC_ENDPOINT } from '@env';
const powerSync = new PowerSyncDatabase({
  schema: AppSchema,
  database: {
    dbFilename: 'powersync.db',
  },
});
powerSync.init();
class Connector {
  async fetchCredentials() {
    return {
      endpoint: POWERSYNC_ENDPOINT,
      token: AUTH_TOKEN,
    };
  }
  async uploadData(database: AbstractPowerSyncDatabase) {
    console.log('Uploading data');
  }
}
export const setupPowerSync = (): PowerSyncDatabase => {
  const connector = new Connector();
  powerSync.connect(connector);
  return powerSync;
};
export const resetPowerSync = async () => {
  await powerSync.disconnectAndClear();
  setupPowerSync();
};

import { PowerSyncContext } from '@powersync/react-native';
import React from 'react';
import { App } from './App';
import { setupPowerSync } from './PowerSync';
const powerSync = setupPowerSync();
export const AppWrapper = () => {
  return (
    <PowerSyncContext.Provider value={powerSync}>
      <App />
    </PowerSyncContext.Provider>
  );
};

import React, { useCallback } from 'react';
import { Pressable, Alert, View, Text, StyleSheet } from 'react-native';
import { colors } from './Colors';
import { resetPowerSync } from './PowerSync';
export function ResetButton() {
  const signOut = useCallback(() => {
    resetPowerSync();
  }, []);
  return (
    <Pressable
      onPress={() => {
        Alert.alert('Reset Database?', '', [
          {
            text: 'Yes, Reset Database',
            style: 'destructive',
            onPress: () => signOut(),
          },
          { text: 'Cancel', style: 'cancel' },
        ]);
      }}>
      <View style={styles.buttonContainer}>
        <Text style={styles.buttonText}>Reset</Text>
      </View>
    </Pressable>
  );
}
const styles = StyleSheet.create({
  buttonContainer: {
    paddingHorizontal: 12,
  },
  buttonText: {
    fontSize: 16,
    color: colors.primary,
  },
});

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { ResetButton } from './ResetButton';
import { ItemListView } from './ItemListView';
import { OfflineModeButton } from './OfflineModeButton';
const Stack = createStackNavigator();
const headerRight = () => {
  return <OfflineModeButton />;
};
const headerLeft = () => {
  return <ResetButton />;
};
export const App = () => {
  return (
    <>
      {/* All screens nested in RealmProvider have access
             to the configured realm's hooks. */}
      <SafeAreaProvider>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Your To-Do List"
              component={ItemListView}
              options={{
                headerTitleAlign: 'center',
                headerLeft,
                //headerRight,
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
        <View style={styles.footer}>
          <Text style={styles.footerText}>
            Log in with the same account on another device or simulator to see
            your list sync in real time.
          </Text>
        </View>
      </SafeAreaProvider>
    </>
  );
};
const styles = StyleSheet.create({
  footerText: {
    fontSize: 12,
    textAlign: 'center',
    marginVertical: 4,
  },
  hyperlink: {
    color: 'blue',
  },
  footer: {
    paddingHorizontal: 24,
    paddingVertical: 12,
  },
});

npm start -- --reset-cache

async uploadData(database: AbstractPowerSyncDatabase) {
   const batch = await database.getCrudBatch();
   console.log('batch', JSON.stringify(batch, null, 2));
}

BACKEND_ENDPOINT=http://localhost:8000

declare module '@env' {
   export const AUTH_TOKEN: string;
   export const POWERSYNC_ENDPOINT: string;
   export const BACKEND_ENDPOINT: string;
}

adb reverse tcp:8000 tcp:8000

import { AUTH_TOKEN, POWERSYNC_ENDPOINT, BACKEND_ENDPOINT } from '@env';

async uploadData(database: AbstractPowerSyncDatabase) {
   const batch = await database.getCrudBatch();
   if (batch === null) {
      return;
   }
   const result = await fetch(`${BACKEND_ENDPOINT}/update`, {
      method: 'POST',
      headers: {
      'Content-Type': 'application/json',
      },
      body: JSON.stringify(batch.crud),
   });
   if (!result.ok) {
      throw new Error('Failed to upload data');
   }
   batch.complete();
}

mkdir backend

{
   "main": "index.js",
   "scripts": {
      "start": "node --env-file=.env index.js"
   },
   "dependencies": {
      "express": "^4.21.2",
      "mongodb": "^6.12.0"
   }
}

MONGODB_URI=<connection_string>

npm install

const express = require("express");
const { MongoClient, ObjectId } = require("mongodb");
const app = express();
app.use(express.json());
// MongoDB setup
const client = new MongoClient(
   process.env.MONGODB_URI || "mongodb://localhost:27017",
);
// Helper function to coerce isComplete to boolean
function coerceItemData(data) {
   if (data && "isComplete" in data) {
      data.isComplete = !!Number(data.isComplete);
   }
   return data;
}
async function start() {
   await client.connect();
   const db = client.db("PowerSync");
   const items = db.collection("Item");
   app.post("/update", async (req, res) => {
      const operations = req.body;
      try {
      for (const op of operations) {
         console.log(JSON.stringify(op, null, 2));
         switch (op.op) {
            case "PUT":
            await items.insertOne({
               ...coerceItemData(op.data),
               _id: new ObjectId(op.id),
            });
            break;
            case "PATCH":
            await items.updateOne(
               { _id: new ObjectId(op.id) },
               { $set: coerceItemData(op.data) },
            );
            break;
            case "DELETE":
            await items.deleteOne({
               _id: new ObjectId(op.id),
            });
            break;
         }
      }
      res.json({ success: true });
      } catch (error) {
      res.status(500).json({ error: error.message });
      }
   });
   app.listen(8000, () => {
      console.log("Server running on port 8000");
   });
}
start().catch(console.error);

npm start

bucket_definitions:
   user_buckets:
      parameters:
      - SELECT request.user_id() as user_id
      data:
      - SELECT _id as id FROM "Item" WHERE bucket.user_id = 'global'
         OR owner_id = bucket.user_id
   view_all_bucket:
      accept_potentially_dangerous_queries: true
      parameters:
      - SELECT (request.parameters() ->> 'view_all') as view_all
      data:
      - SELECT _id as id FROM "Item" WHERE bucket.view_all = true

let viewAll = false;
export const setupPowerSync = (): PowerSyncDatabase => {
   const connector = new Connector();
   powerSync.connect(connector, {params: {view_all: viewAll}});
   return powerSync;
};

export const resetPowerSync = async () => {
   await powerSync.disconnectAndClear();
   setupPowerSync();
};
export const toggleViewAll = () => {
   viewAll = !viewAll;
   resetPowerSync();
};

import { toggleViewAll } from './PowerSync';

<Text style={styles.toggleText}>Show All Tasks</Text>
<Switch
   trackColor={{true: '#00ED64'}}
   onValueChange={() => {
      setShowAllItems(!showAllItems);
      toggleViewAll();
   }}
   value={showAllItems}
/>

let connection = true;
export const toggleConnection = () => {
   if (connection) {
      powerSync.disconnect();
   } else {
      setupPowerSync();
   }
   connection = !connection;
};

import { useState } from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';
import { colors } from './Colors';
import {toggleConnection} from './PowerSync';
export function OfflineModeButton() {
   const [pauseSync, togglePauseSync] = useState(false);
   return (
      <Pressable
      onPress={() => {
         toggleConnection();
         togglePauseSync(!pauseSync);
      }}>
      <Text style={styles.buttonText}>
         {pauseSync ? 'Enable Sync' : 'Disable Sync'}
      </Text>
      </Pressable>
   );
}
const styles = StyleSheet.create({
  buttonText: {
    padding: 12,
    color: colors.primary,
  },
});

<Stack.Screen
   name="Your To-Do List"
   component={ItemListView}
   options={{
      headerTitleAlign: 'center',
      headerLeft,
      headerRight,
   }}
/>