Create a Cordova App using O365 Outlook Services and Ionic
Neste tutorial, você aprenderá a criar um email, calendário e contato cliente usando os serviços do O365 Outlook e o framework Ionic. Esse aplicativo permite aos usuários acessar seu email, calendário e contato por meio do Outlook O365 API de serviços. Este exemplo usa código JavaScript, mas você também pode escrever seu aplicativo Cordova no TypeScript.
Neste tutorial, siga estas etapas:
Criar um projeto
Adicionar a estrutura Ionic ao seu projeto
Adicionar NProgress ao seu projeto
Adicionar serviços O365 ao seu aplicativo
Definir permissões a filosofia de email, calendário e contato O365 para conceder o acesso adequado ao seu aplicativo
Criar a estrutura de pastas de aplicativo, roteamento, de interface do usuário e o layout usando controles Ionic
Adquirir um token de acesso e instalar o cliente de serviços do Outlook usando AngularJS factory
Uso O365 API para buscar dados de serviço do Outlook:
Para o aplicativo de email, mensagens sinalizadas como mensagens não lidas, importantes e todos os emails
Para o aplicativo de calendário, (evento start date é igual a hoje) reunião de hoje, amanhã da reunião (evento start date é igual a amanhã) e todos os eventos com início data maior ou igual a hoje
Para o aplicativo de contatos, todos os contatos
Uso O365 API para criar e excluir dados:
Excluir emails, eventos de calendário
Criar um novo evento de calendário, contato
Executar o aplicativo
Captura de tela a seguir mostra o aplicativo em execução do calendário quando concluído.
Captura de tela a seguir mostra o aplicativo de email em execução quando concluído.
Captura de tela a seguir mostra o aplicativo em execução contatos quando concluído.
Pré-requisitos
Antes de criar um novo projeto, certifique-se de que você atender todos os requisitos de sistema e instalado o Visual Studio Tools para extensão Apache Cordova para Visual Studio. Para obter mais informações, consulte Instalar o Visual Studio Tools for Apache Cordova
Criar um projeto
Crie um novo projeto de Cordova no Visual Studio escolhendo arquivo, novo projeto, JavaScript, aplicativos do Apache Cordova, e então aplicativo em branco modelo.
Adicionar a estrutura Ionic ao seu projeto
Para adicionar a estrutura Ionic
Do framework Ionic site, escolha Download beta.
Extraia o arquivo zip.
Criar uma nova pasta chamada lib em seu projeto de Cordova no Solution Explorer no Visual Studio e, em seguida, copie o conteúdo extraído na pasta lib.
Atualize as referências de script.
Index. HTML, adicione as seguintes referências Ionic no elemento < head >, após o Cordova e platformOverrides referências de script.
<script src="lib/ionic/js/ionic.bundle.min.js"></script>Index. HTML, adicione após ionic referência CSS.
<link href="lib/ionic/css/ionic.min.css" rel="stylesheet" />
Adicionar NProgress ao seu projeto
NProgress será usado para mostrar uma barra de progresso durante a busca em email, calendário e contatos do O365.
Para adicionar Nprogress ao seu projeto
Do NProgress site, escolha baixar.
Extraia o arquivo zip.
Crie uma pasta chamada nprogress na pasta lib no Gerenciador de soluções e nprogress.js de cópia para a pasta.
Copiar nprogress.css sob a pasta de css
Em index. HTML, adicione as seguintes referências de NProgress no elemento < head >.
<link href="css/nprogress.css" rel="stylesheet" /> <script src="lib/nprogress/nprogress.js"></script>
Adicionar serviços O365 ao seu aplicativo
Inscrever-se em um Site do desenvolvedor do Office 365 e configurar o acesso ao Active Directory do Azure para seu Site de desenvolvedores seguindo as instruções em configurar seu ambiente de desenvolvimento do Office 365.
Depois que você configurou o seu Site de desenvolvedor, siga estas etapas para adicionar e configurar as APIs do Office 365 usando o Gerenciador de serviços do Visual Studio.
Para adicionar e configurar as APIs do Office 365
Baixe e instale o Ferramentas de API do Office 365 da Galeria do Visual Studio.
No menu de atalho do nó do projeto, escolha Add, e, em seguida, escolha serviço conectado.
Na parte superior da caixa de diálogo Gerenciador de serviços, escolha o link do Office 365 e escolha registrar seu aplicativo.
Entrar com uma conta de administrador de locatário para sua organização de desenvolvedor do Office 365.
Defina as permissões do O365 filosofia de email, calendário e contato conceder o acesso adequado ao aplicativo
Depois de entrar conta O365, você verá uma lista de serviços de O365 como email, calendário, contatos e arquivos em sua conta de locatário. Selecione o serviço que você deseja usar em seu aplicativo e defina a permissão que você deseja que seu aplicativo para acessar, conforme especificado abaixo para cada aplicativo.
.gif "Dn911025.collapse_all(pt-br,VS.120).gif")
Aplicativo de email
Selecione Mail e clique no permissões... link no painel à direita. Clique ler e gravar o correio do usuário porque o aplicativo precisará realizar leitura e excluir operações de email. Da mesma forma, se você deseja que o aplicativo para enviar emails, selecione emails como uma opção do usuário.
Aplicativo de calendário
Selecione calendário e clique no permissões... link no painel direito e selecione têm acesso total ao calendário dos usuários. Da mesma forma, se você quiser conceder somente acesso de leitura para o aplicativo, em seguida, selecione Ler calendário dos usuários.
Aplicativo de contato
Selecione entre em contato com e clique no permissões... link no painel direito e selecione têm acesso total para contato dos usuários. Da mesma forma, se você quiser conceder somente acesso de leitura ao aplicativo, selecione ler contato dos usuários.
Aplicar as alterações e atualizar as referências
Para aplicar as alterações e atualizar as referências
Clique em Aplicar e Ok para definir as permissões e adicionar a API O365 ao seu projeto.
O Gerenciador de serviços adiciona a pasta serviços ao seu projeto.
Em index. HTML, adicione as seguintes referências de O365 no elemento < head >.
<script src="services/office365/scripts/o365loader.js"></script> <script src="services/office365/settings/settings.js"></script>
Criar estrutura de pastas de aplicativo, roteamento de interface do usuário e o layout usando controles Ionic e navegação
Siga estas etapas para estruturar o interface do usuário do aplicativo e o código JavaScript.
Crie uma pasta chamada aplicativo sob o nó raiz do projeto. A pasta de aplicativo contém arquivos específicos do aplicativo. Cada componente da interface do usuário que busca e associa dados na interface do usuário terá um controlador correspondente (seguindo a interface do usuário com code-behind padrão). Por exemplo, mail list.html mostrará um controle de lista para exibir o email do usuário e ctrl.js de lista de email conterá o código para buscar o email do usuário usando a API do O365.
Aqui estão alguns detalhes sobre as pastas e arquivos no projeto.
O auth pasta contém a interface do usuário e o código de assinatura e saída.
O layout pasta contém a interface do usuário para exibir o conteúdo do aplicativo e navegação como painel ion, ion de lado de menus, barra de navegação ion e código para associar o nome de usuário.
App. js contém roteamento para navegar para diferentes páginas da interface do usuário.
serviço o365.js contém funções de utilitário para obter o token de acesso, criar o objeto de cliente de serviços do Outlook, saída e obter o nome de usuário. Isso é implementado como uma fábrica de AngularJS para que essas funções podem ser expostas como função de utilitário em diferentes páginas.
Use AngularJS roteamento para navegar para diferentes páginas. Por exemplo, aqui está o roteamento para o aplicativo de email.
// 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');
Para o layout do aplicativo (menu, barra de navegação), use o menu de lado Ionic e o painel.
<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>
Use a guia Ionic para mostrar um conteúdo diferente em guias separadas. Por exemplo, use os controles Ionic abaixo para criar uma página da guia email para Mostrar emails importantes, mensagens não lidas e todos os emails em guias diferentes.
<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>
A ilustração a seguir mostra a página de guia de email.
Adquirir um token de acesso e obter o cliente de serviços do Outlook usando AngularJS factory
Crie uma fábrica de AngularJS para expor a API O365 para adquirir um token de acesso, crie o cliente de serviços do Outlook, fazer logoff e executar outras funções de utilitário que são usadas por diferentes controladores no aplicativo.
Aqui está o código para adquirir um token de acesso.
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);
});
Aqui está o código para criar um objeto de cliente de serviços do Outlook.
var outlookClient = new Microsoft.OutlookServices.Client('https://outlook.office365.com/api/v1.0', authtoken.getAccessTokenFn('https://outlook.office365.com'));
Aqui está o código completo da fábrica AngularJS para expor a 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; }
};
};
})();
Usar o objeto de cliente do Outlook para acessar O365 serviços como email, calendário e contato
Você pode usar o objeto do cliente Outlook para realizar leitura e gravação na email, calendário e contatos.
Usar o objeto de cliente do Outlook para ler email, calendário e contatos
O código a seguir lê todas as mensagens sinalizadas como importante.
// 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);
});
};
O código a seguir lê todos os eventos com data de início igual a hoje.
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();
});
O código a seguir lê todos os contatos.
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();
});
};
Usar o objeto de cliente do Outlook para excluir o evento de email e calendário
O objeto do cliente Outlook pode ser usado para excluir mensagens. Para excluir os emails, obtenha o email que você deseja excluir usando a ID de email e, em seguida, chamar delete() no objeto de email para excluir o email específico.
Dica
delete() Exclui permanentemente o email.Para mover o email para itens excluídos, use move() em vez disso.
Aqui está o código para excluir mensagens.
// 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);
});
Aqui está o código para excluir um evento.
// 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);
});
Usar o objeto de cliente do Outlook para criar novo contato e evento de calendário
O objeto de cliente Outlook pode ser usado para criar novos contatos, eventos de calendário e enviar emails.
Aqui está o código para adicionar um novo evento de calendário.
// 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);
});
Aqui está o código para adicionar um novo contato.
// 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);
});
Executar o aplicativo
Selecione Android como o sistema operacional de destino e implantar no emulador do Android ou em um dispositivo Android.
Dica
Cascata não é suportada para autenticação de O365.
Pressione F5 para executar o aplicativo.
Para obter mais detalhes sobre como executar o aplicativo Cordova entre diferentes plataformas, consulte implantar e executar o aplicativo compilado com o Visual Studio Tools for Apache Cordova.
Experimente
O aplicativo completo está disponível em Github. Baixe e experimente os aplicativos de exemplo e queremos saber sua opinião. Queremos saber sua opinião sobre as novas APIs do O365 e o Cordova ferramentas de suporte no Visual Studio!
Aplicativo |
Descrição |
|---|---|
Aplicativo de Cordova de exemplo criado usando Ionic que demonstra o uso da API de calendário O365 para ler, filtrar, excluir e adicionar eventos. Ele classifica os eventos em três grupos: data de início do evento (1) de hoje, o evento de (2) de amanhã e (3) todos os eventos com > = hoje. |
|
Exemplo Cordova aplicativo criado usando Ionic que demonstra o uso da API de mensagens O365 para ler, filtrar e excluir mensagens. Ele classifica os e-mails de usuário em três grupos: todos (1) importantes, (2) não lidos e (3) emails. |
|
Aplicativo de Cordova de exemplo criado usando Ionic que demonstra o uso da API de contato O365 para ler e adicionar contatos. |