The movie detail screen of the TodoMovies application using Swift

Overview

Desafio Mobile2You - TodoMovies

Este desafio consiste na criação de uma réplica da tela de detalhe dos filmes do aplicativo TodoMovies utilizando Swift.

Captura da tela de detalhe dos filmes. Na imagem, temos uma foto em escala de cinza do rosto do ator Johnny Depp, e os detalhes do filme O melhor de Johnny Depp

📝 Especificação

Para realizar este projeto, recebi instruções sobre os requisitos e também dicas que auxiliaram bastante no processo. Abaixo, a lista com todas as informações:

☑️ Requisitos

  1. Usar algum design pattern: MVP, MVVM, MVVM-C, VIPER
  2. As informações do filme devem vir do endpoint getMovieDetails
  3. Usar o vote_count que retorna da API para apresentar o número de likes
  4. Substituir o "3 of 10 watched" por " views", utilizando o valor retornado da API e mantendo algum ícone ao lado
  5. O ícone de like(coração) deve mudar quando clicado, alternando entre preenchido e vazop.
  6. Deve haver uma lista de filmes abaixo dos detalhes
  7. O app deve ser desenvolvido utilizando a linguagemm Swift
  8. O projeto deve ser disponibilizado em um repositório aberto no GitHub. Envie a URL assim que possível

💡 Dicas

  1. Você pode usar o Alamofire para facilitar a sua vida (é apenas uma dica, não é obrigatório)
  2. A lista de filmes abaixo do detalhe do filme pode ser o retorno da getSimilarMovies
  3. Gostamos de Rx
  4. Testes são sempre bem-vindos
  5. Vamos olhar tudo, inclusive commits, branches, organização de pastas, etc.
  6. Um código limpo e organizado pode ser mais importante do que o app todo pronto.
  7. Vamos ler seu README, caso você queira deixar alguma mensagem para nós

📱 O projeto

Abaixo, temos o resultado final da interface da aplicação:

Captura de tela da aplicação contida neste projeto. No topo, a capa do filme 'Ready Player One'. Logo em seguida, seu título. Abaixo do título temos um ícone de coração com o contador de likes, e, ao lado, um ícone de fogo e o indicador de popularidade. Abaixo, uma lista de filmes relacionados.

Todos os requisitos foram atendidos na implementação deste projeto. O design pattern escolhido foi o MVP, os dados do filme e a lista de filmes recomendados são obtidos nos endpoints da API.

Para comunicação com a API, escolhi utilizar a biblioteca Alamofire, e implementei serviços para cada entidade(Filme e Gênero). Utilizei RxSwift nos serviços, com cada método retornando uma Observable com o tipo do seu retorno. Cada serviço foi construído como um Singleton, sem precisar criar uma instância para utilizá-lo.

⬇️ Como baixar e executar

Primeiramente, é necessário clonar o repositório. Certifique-se de quê você tem o Git instalado na sua máquina. Para obter o código-fonte, você pode utilizar o comando abaixo:

$ git clone https://github.com/rychillie/desafio-mobile2you

Feito isso, você deve abrir o projeto utilizando o Xcode.

Para conseguir construir e executar a aplicação é necessário configurar uma variável de ambiente no Xcode. Na parte superior, ao lado do nome do dispositivo simulador, clique em Mobile2You > Edit Scheme, conforme o exemplo abaixo:

Captura de tela do botão de Selecção de Esquema do XCode

Captura de tela do botão de edição de Esquema do XCode

Feito isso, uma janela irá se abrir. Certifique-se que, na lateral esquerda, a opção "Build" está selecionada. Na parte de "Environment Variables", clique no botão "+" e, no campo de nome, coloque "API_KEY", e, no campo de valor, insira a sua chave da API TheMovieDB. Para obter sua chave, clique aqui.

Captura da tela de edição de Scheme do XCode

Agora que a chave está configurada, basta executar a aplicação clicando no botão de Run:

Captura de tela do botão do botão de Run do XCode

E então a aplicação será executada na sua máquina.

🧾 Considerações

Desenvolver este projeto foi um desafio e tanto, pude aproveitar muito do conhecimento de logica que venho aprendendo e coisas simples como criação de interface com SWIFTUI.

Minha maior dificuldade tenho que dizer que foi relacionar Generos de filmes similares a suas respectivas ID's. Uma coisa que gostaria de ter feito, porem por falta de conhecimento é um efeito de Parallax no banner que quando feito scroll ele fica no fundo da listagem de filmes similares.

Devo comentar que não utilizei nenhum pacote no projeto pela falta de pratica com tais, pretendo agora com mais tempo ir conhecendo e quem sabe melhorando o código da aplicação.

Pretendo realizar updates, afim de evoluir e continuar praticando como sempre.

Agradeço a oportunidade de participar deste desafio! Quaisquer dúvidas, estou à disposição!

You might also like...
A sliding Sheet from the bottom of the Screen with 3 States build with SwiftUI.
A sliding Sheet from the bottom of the Screen with 3 States build with SwiftUI.

BottomSheet A sliding Sheet from the bottom of the Screen with 3 States build with SwiftUI. Why There have been many different attempts to recreate th

SwiftUI mirroring of Instagram app Home screen
SwiftUI mirroring of Instagram app Home screen

Instasoup Is a quick code excercise, where I wanted to do fast prototaping of the Instagram like home view screen in #SwiftUI Check the source code an

A realistic reflective shimmer to SwiftUI Views that uses device orientation. Position any View relative to device orientation to appear as if through a window or reflected by the screen.
A realistic reflective shimmer to SwiftUI Views that uses device orientation. Position any View relative to device orientation to appear as if through a window or reflected by the screen.

A 3d rotation effect that uses Core Motion to allow SwiftUI views to appear projected in a specific direction and distance relative to the device in r

Food App Onboarding screen made with SwiftUI
Food App Onboarding screen made with SwiftUI

OnBoardSwiftUI-Food Food App Onboarding screen made with SwiftUI. App Details Lottie Files are used for Animations. TabView is used for Screen selecti

SnackBar that responds to the keyboard and shows a message at the bottom of the screen.
SnackBar that responds to the keyboard and shows a message at the bottom of the screen.

DGSnackBar Requirements Installation Usage Properties DGSnackBar SnackBar that responds to the keyboard and shows a message at the bottom of the scree

Show off your GitHub contributions from your lock screen 📱
Show off your GitHub contributions from your lock screen 📱

GitHubContributionsiOS V2 NOTICE: V2 is published. It is a complete rewrite using SwiftUI and Catalyst. Source code are now hosted on the version/2.x

macOS application written in SwiftUI that downloads installer pkgs for the Install macOS Big Sur application.
macOS application written in SwiftUI that downloads installer pkgs for the Install macOS Big Sur application.

Download Full Installer This is a Swift UI implementation of my fetch-installer-pkg script. It will list the full macOS Big Sur (and later) installer

iOS mobile development using Swift - Online Shopping Application
iOS mobile development using Swift - Online Shopping Application

iOS mobile development using Swift - Online Shopping Application - yr4_sem1 This is an application developed as an individual project for Mobile Appli

iOS Open Source Application written in Swift. App to manage borrowed books at UFRGS using SABI.
iOS Open Source Application written in Swift. App to manage borrowed books at UFRGS using SABI.

RenovaLivrosUFRGS iOS Open Source Application written in Swift. App to manage borrowed books at UFRGS using SABI. App in portuguese, code and comments

Owner
Rychillie
Live Coder at @he4rt , Developer, Content Creator, Dreamer.
Rychillie
This application was created as a practice and shows a simply VIPER master-detail application.

MARVEL UNIVERSE CHARACTERS This application was created as a practice and shows a simply VIPER master-detail application. Main screen shows a list of

Daniel Moraleda 0 Nov 15, 2021
Forecast App is an ios application built on top of omdb movie api for batman lovers to see their favorite batman movies

Catbon-Movie-App Forecast App is an ios application built on top of omdb movie api for batman lovers to see their favorite batman movies, users can al

GuruKing 0 Dec 6, 2021
Mahmoud-Abdelwahab 5 Nov 23, 2022
SwiftUI movies list using The Movie Database (TMDB) API

MyMoviesList About MyMovieList is an application that uses The Movie Database (TMDB) API and is built with SwiftUI. It demo of some SwiftUI (& Combine

Arnaud 1 Dec 5, 2021
This is a repository with an app that shows a list of posts and where you can access the detail of each of them

PostsApp This is a repository with an app that shows a list of posts and where you can access the detail of each of them Dependencies You need to inst

Patricia Zambrano 1 Jun 21, 2022
A fluent Collapsing header view like iOS Contacts detail and Weather App

FluentCollapsingHeaderView A Collapse Header View like iOS Weather App Credits FluentCollapsingHeaderView is owned and maintained by the Seyed Samad G

Seyed Samad Gholamzadeh 2 May 26, 2022
Movie Database app made with SwiftUI and UIKit

HW4_DogukaanKilicarslan Movie Data Base App made with SwiftUI Movie Database app made with SwiftUI Preview Movie Data Base App : Star Wars Characters

null 1 Oct 20, 2021
Simple Login Screen Project using Swift UI.

Simple Login Screen Simple Login Screen Project using Swift UI. Jump to: Prerequisites: Tutorial uploading XCode project on Github Some Xcode Swift UI

Krystal Zhang 0 Oct 2, 2022
Red Torch is a very very (very) simple iOS app that allows you to have a red torch using your screen.

RED Torch Red Torch is a very very (very) simple iOS app that allows you to have a red torch using your screen. The App is based on storyboard, so the

Jakub 0 Jan 1, 2022
AllAboutTheWord - A single screen iOS app developed using swiftUI

All-About-The-Word Introduction This is a single screen iOS app developed using

null 7 Dec 22, 2022