Fonaments de desenvolupament d'apps

Presentació de la sessió "Estratègies de desenvolupament" de La Comunificadora del 16 de novembre de 2017.

Font a: https://github.com/coopdevs/fonaments_desenvolupament_apps

Transcript

1. Fonaments de desenvolupament d'apps La Comunificadora
2. Pau Pérez Desenvolupador a Coopdevs @prez_pau github.com/sauloperez speakerdeck.com/sauloperez github.com/coopdevs
3. Com funcionen les apps a internet? Photo by Goh Rhy Yan on Unsplash
4. Client/Servidor Photo by Lan Pham on Unsplash
5. Client/Servidor 1. Servidor espera passiu 2. Client envia una petició 3. Client espera la resposta 4. Servidor processa i retorna resposta
6. Frontend Photo by Norbert Levajsics on Unsplash
7. Frontend • Navegador • Interfície d'usuari Photo by Greg Rakozy on Unsplash
8. HTML + CSS = Estil HTML <div class="row header"> <h1>Katuma</h1> <h2 class="slogan">Compra directament a <span>productores agroecològiques de proximitat</span></h2> </div>
9. HTML + CSS = Estil CSS .header { padding: 30px 0 0 50px; } h2 { font-size: 32px; font-weight: 300; margin-bottom: 40px; }
10. Javascript = Comportament if (calculator_select.attr('value') == original_calc_type) { $('.calculator-settings').show(); $('#calculator-settings-warning').hide(); $('.calculator-settings input').prop("disabled", false); } else { $('.calculator-settings').hide(); $('#calculator-settings-warning').show(); $('.calculator-settings input').prop("disabled", true); } }
11. Backend Photo by Dmitry Arslanov on Unsplash
12. Backend • Servidor/s • Lògica de negoci • Dades Photo by Thomas Kvistholt on Unsplash
13. Aplicació Implementa les operacions que permet el producte: • Registrar usuari • Realitzar compra • Localitzar botiga Retorna HTML, CSS, JS
14. Aplicació def create @payment = @order.payments.build(object_params) if @payment.valid? @payment.source = CreditCard.find_by_id(params[:card]) @payment.save end end
15. Base de dades Opera sobre les dades • SELECT • INSERT • UPDATE • DELETE
16. Base de dades SELECT name FROM users WHERE email = ?;
17. I els mòbils què? Photo by Antoine Barrès on Unsplash
18. Navegador App Nativa • HTML + CSS • JavaScript • Tecnologia nativa
19. Aplicació API Implementa les operacions que permet el producte: • Registrar usuari • Realitzar compra • Localitzar botiga Retorna HTML, CSS, JS dades => web API
20. Com es fa tot això?
21. Escrivint codi en _____* * Ruby, JS, PHP, Elixir, Rust, Java, Clojure, Bash, Haskell, C++...
22. No reinventis la roda — Anònim Photo by Alice Achterhof on Unsplash
23. Reusant codi 1. Llibreria 2. Framework
24. Git Sistema distribuit de control de versions • Commits • Branques • Repositoris
25. Github Plataforma de desenvolupament software • Allotjament de repositoris • Revisió del codi • Gestió del projecte • Social coding
26. Anatomia d'un repositori Photo by Nino Liverani on Unsplash
27. Issue
28. Pull Request
29. Merge
30. Fork
31. Exemples RubyMoney/money coopdevs/timeoverflow departurerb/departure/ facebook/react-native discourse/discourse sindresorhus/awesome jondot/awesome-react-native
32. Activitats
33. Analitza un repositori de software Busca un repositori de software que t'interessi i analitza'l. Algunes coses que cal tenir en compte: • Tipus de software: Llibreria, framework o app • Filosofia de l'eina • Dependències i requisits • Com s'instal·la o arrenca • Com s'hi pot contribuir
34. Brief de desenvolupament de software Redacta un brief pel teu projecte o per un que ja existeixi. Pots fer servir la plantilla inclosa als recursos de la sessió.
35. Preguntes Photo by Matthias Heil on Unsplash