{"componentChunkName":"component---src-templates-blog-post-js","path":"/meu-novo-projeto-urbla/","result":{"data":{"markdownRemark":{"fields":{"slug":"/meu-novo-projeto-urbla/"},"frontmatter":{"titulo":"Meu novo projeto -  Urbla","data":"11/07/2020","tag":"Programação","image":{"childImageSharp":{"fluid":{"src":"/static/57f17255cfd0724a6d264001ec583fa1/ad314/capa-urbla.png","base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAABTklEQVQoz5XOy0rDQBQG4DyM4s6YNK1Nk2naZCaJaau2RkS0BS+IKAWViiKVSrEgiE/ga7n2FVyL+I9nkiCCqy4+ziUzf0ZbNt0PvcQkVczDMBmMUk7PdyrjUzMrDUlglD0YVh0r5HcmZlH/Ursli2HRcrFAdLWjOypLK9sBlFVHoFaP4HgxLNtH1Q1hswjlGkeFqFmdsVmIksNxHaR4EDt4CncRuTFMulOhHE2FqMCttI+b0RjPsxf0944x6J9gcjfF6OIWw7OrrE7HM/KIw6NzvPWGkIOJlPv38pT3oNNPHHqAxhoJXOL5bfi8Ay424Iv1bA6o5+EmRNTN9kmSIqLeDdoYiB7ety/x2jlAtbEG1kygsrQGhSieQgfrBS/o5L1foJ75raxX32o0N3levSJD0XjclYF6QTwfQdQ9UcxFhtSiVvpFJMG84v+77x9bRCV6zEgAoAAAAABJRU5ErkJggg==","aspectRatio":2.3684210526315788,"srcSet":"/static/57f17255cfd0724a6d264001ec583fa1/7e7e9/capa-urbla.png 225w,\n/static/57f17255cfd0724a6d264001ec583fa1/62b1f/capa-urbla.png 450w,\n/static/57f17255cfd0724a6d264001ec583fa1/ad314/capa-urbla.png 565w","sizes":"(max-width: 565px) 100vw, 565px"}}}},"html":"<p>Falaa galera! To muito feliz em dizer que estou em fase final do meu mais novo projeto pessoal, a <strong>Urbla</strong>. Nesse post vou te contar a história desse projeto que ainda e muito embrionário, mas já estou cheia de orgulho!!!</p>\n<p><img src=\"https://media.giphy.com/media/3o85xuZs2EDXdulprW/giphy.gif\" alt=\"https://media.giphy.com/media/3o85xuZs2EDXdulprW/giphy.gif\"></p>\n<p>Vou te contar tudo que deu certo, tudo que deu errado, tecnologias e problemas no meio do caminho 😅 e claro como finalizei o back-end em 1 semana.</p>\n<h1>Início de tudo.</h1>\n<p>Antes de irmos para parte técnica vamos entender o por que eu criei a Urbla...</p>\n<p>Em meados de 2017 eu estudava inglês utilizando um aplicativo chamado <a href=\"https://apps.ankiweb.net/\">anki</a>, um aplicativo que facilita a lembrança das coisas através de flashcards. E eu estudava no período do caminho de faculdade / casa / trabalho.</p>\n<p>E esse foi o melhor método pra min. Eu sai do completo zero para um intermediário, de começo eu não entendia muita coisa, mas colocava novas frases no aplicativo <strong>todos os dias e estudava todos os dias!</strong></p>\n<p><img src=\"https://media.giphy.com/media/4Z5xa7Y9RWlXfaFb5o/giphy.gif\" alt=\"https://media.giphy.com/media/4Z5xa7Y9RWlXfaFb5o/giphy.gif\"></p>\n<p>Bom voltando para 2020 eu estava muito focada em estudar inglês! Estava em busca de conversação, fui atras do cambly, italki, procurei ate uma antiga professora. Mas o dollar alto, e a pandemia, acabei deixando isso de lado. E resolvi retornar meu estudos com os flashcards!</p>\n<p>Fui instalar o anki no meu celular e vi que agora não tem mais o free ☹️ (apenas para IOS)</p>\n<p>Então meio que esqueci da ideia de voltar a estudar inglês durante um tempo.</p>\n<p>E durante esse tempo já que tudo estava dando errado para eu voltar a estudar inglês eu comecei a pesquisar/estudar coisas da minha área, pesquisando ideias para blog essas coisas. E nesse momento comecei a ficar de olho no typescript, foi quando caiu minha ficha que <strong>nunca</strong> tinha utilizado, pois bem...</p>\n<p>Em um belo dia, minha irmã veio me perguntar se eu voltei a estudar inglês. Eu fiquei olhando para ela... E pensei....</p>\n<blockquote>\n<p>Por que eu não desenvolvo meu próprio 'anki' com typescript ?</p>\n</blockquote>\n<p>Bom séria o projeto perfeito para estudar typescript. Um projeto pequeno que consiga terminar em pouco tempo.</p>\n<p>Foi ai que surgiu a ideia da urbla! Um aplicativo de flashcards para auxiliar estudantes a aprender algo novo como eu ^^</p>\n<h1>Estudo de mercado</h1>\n<p>Foi ai que minha jornada começou para entender como já é os aplicativos flashcards, pois já e um mercado muito bem consolidado e gostaria de saber se mais pessoas utilizavam esse método de estudos, pesquisei em várias plataformas, li diversos comentarios apple store e google play, installei diversos aplicativos para entender o que a urbla teria de funcionalidade, como ela séria e utilizar como inspiração os 'concorrentes'.</p>\n<p>E nesse momento eu parei e pensei</p>\n<blockquote>\n<p>Cara olha esse mercado gigantesco, se eu fizer vai ser só mais um.</p>\n</blockquote>\n<p>Desliguei o pc naquele dia e desisti da ideia.</p>\n<p><img src=\"https://media.giphy.com/media/VJBd91kUU5FJtcDUvL/giphy.gif\" alt=\"https://media.giphy.com/media/VJBd91kUU5FJtcDUvL/giphy.gif\"></p>\n<p>Mas no dia seguinte segui o baile, acordei preparei meu café da manhã e já estava pronta para trabalhar, liguei meu pc, e coloquei no youtube para ouvir uma musica antes da daily, e foi nesse momento que o youtube me recomendou o vídeo do <a href=\"https://www.youtube.com/c/Programadorbr/videos\">programador br</a> de <a href=\"https://www.youtube.com/watch?v=aw6qSf-pg5w\">3 Apps \"ridículos\" que faturam mais de 10 mil dólares</a></p>\n<p>Ai eu fiquei com uma pulguinha atras da orelha, e olhei o vídeo... Enfim não vou me estender muito. Mas aquele vídeo mudou minha percepeção de criar <strong>algo e ser só mais um</strong>. Foi nesse momento que revivi a urbla.</p>\n<p>No mesmo dia apos o expediente peguei um papel e uma caneta e anotei como eu gostaria que fosse a urbla, comecei a estudar sobre métodos de estudos no formato de repetição foi quando conheci o <a href=\"https://en.wikipedia.org/wiki/Leitner_system#:~:text=The%20Leitner%20system%20is%20a,are%20reviewed%20at%20increasing%20intervals.\">Leitner system</a></p>\n<blockquote>\n<p>O sistema Leitner é um método amplamente usado para usar eficientemente cartões de memória flash que foi proposto pelo jornalista científico alemão Sebastian Leitner na década de 1970. É uma implementação simples do princípio da repetição espaçada , em que os cartões são revisados em intervalos crescentes.</p>\n</blockquote>\n<p>Showw!!</p>\n<p>A partir desse momento já tinha definido a ideia, validado o mercado (nesse momento nem pensava em tecnologia) e era a hora de por a mão na massa!!!!</p>\n<p><img src=\"https://media.giphy.com/media/Xbn8ZbO95YeOJQtJz7/giphy.gif\" alt=\"https://media.giphy.com/media/Xbn8ZbO95YeOJQtJz7/giphy.gif\"></p>\n<h1>Usar typescript ou não?</h1>\n<p>Depois que fiz todo levantamento de funcionalidades, chegou grande momento de criar o projeto, já estava muito claro para min que iria utilizar node, mas não sabia qual banco escolher e eu pensei muuuuuuuuuuuuuito se compensaria utilizar typescrirpt ou não , já que e um projeto que iria tocar sozinha. Li diversos artigos, ouvi vários podcasts. E por fim decidi utilizar typescript e ver como ele funciona até para aprender mesmo.</p>\n<p>Por incrivel que pareça os 2 primeiros dias pra min foi de quase desistencia, muita raiva, não sabia se estava fazendo tudo no padrão certo, se estava configurado certo, mas segui o baile mesmo assim.</p>\n<p>Terminei ele em uma semana, de segunda a quinta trabalhava em cima do projeto cerca de 3h o dia, acordava as 05:50 da manhã por que sou mil vezes mais produtiva de manhã (não quer dizer que foi fácil rsrsrs) e logo depois começava meu expediente na empresa.</p>\n<p>Na sexta-feira do dia 08/06/2020, eu pensei</p>\n<blockquote>\n<p>Por que não estudei typescript antes?</p>\n</blockquote>\n<p>Mas esse ponto e motivo para um outro post...</p>\n<h1>Prototipação</h1>\n<p>Back-end feito, agora era o momento de prototipar, minha ideia era terminar o front em 3 semanas no máximo.... Mas nem tudo são flores.</p>\n<p>Já era hora de ir para prototipação, abri o adobeXD e pensei.... Quer saber, nunca fiz nada com <a href=\"https://www.figma.com/\">figma</a> , vou tentar mecher com ele.</p>\n<p>E comecei a desenhar a tela da urbla, como eu imaginaria (mundo perfeito né rsrs ), eu desenhava a tela e já imaginava esse app na loja ❤️</p>\n<p>Bom finalizei meu prototipo, se não me engano foi 2 dias (naquele mesmo esquema do back-end, trabalhava no periodo da manha cerca de 3h o dia) Gostei muito da experiencia de trabalhar com o figma. Segue abaixo um vídeozinho que fiz para explicar a ídeia.</p>\n<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//Ysd4WvT5Mgk' frameborder='0' allowfullscreen></iframe></div>\n<p>Como eu disse na prototipação e tudo as mil maravilhas, produto 100% completo. Mas já sabia que no final de tudo o que importa realmente e o <strong>MVP não o produto completo.</strong></p>\n<h1>Flutter ou React Native?</h1>\n<p>Já que era um projeto novo fiz esse questionamento ... Flutter ou React Native, e lá vai eu para mais pesquisas a respeito do flutter ou RN, li diversos, artigos, vídeos no youtube, e optei por desenvolver em RN e CALMA, vou explicar para você por que fiz essa escolha.</p>\n<p><img src=\"https://media.giphy.com/media/3o7527pa7qs9kCG78A/giphy.gif\" alt=\"https://media.giphy.com/media/3o7527pa7qs9kCG78A/giphy.gif\"></p>\n<p>Escolhi React Native, por que eu não sei absolutamente nada sobre flutter e dart eu teria que perder alguns dias para aprender como funciona dart, e infelizmente eu queria que a urbla fosse um projeto que terminasse rápido e naquele momento não estáva disposta a enfrentar a curva de aprendizado e como eu trabalho com React, seria mais facil para min. Mas ainda estou pensando em qual projeto desenvolver em flutter para aprender de verdade.</p>\n<p>Stack front: React Native + hooks = TOPPPPPP.</p>\n<p>Okay tecnologia em mãos! BORA CODAR O APP.</p>\n<p><img src=\"https://media.giphy.com/media/xT9Igg6mMOpkpUIopi/giphy.gif\" alt=\"https://media.giphy.com/media/xT9Igg6mMOpkpUIopi/giphy.gif\"></p>\n<h1>Problemas e mais problemas...</h1>\n<p>No meio do desenvolvimento do aplicativo, tive alguns problemas em que precisei parar por alguns dias. Mas nesse meio tempo estava reformando meu quarto e eu inventei de fazer a reforma do quarto sozinha</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 720px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 177.91666666666669%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAkABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAMBAgQF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAQIA/9oADAMBAAIQAxAAAAHq1iktRJh2ScmvSIAWsHQBNf/EABsQAQEAAwADAAAAAAAAAAAAAAEAAgMREBIh/9oACAEBAAEFApfK3btnt4r9y2BbfVQNhEN//8QAFxEAAwEAAAAAAAAAAAAAAAAAAAEQEv/aAAgBAwEBPwGJGXf/xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPwFr/8QAGhAAAgIDAAAAAAAAAAAAAAAAAREAEAIgMf/aAAgBAQAGPwLdW8exko2Z/8QAHRAAAwACAgMAAAAAAAAAAAAAAAERITEQYUFRcf/aAAgBAQABPyHgbyXieRoLbOUShs2LJTLAoeKM6m0e3YxP6P/aAAwDAQACAAMAAAAQ5zgxjD//xAAZEQEBAQADAAAAAAAAAAAAAAABABEQMUH/2gAIAQMBAT8Q4VN8lHSFyOr/xAAYEQEAAwEAAAAAAAAAAAAAAAABABAxEf/aAAgBAgEBPxCuwJtOz//EAB8QAAICAQQDAAAAAAAAAAAAAAERACExQVFh8HGBkf/aAAgBAQABPxAGogQbTHiUG4vKFUdZjdirXfogj2ABk3iAvUhZgU0TOhO3mU9nDkjWINgItY7tPqBXEDgNOZ//2Q=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image lazyload\"\n        alt=\"0a5b9da3 8009 4c01 9c1f fe2640f7f78b\"\n        title=\"0a5b9da3 8009 4c01 9c1f fe2640f7f78b\"\n        data-src=\"/static/1a152b1fdd6b0828c73b6cb713a978f3/80e3c/0a5b9da3-8009-4c01-9c1f-fe2640f7f78b.jpg\"\n        data-srcset=\"/static/1a152b1fdd6b0828c73b6cb713a978f3/09b79/0a5b9da3-8009-4c01-9c1f-fe2640f7f78b.jpg 240w,\n/static/1a152b1fdd6b0828c73b6cb713a978f3/7cc5e/0a5b9da3-8009-4c01-9c1f-fe2640f7f78b.jpg 480w,\n/static/1a152b1fdd6b0828c73b6cb713a978f3/80e3c/0a5b9da3-8009-4c01-9c1f-fe2640f7f78b.jpg 720w\"\n        sizes=\"(max-width: 720px) 100vw, 720px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Estava melhorando meu setup, troquei de monitor e comprei um novo teclado!</p>\n<p>E complicado quando a gente para algo e depois de alguns dias retorna... Mas com novos 'instrumentos' de trabalho e quarto reformado kk eu estava e muuuuito empolgada!!</p>\n<p><img src=\"https://media.giphy.com/media/b5LTssxCLpvVe/giphy.gif\" alt=\"https://media.giphy.com/media/b5LTssxCLpvVe/giphy.gif\"></p>\n<p>No aplicativo o que eu mais estava empolgada para fazer era o swipe (igual do tinder). E isso me deu uma dor de cabeça .... Você nem imagina, mas a gente sabe que no final <strong>tudo da certo</strong>.</p>\n<p>Graças ao youtube, achei um <a href=\"https://www.youtube.com/watch?v=MDAdY2LkP_U\">exemplo</a> de como fazer um swipe , sem utilizar lib de terceiro. Mudei algumas coisas para se adaptar a minha realidade. Quem sabe em breve faço um post ensinando isso ;) <strong>me cobraa</strong>.</p>\n<h1>Quase lá......</h1>\n<p>Nessa ultima semana, resolvi compartilhar esse projeto, ainda infelizmente não está 100% pronto e ainda não está na loja, mas acho que para um mvp está ok!</p>\n<p>Quando lançar vou fazer um post a respeito e claro compartilhar lá no instagram @lorenakauaneph me segue lá!!</p>\n<h1>Conclusão</h1>\n<p>Foi isso!</p>\n<p>Foi um projeto, muito trabalhoso, mas gostoso de desenvolver. Aprendi muitas coisas, uma das minhas principais liçoes que aprendi foi::: Preciso aprender TS do jeito certo, conheci um cara fera em TS e já comprei o curso do <a href=\"https://www.youtube.com/channel/UCabelTt5YHot17aKb19VRNA\">Rodrigo Manguinho</a>. Em breve posso falar mais a respeito!</p>\n<p>E isso galera, o vídeo completo do app, está aqui!</p>\n<p>Até o próximo post!</p>\n<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//HDmo-uDJhhg' frameborder='0' allowfullscreen></iframe></div>","timeToRead":6}},"pageContext":{"slug":"/meu-novo-projeto-urbla/","previousPost":{"fields":{"slug":"/5-youtuber-que-mudaram-meu-mindset-sobre-tecnologia/"},"frontmatter":{"templateKey":"blog-post","data":"27 de Julho de 2020","tag":"Carreira","titulo":"5 Youtubers que mudaram meu mindset sobre tecnologia.","locale":"pt"},"timeToRead":2},"nextPost":{"fields":{"slug":"/tudo-o-que-voce-precisa-saber-para-escrever-um-bom-readme/"},"frontmatter":{"templateKey":"blog-post","data":"25 de Junho de 2020","tag":"Programação","titulo":"Tudo o que você precisa saber para escrever um bom readme!","locale":"pt"},"timeToRead":3},"locale":"pt"}}}