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
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. App Store
• Possui aproximadamente 1 milhão e 200 mil
aplicativos
• 800 milhões de dispositivos
• 75 bilhões de downloads
6. Passos
para desenvolver para iOS
Mac
OSX
Registro
Desenvolvedor
Xcode
Obj-C e/ou
Swift
Publicar
App Store
7. Passo 1:
Computador Mac / OS X
Mac
OS X
Registro
Desenvolvedor
Xcode
Obj-C e/ou
Swift
Publicar
App Store
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. Passo 2:
Efetuar registro de desenvolvedor
Mac
OS X
Registro
Desenvolvedor
Xcode
Obj-C e/ou
Swift
Publicar
App Store
10. iOS Dev Center
• Acesse o site: http://developer.apple.com/ios
11. Apple ID
• Para criar sua conta, será preciso um “Apple ID”
12. Tela de Registro
• Cadastro como desenvolvedor é gratuito
• Já para publicar os apps é preciso pagar o iOS
Developer Program $99
13. Passo 3: Download e instalação
do Xcode
Mac
OS X
Registro
Desenvolvedor
Xcode
Obj-C e/ou
Swift
Publicar
App Store
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)
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. Classes em Swift
• Extensão .swift
class NomeClasse: SuperClasseOpcional {
}
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. 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
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. 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. Controller
• Subclasse de UIViewController
• Sobrescreve a função viewDidLoad():
invocada assim que a View termina de carregar
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. 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. Opções do outlet
• Storage: Pode ser Weak ou Strong
• Diferença influencia no gerenciamento de
memória
45. Características de um objeto
• Para visualizar e modificar características de um
objeto selecionado no Editor, utilizamos o
“Inspector"
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
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. 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. 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. Mas queremos informação
dinâmica!
• Como os aplicativos comerciais fazem?
• Se utiliza muito Web Services
Web
Service
Request
Response
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. 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. 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. Como vem a resposta?
• Formato JSON: padrão usado para transferência
de dados
Web
Service
Response:
JSON
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",
}
]
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. 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. 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. Legal, mas quero mais festas!
• E que tal um app que liste
todas as festas?
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. Função que cria cada célula da
tabela
override func tableView(tableView: UITableView!,
cellForRowAtIndexPath indexPath: NSIndexPath!)
-> UITableViewCell! {
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. Para publicar o app
• Ocultar eventos que já finalizaram
• Carregar imagens de modo assíncrono
• “Banho de loja”: melhorias no layout / design
74. Material do minicurso
• Apresentação:
• http://www.slideshare.net/julianachahoud
• Projeto exemplo:
• https://github.com/jchahoud
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. 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