React – Music & Code

PWA Example with Next.js, React, TypeScript, Tailwind CSS, Radix UI, and OneSignal

6 Giugno 2024 by UbyAdmin

This project is a Progressive Web App (PWA) built with Next.js, React, and TypeScript. It uses Tailwind CSS for styling, Radix UI for accessible components, OneSignal for push notifications, and demonstrates access to the file system and webcam.

Installation

To get started with this project, clone the repository and install the dependencies:

git clone https://github.com/UbyXsofT/my-pwa-app.git
cd my-pwa-app
npm install

Development

To start the development server, run:

npm run dev

This will start the application in development mode at http://localhost:3000.

Build

o build the application for production, run:

npm run build

Features

Progressive Web App (PWA): Offline support and installable on devices.
Next.js: Server-side rendering and static site generation.
React & TypeScript: Modern – JavaScript framework with static typing.
Tailwind CSS: Utility-first CSS framework for rapid UI development.
Radix UI: Accessible, unstyled UI component library.
OneSignal: Push notifications.
File System Access: Demonstrates access to the file system.
Webcam Access: Demonstrates access to the webcam.

Usage

OneSignal Push Notifications

To set up OneSignal for push notifications, follow these steps:

1 – Download and unzip the OneSignal SDK: OneSignalSDK-v16-ServiceWorker.zip

2 – Add the unzipped files to the public directory of your project.

3 – Modify the _document.tsx to include OneSignalSDK:

//_document.tsx
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
	return (
		<Html lang='en'>
			<Head>
				<link
					rel='manifest'
					href='/manifest.json'
				/>
				<link
					rel='apple-touch-icon'
					href='/icon.png'
				/>
				<meta
					name='theme-color'
					content='#fff'
				/>
				<script
					src='https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js'
					async
				></script>
			</Head>
			<body>
				<Main />
				<NextScript />
			</body>
		</Html>
	);
}

4 – Initialize OneSignal in src/functions/onesignal.js:

//src/functions/onesignal.js
import OneSignal from "react-onesignal";

export default async function runOneSignal() {
	console.log("Inizializzazione OneSignal");
	try {
		await OneSignal.init({
			appId: "YOUR-ONESIGNAL-APP-ID",
			allowLocalhostAsSecureOrigin: true,
			serviceWorkerParam: {
				scope: "/",
				path: "/OneSignalSDKWorker.js",
			},
		});
		console.log("OneSignal inizializzato");
		OneSignal.Slidedown.promptPush();
		console.log("Prompt mostrato");
	} catch (error) {
		console.log("ONESIGNAL ERROR: ", error);
	}
}

5 – Call runOneSignal in src/pages/_app.tsx:

import "../src/styles/globals.css";
import { AppProps } from "next/app";
import { useEffect } from "react";
import runOneSignal from "../src/functions/onesignal";

function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    runOneSignal();
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

File System Access

To use the File System Access API, you can create a component that allows users to pick a file and read its content. Here’s an example of a file picker component:

import { ReactNode, useState } from "react";

const FileSystemComponent = () => {
	const [fileContent, setFileContent] = useState<string | ArrayBuffer | null>("");
	const handleFilePick = async () => {
		const [fileHandle] = await (window as any).showOpenFilePicker();
		const file = await fileHandle.getFile();
		const text = await file.text();
		setFileContent(text);
	};

	return (
		<div>
			<button
				style={{ margin: "20px" }}
				onClick={handleFilePick}
			>
				Pick a file
			</button>
			<pre>{fileContent as ReactNode}</pre>
		</div>
	);
};

export default FileSystemComponent;

Webcam Access

To access the webcam, you can create a component that uses the MediaDevices API. Here’s an example of a webcam component:

import React, { useRef, useEffect } from "react";

const CameraComponent: React.FC = () => {
	const videoRef = useRef<HTMLVideoElement>(null);

	useEffect(() => {
		const startCamera = async () => {
			if (videoRef.current) {
				try {
					const stream: MediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
					if (videoRef.current) {
						videoRef.current.srcObject = stream;
					}
				} catch (err) {
					console.error("Error accessing camera: ", err);
				}
			}
		};

		startCamera();
	}, []);

	return (
		<video
			ref={videoRef}
			autoPlay
			style={{ width: "100%", height: "200px" }}
		/>
	);
};

export default CameraComponent;

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project’s code of conduct, please feel free to submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Here is the source code project on GitHub

If you like it, consider offering a coffee, it will be highly appreciated, THANK YOU!

Free QrCode Generator

23 Novembre 2023 by UbyAdmin

Generatore gratuito di codici QR online da UbyXsofT. Crea codici QR personalizzati per link, testo, contatti e altro. Strumento semplice e veloce per la generazione di QR code.

CREA IL TUO QR CODE CLICCA QUI: https://vivo-vivendo-musica.com/utility/qr-c ode-generator/

React dichiarazione di un componente

17 Luglio 2023 by UbyAdmin

Le dichiarazioni di un componente in React possono essere fatte in diverse forme, ma le principali sono le seguenti:

Dichiarazione di funzione (Function Component):React

function MyComponent(props) {
  // Il tuo codice JSX e logica qui...
  return <div>Contenuto del componente</div>;
}

// Oppure usando la sintassi delle frecce (Arrow Function Component):
const MyComponent = (props) => {
  // Il tuo codice JSX e logica qui...
  return <div>Contenuto del componente</div>;
};

// Quando vuoi esportare il componente:
export function MyComponent(props) {
  // ...
}

// Oppure con la sintassi delle frecce:
export const MyComponent = (props) => {
  // ...
};

Class Component:

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    // Il tuo codice JSX e logica qui...
    return <div>Contenuto del componente</div>;
  }
}

export default MyComponent;

Componente con la sintassi di classe e hooks:

import React, { useState, useEffect } from 'react';

const MyComponent = (props) => {
  // Utilizzo degli hooks per lo stato e gli effetti
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Effetto eseguito dopo il render
    document.title = `Hai cliccato ${count} volte`;
  }, [count]);

  // Il tuo codice JSX e logica qui...
  return (
    <div>
      <p>Hai cliccato {count} volte</p>
      <button onClick={() => setCount(count + 1)}>Cliccami</button>
    </div>
  );
};

export default MyComponent;

In tutte queste forme, il componente renderizza l’output usando il codice JSX. Puoi utilizzare il tipo di dichiarazione che preferisci, ma i componenti con la sintassi delle funzioni sono più comuni grazie alla loro sintassi concisa e alla facilità di lettura. Con l’introduzione degli hooks, le classi stanno diventando sempre meno utilizzate per definire i componenti.

React-Redux in pillole! (1)

29 Giugno 2023 by UbyAdmin

Store: Il punto centrale di Redux è lo store, che rappresenta lo stato globale dell’applicazione. Contiene tutti i dati dell’applicazione e offre metodi per accedere, aggiornare e gestire tali dati.
Actions: Le azioni sono oggetti che descrivono un cambiamento nello stato dell’applicazione. Sono l’unico modo per modificare lo stato nello store. Un’azione ha un tipo che indica il tipo di cambiamento e può includere anche dati aggiuntivi necessari per effettuare il cambiamento.
Reducers: I reducer sono delle funzioni pure che specificano come lo stato dell’applicazione viene modificato in risposta a un’azione. Ogni reducer gestisce un aspetto specifico dello stato e restituisce un nuovo stato basato sull’azione ricevuta. I reducer combinati vengono utilizzati per creare il riduttore radice che gestisce l’intero stato dell’applicazione.
Dispatch: Dispatch è un metodo dello store che viene utilizzato per inviare un’azione al riduttore. Quando viene chiamato, lo store inoltra l’azione a tutti i riduttori registrati. I riduttori determinano se e come lo stato deve essere modificato in base all’azione.
Subscribe: È possibile registrare funzioni di callback per essere avvisati ogni volta che lo stato dello store viene modificato. Questo può essere utile per aggiornare l’interfaccia utente in risposta a un cambiamento di stato.
Connect: Il componente React può essere connesso allo store utilizzando il metodo connect di react-redux. Ciò consente al componente di accedere allo stato e alle azioni definite nello store e di essere automaticamente aggiornato quando lo stato cambia.

In sintesi, Redux offre un flusso unidirezionale dei dati, dove le azioni vengono inviate agli store, i riduttori elaborano le azioni per modificare lo stato e i componenti vengono aggiornati automaticamente quando lo stato cambia.