Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firebase API #369

Merged
merged 1 commit into from
Aug 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions New_APIs/Firebase API/Readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Firebase API Viewer App

A simple web application to view and interact with Firebase data.

## Features
- Fetch and display data from Firebase
- Deploy new Firebase apps
- Scale Firebase app resources
- Retrieve logs from Firebase apps

## Installation
1. Clone the repository:
```bash
git clone https://github.com/username/FirebaseAPIApp.git

2. Navigate to the project directory:
```
cd FirebaseAPIApp
```

3. Install Dependencies
```
npm install
```
31 changes: 31 additions & 0 deletions New_APIs/Firebase API/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Firebase API Viewer</title>
</head>
<body>
<h1>Firebase API Viewer</h1>
<div id="app">
<h2>Data</h2>
<div id="dataList"></div>
<h2>Deploy</h2>
<input type="text" id="deployAppName" placeholder="App Name">
<input type="text" id="deploySourceUrl" placeholder="Source URL">
<button id="deployButton">Deploy</button>
<h2>Scale</h2>
<input type="text" id="scaleAppName" placeholder="App Name">
<input type="text" id="scaleDynoType" placeholder="Dyno Type">
<input type="number" id="scaleQuantity" placeholder="Quantity">
<button id="scaleButton">Scale</button>
<h2>Logs</h2>
<input type="text" id="logsAppName" placeholder="App Name">
<button id="logsButton">Get Logs</button>
<ul id="results"></ul>
</div>

<script src="index.js"></script>
</body>
</html>
48 changes: 48 additions & 0 deletions New_APIs/Firebase API/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
document.addEventListener('DOMContentLoaded', function () {
fetchData();

document.getElementById('deployButton').addEventListener('click', async () => {
const appName = document.getElementById('deployAppName').value;
const sourceUrl = document.getElementById('deploySourceUrl').value;
const response = await fetch('/deploy', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ app_name: appName, source_url: sourceUrl })
});
const result = await response.json();
console.log(result);
});

document.getElementById('scaleButton').addEventListener('click', async () => {
const appName = document.getElementById('scaleAppName').value;
const dynoType = document.getElementById('scaleDynoType').value;
const quantity = document.getElementById('scaleQuantity').value;
const response = await fetch('/scale', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ app_name: appName, dyno_type: dynoType, quantity: parseInt(quantity) })
});
const result = await response.json();
console.log(result);
});

document.getElementById('logsButton').addEventListener('click', async () => {
const appName = document.getElementById('logsAppName').value;
const response = await fetch(`/logs?app_name=${appName}`);
const result = await response.json();
const results = document.getElementById('results');
results.innerHTML = JSON.stringify(result, null, 2);
});
});

async function fetchData() {
const response = await fetch('https://your-firebase-project.firebaseio.com/data.json');
const data = await response.json();
const dataList = document.getElementById('dataList');
for (const key in data) {
const dataItem = document.createElement('div');
dataItem.className = 'dataItem';
dataItem.innerHTML = `<p>${data[key]}</p>`;
dataList.appendChild(dataItem);
}
}
15 changes: 15 additions & 0 deletions New_APIs/Firebase API/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"short_name": "FirebaseApp",
"name": "Firebase API Viewer App",
"icons": [
{
"src": "icon.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
50 changes: 50 additions & 0 deletions New_APIs/Firebase API/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 16 additions & 0 deletions New_APIs/Firebase API/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"name": "firebase-api-app",
"version": "1.0.0",
"description": "A simple app to view Firebase data",
"main": "index.js",
"scripts": {
"start": "node server.js"
},
"author": "Your Name",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"firebase": "^9.0.0"
}
}

52 changes: 52 additions & 0 deletions New_APIs/Firebase API/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #20fcdb, #d02098);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

h1 {
font-size: 2.5em;
margin-bottom: 20px;
}

#app {
text-align: center;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}

h2 {
margin-top: 20px;
font-size: 1.5em;
}

input, button {
margin: 10px 0;
padding: 10px;
border-radius: 5px;
border: none;
}

button {
background: #ef32d9;
color: #fff;
cursor: pointer;
}

button:hover {
background: #a726c1;
}

#dataList .dataItem {
margin-bottom: 15px;
}

#results {
margin-top: 20px;
}
Loading