[Ionic 2从入门到精通] 5.7 整合本地通知与社交分享

目前为止,我们完成了应用的主体功能的制作:我们可以拍照,将他们展示到一个列表上,删除照片,从存储加载照片,播放一个slideshow等等。我们现在要加入的功能是“有了更好”的这种类型的功能,可以用来改善我们的用户体验。
我们将添加本地通知功能,用于向提醒用户记得每天拍个照,我们也会带来社交分享功能这样用户可以跟他们的朋友分享他们的照片。在准备工作部分我们已经安装好了这些插件,所以现在我们只要实现功能就可以了。
预备,开始!

本地通知Local Notification

在实现本地通知之前,给大家普及一下推送通知push notification本地通知local notification的区别。他们看起来的行为是一致的,他允许你向用户提醒是否打开了应用,大概这样子:

4.8.1.jpg

不同的是,推送通知需要一个外部服务器控制向设备发送通知,但是本地通知完全是设备本身去控制的。这意味着,对于闹钟,排程通知或者类似咱们应用的每日提醒来讲,本地通知是再合适不过了。推送通知更适合用来提醒设备外面发生的事情,例如有人在Facebook给你发了消息之类的。
我们只需要在根组件里面添加一点点代码就可以实现这个功能。
> 修改 src/app/app.component.ts为如下:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
import { LocalNotifications } from 'ionic-native';

@Component({
    template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
    rootPage = HomePage;

    constructor(platform: Platform) {
        platform.ready().then(() => {
            if(platform.is('cordova')){
                LocalNotifications.isScheduled(1).then( (scheduled) => {
                    if(!scheduled){
                        let firstNotificationTime = new Date();
                        firstNotificationTime.setHours(firstNotificationTime.getHours()+24);

                        LocalNotifications.schedule({
                            id: 1,
                            title: 'Snapaday',
                            text: 'Have you taken your snap today?',
                            at: firstNotificationTime,
                            every: 'day'
                        });
                    }
                });
            }
        });
    }
}

由于这个构造器是打开应用第一个运行的,我们把插件的调用发哦到了platform.ready()里面以确保插件准备可用。然后我们检查了当前运行平台是否是‘cordova’,就跟之前的Camera插件一样,因为这个插件只能在真机上运行。
然后,我们就来到了使用插件的地方,我们可以访问到来自Ionic Native的LocalNotification。我们先检查一下id为1的排程是否被占用,我们已被占用,我们就啥都不干了,如果没有的话,我们通过schedule方法创建一个新的通知。
我们简单的提供了一个标题和一个需要展示的信息,同时也提供了一个id这样可以在后面用来区分这个通知(就像刚刚检查是否有排程一样)。我们也需要描述啥时候展示这个通知,所以我们指定了从现在起的24小时后(也就是明天这个时候会提醒),将频率设为每日,这样他会持续每天提醒(还有其他可用选项,例如每周)。
这是使用此插件的全部了,最起码我们要做的,如果想要实现更复杂的功能,那么请参考插件文档,查看更多可用选项。

社交分享

我们现在来添加社交分享插件。这是个非常好的插件,用于通过网络向不同的社交媒体分享数据,甚至SMS和邮件。手动整合不同的API(例如Facebook,Twitter等等)很烦的说,这个插件很好的解决了这些问题。
你可以分享一些东西到指定平台,或者你可以触发一个统一分享弹出框供用户选择分享平台。为实现此功能,我们现在要完善takePhoto函数已经调用了的sharePhoto函数。
> 修改 src/pages/home/home.ts 的 Ionic Native导入部分为如下:

import { Camera, File, SocialSharing } from 'ionic-native';

> 修改 src/pages/home/home.ts 的 sharePhoto函数为如下:

sharePhoto(image): void {
    let alert = this.alertCtrl.create({
        title: 'Nice one!',
        message: 'You\'ve taken your photo for today, would you also like to share it?',
        buttons: [
            {
                text: 'No, Thanks'
            },
            {
                text: 'Share',
                handler: () => {
                    SocialSharing.share('I\'m taking a selfie every day with #Snapaday', null, image, null)
                }
            }
        ]
    });

    alert.present();
}

我们之前也创建过一些警告框,那些警告框都是通过Simple Alert服务来创建的。我们这里不用Simple Alert来创建的原因是我们现在要创建的警告框复杂多了。这里的警告框有两个按钮,其中一个按钮会通过社交分享插件车发分享(另一个只是关闭这个框)。
你也看到了‘Share’按钮的处理器,我们也只是调用了插件(通过window.plugins.socialsharing)的share方法传入一条信息和图片。这个插件有大量不同的配置可用,所以,先读读文档吧,勇敢的少年哟。
现在当用户点击‘Share’的时候将会弹出一个框,上面显示了要分享的图片,然后你可以在弹出框上选择需要分享到的平台。

总结

我们添加的功能都有助于应用吸引用户。即使用户每天想要来个自拍,没有提醒功能的话,忘掉的几率还是比较大的。轻松分享照片到社交媒体的能力可以帮助将应用推广到全世界希望能够带来更多的下载量。
接下来只剩下样式定义这一个事情要做了,他可以让我们的应用看起来没那么丑。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容

  • 社交红利阅读笔记 书名:社交红利(修订升级版) 作者:徐志斌 出版社:中信出版社 正文前笔记: 推荐序1摘要 社交...
    凫水阅读 8,933评论 4 26
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,008评论 25 707
  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,610评论 1 180
  • 继续学习《自品牌》这本书。自媒体时代,当然要充分利用社交网络展示自身优势,为自己争取更多机会。 首先,创建自己的网...
    自在心灵空间阅读 251评论 0 1
  • 开篇: 你是一朵紫蓝美丽的花, 拥有世界上最美丽的紫镶边花瓣, 也拥有是世界上最凄最美关于爱的传说。 引: 秋露仿...
    揚灵阅读 367评论 7 3