146 lines
3.8 KiB
Markdown
146 lines
3.8 KiB
Markdown
# ViewEngine.WebSample
|
|
|
|
A sample ASP.NET web application demonstrating how to use the [ViewEngine.Client](https://git.marketally.com/viewengine/ViewEngine.Client) library. Users can test page retrieval and see the results including content, thumbnails, and metadata.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
dotnet add package ViewEngine.Client
|
|
```
|
|
|
|
## Features
|
|
|
|
- 🔑 **API Key Management** - Securely stored in browser localStorage
|
|
- 🌐 **URL Retrieval** - Enter any URL to retrieve its content
|
|
- 📊 **Real-time Status** - Live polling shows retrieval progress
|
|
- 📸 **Thumbnail Display** - View captured page thumbnails
|
|
- 📄 **Content Preview** - See the full page data JSON
|
|
- 🎨 **Modern UI** - Beautiful, responsive interface
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- .NET 9.0 SDK
|
|
- A ViewEngine API key (get one from https://www.viewengine.io)
|
|
|
|
### Running the Application
|
|
|
|
1. **Navigate to the project directory:**
|
|
```bash
|
|
cd ViewEngine.WebSample
|
|
```
|
|
|
|
2. **Run the application:**
|
|
```bash
|
|
dotnet run
|
|
```
|
|
|
|
3. **Open your browser:**
|
|
- Navigate to `http://localhost:5000` or `https://localhost:5001`
|
|
|
|
4. **Enter your API key:**
|
|
- Paste your ViewEngine API key in the API Key field
|
|
- The key is stored locally in your browser for convenience
|
|
|
|
5. **Test a retrieval:**
|
|
- Enter a URL (e.g., `https://example.com`)
|
|
- Optionally check "Force fresh retrieval" to bypass cache
|
|
- Click "Retrieve Page"
|
|
- Watch the real-time progress as the page is processed
|
|
- View the results including thumbnail and content
|
|
|
|
## How It Works
|
|
|
|
### Architecture
|
|
|
|
```
|
|
Browser <-> WebSample Server <-> ViewEngine API
|
|
```
|
|
|
|
The WebSample server acts as a proxy to:
|
|
- Keep your API key secure (not exposed in browser JavaScript)
|
|
- Handle CORS issues
|
|
- Simplify the API interaction
|
|
|
|
### API Endpoints
|
|
|
|
The application creates three proxy endpoints:
|
|
|
|
1. **POST /api/retrieve** - Submit a retrieval request
|
|
2. **GET /api/status/{requestId}** - Poll for retrieval status
|
|
3. **GET /api/content/{requestId}** - Download the page content
|
|
|
|
### Workflow
|
|
|
|
1. User enters API key and URL
|
|
2. WebSample sends request to ViewEngine API
|
|
3. Polls for status updates every 2 seconds
|
|
4. When complete, downloads and displays:
|
|
- Page metadata
|
|
- Thumbnail image
|
|
- Full JSON content
|
|
|
|
## Configuration
|
|
|
|
To use a different ViewEngine API endpoint, edit `Program.cs`:
|
|
|
|
```csharp
|
|
const string API_BASE_URL = "https://your-custom-endpoint.com";
|
|
```
|
|
|
|
For local development with the ViewEngine API running locally:
|
|
|
|
```csharp
|
|
const string API_BASE_URL = "http://localhost:5072";
|
|
```
|
|
|
|
## Security Notes
|
|
|
|
- API keys are stored in browser localStorage (client-side only)
|
|
- The proxy server never logs or stores API keys
|
|
- All requests to ViewEngine API include proper authentication headers
|
|
- CORS is enabled to allow browser-based requests
|
|
|
|
## Troubleshooting
|
|
|
|
### "Invalid API key" error
|
|
- Verify your API key is correct
|
|
- Check that your API key has the `mcp:retrieve` scope
|
|
|
|
### "Connection error"
|
|
- Ensure the ViewEngine API is accessible
|
|
- Check your internet connection
|
|
- Verify the API_BASE_URL is correct
|
|
|
|
### Results not appearing
|
|
- Check browser console for errors
|
|
- Verify the job completed successfully
|
|
- Ensure the response includes content data
|
|
|
|
## Example URLs to Try
|
|
|
|
- `https://example.com` - Simple page
|
|
- `https://news.google.com` - News site
|
|
- `https://github.com` - GitHub homepage
|
|
- `https://www.viewengine.io` - ViewEngine homepage
|
|
|
|
## Building for Production
|
|
|
|
```bash
|
|
dotnet publish -c Release -o ./publish
|
|
```
|
|
|
|
Then deploy the contents of `./publish` to your web server.
|
|
|
|
## Support
|
|
|
|
- **Documentation**: https://www.viewengine.io/docs
|
|
- **Client Library**: https://git.marketally.com/viewengine/ViewEngine.Client
|
|
- **Issues**: https://git.marketally.com/viewengine/ViewEngine.WebSample/issues
|
|
- **Email**: support@marketally.com
|
|
|
|
## License
|
|
|
|
MIT License - Copyright © 2025 MarketAlly
|