This application requires you to set up your own Google Cloud Project with the Cloud Vision API enabled for handwriting recognition, and a Firebase project with Firestore for data storage. Follow these steps:
Part 1: Google Cloud Project & Vision API Setup
- Create a Google Cloud Project:
- Go to the Google Cloud Console.
- If you don't have a project, click the project selector dropdown at the top, then "NEW PROJECT".
- Give your project a name (e.g., "MyHandwritingAppProject") and click "CREATE".
- Enable Billing:
- The Cloud Vision API requires billing to be enabled on your project.
- In the Cloud Console, navigate to "Billing" from the left-hand menu.
- If your project is not linked to a billing account, you'll be prompted to "LINK A BILLING ACCOUNT" or "MANAGE BILLING ACCOUNTS" to create one. Follow the instructions. (Google Cloud often offers a free trial with credits for new users).
- Enable the Cloud Vision API:
- In the Cloud Console, use the search bar at the top and search for "Cloud Vision API".
- Select it from the results and click the "ENABLE" button. This might take a few moments.
- Create an API Key:
- Navigate to "APIs & Services" > "Credentials" from the left-hand menu.
- Click "+ CREATE CREDENTIALS" at the top and select "API key".
- An API key will be created. Copy this key immediately. You will enter this into the "Vision API Key" field in this app's Settings.
- IMPORTANT (Security): It's highly recommended to restrict your API key. Click "EDIT API KEY" (or the key name). Under "API restrictions", select "Restrict key" and choose "Cloud Vision API" from the dropdown. Under "Application restrictions", you might restrict it to "HTTP referrers (web sites)" if you plan to host this app, but for local use, "None" might be okay initially (though less secure). Click "SAVE".
Part 2: Firebase & Firestore Setup
- Create a Firebase Project:
- Go to the Firebase Console.
- Click "Add project". You can either create a new Firebase project or link it to your existing Google Cloud Project created in Part 1. It's often easier to link to the existing one.
- Follow the on-screen instructions. If linking, select your Google Cloud Project from the dropdown.
- Set up Firestore Database:
- In your Firebase project console, go to "Build" > "Firestore Database".
- Click "Create database".
- Select "**Start in test mode**". This allows open reads/writes for 30 days, which is fine for personal use or initial testing. Click "Next".
- Choose a Firestore location (this cannot be changed later). Click "Enable".
- Modify Firestore Security Rules (for persistent public access without login):
- Go to the "Rules" tab within the Firestore Database section.
- Replace the existing rules with the following:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Allow read, write to any collection by anyone for this app.
// Use with caution for public applications.
match /{document=**} {
allow read, write: if true;
}
}
}
- Click "Publish". You may see a warning about insecure rules; acknowledge it for this specific use case.
- Get Firebase Configuration for your Web App:
- In the Firebase console, go to "Project settings" (gear icon next to "Project Overview").
- Under the "General" tab, scroll down to "Your apps".
- If you don't have a web app registered, click the web icon ( `` ) to "Add app".
- Give it a nickname (e.g., "My ToDo Web App").
- Click "Register app". Firebase Hosting setup is optional for now.
- You'll see an SDK setup snippet. Look for the `firebaseConfig` object. It will look like this:
const firebaseConfig = {
apiKey: "AIzaSy...",
authDomain: "your-project-id.firebaseapp.com",
projectId: "your-project-id",
storageBucket: "your-project-id.appspot.com",
messagingSenderId: "...",
appId: "1:...:web:..."
// databaseURL: "https://your-project-id.firebaseio.com" // May or may not be present
};
- You will need the `apiKey`, `authDomain`, `projectId`, and `appId` (and optionally `databaseURL`) from this object. Enter these into the corresponding fields in this app's Settings.
Part 3: Configure This Application
- Click the "Settings" button in this application's header.
- Enter the "Vision API Key" you obtained in Part 1, Step 4.
- Enter the Firebase configuration details (`apiKey`, `authDomain`, `projectId`, `appId`, `databaseURL` (optional)) you obtained in Part 2, Step 4.
- Click "Save Settings". The application will attempt to initialize with these settings.
Once both are configured correctly, the warning messages should disappear, and the app will be fully functional!