Brown Bag - Aplicação mobile de vídeo-chamadas

Talk about a project that consists of a mobile application built in React Native and an API built in Ruby On Rails

Transcript

1. APLICAÇÃO MOBILE VÍDEO CHAMADAS React-native, Rails e Twilio
2. Do que vamos falar? 1. Apresentação dos envolvidos 2. Desafio 3. Ruby on Rails, por que? 4. React-native, por que? 5. Modelagem do banco de dados 6. Autenticação • JWT • Social-login 7. Fuso-horário e as validações 8. Twilio 9. Active Admin 10. Funcionamento 11. Off-topic • Sugestões de open-source 12. Agradecimentos CONTEÚDO
3. OS ENVOLVIDOS Gabriel Belgamo 20 anos Dev front-end Batatais-SP Office Ribeirão Preto Rebeca Rancan Lucas Hiago 21 anos Dev back-end Teresina-PI Office Teresina Dev back-end Goiânia-GO Office Goiânia
4. # DESAFIO Construir uma aplicação mobile de vídeos chamadas rápidas e previamente agendadas.
5. RUBY ON RAILS, POR QUÊ?
6. RUBY ON RAILS, POR QUÊ? Experiência Desenvolvedores back-end com experiência prévia Gems twilio-ruby devise devise-jwt pg search koala Prazo Com essa stack conseguimos produzir uma API de forma rápida e segura
7. REACT NATIVE, POR QUÊ?
10. REACT-NATIVE, POR QUÊ? Experiência Pouco tempo de flutter, mais fluência com JS Bibliotecas react-native-twilio react-native-calendars Prazo Por conta da EXP, com JS seria mais rápido
11. MODELAGEM DO BANCO DE DADOS PostgreSQL Admin e User Availability e Meeting
12. AUTENTICAÇÃO JWT JWT https://jwt.io/ Devise https://github.com/heartcombo/devise Devise-JWT https://github.com/waiting-for-dev/devise-jwt
13. AUTENTICAÇÃO VIA INSTAGRAM
14. AUTENTICAÇÃO VIA FACEBOOK PRINCIPAL PROBLEMA Não é possível utilizar a gem omniauth-facebook com JWT Utilizar a API do Facebook diretamente para fazer a autenticação SOLUÇÃO
15. 02 03 01 graph = Koala::Facebook::API.new(params[:access_token]) graph.get_object('me', fields: %w[name email]) @user = find_or_create_user(user_info) if @user.valid? response.set_header('Authorization', "Bearer #{create_jwt}") render json: user_json(@user), status: :ok else validation_error(@user) end def create_jwt payload = { email: @user.email, username: @user.username } JsonWebToken.encode(payload) end
16. FUSO HORÁRIO OUTROS EU PROBLEMAS :/ • Conversões • Exibição com console.log( ) • Task levou muito tempo Usuário vê horários sempre na timezone configurada
17. A confusão com timezone no JS Se rodar o arquivo com a flag `TZ=UTC` a saída é igual :D Thanks Talysson <3 Estava quebrando os testes
18. PRINCIPAL PROBLEMA Repositório NPM não é mais mantido. (abandonado) SOLUÇÃO Apontar para uma hash de commit específico para evitar inconsistências futuras. react-native-twilio-video-webrtc
19. 01 02 04 03
20. Small Group Room Gem oficial do Twilio Manejo de salas de reunião Sala escolhida: twilio-ruby
21. 02 04 03 grant = Twilio::JWT::AccessToken::VideoGrant.new grant.room = @room.unique_name @room = @client.video.rooms('RMXXXXXXXXXXXXXXXX').fetch @room = @client.video.rooms.create( type: 'group-small', unique_name: 'SmallDailyStandup' ) token = Twilio::JWT::AccessToken.new( ENV['TWILIO_ACCOUNT_SID'], ENV['TWILIO_API_KEY_SID'], ENV['TWILIO_API_KEY_SECRET'], [grant], ttl: 3600, identity: @user.username ) token.to_jwt account_sid = 'AC107069eeab9312d88b5465f3584563a2' oauth_token = 'your_oauth_token' @client = Twilio::REST::Client.new(account_sid, oauth_token) 01
22. { "account_sid": "ACXXXXXXXXXXXXXXXXXXXXX", "date_created": "2015-07-30T20:00:00Z", "date_updated": "2015-07-30T20:00:00Z", "status": "in-progress", "type": "group-small", "sid": "RMXXXXXXXXXXXXXXXXX", "unique_name": "SmallDailyStandup", "max_participants": 10, "duration": 0, "media_region": "us1", "end_time": "2015-07-30T20:00:00Z" } FINALIZAR UMA REUNIÃO EM DETERMINADO HORÁRIO CompleteRoomWorker.perform_in( Meeting_duration.seconds, @room.sid ) @client.video.rooms('RMXXXXXXXXXXXXXXXXXXX') .update(status: 'completed') Sidekiq::Worker
23. ACTIVE ADMIN Motivação Dificuldades https://activeadmin.info/
24. SCREENSHOTS twilio-ruby
25. SUGESTÕES DE OPEN SOURCE twilio-ruby REACT-NATIVE-TWILIO REACT-NATIVE-CALENDARS
26. AGRADECIMENTOS Bruno Castro Helio Júnior Samuel Flores Carlos Lopes