I-kowd ang isang Real-Time App Gamit ang NativeScript: Mga Push Notification

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 login. 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_data. 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+!