Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)
Ang NativeScript ay isang balangkas sa paggawa ng likas na cross-platform na mga mobile app gamit ang XML, CSS, aT JavaScript. Sa seryeng ito, susubukan natin ang ilan sa mga kahanga-hangang mga bagay na pwedeng gawin gamit ang NativeScript na app: geolocation at integrasyon ng mga Google Map, SQLite na database, integrasyon ng Firebase, at mga push notification. Habang ginagawa natin ito, nakakagawa tayo ng isang app para sa kalakasan ng katawan na may kakayahan na maging real-time na kung saan gagamitin natin ang bawat isa sa mga tampok na ito.
Sa tutoryal na ito, matututunan mo kung gaano kadali magdagdag ng mga push notification sa iyong NativeScript na app gamit ang Serbisyo sa Pagmemensahe ng Firebase Cloud.
Ano ang Inyong Lilikhain
Mula sa ating nakaraang tutoryal, magdadagdag ka ng mga push notification sa app. Isang abiso ang mapapagana kapag natitigil ng gumagamit ang kanyang kasalukuyang rekord o kapag isa sa kanyang mga kaibigan ang nagiging mahalagang bagay sa kanila habang siya'y malayo.
Pag-ayos ng Proyekto
Kapag nasundan mo ang nakaraang tutoryal sa Firebase, pwede mong gamitin ang parehong proyekto at gawin ang mga tampok na idadagdag natin sa tutoryal na ito. Kung hindi man, pwede kang gumawa ng isang bagong proyekto at kopyahin ang mga payl na tagasimula sa app polder ng iyong proyekto.
tns create fitApp --appid "com.yourname.fitApp"
Pagkatapos niyan, kakailanganin mong i-install ang mga geolocation, Google Maps, SQLite aT Firebase plugin:
tns plugin add nativescript-geolocation tns plugin add nativescript-google-maps-sdk tns plugin add nativescript-sqlite tns plugin add nativescript-plugin-firebase
Pag na-install na, kailangan mong ayusin ang Google Maps plugin. Pwede mong basahin ang kumpletong panuto kung paano gawin ito sa pamamagitan ng pagbasa ng seksyon sa Pag-Install ng mga Google Map na Plugin sa naunang tutoryal.
Susunod, i-install ang fecha na aklatan para sa pag-ayos ng mga petsa:
npm install --save fecha
Pagkatapos niyan, kailangan mo ring ayusin ang Firebase na plugin. Siguraduhing basahin ang mga sumusunod na seksyon sa nakaraang tutoryal para mapagana mo ang app:
- Pagpapagana ng Proyekto
- Pag-ayos ng Firebase na App
- Pag-ayos ng Facebook na App
- Pag-Install ng Firebase na Plugin
- Pag-ayos ng Integrasyon ng Facebook
Dahil naayos na natin ang Firebase na plugin sa nakaraang artikulo, kaunting trabaho nalang ang kailangang gawin para maayos ang mga push notification.
Una, kailangan mong ayusin ang plugin sa
pamamagitan ng pagpunta sa loob ng node_modules/nativescript-plugin-firebase na
direktoryo at paganahin ang npm run config
. Ngayon, piliin ang parehong
pagpapatunay at Pagmensahe ng Facebook.
Kapag nagawa na yan, buksan ang
firebase.nativescript.json na payl sa root na direktoryo ng iyong proyekto, at
siguraduhin na ang pagmensahe
ay nasa totoo
:
{ "using_ios": false, "using_android": true, "remote_config": false, "messaging": true, "crash_reporting": false, "storage": false, "facebook_auth": true, "google_auth": false, "admob": false, "invites": false }
Susunod, buksan ang app/App_Resources/Android/AndroidManifest.xml
at idagdag ang mga sumusunod na serbisyo sa loob ng <aplication>
.
Pinapagana nito ang serbisyo ng pagmensahe ng Firebase para sa app:
<application ...> <service android:name="org.nativescript.plugins.firebase.MyFirebaseInstanceIDService"> <intent-filter> <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/> </intent-filter> </service> <service android:name="org.nativescript.plugins.firebase.MyFirebaseMessagingService"> <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT"/> </intent-filter> </service> </application>
Pagpapagana ng Proyekto
Pwede mong paganahin ang proyekto sa
pamamagitan ng pagsasagawa ng tns run android
. Pero dahil gagawin ang app na
ito ay sa geolocation functionality, inirerekomenda ko na gamitin mo ang GPS
emulator para sa mabilisang pag-ayos at pagpalit ng iyong lokasyon. Pwede mong basahin ang tungkol sa kung
paano ito gawin sa seksyon ng Pagpapagana ng App sa naunang tutoryal.
Kapag nakatanggap ka ng mga pagkakamali sa paggawa, pwede mo itong tanggalin sa plataporma at paganahin muli ang app:
tns platform remove android tns run android
Pag-ayos mga Punsyon ng Firebase Cloud
Gagamit ka ng mga Punsyon ng Firebase Cloud para makagawa ng server na magpapadala ng mga push notification. Ang tampok na ito ng Firebase ay ginagamit para paganahin ang back-end kowd tuwing may partikular na kaganapan na nangyayari sa loob ng mga tampok ng Firebase na ginagamit mo-halimbawa, kapag may bagong datos na naimbak sa real-time na database, kapag may bagong gumagamit na naidagdag sa pamamagitan ng serbisyo ng pagpapatunay ng Firebase. Para sa app na ito, gagamit ka ng mga HTTP Trigger para magpadala ng mga push notification pag gumagawa ng hiling ang mobile app sa isang partikular na huling punto ng proseso.
Para gamitin ang mga Punsyon ng Firebase
Cloud, kailangan mo munang i-install ang firebase-kagamitan
na pakete nang
pandaigdig:
npm install -g firebase-tools
Susunod, gumawa ng bagong polder na
magsisilbing bahay ng kowd ng server. Dapat nasa labas ito ng iyong app na
polder. Sa loob ng polder na yan, i-install ang firebase-punsiyon
na pakete:
npm install firebase-functions@latest --save
Kapag na-install na, mag-log in sa Firebase
sa pamamagitan ng pagpapagana ng firebase logi
n. Magbubukas ito ng bagong
panginain na tab na papayagan kang mag-log in sa iyong Google na akawnt. Tignan
ang buong proseso at sumang-ayon sa lahat ng mga pahintulot na tinatanong.
Kapag nakapag-log in ka na, pwede mo na ngayong simulan ang mga punsyon ng Firebase para sa isang partikular na proyekto sa Firebase:
firebase init functions
Tatanungin ka nito kung gusto mong ayusin ang default na proyekto o hindi. Piliin ang proyekto sa Firebase na ginawa mo sa nakaraang tutoryal:

Susunod, tatanungin ka kung gusto mong i-intall ang dependencies. Sabihin mo oo.
Kapag tapos ng ma-install ang dependencies, dapat may makikita kang firebase.json na payl at isang punsyon na polder sa loob ng direktoryo. Ang payl na tatrabahuin mo ay ang functions/index.js na payl. Buksan ang payl na yan at makikita mo ang sumusunod:
const functions = require('firebase-functions'); // // Create and Deploy Your First Cloud Functions // // https://firebase.google.com/docs/functions/write-firebase-functions // // exports.helloWorld = functions.https.onRequest((request, response) => { // response.send("Hello from Firebase!"); // });
I-uncomment ang helloWorld
na punsyon, at
makakakita ka ng mga HTTP trigger na nasa aksyon.
exports.helloWorld = functions.https.onRequest((request, response) => { response.send("Hello from Firebase!"); });
Paganahin ang mga sumusunod para ma-deploy ang punsyon sa cloud:
firebase deploy --only functions
Kapag kumpleto na ang deployment, dapat ipapakita sa iyo ang URL kung saan ang punsyon ay na-deploy:

Tignan ang URL na yan mula sa iyong panginain para makita ang kinalabasan "Kumusta mula sa Firebase!"
Pagdagdag ng Kowd ng Server
Ngayon handa ka na para idagdag ang kowd para sa pagpapatupad ng mga push notification. Una, idagdag mo ang kowd para sa bahagi ng server, tapos ang code para sa app.
Buksan ang functions/index.js na payl at burahin ang mga nilalaman nito.
Paglikha ng Function ng Firebase
Ipasok ang mga Firebase na pakete na kakailanganin mo:
const functions = require('firebase-functions'); // for listening to http triggers const admin = require('firebase-admin'); // for accessing the realtime database admin.initializeApp(functions.config().firebase); // initialize the Firebase Admin SDK
Gawin ang init_push
na punsyon. Tandaan na
ang HTTP trigger ay tinatawag para sa anumang pamamaraan ng paghiling, dapat
salain mo para sa pamamaraan ng paghiling na gusto mo para sa proseso. Sa kasong ito, gusto lang naming iproseso
ang mga POST
na kahilingan. Umaasa kami na isusumite ng app and id
, mga
hakbang
, at friend_ids
bilang datos ng kahilingan.
exports.init_push = functions.https.onRequest((request, response) => { if(request.method == 'POST'){ var id = request.body.id; // ID of the user who made the request (Firebase Auth ID) var steps = parseInt(request.body.steps); // latest steps, not recorded yet var friend_ids = request.body.friend_ids.split(','); friend_ids.push(id); // also include the ID of the current user // next: add code for getting the user and friends data } });
Pagkuha ng Datos ng Gumagamit at Mga Kaibigan
Susunod, tanungin ang Firebase na database para itsek kung umiiral ang ID ng gumagamit. Magsisilbi itong paraan para siguraduhin ang huling punto ng proseso kaya hindi kahit sino ang pwedeng magpaumpisa ng mga push na notification. (Siyempre, ang isang totoong app ay dapat mas mahusay ang kanyang back-end na seguridad, para ang mga gumagamit ay hindi nila pwedeng dayain ang kanilang sariling datos o datos ng ibang tao.)
Kapag hindi umiiral ang gumagamit, tanungin ang database ulit para bumalik sa lahat ng mga gumagamit. Tandaan na ang Firebase ay hindi kasalukuyang nagbibigay ng paraan para bumalik sa mga rekord batay sa hanay ng mga ID, kaya kailangan nating salain ang mga datos na may kaugnayan sa mga sarili natin:
admin.database().ref('/users') .orderByChild('id') .limitToFirst(1) .equalTo(id) .once('value').then(snapshot => { var user_data = snapshot.val(); if(user_data){ // get all users from the database admin.database().ref('/users') .once('value').then(snapshot => { // next: add code for getting the current user's data and their friends data }); } });
Susunod, tignan ang mga resulta na binalik
mula sa Firebase at gumawa ng bagong hanay ng magsisilbing bahay ng
friends_dat
a. Kapag natapos na ito, ayusin ang hanay batay sa bilang ng mga
hakbang ng bawat gumagamit. Ang may pinakamataas ng bilang ng mga hakbang ang
unang indeks.
var friends_data = []; var current_user_data = null; var notification_data = {}; var has_notification = false; var users = snapshot.val(); for(var key in users){ var user_id = users[key].id; if(friend_ids.indexOf(user_id) != -1 && id != user_id){ // the current user's friends friends_data.push(users[key]); }else if(id == user_id){ // the current user current_user_data = users[key]; } } // sort in descending order by the number of steps var sorted_friends_data = friends_data.sort(function(a, b) { return b.steps - a.steps; }); // next: add code for constructing the notification payload
Gawin ang Payload ng Abiso
Ngayon handa na tayong tiyakin kung sino ang makakatanggap ng abiso at gumawa ng payload ng abiso. Sino ang nasa unang pwesto? Ito ba ay ang kasalukuyang gumagamit o isa mga kaibigan ng gumagamit? Dahil nasira ng kasalukuyang gumagamit ang sarili nitong rekord noong nasira ang kabuuang rekord ng kung sino man ang nasa unang pwesto, kailangan lang natin i-tsek kung nasira na ang rekord.
if(steps > sorted_friends_data[0].steps){ // notify friend who was overtaken var diff_steps = steps - sorted_friends_data[0].steps; notification_data = { payload: { title: 'One of your friends beat your record', body: 'Too bad, your friend ' + current_user_data.user_name + ' just overtook you by ' + diff_steps + ' steps' }, device_token: sorted_friends_data[0].device_token }; has_notification = true; }else if(steps > current_user_data.steps){ // notify current user var diff_steps = steps - current_user_data.steps; notification_data = { payload: { title: 'You beat your record!', body: 'Congrats! You beat your current record by ' + diff_steps + ' steps!' }, device_token: current_user_data.device_token }; has_notification = true; } // next: add code for sending push notification
Pagpapadala ng Abiso
Sa huli, ipadala ang abiso:
if(has_notification){ var payload = { notification: notification_data.payload }; // send push notification admin.messaging().sendToDevice(notification_data.device_token, payload).then(function(res) { response.send(JSON.stringify({'has_notification': true})); // inform the app that a notification was sent }) .catch(function(error) { response.send(JSON.stringify(error)); // send the push notification error to the app }); }else{ response.send(JSON.stringify({'has_notification': false})); // inform the app that a notification was not sent }
Pagbago ng Kowd ng App App Code
Kanina, naayos mo ang app para makatanggap ito ng mga push notification. Ngayon, magdadagdag ka ng kowd para pwedeng iproseso ng iyong app ang mga push notification at ipakita sila sa gumagamit.
Pagtanggap ng mga Push Notification
Ang unang bagay na kailangan mong gawin
para makatanggap ng mga push notification ay baguhin ang firebase.init()
punsyon para isama ang tagapakinig para sa pagtanggap ng token ng aparato:
onPushTokenReceivedCallback: function(token) { // temporarily save it to application settings until such time that // the user logs in for the first time applicationSettings.setString('device_token', token); },
Ang punsyon na ito ay magpapatupad minsan lang, kaya dapat mong iimbak ang token nang lokal gamit ang mga setting ng aplikasyon. Mamaya, papayagan nito tayo para kunin ang token ng aparato pag naglog-in na ang gumagamit para sa unang beses. Kapag naaalala mo pa mula sa ating nakaraang tutoryal, nagiimbak tayo ng datos ng gumagamit sa Firebase sa unang beses na sila ay naglog-in.
Susunod, pwede mong idagdag ang tagapakinig kapag natanggap ang mga abiso. Ipapakita nito ang kahon ng alerto na gumagamit ng pamagat at katawan ng mensahe bilang nilalaman:
onMessageReceivedCallback: function(message) { dialogs.alert({ title: message.title, message: message.body, okButtonText: "ok" }); },
Pagimbak ng Token ng Aparato sa Firebase
Kinakailangan ng Pagmemensahe ng Firebase Cloud ang token ng aparato kapag nagpapadala ng push notification sa isang partikular na aparato. Dahil gumagamit na tayo ng Firebase, iimbak lang natin ang token ng aparato kasama ang datos ng gumagamit. Para diyan, kailangan mong baguhin ang kowd sa pagimbak ng datos ng gumagamit para isama ang token ng aparato na nakuha natin kanina:
if(firebase_result.value == null){ var device_token = applicationSettings.getString('device_token'); var user_data = { 'uid': fb_result.uid, 'user_name': fb_result.name, 'profile_photo': fb_result.profileImageURL, 'device_token': device_token }; }
Pagpapasimula ng mga Push Notification
Ang mga Push Notification ay napapasimula kapag isa sa mga dalawang bagay na ito ang nangyayari:
- kapag nasisira ng gumagamit ang kanilang kasalukuyang rekord
- kapag isa sa mga kaibigan ng gumagamit ang nakakasira ng kanilang rekord at napupunt sa unang pwesto
Madali ang una, kaya hindi na kailangan ng karagdagang pagaayos.Pero ang pangalawa, kailangan mong gumawa ng kaunting trabaho. Una, kailangan mong baguhin ang kowd para sa kapag ang auth ay nagsasabi ng mga pagbabago. Pagkatapos makuha ang mga ID ng kaibigan mula sa resulta ng Facebook, kailangan mong iimbak ang ID ng kaibigan gamit ang mga setting ng aplikasyon.
// extracting the friend IDs from the Facebook result var friends_ids = r.data.map(function(obj){ return obj.id; }); // save the friend IDs applicationSettings.setString('friends_ids', JSON.stringify(friends_ids)); friends_ids.push(user[user_key].id);
Tapos, baguhin ang kowd para sa kapag ang gumagamit ay humihinto sa pagsubaybay ng kanilang lakad. Pagkatapos ng kowd para sa paggawa ng datos ng gumagamit para sa pagbago ng datos, kunin ang ID ng kaibigan mula sa mga setting ng aplikasyon at isama ito sa bagay na naglalaman ng hiling para sa datos para sa pagpapasimula ng push notification.
// construct the user data for updating the user's distance and steps var user_key = applicationSettings.getString('user_key'); var user = applicationSettings.getString('user'); var user_data = JSON.parse(user); user_data[user_key].distance = total_distance; user_data[user_key].steps = total_steps; // get friend IDs var friends_ids = JSON.parse(applicationSettings.getString('friends_ids')); var request_data = { 'id': user_data[user_key].id, 'friend_ids': friends_ids.join(','), 'steps': total_steps };
Gawin ang hiling sa mga Punsyon ng Firebase Cloud sa huling punto ng proseso na nagawa mo kanina. Kapag may sagot ng tagumpay na naibalik, doon pa lamang mababago ang datos ng gumagamit sa database ng Firebase.
http.request({ url: "https://us-central1-pushapp-ab621.cloudfunctions.net/init_push", method: "POST", headers: { "Content-Type": "application/json" }, content: JSON.stringify(request_data) }).then(function (response) { var statusCode = response.statusCode; if(statusCode == 200){ // update the user's data on Firebase firebase.update( '/users', user_data ); } }, function (e) { console.log('Error occurred while initiating push: ', e); });
Pagsubok sa mga Push Notification
Pwede mong subukan ang pagpapadala ng mga
push notification sa pamamagitan ng pagtanggal ng na-install na app mula sa
emulador o aparato. Papayagan tayo nito na maayos na simulan ang punsyon para
sa pagkuha ng token ng aparato. Siguraduhing magdagdag ng console.log
para
magawa ang token ng aparato:
onPushTokenReceivedCallback: function(token) { applicationSettings.setString('device_token', token); console.log('device token: ', device_token); // <-- add this }
Kapag nagawa na ang token ng aparato sa
NativeScript console, kopyahin ito, i-klik ang Database menu sa iyong Firebase
app na dashbord, at idagdag ito bilang token ng aparato para sa lahat ng
gumagamit ng app. Gamitin ang device_token
bilang pangalan ng katangian.
Para simulan ang push notification, pwede mong
gamitin ang curl para gumawa ng POST
na hiling sa huling punto ng proseso ng
Firebase Punsyon:
curl -X POST -H "Content-Type:application/json" YOUR_FIREBASE_FUNCTION_ENDPOINT -d '{"id":"ID OF A FIREBASE USER", "steps":NUMBER_OF_STEPS, "friend_ids":"COMMA,SEPARATED,FIREBASE,USER_IDs"}'
Kapag wala kang curl na na-install, pwede mong gamitin ang Postman na App para magpadala ng kahilingan. Gamitin ang mga sumusunod na setting para sa kahilingan:
- Paraan ng paghiling:
POST
- URL: Iyong huling punto ng proseso ng punsyon ng Firebase
- Susi ng mga Header:
Content-type
- Halaga ng mga Header:
application/json
- Katawan:
{"id":"ID OF A FIREBASE USER", "steps":NUMBER_OF_STEPS, "friend_ids":"COMMA,SEPARATED,FIREBASE,USER_IDs"}
Kapag nasimulan na, makakakita ka ng katulad sa mga sumusunod na kinalabasan:

Kapag ang app ay hindi kasalukuyang nakabukas, makikita mo ang abiso sa lugar ng mga abiso:

Konklusyon
Pagbati! Nakumpleto mo sa wakas ang app ng kalakasan ng kalusugan. Sa apat na mga tutoryal, nakagawa ka ng NativeScript na app na gumagamit ng Google maps, SQLite, Firebase Realtime database, at Firebase Cloud Messaging. Ngayon mayroon ka ng magandang pundasyon sa paggawa ng mga NativeScript app na ginagamit ang mga teknolohiyang iyan.
Para lalo pang matutunan ang tungkol sa NativeScript o ibang cross-platform mobile na mga teknolohiya, siguraduhing i-tsek ang ilan sa aming mga kurso at tutoryal dito Envato Tuts+!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post