Semcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com Swift

1.731 visualizações

Publicada em

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

Publicada em: Celular
  • Seja o primeiro a comentar

Semcomp - USP São Carlos - Desenvolvendo um aplicativo iOS com Swift

  1. 1. 17a Semana da Computação - ICMC USP São Carlos Desenvolvendo um Aplicativo iOS com Swift Juliana Chahoud @jchahoud
  2. 2. Juliana Chahoud
  3. 3. 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
  4. 4. App Store • Possui aproximadamente 1 milhão e 200 mil aplicativos • 800 milhões de dispositivos • 75 bilhões de downloads
  5. 5. Devices compatíveis com iOS 8
  6. 6. Passos para desenvolver para iOS Mac OSX Registro Desenvolvedor Xcode Obj-C e/ou Swift Publicar App Store
  7. 7. Passo 1: Computador Mac / OS X Mac OS X Registro Desenvolvedor Xcode Obj-C e/ou Swift Publicar App Store
  8. 8. 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
  9. 9. Passo 2: Efetuar registro de desenvolvedor Mac OS X Registro Desenvolvedor Xcode Obj-C e/ou Swift Publicar App Store
  10. 10. iOS Dev Center • Acesse o site: http://developer.apple.com/ios
  11. 11. Apple ID • Para criar sua conta, será preciso um “Apple ID”
  12. 12. Tela de Registro • Cadastro como desenvolvedor é gratuito • Já para publicar os apps é preciso pagar o iOS Developer Program $99
  13. 13. Passo 3: Download e instalação do Xcode Mac OS X Registro Desenvolvedor Xcode Obj-C e/ou Swift Publicar App Store
  14. 14. Download Xcode
  15. 15. Download Xcode 6 Beta 6 • Efetuar login no iOS Dev Center
  16. 16. Passo 4: Implementação em Objective-C ou Swift Mac OS X Registro Desenvolvedor Xcode Obj-C e/ou Swift Publicar App Store
  17. 17. App de exemplo • Xcode 6 e iOS 8 • Linguagem Swift
  18. 18. Características Swift • Moderna, Rápida e Segura • iOS 7 e 8
  19. 19. Motivação para um app Vindo para São Carlos me perguntei… Qual é a boa para hoje?
  20. 20. App "A Boa em Sanca" • Mostra a próxima festa em São Carlos
  21. 21. Criando um novo projeto
  22. 22. Templates de projetos • “Single View Application”: aplicação com uma primeira tela criada
  23. 23. Opções do novo projeto
  24. 24. 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)
  25. 25. As cinco áreas do Xcode
  26. 26. Toolbar / Ferramentas 1. Botão “Run” 2. Menu de schemes 3. Botões do Editor 4. Botões de Mostrar/Ocultar áreas
  27. 27. Rodando o app no simulador
  28. 28. 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)
  29. 29. Classes em Swift • Extensão .swift class NomeClasse: SuperClasseOpcional { }
  30. 30. 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
  31. 31. Swift: sintaxe básica import UIKit @UIApplicationMain Método para Importar Frameworks Define a instância da aplicação class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? Declaração de classe: class nomeClasse: SubClasse, ProtocolosQueImplementa,…{ Criação de variável: var nomeVariavel: TipoVariavel func application(application: UIApplication!, didFinishLaunchingWithOptions launchOptions: NSDictionary!) -> Bool Declaração de funções: func nomeFuncao(parametroA: TipoParametro, parametroB: TipoParametro) -> TipoRetorno
  32. 32. Mais da sintaxe básica
  33. 33. Início da Interface Gráfica • Definida em Main Interface: Main.storyboard
  34. 34. 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
  35. 35. 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
  36. 36. Controller • Subclasse de UIViewController • Sobrescreve a função viewDidLoad(): invocada assim que a View termina de carregar
  37. 37. Adicionando elementos gráficos
  38. 38. 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
  39. 39. Adicionando elementos gráficos: Label e Button
  40. 40. 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
  41. 41. 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
  42. 42. Opções do outlet • Storage: Pode ser Weak ou Strong • Diferença influencia no gerenciamento de memória
  43. 43. Criação de Image e Button
  44. 44. Variáveis criadas @IBOutlet weak var partyLabel: UILabel! @IBOutlet weak var partyImage: UIImageView!
  45. 45. Características de um objeto • Para visualizar e modificar características de um objeto selecionado no Editor, utilizamos o “Inspector"
  46. 46. 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
  47. 47. Criando uma ação para o botão
  48. 48. 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
  49. 49. 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
  50. 50. 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" }
  51. 51. Mas queremos informação dinâmica! • Como os aplicativos comerciais fazem? • Se utiliza muito Web Services Web Service Request Response
  52. 52. 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
  53. 53. 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")
  54. 54. 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)
  55. 55. Como vem a resposta? • Formato JSON: padrão usado para transferência de dados Web Service Response: JSON
  56. 56. 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", } ]
  57. 57. Arrays e Dicionários (chave,valor)
  58. 58. 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
  59. 59. 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!)
  60. 60. 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)
  61. 61. Legal, mas quero mais festas! • E que tal um app que liste todas as festas?
  62. 62. Novo projeto: SancaFun
  63. 63. Usar uma TableViewController
  64. 64. Criar subclasse de TableViewController
  65. 65. Ajuste da célula da tabela
  66. 66. Request para obter dados das festas func 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() })
  67. 67. Função que cria cada célula da tabela override func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell! {
  68. 68. 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)
  69. 69. Para publicar o app • Ocultar eventos que já finalizaram • Carregar imagens de modo assíncrono • “Banho de loja”: melhorias no layout / design
  70. 70. Para publicar o app • Criar ícones para o app
  71. 71. Outras melhorias: notifications
  72. 72. Passo 5: Publicação na App Store Mac OS X Registro Desenvolvedor Xcode Obj-C e/ou Swift Publicar App Store
  73. 73. iTunes Connect
  74. 74. Material do minicurso • Apresentação: • http://www.slideshare.net/julianachahoud • Projeto exemplo: • https://github.com/jchahoud
  75. 75. 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/
  76. 76. Semana da Computação - ICMC USP São Carlos Obrigada! Juliana Chahoud Sugestões? Críticas? Me mandem um oi! jchahoud@gmail.com @jchahoud http://jchahoud.com

×