semcomp - usp são carlos - desenvolvendo um aplicativo ios com swift

76
Desenvolvendo um Aplicativo iOS com Swift Juliana Chahoud @jchahoud 17 a Semana da Computação - ICMC USP São Carlos

Upload: juliana-chahoud

Post on 05-Dec-2014

262 views

Category:

Mobile


8 download

DESCRIPTION

Minicurso de iOS efetuado durante a 17a Semcomp - Semana da Computação do ICMC USP São Carlos http://semcomp.icmc.usp.br/17/programacao/minicurso/15/desenvolvendo-um-aplicativo-ios-com-swift/ O mercado de aplicativos é um dos que mais cresce em todo o mundo. Neste minicurso será demonstrado na prática como criar um aplicativo iOS desde o início até sua conclusão. O aplicativo será todo construído com a nova linguagem de programação da Apple, o Swift. Os tópicos abordados durante a construção do aplicativo serão: - Como preparar o ambiente de desenvolvimento - Principais funcionalidades do Xcode, a interface de desenvolvimento - Como criar e estruturar um projeto - Características básicas da linguagem de programação Swift - Criação de interfaces gráficas com Storyboards - Como compilar e executar o aplicativo em diversos simuladores (iPhone, iPad, iOS 7 e iOS 8) - Quais os próximos passos para seguir na área de desenvolvimento de aplicativos

TRANSCRIPT

Desenvolvendo um Aplicativo iOS com Swift

Juliana Chahoud @jchahoud

17a Semana da Computação - ICMC USP São Carlos

Juliana Chahoud

iOS

• Sistema operacional para dispositivos móveis, desenvolvido pela Apple

• Versão atual pública: iOS 7

• Versão atual disponível para desenvolvedores: iOS 8 Beta 5

App Store

• Possui aproximadamente 1 milhão e 200 mil aplicativos

• 800 milhões de dispositivos

• 75 bilhões de downloads

Devices compatíveis com iOS 8

Passos para desenvolver para iOS

Mac

OSX

Registro Desenvolvedor Xcode Obj-C e/ou

SwiftPublicar

App Store

Passo 1: Computador Mac / OS X

Mac

OS X

Registro Desenvolvedor Xcode Obj-C e/ou

SwiftPublicar

App Store

Mac / OS X

• Sistema operacional baseado em Unix, desenvolvido e comercializado pela Apple

• Roda exclusivamente em computadores Mac

• Versão corrente: 10.9 Mavericks

• Versão em Beta: 10.10 Yosemite

Passo 2: Efetuar registro de desenvolvedor

Mac

OS X

Registro Desenvolvedor Xcode Obj-C e/ou

SwiftPublicar

App Store

iOS Dev Center

• Acesse o site: http://developer.apple.com/ios

Apple ID

• Para criar sua conta, será preciso um “Apple ID”

Tela de Registro

• Cadastro como desenvolvedor é gratuito

• Já para publicar os apps é preciso pagar o iOS Developer Program $99

Passo 3: Download e instalação do Xcode

Mac

OS X

Registro Desenvolvedor Xcode Obj-C e/ou

SwiftPublicar

App Store

Download Xcode

Download Xcode 6 Beta 6

• Efetuar login no iOS Dev Center

Passo 4: Implementação em Objective-C ou Swift

Mac

OS X

Registro Desenvolvedor Xcode Obj-C e/ou

SwiftPublicar

App Store

App de exemplo

• Xcode 6 e iOS 8

• Linguagem Swift

Características Swift

• Moderna, Rápida e Segura

• iOS 7 e 8

Motivação para um app

Vindo para São Carlos me perguntei…

Qual é a boa para hoje?

App "A Boa em Sanca"

• Mostra a próxima festa em São Carlos

Criando um novo projeto

Templates de projetos

• “Single View Application”: aplicação com uma primeira tela criada

Opções do novo projeto

Opções do novo projeto

• Product Name: Utilizado para nomear o projeto (não necessariamente o nome do aplicativo)

• Organization Name: nome da empresa

• Organization Identifier: geralmente é utilizada a URL reversa da empresa como um identificador (com.nomeMinhaEmpresa)

• Language: Swift ou Objective-C

• Devices: qual família de devices serão compatíveis com o aplicativo (Universal, somente iPhone ou somente iPads)

As cinco áreas do Xcode

Toolbar / Ferramentas

1. Botão “Run”

2. Menu de schemes

3. Botões do Editor

4. Botões de Mostrar/Ocultar áreas

Rodando o app no simulador

Botões de mostrar/ocultar áreas

• Mostra/Oculta a área de navegação (Navigator)

• Mostra/Oculta a área de Debug

• Mostra/Oculta a área de utilitários (Utility)

Classes em Swift

• Extensão .swift

class NomeClasse: SuperClasseOpcional { }

Em que classe o app inicia?

• AppDelegate: responsável por controlar o ciclo de vida do aplicativo

• Fornecer a janela (variável window) onde o conteúdo será apresentado

Swift: sintaxe básicaimport UIKit 

@UIApplicationMain

class AppDelegate: UIResponder, UIApplicationDelegate {

var window: UIWindow? 

func application(application: UIApplication!, didFinishLaunchingWithOptions launchOptions: NSDictionary!) -> Bool

Método para Importar Frameworks

Define a instância da aplicação

Declaração de classe:class nomeClasse: SubClasse, ProtocolosQueImplementa,…{

Criação de variável:var nomeVariavel: TipoVariavel

Declaração de funções:func nomeFuncao(parametroA: TipoParametro, parametroB: TipoParametro) -> TipoRetorno

Mais da sintaxe básica

Início da Interface Gráfica

• Definida em Main Interface: Main.storyboard

Main.storyboard

• Storyboard: contem um conjunto de objetos, transações entre telas e conexões de elementos gráficos com o código, que definem a interface do aplicativo. O uso é o opcional

Main.storyboard

• Quem “responde” pelas ações e elementos da view? A classe ViewController

• É utilizado o padrão MVC: Model – View – controller

• Para controlar as Views são usadas instâncias de UIViewController

Controller

• Subclasse de UIViewController

• Sobrescreve a função viewDidLoad(): invocada assim que a View termina de carregar

Adicionando elementos gráficos

Biblioteca de recursos

1. File templates: modelos de arquivos comuns

2. Code snippets: trechos de códigos comumente usados

3. Object: Itens para adicionar na interface

4. Media: imagens, ícones, sons

Adicionando elementos gráficos: Label e Button

Botões do Editor

1. Editor Padrão: edição de arquivo simples

2. Editor assistente: mostra duas janelas no editor, com arquivos relacionados

3. Editor com versionamento de código: compara o arquivo com outras versões do mesmo

Conexões de elementos da interface gráfica na controller• @IBOutlet: variáveis da controller que

representam os elementos da tela

• Com botão control pressionado, selecione o Label na interface gráfica e arraste para debaixo da declaração da classe

Opções do outlet

• Storage: Pode ser Weak ou Strong

• Diferença influencia no gerenciamento de memória

Criação de Image e Button

Variáveis criadas

@IBOutlet weak var partyLabel: UILabel! @IBOutlet weak var partyImage: UIImageView!

Características de um objeto

• Para visualizar e modificar características de um objeto selecionado no Editor, utilizamos o “Inspector"

Criando uma ação para o botão

• Quando o usuário selecionar o botão, precisamos popular o label e imagem com informações da próxima festa

• Para que um elemento da interface dispare uma ação, marcamos uma função com o atributo @IBAction

Criando uma ação para o botão

Opções

• Connection: Action

• Name: nome da ação

• Type: tipo do objeto que vai enviar a mensagem de execução. Quando isso não for importante pode se usar AnyObject (representa qualquer objeto)

• Evento: Touch Up Inside = clique no botão

• Argumento: Quais argumentos serão passados na chamada

Ação criada

• Será criada uma função de acordo com o que foi configurado

• O círculo preenchido do lado esquerdo indica que foi feita a associação do método com um elemento na interface, no caso o botão

Implementando o método

• Poderíamos trocar de forma estática as informações

@IBAction func showNextParty(sender: UIButton) { self.partyLabel.text = "Festa ExtraVárzea - Dia 22/08" }

Mas queremos informação dinâmica!

• Como os aplicativos comerciais fazem?

• Se utiliza muito Web Services

Web Service

Request

Response

Web Service "Sanca"

• Criei um serviço simples e alimentei com informações das festas de São Carlos

• Para pegar as informações é preciso fazer um request: HTTP GET

Web Service

Request: qual a próxima festa?

HTTP, GET

Como fazer esse request em Swift?

//URL da API usada ordenando eventos por data let apiUrl = NSURL (string: "http://sanca.goldarkapi.com/event?order_by=date:asc") //Criacao de uma variavel do tipo request a partir da URL da API var request = NSMutableURLRequest (URL: apiUrl) //Metodo HTTP usado - GET eh usado para listar eventos request.HTTPMethod = "GET" //chave de acesso a API request.addValue(APITOKEN, forHTTPHeaderField: "X-Api-Token")

Criando uma conexão e enviando o request

//variavel para guardar erro var err: NSErrorPointer = nil //variavel que guarda a resposta do request var response: NSURLResponse? //envio do request de modo síncrono (para testes) var data = NSURLConnection.sendSynchronousRequest (request, returningResponse: &response, error: err)

Como vem a resposta?

• Formato JSON: padrão usado para transferência de dados

Web Service

Response:

JSON

Como vem a resposta?

• JSON:

"data":[ { "name": "ExtraVárzea", "date": "2014-08-22T23:30:00.000Z", "address": "Tulha Paulo Botelho", "price": "30˜80", "url": "https://www.facebook.com/events/1559708284254831", "contact": "", "smallimageurl": "https://urlDaFoto/small.jpg", "bigimageurl": "https://urlDaFoto/big.jpg", }

]

Arrays e Dicionários (chave,valor)

Lendo um JSON em Swift

//usar uma função que transforma JSON em Dicionario var jsonResult: NSDictionary = NSJSONSerialization.JSONObjectWithData (data, options: nil, error: err) as NSDictionary

Formatando o label

//criar um Dicionario com a primeira posicao do array if let var party:NSDictionary = partiesArray[0] as? NSDictionary {

//pega as informacoes "name" e depois "date" no dicionario let partyName = party["name"] as? NSString let partyDate = party["date"] as? NSString //formatar o texto do label com as informacoes da festa self.partyLabel.text = partyName! + ": " + self.formattedDate(partyDate!)

Pegando a imagem

//Ler a URL de onde esta a imagem let urlString: NSString = party["bigimageurl"] as NSString let imgURL: NSURL = NSURL(string: urlString) //pegar a imagem efetivamente em formato NSData let imgData: NSData = NSData(contentsOfURL: imgURL) //atualiza a imagem da ImageView self.partyImage.image = UIImage(data: imgData)

Legal, mas quero mais festas!

• E que tal um app que liste todas as festas?

Novo projeto: SancaFun

Usar uma TableViewController

Criar subclasse de TableViewController

Ajuste da célula da tabela

Request para obter dados das festasfunc getParties() { let apiUrl = NSURL (string: "http://sanca.goldarkapi.com/event?order_by=date:asc") //cria request, conexao….. //transforma o JSON de resposta em dicionario …..

//carrega um array com os dados das festas para alimentar a tabela ….. if let data:NSArray = jsonResult["data"] as? NSArray { self.parties = NSMutableArray(array: data) } //recarrega tabela para exibir novos dados self.tableView.reloadData() })

Função que cria cada célula da tabela

override func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell! {

Função que cria cada célula da tabela

//cria ou reutiliza uma celula ja existente let cell = tableView.dequeueReusableCellWithIdentifier("reuseIdentifier", forIndexPath: indexPath) as UITableViewCell

//le o objeto do array correspondente ao indice da celula let object = self.parties[indexPath.row] as NSDictionary

cell.textLabel.text = object["name"] as NSString //exibe a data formatada let partyDate = object["date"] as NSString cell.detailTextLabel.text = self.formattedDate(partyDate)

Para publicar o app

• Ocultar eventos que já finalizaram

• Carregar imagens de modo assíncrono

• “Banho de loja”: melhorias no layout / design

Para publicar o app

• Criar ícones para o app

Outras melhorias: notifications

Passo 5: Publicação na App Store

Mac

OS X

Registro Desenvolvedor Xcode Obj-C e/ou

SwiftPublicar

App Store

iTunes Connect

Material do minicurso

• Apresentação:

• http://www.slideshare.net/julianachahoud

• Projeto exemplo:

• https://github.com/jchahoud

Mais Informações

Documentação

The Swift Programming Language Using Swift with Cocoa and Objective-C https://developer.apple.com/swift/

Vídeos

WWDC 2014 https://developer.apple.com/videos/wwdc/2014/

Sample Code https://developer.apple.com/library/prerelease/ios/navigation/

Obrigada!

Juliana Chahoud

Sugestões? Críticas? Me mandem um oi! [email protected]

@jchahoud http://jchahoud.com

Semana da Computação - ICMC USP São Carlos