* API started, messages updated

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "ms-azuretools.vscode-azurefunctions"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Attach to Node Functions",
+            "type": "node",
+            "request": "attach",
+            "port": 9229,
+            "preLaunchTask": "func: host start"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "azureFunctions.deploySubpath": "api",
+    "azureFunctions.postDeployTask": "npm install (functions)",
+    "azureFunctions.projectLanguage": "JavaScript",
+    "azureFunctions.projectRuntime": "~4",
+    "debug.internalConsoleOptions": "neverOpen",
+    "azureFunctions.preDeployTask": "npm prune (functions)"
+}

.vscode/tasks.json

@@ -0,0 +1,33 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "func",
+			"label": "func: host start",
+			"command": "host start",
+			"problemMatcher": "$func-node-watch",
+			"isBackground": true,
+			"dependsOn": "npm install (functions)",
+			"options": {
+				"cwd": "${workspaceFolder}/api"
+			}
+		},
+		{
+			"type": "shell",
+			"label": "npm install (functions)",
+			"command": "npm install",
+			"options": {
+				"cwd": "${workspaceFolder}/api"
+			}
+		},
+		{
+			"type": "shell",
+			"label": "npm prune (functions)",
+			"command": "npm prune --production",
+			"problemMatcher": [],
+			"options": {
+				"cwd": "${workspaceFolder}/api"
+			}
+		}
+	]
+}

api/.funcignore

@@ -0,0 +1,10 @@
+*.js.map
+*.ts
+.git*
+.vscode
+__azurite_db*__.json
+__blobstorage__
+__queuestorage__
+local.settings.json
+test
+tsconfig.json

api/.gitignore

@@ -0,0 +1,99 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TypeScript output
+dist
+out
+
+# Azure Functions artifacts
+bin
+obj
+appsettings.json
+local.settings.json
+
+# Azurite artifacts
+__blobstorage__
+__queuestorage__
+__azurite_db*__.json

api/host.json

@@ -0,0 +1,15 @@
+{
+  "version": "2.0",
+  "logging": {
+    "applicationInsights": {
+      "samplingSettings": {
+        "isEnabled": true,
+        "excludedTypes": "Request"
+      }
+    }
+  },
+  "extensionBundle": {
+    "id": "Microsoft.Azure.Functions.ExtensionBundle",
+    "version": "[4.*, 5.0.0)"
+  }
+}

api/message/function.json

@@ -0,0 +1,19 @@
+{
+  "bindings": [
+    {
+      "authLevel": "anonymous",
+      "type": "httpTrigger",
+      "direction": "in",
+      "name": "req",
+      "methods": [
+        "get",
+        "post"
+      ]
+    },
+    {
+      "type": "http",
+      "direction": "out",
+      "name": "res"
+    }
+  ]
+}

api/message/index.js

@@ -0,0 +1,18 @@
+// module.exports = async function (context, req) {
+//     context.log('JavaScript HTTP trigger function processed a request.');
+
+//     const name = (req.query.name || (req.body && req.body.name));
+//     const responseMessage = name
+//         ? "Hello, " + name + ". This HTTP triggered function executed successfully."
+//         : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";
+
+//     context.res = {
+//         // status: 200, /* Defaults to 200 */
+//         body: responseMessage
+//     };
+// }
+module.exports = async function (context, req) {
+    context.res.json({
+        text: "API constructed and ready"
+    });
+};

api/message/sample.dat

@@ -0,0 +1,3 @@
+{
+    "name": "Azure"
+}

api/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "api",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "start": "func start",
+    "test": "echo \"No tests yet...\""
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

src/App.js

@@ -5,23 +5,39 @@ export default function App() {
   const [mostrarMensaje, setMostrarMensaje] = useState(false);
 
   const obtenerData = async () => {
-    setData("Api en construcción");
-    setMostrarMensaje(true);
+    try {
+      const response = await fetch('/api/tu-ruta-de-api');
+
+      if (!response.ok) {
+        throw new Error('No se pudo obtener la data de la API');
+      }
+
+      const responseData = await response.json();
+
+      setData(responseData);
+      setMostrarMensaje(true);
+    } catch (error) {
+      console.error('Error al obtener la data:', error);
+      setData("Error al obtener la data");
+      setMostrarMensaje(true);
+    }
   };
 
+
+
   return (
     <div style={{ fontFamily: 'Arial, sans-serif', textAlign: 'center' }}>
       <div style={{ fontSize: '24px', marginBottom: '20px' }}>
-        Bienvenido
+        WELCOME
       </div>
       <div>
         <button onClick={obtenerData} style={{ padding: '10px 20px', fontSize: '16px', borderRadius: '5px', backgroundColor: '#007bff', color: '#fff', border: 'none', cursor: 'pointer' }}>
-          Obtener data
+          Get Data
         </button>
       </div>
       {mostrarMensaje && (
         <div style={{ marginTop: '20px', fontSize: '18px' }}>
-          {data ? data : "Api en construcción"}
+          {data ? data : "API UNDER CONSTRUCTION OR DISSABLED"}
         </div>
       )}
     </div>