Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript

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

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: Social Login and Firebase

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. 

Pagkatapos niyan, kakailanganin mong i-install ang mga geolocation, Google Maps, SQLite aT Firebase plugin:

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:

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:

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:

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:

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:

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:

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:

Tatanungin ka nito kung gusto mong ayusin ang default na proyekto o hindi. Piliin ang proyekto sa Firebase na ginawa mo sa nakaraang tutoryal:

setup firebase functions

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:

I-uncomment ang helloWorld na punsyon, at makakakita ka ng mga HTTP trigger na nasa aksyon.

Paganahin ang mga sumusunod para ma-deploy ang punsyon sa cloud:

Kapag kumpleto na ang deployment, dapat ipapakita sa iyo ang URL kung saan ang punsyon ay na-deploy:

deploy firebase functions

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:

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. 

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:

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.

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. 

Pagpapadala ng Abiso

Sa huli, ipadala ang abiso:

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:

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:

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:

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.

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.

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. 

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:

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:

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 paghilingPOST
  • URL: Iyong huling punto ng proseso ng punsyon ng Firebase
  • Susi ng mga Header: Content-type
  • Halaga ng mga Headerapplication/json
  • Katawan: 

Kapag nasimulan na, makakakita ka ng katulad sa mga sumusunod na kinalabasan:

push notification received

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

push notification outside app

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+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.