Create a Cordova App using O365 Outlook Services and Ionic

Článek
04/15/2015

V tomto kurzu se dozvíte, jak vytvořit mail, kalendář a kontakt klienta pomocí služeb O365 aplikace Outlook a architekturu iontové.Tato aplikace umožňuje uživatelům přístup k jejich pošty, kalendář a další kontaktní prostřednictvím aplikace Outlook O365 služeb rozhraní API.V tomto příkladu kódu jazyka JavaScript, ale můžete také napsat své Cordova aplikace na stroji.

V tomto výukovém kurzu provedením následujících kroků:

Vytvořte projekt
Přidat do projektu iontové Framework
Přidat do projektu NProgress
Přidat O365 služby k aplikaci
Nastavit oprávnění k O365 pošty, kalendář a další kontaktní tenet udělit odpovídající přístup k aplikaci
Vytvoření struktury složek aplikace, uživatelského rozhraní směrování a použití iontové ovládacích prvků rozložení
Získat token přístupu a získejte klienta aplikace Outlook služeb pomocí AngularJS objekt pro vytváření
Použití rozhraní API O365 pro získávání dat služby aplikace Outlook:
- Pro poštovní aplikaci e-mailů označen jako důležité, nepřečtené e-mailů a všechny e-mailů
- Pro aplikaci kalendáře dnes uživatele splňuje (událost počáteční datum rovná se ještě dnes), zítra uživatele splňuje (událost počáteční datum se rovná zítra) a všechny události s počáteční datum větší nebo rovna hodnotě dnes
- Pro aplikaci kontakty, všechny kontakty
Použití rozhraní API O365 můžete vytvářet a odstraňovat data:
- Odstranit poštu, kalendář události
- Vytvořit novou událost kalendáře, kontaktu
Spusťte aplikaci

Následující obrázek ukazuje spuštěné kalendáře aplikace po dokončení.

Následující obrázek ukazuje spuštěné poštovní aplikaci po dokončení.

Následující obrázek ukazuje spuštěné kontakty aplikace po dokončení.

Požadavky

Před vytvořením nového projektu, ujistěte se, že jste splněny všechny požadavky na systém a nainstalovat sadu Visual Studio Tools pro Apache Cordova rozšíření pro sadu Visual Studio.Další informace naleznete v tématu Instalace nástrojů Visual Studio Tools for Apache Cordova

Vytvořte projekt

Vytvoření nového projektu Cordova v sadě Visual Studio volbou soubor, Nový projekt, jazyka JavaScript, Apache Cordova aplikace, a potom prázdné aplikace šablony.

Přidat do projektu iontové Framework

Chcete-li přidat iontové Framework

Z iontových framework webu, zvolte stažení beta.
Extrahujte soubor zip.
Vytvořit novou složku s názvem lib v rámci své Cordova projekt v Průzkumníku řešení v sadě Visual Studio a zkopírujte extrahovaný obsah v rámci lib složky.
Aktualizujte odkazy skriptu.

Do index.html, přidejte následující iontové odkazuje v elementu < head > po Cordova a platformOverrides odkazy na skripty.
```
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
```
V index.html přidejte následující iontové šablon stylů CSS odkazu.
```
<link href="lib/ionic/css/ionic.min.css" rel="stylesheet" />
```

Přidat do projektu NProgress

Chcete-li zobrazit indikátor průběhu při načítání pošty, kalendář a kontakty z O365 se použije NProgress.

Chcete-li přidat Nprogress do svého projektu

Z NProgress webu, zvolte Stáhnout.
Extrahujte soubor zip.
Vytvořte složku s názvem nprogress ve složce lib v Průzkumníku řešení, kopírování nprogress.js do složky.
Kopírovat nprogress.css ve složce šablon stylů css

V index.html přidejte následující odkazy NProgress v elementu < head >.

<link href="css/nprogress.css" rel="stylesheet" />
<script src="lib/nprogress/nprogress.js"></script>

Přidat O365 služby k aplikaci

Zaregistrujte se pro web vývojáře Office 365 a nastavit přístup Azure Active Directory pro svůj Web Developer podle následujících pokynů v instalace vývojovým prostředím služeb Office 365.

Poté, co jste nastavili svůj Web Developer, postupujte podle následujících kroků můžete přidávat a konfigurovat rozhraní API Office 365 pomocí Správce služeb v sadě Visual Studio.

Přidání a konfigurace rozhraní API Office 365

Stáhněte si a nainstalujte rozhraní API Office 365 nástroje z Galerie Visual Studio.
Z místní nabídky uzlu projektu, zvolte Přidat, a poté zvolte možnost připojen služby.
V horní části dialogového okna Správce služby, zvolte odkaz služeb Office 365 a pak vyberte zaregistrovat vaší aplikace.

Přihlaste se pomocí účtu správce klienta pro vaši organizaci vývojáře Office 365.

Nastavit oprávnění pro O365 pošty, kalendář a další kontaktní tenet udělit správný přístup k aplikaci

Po přihlášení k účtu O365 zobrazí se seznam O365 služby, například pošta, kalendář, kontakty a soubory v rámci vašeho účtu klienta.Vyberte službu, kterou chcete používat ve vaší aplikaci a nastavte požadovaná oprávnění aplikace a získat přístup tak, jak je uvedeno níže pro každou aplikaci.

Poštovní aplikaci

Vyberte pošty a klikněte na tlačítko oprávnění... odkaz v pravém podokně.Pak zvolte ke čtení a zápisu pro uživatele pošty vzhledem k tomu, že aplikace bude nutné provést pro čtení a odstranění operací pošty.Dále platí Pokud chcete aplikaci, aby odesílání e-mailů, pak vyberte pošty jako možnost uživatele.

Kalendář aplikace

Vyberte kalendáře a klikněte na tlačítko oprávnění... v pravém podokně na odkaz a potom vyberte mají úplný přístup ke uživatelů kalendáře.Dále platí, pokud chcete povolit pouze pro čtení přístup k aplikaci, vyberte Číst uživatelů kalendáře.

Kontaktní aplikace

Vyberte obraťte se na a klikněte na tlačítko oprávnění... v pravém podokně na odkaz a potom vyberte mají úplný přístup ke kontaktu uživatelů.Dále platí, pokud chcete povolit pouze pro čtení přístup k aplikaci, vyberte možnost Číst kontakt uživatelů.

Použít změny a aktualizovat odkazy

Chcete-li použít změny a aktualizovat odkazy

Klikněte na tlačítko použít a Ok nastavit oprávnění a přidejte rozhraní API O365 do svého projektu.

Správce služby přidá složce služby do projektu.

V index.html přidejte následující odkazy O365 v elementu < head >.

<script src="services/office365/scripts/o365loader.js"></script>
<script src="services/office365/settings/settings.js"></script>

Vytvořit strukturu složek aplikace, směrování uživatelského rozhraní a rozložení pomocí iontové ovládací prvky a navigaci

Použijte následující postup vystavět strukturu aplikace uživatelského rozhraní a kód jazyka JavaScript.

Vytvořit složku s názvem aplikace v rámci projektu kořenový uzel.Složka aplikace bude obsahovat soubory, které jsou specifické pro aplikaci.Jednotlivých komponent uživatelského rozhraní, který načte a naváže data na uživatelského rozhraní bude mít odpovídající řadič (po uživatelského rozhraní s kódem vzor).Můžete například pošty list.html zobrazí ovládací prvek seznamu zobrazíte uživatele e-mailů a pošty seznamu ctrl.js bude obsahovat kód, chcete-li načíst pošty uživatele pomocí rozhraní API O365.

Zde jsou některé podrobnosti o složkách a soubory v projektu.

Auth složka obsahuje uživatelské rozhraní a kód pro přihlášení a odhlašování.
Rozložení složka obsahuje uživatelské rozhraní k zobrazení obsahu aplikace a navigační jako podokno ion, ion straně nabídky, ion nav pruhový a kódu pro vytvoření vazby uživatelské jméno.
app.js obsahuje uživatelské rozhraní směrování přejdete na jiné stránky.
Služba o365.js obsahuje funkce nástroje získat token přístupu, vytvořit objekt klienta aplikace Outlook služby, odhlášení, a získat uživatelské jméno.Toto je implementována jako objekt pro vytváření AngularJS tak, aby tyto funkce mohou být zveřejněny jako funkce v rámci jiné stránky.

Pomocí AngularJS směrování přejdete na jiné stránky.Zde je například směrování pro poštovní aplikaci.

// Layout page
    .state('app', {
        abstract: true,
        url: "/app",
        templateUrl: "app/layout/layout.html"
    })

    // Sign-in page
     .state('sign-in', {
         url: "/sign-in",
         templateUrl: "app/auth/sign-in.html"
     })

    // Sign-out page
        .state('app.sign-out', {
            url: "/sign-out",
            views: {
                'mainContent': {
                    templateUrl: "app/auth/sign-out.html"
                }
            }
        })   

    // Mail list page
    .state('app.mail', {
        url: "/mail",
        views: {
            'mainContent': {
                templateUrl: "app/mail/mail-tabs.html"
            }
        }
    })

    // Mail list containing mails flagged as important
    .state('app.mail.imp', {
        url: "/imp/id:important",
        views: {
            "tab-imp-mail": {
                templateUrl: "app/mail/mail-list.html"
            }
        }
    })

    // Mail detail page
    .state('app.mail-detail', {
        url: "/mail/:id",
        views: {
            'mainContent': {
                templateUrl: "app/mail/mail-detail.html"
            }
        }
    })

    // Unread mail list page
    .state('app.mail.unread', {
        url: "/unread/id:unread",
        views: {
            "tab-unread-mail": {
                templateUrl: "app/mail/mail-list.html"
            }
        }
    })

    // All mail list page
    .state('app.mail.all', {
        url: "/all/id:all",
        views: {
            "tab-all-mail": {
                templateUrl: "app/mail/mail-list.html"
            }
        }
    });

    // Navigate to sign-in page when app starts.
    $urlRouterProvider.otherwise('sign-in');

Pro aplikaci rozložení (nabídka, navigační pruh) použijte iontové nabídce straně a podokna.

<ion-side-menus ng-controller="layoutCtrl as vm">

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
            <ion-nav-back-button class="button-clear icon ion-ios7-arrow-back"></ion-nav-back-button>
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-bar>
        <ion-nav-view name="mainContent" animation="slide-left-right"></ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left">
        <header class="bar bar-header bar-positive">
            <h1 class="title">{{vm.userName}}</h1>
        </header>
        <ion-content class="has-header">
            <ion-list>                            
                <ion-item nav-clear menu-close ui-sref="app.sign-out">Sign-out</ion-item>
            </ion-list>
    </ion-side-menu>

</ion-side-menus>

Na kartě iontové Chcete-li zobrazit jiný obsah v samostatném karty.Můžete například použijte níže iontové prvky k vytvoření stránky kartu pošty, chcete-li zobrazit důležité e-mailů, nepřečtené e-mailů a všechny e-mailů v rámci různých karet.

<ion-view>
    <ion-tabs class="tabs-positive tabs-icon-top">
        <ion-tab title="Imp" icon="ion-star" ui-sref="app.mail.imp">
            <ion-nav-view name="tab-imp-mail"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Unread" icon="ion-ios7-email-outline" ui-sref="app.mail.unread">
            <ion-nav-view name="tab-unread-mail"></ion-nav-view>
        </ion-tab>

        <ion-tab title="All" icon="ion-email" ui-sref="app.mail.all">
            <ion-nav-view name="tab-all-mail"></ion-nav-view>
        </ion-tab>
    </ion-tabs>
</ion-view>

Na následujícím obrázku zobrazí stránku karty pošty.

Získat token přístupu a získejte klienta aplikace Outlook služeb pomocí AngularJS objekt pro vytváření

Vytvořte objekt pro vytváření AngularJS k přímému rozhraní API O365 získat token přístupu, vytvořte klient aplikace Outlook služby, odhlášení a provést další funkce nástroje, které jsou používány různé řadiče v aplikaci.

Zde je kód, který chcete získat token přístupu.

var authContext = new O365Auth.Context();
authContext.getIdToken("https://outlook.office365.com/")
.then((function (token) {
     // Get auth token
     authtoken = token;
     // Get user name from token object.
     userName = token.givenName + " " + token.familyName;
    }), function (error) {
      // Log sign-in error message.
      console.log('Failed to login. Error = ' + error.message);
 });

Zde je kód pro vytvoření objektu služby klienta aplikace Outlook.

var outlookClient = new Microsoft.OutlookServices.Client('https://outlook.office365.com/api/v1.0', authtoken.getAccessTokenFn('https://outlook.office365.com'));

Zde je kompletní kód objekt pro vytváření AngularJS k přímému rozhraní API O365.

(function () {
    'use strict';
    angular.module('app365').factory('app365api', [app365api]);

    function app365api() {

        var authContext;
        var authtoken;
        var outlookClient;      
        var userName;

        // Login to O365
        function login(callback) {
            if (!authContext) {
                authContext = new O365Auth.Context();
            }

            authContext.getIdToken("https://outlook.office365.com/")
           .then((function (token) {
               // Get auth token
               authtoken = token;
               // Get user name from token object.
               userName = token.givenName + " " + token.familyName;
               // Create Outlook client object.
               outlookClient = new Microsoft.OutlookServices.Client('https://outlook.office365.com/api/v1.0', authtoken.getAccessTokenFn('https://outlook.office365.com'));
               // Callback without parameter to indicate successful sign-in.
               callback();
           }), function (error) {
               // Log sign-in error message.
               console.log('Failed to login. Error = ' + error.message);
               callback(error.message);
           });
        };

        // Logout
        function logout() {
            if (!authContext) {
                authContext = new O365Auth.Context();
            }

            authContext.logOut();
        };

        // Get signed-in user name.
        function getUserName() {
            return userName;
        };

        return {
            login: login,
            logout: logout,
            getUserName: getUserName,        
            exchangeClientObj: function () { return outlookClient; }
        };
    };
})();

Pomocí objektu klienta aplikace Outlook pro přístup ke O365 službě jako pošty, kalendář a kontakt

Objekt klienta aplikace Outlook slouží k provádění pro čtení a zápisu operace pošty, kalendář a kontakty.

Pomocí objektu klienta aplikace Outlook ke čtení pošty, kalendář a kontakty

Následující kód čte všechny pošty označen jako důležitou.

// Get all mails flagged as important.
function getImpMails() {
   NProgress.start();
   // Filter to fetch all important mails received after 2000-10-20
   var filterQuery = "Importance eq 'High' and DateTimeReceived gt 2000-10-20";
   outlookClient.me.folders.getFolder("Inbox").fetch()
   .then(function (folder) {
   // Fetch all important mails sorted by DateTimeReceived.
      folder.messages.getMessages().filter(filterQuery).orderBy('Importance,DateTimeReceived desc').fetch()
.then(function (mails) {
// Get current page. Use getNextPage() to fetch next set of mails.
vm.mails = mails.currentPage;
$scope.$apply();
NProgress.done();
}, function (error) {
    console.log("Error encountered while fetching mails. Error: " + error.message);
 });
}, function (error) {
    console.log("Error encountered while fetching inbox folder. Error: " + error.message);
  });
};

Následující kód čte všechny události se rovná aktuální datum zahájení.

var filterQuery = 'start gt ' + today.toISOString() + ' and start lt ' + tomorrow.toISOString();
NProgress.start();
// Get events with filter.
outlookClient.me.calendar.events.getEvents().filter(filterQuery).fetch()
.then(function (events) {
// Get current page. Use getNextPage() to fetch next set of events.
    vm.events = events.currentPage;
    $scope.$apply();
    NProgress.done();
});

Následující kód čte všechny kontakty.

function getContacts() {
NProgress.start();

// Fetch all the contacts.
outlookClient.me.contacts.getContacts().fetch()
.then(function (contacts) {
// Get the current page. Use getNextPage() to fetch next set of contacts.
    vm.contacts = contacts.currentPage;
    $scope.$apply();
    NProgress.done();
  });
};

Pomocí objektu klienta aplikace Outlook k odstranění události pošty a kalendář

Objekt klienta aplikace Outlook lze použít k odstranění pošty.Chcete-li odstranit poštu, získat e-mailu, kterou chcete odstranit pomocí ID pošty a poté zavolá delete() na objekt pošty, který chcete odstranit konkrétní e-mailu.

[!POZNÁMKA]

delete() trvale odstraní e-mailu.Chcete-li přesunout e-mailu odstraněné položky, použijte move() místo.

Zde je kód, který chcete odstranit poštu.

// Fetch the mail with specified mail id.                    outlookClient.me.folders.getFolder("Inbox").messages.getMessage(mail.id).fetch()
.then(function (mail) {
    // Delete the mail.
    mail.delete()
    .then((function (response) {
         // mail deleted successfully.                
     }), function (error) {                            
         // Log the error message when error is encountered while deleting the mail.
         console.log('fail to delete mail. Error = ' + error.message);
 });

Zde je kód, který chcete odstranit událost.

// Fetch event with specified event id.
outlookClient.me.calendar.events.getEvent(event.id).fetch()
.then(function (event) {
    // Delete event.
    event.delete()
    .then((function (response) {                            
     // Refresh event list.
     }).bind(this), function (reason) {
     // Log delete event error.
     console.log('Fail to delete event. Error = ' + reason.message);
});

Objekt klienta aplikace Outlook použít k vytvoření nového kontaktu a událost kalendáře

Objekt klienta aplikace Outlook lze použít k vytvoření nové kontakty, kalendář události a odesílání e-mailů.

Zde je kód, který chcete přidat novou událost kalendáře.

// Event body content
var eventBody = new Microsoft.OutlookServices.ItemBody();
eventBody.contentType = Microsoft.OutlookServices.BodyType.HTML;
eventBody.content = $scope.newEvent.body;
// Event attendee.
var attendee = new Microsoft.OutlookServices.Attendee();
// Attendee email address.
var emailAddress = new Microsoft.OutlookServices.EmailAddress();
emailAddress.address = $scope.newEvent.toRecipients;
attendee.emailAddress = emailAddress;
// Event object.
var event = new Microsoft.OutlookServices.Event();
// Event start date.
event.start = new Date($scope.newEvent.start).toISOString();
// Event end date time
event.end = new Date($scope.newEvent.end).toISOString();
// Event subject.
event.subject = $scope.newEvent.subject;
// Event body.
event.body = eventBody;
// Add event attendee.
event.attendees.push(attendee);
// Event location.
event.location = new Microsoft.OutlookServices.Location();
event.location.displayName = 'Sample Location';
// Add event
outlookClient.me.calendar.events.addEvent(event)
.then((function (response) {
// New event created successfully.
})
.bind(this), function (reason) {
// Log the error message encountered while adding the event.
console.log('Fail to add event. Error = ' + reason.message);
});

Zde je kód, který chcete přidat nový kontakt.

// Contact object
var contact = new Microsoft.OutlookServices.Contact();

// First and last name
contact.givenName = $scope.newContact.firstname;
contact.surname = $scope.newContact.lastname;

// Mobile phone
contact.mobilePhone1 = $scope.newContact.phone;

// Email address
var emailAddress = new Microsoft.OutlookServices.EmailAddress();
emailAddress.address = $scope.newContact.email;
contact.emailAddresses.push(emailAddress);

// Add Contact
outlookClient.me.contacts.addContact(contact)
.then((function (response) {
// Contact added successfully.

})
.bind(this), function (reason) {
// Log the error message when add contact fails.
console.log('Fail to add contact. Error = ' + reason.message);
});

Spusťte aplikaci

Vyberte Android jako cílový operační systém a nasadit Android emulátor nebo Android zařízení.

[!POZNÁMKA]

Zvlnění není momentálně podporována pro O365 ověřování.

Stisknutím klávesy F5 spusťte aplikaci.

Další podrobnosti o spuštění aplikace Cordova na různých platformách, naleznete v nasazení a spustit vaše aplikace sestavené s Visual Studio Tools for Apache Cordova.

Zkuste to

Dokončení aplikace je k dispozici na Github.Stáhněte si prosím a zkuste ukázky aplikací a sdělte nám, co si myslíte.Rádi bychom poslechněte si své názory o nové rozhraní API O365 a Cordova tooling odborné pomoci v sadě Visual Studio.

Aplikace	Popis
Cordova kalendáře aplikace	Vzorová aplikace Cordova vytvořených pomocí nástroje iontové který předvádí použití API O365 kalendář ke čtení, filtrovat, odstranit a přidat události.Ji rozděluje události v tři skupiny: (1) dnešní události, (2) budoucnosti událost a (3) všech událostí se počáteční datum > = ještě dnes.
Cordova poštovní aplikaci	Vzorová aplikace Cordova vytvořených pomocí nástroje iontové který předvádí použití Mail API O365 ke čtení, filtrovat a odstranit poštu.Ji rozděluje odešle poštu uživatele v tři skupiny: (1) důležité, (2) nepřečtené a (3) všech poštu.
Kontaktu aplikace Cordova	Vzorová aplikace pro Cordova vytvořených pomocí nástroje iontové který předvádí použití rozhraní API O365 kontaktu pro čtení a přidat kontakty.

Sdílet prostřednictvím