如何在應用程式利用Google發通知郵件

1.申請1個Google的信箱。

2.使用應用程式密碼登入帳戶

使用應用程式密碼。

1. 前往您的 Google 帳戶。
2. 選取 [安全性]。
3. 選取「登入 Google」底下的 [應用程式密碼]。您可能需要登入。如果您沒有看到這個選項，可能原因如下：
   1. 您的帳戶並未設定兩步驟驗證。
   2. 您目前只設定使用安全金鑰進行兩步驟驗證。
   3. 您使用的是公司、學校或其他機構專用的帳戶。
   4. 您已啟用進階保護功能。
4. 選擇底部的 [選取應用程式] 並選擇您所使用的應用程式  選擇 [選取裝置] 並選擇您所使用的裝置  選取 [產生]。
5. 按照操作說明輸入應用程式密碼。應用程式密碼是指裝置上黃色列中的 16 位數代碼。
6. 輕觸 [完成]。

3.參數設定參考

<configuration>

  <system.net>

    <mailSettings>

      <smtp deliveryMethod="Network" from="xxxxx@gmail.com">

        <network defaultCredentials="false" host="smtp.gmail.com" port="587" userName="xxxxx@gmail.com" password="xxxxxxxxxxxxxxxx" enableSsl="true" />

      </smtp>

    </mailSettings>

  </system.net>

Example: Ionic 5/Angular Admob

 In this tutorial we are going to see how to implement Google AdMob Ads In Ionic 5 to be able to monetize your apps using ads.

We are going to cover how to add three types of Ads:

• Banner Ads,
• Interstitial Ads,
• Reward Video Ads.

Create a New Ionic 5/Angular Project

Let's start our tutorial by creating a new Ionic 5/Angular project from scratch (Optional) based on the blank template using the Ionic CLI 5:

ionic start AdmobAdsExample blank 

Next, navigate inside your Ionic 5 project folder:

cd AdmobAdsExample 

Next, install the Cordova Admob plugin and its Ionic Native 5 wrapper as follows:

ionic cordova plugin add --save cordova-plugin-admob-free        

npm install --save @ionic-native/admob-free

Next, open the src/app/app.module.ts file and import AdMobFree then add it to the list of providers:

import { AdMobFree } from '@ionic-native/admob-free';    

@NgModule({
declarations: [
    MyApp,
    HomePage   
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    AdMobFree,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Showing Banner Ads in your Ionic 5 App

Next, open the src/app/app.component.ts file and add the following code:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

import { HomePage } from '../pages/home/home';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any = HomePage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen , private admobFree : AdMobFree ) {
    platform.ready().then(() => {
    // Okay, so the platform is ready and our plugins are available.
    // Here you can do any higher level native things you might need.
    statusBar.styleDefault();
    splashScreen.hide();
    this.showAdmobBannerAds();
    });
}
showAdmobBannerAds(){
    const bannerConfig: AdMobFreeBannerConfig = {
        isTesting: true,
        autoShow: true
    };
    this.admobFree.banner.config(bannerConfig);

    this.admobFree.banner.prepare()
    .then(() => {
        // banner Ad is ready
        // if we set autoShow to false, then we will need to call the show method here
    })
    .catch(e => console.log(e));    
    }      

}

We have injected AdMobFree and created the showAdmobBannerAds() method to show banner ads when Cordova is ready.

We have passed two configuration options:

• isTesting : true, which tells Admob plugin to use only test ads which is the recommended option when you are still developing your app to avoid accidental clcks that may cause problems with your Google Admob account.
• autoShow : true, which shows banner ads immediately after creating them without using the show() method.

After developing your Ionic 5 app you need to create real ads, go to AdMob portal, click "Monetize a new app" button to create a new ad unit.

Next grab your ad pubisher id and add it to configuration options as follows:

    const bannerConfig: AdMobFreeBannerConfig = {
        id: 'ca-app-pub-xxx/xxx', 
        isTesting: false,
        autoShow: true
    };

If you set autoShow to false then you need to call the show() method after preparing the banner:

    this.admobFree.banner.prepare()
    .then(() => {

        this.admobFree.banner.show()
    })
    .catch(e => console.log(e));    
    }  

You can also hide the banner using:

    this.admobFree.banner.hide()

Or you can completely remove it using:

    this.admobFree.banner.remove()        

Showing Interstitial Ads in your Ionic 5 App

You can also show Admob Interstitial ads using the following method:

showInterstitialAds(){
    const bannerConfig: AdMobFreeBannerConfig = {
    id: 'ca-app-pub-xxx/xxx',
    isTesting: false,
    autoShow: false
    };
    this.admobFree.interstitial.config(bannerConfig);

    this.admobFree.interstitial.prepare()
    .then(() => {
        this.admobFree.interstitial.show()
    })
    .catch(e => console.log(e));    
    }  

You can use the same configuration options and methods to add Interstitial Ads.

Showing Reward Video Ads in your Ionic 5 App

If you choose to display Reward Video Ads in your Ionic 5 mobile app, you can add and call the following method:

showRewardVideoAds(){
    const bannerConfig: AdMobFreeBannerConfig = {
    id: 'ca-app-pub-xxx/xxx',
    isTesting: false,
    autoShow: false
    };
    this.admobFree.rewardvideo.config(bannerConfig);

    this.admobFree.rewardvideo.prepare()
    .then(() => {
        this.admobFree.rewardvideo.show()
    })
    .catch(e => console.log(e));    
    }

如何在Ionic 5使用AdMob 中實現Google廣告

 在本教程中，看到如何在AdMob Ionic 5中實現Google廣告，以便能夠利用廣告賺錢。

介紹如何添加三種類型的廣告：

橫幅廣告

插頁廣告

視頻廣告

創建一個新的Ionic 5/ Angular項目

讓我們通過使用Ionic CLI 5基於空白模板從頭開始創建一個新的Ionic 5/Angular項目(可選)來開始本教程:

ionic start AdmobAdsExample blank  

接下來，在Ionic 5項目文件夾中導航：

cd  AdmobAdsExample

接下來，安裝Cordova Admob插件及它Ionic Native 5包裝器，如下所示：

ionic cordova plugin add --save cordova-plugin-admob-free 

npm install --save @ionic-native/admob-free

接下來，打開src/app/app.module.ts文件，並導入AdMobFree，然後將它添加到提供程序列表中：

import { AdMobFree } from '@ionic-native/admob-free'; 

@NgModule({

declarations: [

 MyApp,

 HomePage 

],

imports: [

 BrowserModule,

 IonicModule.forRoot(MyApp)

],

bootstrap: [IonicApp],

entryComponents: [

 MyApp,

 HomePage

],

providers: [

 StatusBar,

 SplashScreen,

 AdMobFree,

 {provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}    

在Ionic 5應用程序中顯示橫幅廣告

接下來，打開src/app/app.component.ts文件，並添加以下代碼：

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

import { HomePage } from '../pages/home/home';

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = HomePage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen , private admobFree : AdMobFree ) {

 platform.ready().then(() => {

 // Okay, so the platform is ready and our plugins are available.

 // Here you can do any higher level native things you might need.

 statusBar.styleDefault();

 splashScreen.hide();

 this.showAdmobBannerAds();

 });

}

showAdmobBannerAds(){

 const bannerConfig: AdMobFreeBannerConfig = {

 isTesting: true,

 autoShow: true

 };

 this.admobFree.banner.config(bannerConfig);

 this.admobFree.banner.prepare()

 .then(() => {

 // banner Ad is ready

 // if we set autoShow to false, then we will need to call the show method here

 })

 .catch(e => console.log(e)); 

 } 

我們注入了AdMobFree，並創建了showAdmobBannerAds()方法，以便在Cordova準備好時顯示橫幅廣告。

我們傳遞了兩個配置選項：

isTesting：true，它告訴Admob plugin只使用測試廣告，這是你仍然開發應用程序以避免意外時的推薦選項，

autoShow：true，在創建標題廣告之後，立即顯示標題廣告，而不使用show()方法，

開發完Ionic 5應用後，您需要製作真實的廣告，請轉到AdMob門戶，單擊"通過新應用獲利"按鈕以創建新的廣告單元。

接下來獲取你的廣告pubisher id並將它添加到配置選項中，如下所示：

 const bannerConfig: AdMobFreeBannerConfig = {

id: 'ca-app-pub-xxx/xxx', 

isTesting: false,

autoShow: true

 };

如果將autoShow設置為false，就在準備標題後需要調用show()方法：

  this.admobFree.banner.prepare()

 .then(() => {

 this.admobFree.banner.show()

 })

 .catch(e => console.log(e)); 

 } 

你還可以使用：

this.admobFree.banner.hide()

或者你可以使用：

    this.admobFree.banner.remove() 

在您的Ionic 5應用中顯示插頁式廣告

showInterstitialAds(){

 const bannerConfig: AdMobFreeBannerConfig = {

 id: 'ca-app-pub-xxx/xxx',

 isTesting: false,

 autoShow: false

 };

 this.admobFree.interstitial.config(bannerConfig);

 this.admobFree.interstitial.prepare()

 .then(() => {

 this.admobFree.interstitial.show()

 })

 .catch(e => console.log(e)); 

} 

在Ionic 5應用程序中顯示視頻廣告

showRewardVideoAds(){

 const bannerConfig: AdMobFreeBannerConfig = {

 id: 'ca-app-pub-xxx/xxx',

 isTesting: false,

 autoShow: false

 };

 this.admobFree.rewardvideo.config(bannerConfig);

 this.admobFree.rewardvideo.prepare()

 .then(() => {

 this.admobFree.rewardvideo.show()

 })

 .catch(e => console.log(e)); 

 }