Configurazione Notifiche Push in React Native per Android

notifiche push per react native su android introduzione questa guida ti insegnerà come utilizzare parse per inviare notifiche push alla tua applicazione react native su android configurerai firebase e configurerai la tua app back4app per inviarle tramite dashboard e funzioni cloud code in qualsiasi momento, puoi accedere al progetto android completo costruito con questo tutorial nei nostri repository github repository di esempio javascript repository di esempio typescript requisiti per completare questo tutorial, avrai bisogno di un'app react native creata e collegata a back4app comprendere come distribuire una funzione cloud su back4app un account attivo su google, in modo da poter utilizzare google firebase obiettivo invia notifiche push da parse a un'applicazione react native su android, utilizzando il dashboard di back4app e le funzioni di cloud code 1 configurazione di firebase firebase è il fornitore di servizi più utilizzato per inviare e ricevere notifiche push su android è utilizzato da un'ampia gamma di aziende al giorno d'oggi, insieme ad altri vari strumenti iniziamo creando un progetto firebase per la tua app seguendo i passaggi 1 e 2 di questa documentazione https //firebase google com/docs/android/setup#console dopo aver creato la tua app e prima di uscire dalla console di firebase, assicurati di scaricare e salvare il file google services json e di andare anche alle impostazioni del progetto, nella scheda “cloud messaging” e recuperare le seguenti chiavi chiave del server; id mittente 2 abilitare le notifiche push su back4app per collegare il tuo progetto firebase con back4app e abilitare l'invio di notifiche push tramite il tuo dashboard e cloud code, segui questi passaggi vai su sito web di back4app , accedi, trova la tua app e clicca su impostazioni del server impostazioni del server trova il blocco “notifica push android” e clicca su impostazioni impostazioni > modifica modifica il blocco “notifica push android” appare così 3\ aggiungi la chiave del server chiave del server di firebase nel campo chiave api chiave api e il id mittente id mittente nel campo id mittente gcm id mittente gcm 4\ salvalo e hai finito 3 installazione e configurazione delle dipendenze nel tuo progetto react native, installiamo la react native push notification react native push notification libreria, che integrerà l'applicazione con firebase e ti permetterà di gestire qualsiasi notifica ricevuta esegui il seguente comando nella directory principale del tuo progetto dopo averla installata, devi ancora aggiungere alcune configurazioni a android/app/src/main/androidmanifest xml android/app/src/main/androidmanifest xml , android/build gradle android/build gradle e android/app/build gradle android/app/build gradle seguendo la documentazione https //github com/zo0r/react native push notification assicurati di aggiungere anche nel androidmanifest xml androidmanifest xml un meta data meta data contenente l'id del canale di notifica predefinito per la tua applicazione (usiamo guidechannel guidechannel come nostro esempio) puoi aggiungere il nome direttamente alla direttiva o includerlo nel strings xml strings xml file inoltre, posiziona il file google services json google services json del tuo progetto nella directory android/app android/app 1 \<meta data 2 android\ name="com google firebase messaging default notification channel id" 3 android\ value="guidechannel" /> 4 \<! or > 5 \<meta data 6 android\ name="com google firebase messaging default notification channel id" 7 android\ value="@string/default notification channel id" /> nel passo successivo, impareremo come utilizzare questa libreria e combinarla con parse 4 gestire le notifiche push creiamo un file con nuovi metodi relativi alle notifiche push chiamato pushnotificationmethods js pushnotificationmethods js (o pushnotificationmethods tsx pushnotificationmethods tsx ) e aggiungiamo la seguente funzione, che è responsabile dell'inizializzazione del react native push notification react native push notification , creando un canale di notifiche e anche configurando parse per riconoscere la configurazione delle notifiche push del nostro dispositivo javascript 1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3&#x9; 4 const channelid = 'guidechannel'; 5&#x9; 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47&#x9; 48 onregister async function (token) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken = token token; 51&#x9; 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58&#x9; 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 }1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3&#x9; 4 const channelid string = 'guidechannel'; 5&#x9; 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification object) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title string = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message string = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error any) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47&#x9; 48 onregister async function (token {os string; token string}) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken string = token token; 51&#x9; 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58&#x9; 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 } documentazione open source maggiori informazioni sulla parse installation parse installation classe possono essere trovate qui https //docs parseplatform org/js/guide/#push notifications nota che il gestore eventi onnotification onnotification ha un codice che attiva una notifica locale nell'app dopo aver ricevuto una notifica remota parse richiede questo codice perché firebase non attiva notifiche popup con dati da solo maggiori informazioni su questo e sui tipi di notifiche android possono essere lette qui chiama questo configurepushnotifications configurepushnotifications metodo nel tuo app js app js (o app tsx app tsx ) file dopo aver inizializzato parse e prima di dichiarare il tuo app app contenuto app js 1 // other imports 2 // 3 import {configurepushnotifications} from ' /src/pushnotificationmethods'; 4&#x9; 5 // your parse initialization configuration goes here 6 // 7&#x9; 8 // initialize pushnotifications 9 configurepushnotifications(); compila ed esegui l'applicazione ora puoi vedere una installazione installazione tabella nel dashboard di back4app della tua app con un'entrata corrispondente alla tua app 5 inviare notifiche push tramite dashboard siamo ora pronti per inviare la prima notifica push alla nostra app segui i passaggi qui sotto per inviare un messaggio push tramite il dashboard di back4app vai su sito web di back4app , accedi, trova la tua app e fai clic su dashboard dashboard fai clic su push push > invia nuova push invia nuova push e crea un pubblico per la tua notifica push 3\ scrivi il tuo messaggio e guarda l'anteprima facendo clic sull'opzione android android 4\ se hai già esaminato la notifica push e vuoi inviarla, fai clic su invia push invia push puoi esplorare le altre opzioni per la notifica push su parse dashboard parse dashboard lì, è anche possibile guardare i push precedenti push precedenti che hai inviato e le pubblico pubblico che hai creato per loro 6 inviare notifiche push tramite cloud code utilizzando guida introduttiva alle funzioni cloud https //www back4app com/docs/get started/cloud functions , puoi staccare metodi riutilizzabili dal tuo front end e ottenere il controllo completo di tutte le tue risorse backend tramite la chiave master utilizziamo le funzioni di codice cloud per inviare un messaggio push prima di tutto, crea una funzione cloud chiamata sendpush sendpush che chiama il metodo parse push send parse push send ci sono due modi per selezionare quali utenti riceveranno la notifica interrogando la classe parse installation parse installation o tramite i nomi dei canali di notifica è più comune nelle app android utilizzare i canali per distinguere tra gli utenti, quindi utilizziamolo assicurati di distribuire questa funzione su back4app prima di procedere documentazione open source si prega di controllare la documentazione open source https //docs parseplatform org/js/guide/#sending options per ulteriori dettagli sul metodo send send 1 parse cloud define('sendpush', async (request) => { 2 try { 3 await parse push send({ 4 channels \[ 'guidechannel' ], 5 data { 6 message 'test message', 7 title 'back4app guide notification' 8 } 9 }, { usemasterkey true }); 10 return true; 11 } catch (error) { 12 return `error ${error}` 13 } 14 }); chiamiamo ora la funzione dall'app react native aggiungi questa funzione al pushnotificationmethods js pushnotificationmethods js (o pushnotificationmethods tsx pushnotificationmethods tsx ) file e chiamala in un pulsante all'interno della schermata principale della tua applicazione 1 export async function sendnotification() { 2 try { 3 await parse cloud run('sendpush'); 4 console log('success!'); 5 } catch (error any) { 6 console log(`error ${error}`); 7 } 8 } nota che questo caso di consentire a un utente di attivare una notifica push da solo non è comune, lo abbiamo usato qui solo per mostrare quanto sia semplice integrare l'invio di notifiche push con parse conclusione alla fine di questa guida, hai imparato come inviare notifiche push utilizzando parse alla tua applicazione react native su android nella prossima guida, imparerai come inviarle su ios