Dev Blog: Building a Web App to Display IP Address, Geolocation, and Device Specs
Introduction
In this blog, I'll walk you through the process of building a web application that displays your IP address, geolocation, and detailed device specifications. This project was a fantastic learning experience, showcasing the power of modern web technologies and APIs.
Project Overview
Our web app provides the following features:
- IP Address and Geolocation
- Device Specifications
- Network Information
Let's dive into the implementation, breaking it down into small, digestible snippets.
Setting Up the Project
We started with a basic HTML structure to create the foundation of our web app.
This simple setup includes placeholders for the different pieces of information we plan to display.
Fetching IP Address and Geolocation
To get the user's IP address and geolocation, we used the IP Geolocation API. Here's the snippet for fetching and displaying this data:
javascript
async function fetchIPAndLocation() {
const response = await fetch('https://api.ipgeolocation.io/ipgeo?apiKey=YOUR_API_KEY');
const data = await response.json();
document.getElementById('ip-address').innerText = `IP Address: ${data.ip}`;
document.getElementById('location').innerText = `Location: ${data.city}, ${data.country_name} (Lat: ${data.latitude}, Lon: ${data.longitude})`;
}
fetchIPAndLocation();
Using fetch, we make an API call to get the IP address and geolocation data, then update the HTML with this information.
Gathering Device Specifications
To collect various device specs, we used multiple browser APIs. This snippet illustrates how to get screen size, device memory, CPU cores, and GPU info:
javascript
function getDeviceSpecs() {
const specs = {};
specs.screenWidth = window.screen.width;
specs.screenHeight = window.screen.height;
specs.deviceMemory = navigator.deviceMemory || 'N/A';
specs.hardwareConcurrency = navigator.hardwareConcurrency || 'N/A';
const gl = document.createElement('canvas').getContext('webgl');
specs.gpu = gl.getParameter(gl.UNMASKED_RENDERER_WEBGL);
document.getElementById('device-specs').innerHTML = `
<h2>Device Specs:</h2>
<p>Screen Size: ${specs.screenWidth} x ${specs.screenHeight}</p>
<p>Device Memory: ${specs.deviceMemory} GB</p>
<p>CPU Cores: ${specs.hardwareConcurrency}</p>
<p>GPU: ${specs.gpu}</p>
`;
}
getDeviceSpecs();
We accessed properties like window.screen.width and navigator.deviceMemory, and used WebGL to get GPU information.
Displaying Battery Information
The Battery Status API provides battery level details:
javascript
async function getBatteryInfo() {
const battery = await navigator.getBattery();
document.getElementById('device-specs').innerHTML += `
<p>Battery Level: ${battery.level * 100}%</p>
<p>Battery Temperature: Not directly available, simulated value: 30°C</p>
`;
}
getBatteryInfo();
Although direct battery temperature isn't available, we simulated it for demonstration purposes.
Fetching Network Information
We used the Network Information API to display network details:
javascript
function getNetworkInfo() {
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
const type = connection.effectiveType;
const downlink = connection.downlink;
const rtt = connection.rtt;
document.getElementById('network-info').innerHTML = `
<h2>Network Info:</h2>
<p>Connection Type: ${type}</p>
<p>Downlink: ${downlink} Mbps</p>
<p>RTT: ${rtt} ms</p>
`;
}
getNetworkInfo();
This snippet accesses connection properties to show the type, downlink speed, and round-trip time.
Calculating FPS
For calculating FPS, we used the Performance API:
javascript
function calculateFPS() {
let lastFrame = performance.now();
let frameCount = 0;
let fps = 0;
function loop() {
const now = performance.now();
frameCount++;
if (now - lastFrame >= 1000) {
fps = frameCount;
frameCount = 0;
lastFrame = now;
document.getElementById('device-specs').innerHTML += `<p>FPS: ${fps}</p>`;
}
requestAnimationFrame(loop);
}
loop();
}
calculateFPS();
By measuring the time between frames, we calculated and displayed the FPS.
Conclusion
Building this web application was a fantastic experience, allowing us to explore various web APIs and enhance our understanding of client-side scripting. The combination of these technologies resulted in a comprehensive tool that provides users with insightful information about their device and network.
Feel free to explore and extend this project. The full code is available on our GitHub repository. Happy coding!
Top comments (0)