$30 off During Our Annual Pro Sale. View Details »

Rails Girls Varna 2.0 August 2016

Rails Girls Varna 2.0 August 2016

Slides for the Rails Girls Varna 1.0 event, which took place on 14th August 2016. http://railsgirls.com/varna-2016-august

Dimitar Dimitrov

August 14, 2016
Tweet

More Decks by Dimitar Dimitrov

Other Decks in Programming

Transcript

  1. Rails Girls Varna 2.0
    14 август 2016 г.

    View Slide

  2. Здравейте!

    View Slide

  3. Rails Girls!

    View Slide

  4. Rails Girls!
    • Тръгва от Финландия, инициирано от две дами

    View Slide

  5. Rails Girls!
    • Тръгва от Финландия, инициирано от две дами
    • Първото събитие е ноември 2010 г.

    View Slide

  6. Rails Girls!
    • Тръгва от Финландия, инициирано от две дами
    • Първото събитие е ноември 2010 г.
    • Над 100 са заявилите участие

    View Slide

  7. Rails Girls!
    • Тръгва от Финландия, инициирано от две дами
    • Първото събитие е ноември 2010 г.
    • Над 100 са заявилите участие
    • Много събития по целия свят след това

    View Slide

  8. http://map.railsgirls.com/

    View Slide

  9. Rails Girls у нас - 9!

    View Slide

  10. View Slide

  11. Спонсори

    View Slide

  12. View Slide

  13. Важните неща

    View Slide

  14. View Slide

  15. View Slide

  16. WiFi & WC

    View Slide

  17. WiFi & WC
    1. Мрежа RailsGirls (без парола)

    View Slide

  18. WiFi & WC
    1. Мрежа RailsGirls (без парола)
    2. Ползвайте 5 GHz, ако я виждате

    View Slide

  19. WiFi & WC
    1. Мрежа RailsGirls (без парола)
    2. Ползвайте 5 GHz, ако я виждате
    3. Не закачайте телефоните си

    View Slide

  20. WiFi & WC
    1. Мрежа RailsGirls (без парола)
    2. Ползвайте 5 GHz, ако я виждате
    3. Не закачайте телефоните си
    4. Изключете си Dropbox, Skype,
    uTorrent и подобни

    View Slide

  21. #RailsGirlsVarna

    View Slide

  22. View Slide

  23. View Slide

  24. Днес

    View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. Цел

    View Slide

  31. Да сглобим нещо!

    View Slide

  32. Да запалим > Да научим

    View Slide

  33. Как?

    View Slide

  34. View Slide

  35. Не бързайте; има време.

    View Slide

  36. Не бързайте; има време.
    Задавайте въпроси. Много.

    View Slide

  37. Не бързайте; има време.
    Задавайте въпроси. Много.
    Обяснявайте си неща
    взаимно.

    View Slide

  38. Не бързайте; има време.
    Задавайте въпроси. Много.
    Обяснявайте си неща
    взаимно.
    Бъдете максимално
    непредубедени.

    View Slide

  39. Не бързайте; има време.
    Задавайте въпроси. Много.
    Обяснявайте си неща
    взаимно.
    Бъдете максимално
    непредубедени.
    Забавлявайте се :)

    View Slide

  40. Записки?

    View Slide

  41. Записки?
    • Ще ви изпратим презентацията

    View Slide

  42. Записки?
    • Ще ви изпратим презентацията
    • Ще ви засипем с линкове и напътствия

    View Slide

  43. Записки?
    • Ще ви изпратим презентацията
    • Ще ви засипем с линкове и напътствия
    • Записвайте си въпроси, термини, неща за
    обяснение по-късно, интересни моменти

    View Slide

  44. Записки?
    • Ще ви изпратим презентацията
    • Ще ви засипем с линкове и напътствия
    • Записвайте си въпроси, термини, неща за
    обяснение по-късно, интересни моменти
    • Винаги може да питате инструктора си
    или нас за нещо

    View Slide

  45. Термини

    View Slide

  46. Термини
    • Ще има много, които няма да знаете.

    View Slide

  47. Термини
    • Ще има много, които няма да знаете.
    • Питайте за всички. Трябва ви само груба
    представа кое какво е. Не е нужно да
    помните всичко.

    View Slide

  48. Термини
    • Ще има много, които няма да знаете.
    • Питайте за всички. Трябва ви само груба
    представа кое какво е. Не е нужно да
    помните всичко.
    • Понякога не се усещаме, когато ползваме
    термини. Помогнете ни.

    View Slide

  49. Програма

    View Slide

  50. View Slide

  51. 1. 10:30 – 13:00 Уъркшоп 1 (инструменти,
    HTML, CSS, основи на програмиирането)

    View Slide

  52. 1. 10:30 – 13:00 Уъркшоп 1 (инструменти,
    HTML, CSS, основи на програмиирането)
    2. 13:00 – 13:30 Обяд (тук, от спонсорите)

    View Slide

  53. 1. 10:30 – 13:00 Уъркшоп 1 (инструменти,
    HTML, CSS, основи на програмиирането)
    2. 13:00 – 13:30 Обяд (тук, от спонсорите)
    3. 13:30 – 13:45 Кратка игра и томбола

    View Slide

  54. 1. 10:30 – 13:00 Уъркшоп 1 (инструменти,
    HTML, CSS, основи на програмиирането)
    2. 13:00 – 13:30 Обяд (тук, от спонсорите)
    3. 13:30 – 13:45 Кратка игра и томбола
    4. 13:45 – 16:00 Уъркшоп 2

    View Slide

  55. Що е то
    програмиране?

    View Slide

  56. https://twitter.com/fjsteele/status/434249935316615168

    View Slide

  57. View Slide

  58. Ruby?

    View Slide

  59. View Slide

  60. Език за
    програмиране

    View Slide

  61. Език за програмиране
    =
    Купчина правила, с
    които управлявате
    компютър

    View Slide

  62. Сходно на естествените
    езици, но с (доста)
    по-стриктни правила.

    View Slide

  63. Не е трудно да се
    научите.

    View Slide

  64. Езици за програмиране

    View Slide

  65. Езици за програмиране
    • Ruby (Руби) е език за програмиране

    View Slide

  66. Езици за програмиране
    • Ruby (Руби) е език за програмиране
    • Има и други (C#, Java, C++, PHP,
    JavaScript, Clojure, Scheme и още 2783...)

    View Slide

  67. Езици за програмиране
    • Ruby (Руби) е език за програмиране
    • Има и други (C#, Java, C++, PHP,
    JavaScript, Clojure, Scheme и още 2783...)
    • Можем да ползваме произволен* език,
    за да правим това, което ще правим
    днес

    View Slide

  68. Езици за програмиране
    • Ruby (Руби) е език за програмиране
    • Има и други (C#, Java, C++, PHP,
    JavaScript, Clojure, Scheme и още 2783...)
    • Можем да ползваме произволен* език,
    за да правим това, което ще правим
    днес
    • Ruby е готин и ще ползваме него

    View Slide

  69. Езици за програмиране
    • Ruby (Руби) е език за програмиране
    • Има и други (C#, Java, C++, PHP,
    JavaScript, Clojure, Scheme и още 2783...)
    • Можем да ползваме произволен* език,
    за да правим това, което ще правим
    днес
    • Ruby е готин и ще ползваме него
    • Може да си изкарвате прехраната с

    View Slide

  70. Нещата, които ще
    научите, важат и за
    други езици.

    View Slide

  71. Приложението
    (приложение ≈ уебсайт)

    View Slide

  72. Уебсайт?

    View Slide

  73. Уебсайт?
    Мътно понятие…

    View Slide

  74. http://bit.ly/about-web

    View Slide

  75. Речник

    View Slide

  76. Речник
    • Сървър – компютър, закачен за интернет

    View Slide

  77. Речник
    • Сървър – компютър, закачен за интернет
    • (Уеб) сървър – помощна програма

    View Slide

  78. Речник
    • Сървър – компютър, закачен за интернет
    • (Уеб) сървър – помощна програма
    • Клиент – браузърът на потребителя

    View Slide

  79. Речник
    • Сървър – компютър, закачен за интернет
    • (Уеб) сървър – помощна програма
    • Клиент – браузърът на потребителя
    • Интернет – компютри, свързани един с
    друг

    View Slide

  80. Речник
    • Сървър – компютър, закачен за интернет
    • (Уеб) сървър – помощна програма
    • Клиент – браузърът на потребителя
    • Интернет – компютри, свързани един с
    друг
    • Уебсайт – HTML + CSS + картинки + …,
    преточващи се от сървъра към клиента

    View Slide

  81. Статични vs. динамични
    сайтове

    View Slide

  82. Статични vs. динамични
    сайтове
    • Статични — едно и също, во веки веков

    View Slide

  83. Статични vs. динамични
    сайтове
    • Статични — едно и също, во веки веков
    • Динамични — шаблони, попълвани с
    данни; може и да има интеракция с
    потребител, може и да няма

    View Slide

  84. Статични vs. динамични
    сайтове
    • Статични — едно и също, во веки веков
    • Динамични — шаблони, попълвани с
    данни; може и да има интеракция с
    потребител, може и да няма
    • Приложението, което ще правим днес,
    попада във втората категория

    View Slide

  85. Статични vs. динамични
    сайтове
    • Статични — едно и също, во веки веков
    • Динамични — шаблони, попълвани с
    данни; може и да има интеракция с
    потребител, може и да няма
    • Приложението, което ще правим днес,
    попада във втората категория
    • И за двата вида имаме нужда от
    помощната програма “сървър” и от
    компютър, на който тя да работи

    View Slide

  86. Как разработваме сайт?

    View Slide

  87. Как разработваме сайт?
    • Обикновено имаме “локално” копие

    View Slide

  88. Как разработваме сайт?
    • Обикновено имаме “локално” копие
    • Файлове, код, картинки + сървър + БД

    View Slide

  89. Как разработваме сайт?
    • Обикновено имаме “локално” копие
    • Файлове, код, картинки + сървър + БД
    • Редактираме си кода и файловете
    локално

    View Slide

  90. Как разработваме сайт?
    • Обикновено имаме “локално” копие
    • Файлове, код, картинки + сървър + БД
    • Редактираме си кода и файловете
    локално
    • Разглеждаме си промените локално

    View Slide

  91. Как разработваме сайт?
    • Обикновено имаме “локално” копие
    • Файлове, код, картинки + сървър + БД
    • Редактираме си кода и файловете
    локално
    • Разглеждаме си промените локално
    • Когато сме готови, копираме новия
    код, картинки, файлове на реалния
    сървър

    View Slide

  92. Как разработваме сайт?
    • Обикновено имаме “локално” копие
    • Файлове, код, картинки + сървър + БД
    • Редактираме си кода и файловете
    локално
    • Разглеждаме си промените локално
    • Когато сме готови, копираме новия
    код, картинки, файлове на реалния
    сървър

    View Slide

  93. Динамични уеб сайтове

    View Slide

  94. Динамични уеб сайтове
    • Още — приложения (applications, apps)

    View Slide

  95. Динамични уеб сайтове
    • Още — приложения (applications, apps)
    • За тях имаме нужда от “логика” на
    сървър

    View Slide

  96. Динамични уеб сайтове
    • Още — приложения (applications, apps)
    • За тях имаме нужда от “логика” на
    сървър
    • “Логика” = програма, написана на език за
    програмиране

    View Slide

  97. Динамични уеб сайтове
    • Още — приложения (applications, apps)
    • За тях имаме нужда от “логика” на
    сървър
    • “Логика” = програма, написана на език за
    програмиране
    • Ще се забавляваме с това днес,
    използвайки Ruby

    View Slide

  98. Приложение за
    гласуване

    View Slide

  99. View Slide

  100. Sinatra?

    View Slide

  101. Sinatra

    View Slide

  102. Sinatra
    • Sinatra е името на една купчина код
    (“фреймуърк”), която някой е написал вместо
    нас, за да ни улесни в направата на уеб
    приложения

    View Slide

  103. Sinatra
    • Sinatra е името на една купчина код
    (“фреймуърк”), която някой е написал вместо
    нас, за да ни улесни в направата на уеб
    приложения
    • Можем да я ползваме безплатно

    View Slide

  104. Sinatra
    • Sinatra е името на една купчина код
    (“фреймуърк”), която някой е написал вместо
    нас, за да ни улесни в направата на уеб
    приложения
    • Можем да я ползваме безплатно
    • Sinatra има някои неща, вградени в него, вкл.
    и (уеб) сървър

    View Slide

  105. Sinatra
    • Sinatra е името на една купчина код
    (“фреймуърк”), която някой е написал вместо
    нас, за да ни улесни в направата на уеб
    приложения
    • Можем да я ползваме безплатно
    • Sinatra има някои неща, вградени в него, вкл.
    и (уеб) сървър
    • Можем и без Sinatra, но ще се поизпотим
    повече

    View Slide

  106. Раждането
    на едно приложение

    View Slide

  107. Раждането
    на едно приложение
    • Звучи сложно, но не е

    View Slide

  108. Раждането
    на едно приложение
    • Звучи сложно, но не е
    • Най-важното —

    View Slide

  109. Раждането
    на едно приложение
    • Звучи сложно, но не е
    • Най-важното —
    • Започвате с малки стъпки и надграждате на
    итерации

    View Slide

  110. Раждането
    на едно приложение
    • Звучи сложно, но не е
    • Най-важното —
    • Започвате с малки стъпки и надграждате на
    итерации
    • Експериментирате и грешите

    View Slide

  111. Раждането
    на едно приложение
    • Звучи сложно, но не е
    • Най-важното —
    • Започвате с малки стъпки и надграждате на
    итерации
    • Експериментирате и грешите
    • Подобрявате и повтаряте цикъка

    View Slide

  112. View Slide

  113. Show me the code!

    View Slide

  114. Да си изцапаме
    ръцете!

    View Slide

  115. View Slide

  116. Не бързайте.

    View Slide

  117. Не бързайте.
    Задавайте въпроси.

    View Slide

  118. Не бързайте.
    Задавайте въпроси.
    Експериментирайте и грешете.

    View Slide

  119. Не бързайте.
    Задавайте въпроси.
    Експериментирайте и грешете.
    Питайте за термините.

    View Slide

  120. View Slide

  121. View Slide

  122. View Slide

  123. • Опознайте инструментите си — конзола, текстов
    редактор, браузър
    • Поиграйте си с Ruby в irb и с микро-програмки
    • След това HTML + CSS
    • http://bit.ly/railsgirlsvarna2 + http://bit.ly/cheat-rails
    • http://www.sinatrarb.com/intro.html
    • URL-и, HTTP и цикълът на един request
    Уъркшоп 1

    View Slide

  124. ОБЯД!!!!!!!!!!!!!!!!!!!!!!!!!!
    (невъзможно кратък)
    (~1800 секунди)

    View Slide

  125. ห౰

    View Slide

  126. Бенто бокс

    View Slide

  127. Speak Geek.
    Or how to teach the language of web
    Friday, March 23, 12

    View Slide

  128. View Slide

  129. View Slide

  130. 4
    Friday, March 23, 12

    View Slide

  131. HTML
    AJAX
    CSS
    RUBY, PYTHON, PHP, SCALA
    MYSQL,
    MONGODB
    RUBY ON RAILS, DJANGO,
    CAKEPHP, JETTY , LIFT….
    XML
    JAVASCRIPT
    DOM
    UNICORN
    Friday, March 23, 12

    View Slide

  132. Etsy:
    “We use a number of different programming languages (including Matlab!) but
    are primarily a PHP shop. We have a number of databases, some of which
    are MySQL and some of which are PostgreSQL. “
    Friday, March 23, 12

    View Slide

  133. 7
    PHP + Matlab
    MySQL
    PostgeSQL
    Friday, March 23, 12

    View Slide

  134. 8
    Foursquare:
    “Server code is written in scala running on the lift web framework using
    jetty for a webserver. We front everything with nginx, and use HAProxy in
    between.
    MongoDB handles most of our data storage needs (though a bit hasn't been
    migrated off PostgreSQL yet).
    Friday, March 23, 12

    View Slide

  135. 9
    MongoDB and
    PostresSQL
    Nginx + HAProxy
    Lift
    Scala
    Friday, March 23, 12

    View Slide

  136. R
    #1 HTML/CSS
    #2 JQUERY
    #3 Unicorn
    Friday, March 23, 12

    View Slide

  137. HTML CSS
    Friday, March 23, 12

    View Slide

  138. HTML
    AJAX
    CSS
    XML
    JAVASCRIPT
    DOM
    Friday, March 23, 12

    View Slide

  139. UNICORN
    Friday, March 23, 12

    View Slide

  140. R
    #1 PHP
    #2 SaaS
    #3 RoR
    #4 HTML
    #5 MongoDB
    Rules: Figure out the term and place it on the bentobox in
    the right place..
    There might be false friends and doubles.
    Googling allowed!
    You have five minutes – wrong answers will be removed,
    the team with most post-its wins!
    #6 Apache
    #7 CSS
    #8 Django
    #9 MySQL
    #10 nginx
    Friday, March 23, 12

    View Slide

  141. 5 minutes.
    Game on!
    Friday, March 23, 12

    View Slide

  142. HTML
    PHP
    SaaS
    RoR
    MongoDB
    CSS
    Apache
    Django
    nginx
    MySQL
    Friday, March 23, 12

    View Slide

  143. R
    #1 PHP
    #2 SaaS
    #3 RoR
    #4 HTML
    #5 MongoDB
    #6 Apache
    #7 CSS
    #8 Django
    #9 MySQL
    #10 nginx
    Logic. PHP is a very popular language designed to produce
    dynamic Web pages. It goes well with HTML.
    - What makes PHP special?
    - Why it’s so popular?
    No where. Software as a service. Not a technical term - more a
    business/delivery model, in which software is hosted centrally,
    not by the user themselves and they often pay a subscription
    fee. Examples range from Salesforce, Spotify, Google Docs..
    - What other buzzwords are there that are not technical?
    Logic. Ruby on Rails. Sometimes abbreviations might fool
    you!
    Style & structure. Especially structue: HTML is what
    describes the structure and the (static) content of the
    website.
    - What is XHTML? HTML5?
    - Scripting language vs. markup?
    Database. An open source database system. Stores the web
    app data in a little different way than MySQL, making it
    easier and faster for certain types of apps.
    - What are noSQLs? Why is MongoDB so popular?
    Infrastructure. A popular open source HTTP server software.
    Servers can be hardware or software - here we’re focusing on
    the latter. Servers are the piece of software that deliver the
    web page to you.
    - What is HTTP? What is the role of the browser?
    Style and structure. Especially style, designed to describe the
    look of webpages, including elements such as the layout, colors
    and fonts.
    - Why is CSS important when building bigger sites?
    - What is CSS3?
    Logic. A similar framework as Rails is for Ruby, Django is for
    Python.
    - What other examples of popular frameworks are there? For
    Ruby?
    Database. Worlds most popular open source database system,
    used by Facebook, Twitter, Wordpress etc. Well baked into many
    software stacks like LAMP
    - Talk about LAMP and other software stacks
    - Talk a little about open source
    Infrastructure. Pronounced “Engine X”. An open source HTTP
    server. Said to be faster than Apache - in many ways like
    MongoDB is for MySQL.
    - What are proxies?
    - Talk about
    Friday, March 23, 12

    View Slide

  144. Уъркшоп 2
    • http://bit.ly/railsgirlsvarna2 + http://bit.ly/cheat-rails
    • http://www.sinatrarb.com/intro.html
    • Изгледи; шаблони; ERB (embedded Ruby и HTML)
    • Бази от данни – “Big data is when Excel crashes…”
    • Външни библиотеки (gems) и управлението им.

    View Slide

  145. Как да продължим?

    View Slide

  146. Как да продължим?
    1. Продължете да пишете (код)

    View Slide

  147. Как да продължим?
    1. Продължете да пишете (код)
    2. Работете над нещо реално

    View Slide

  148. Как да продължим?
    1. Продължете да пишете (код)
    2. Работете над нещо реално
    3. Поддържайте връзка помежду си

    View Slide

  149. Как да продължим?
    1. Продължете да пишете (код)
    2. Работете над нещо реално
    3. Поддържайте връзка помежду си
    4. Забавлявайте се!

    View Slide

  150. Study групи

    View Slide

  151. View Slide

  152. Study групи
    • Седмични срещи в местния хакерспейс
    • Ще има поне един инструктор
    • Без “домашна” работа
    • Трупаме реални знания чрез практика
    • С начинаещи ще се започва от нулата

    View Slide

  153. Study групи
    • Поне един ден седмично, след 19:30
    • Малки групи - няколко човека
    • Не е фатално, ако понякога изпускате
    • Ако има повече желаещи, ще се измисли
    • Доброволни и безплатни

    View Slide

  154. Study групи
    • Напълно възможно е да се научите
    • Няма тайна – трябва да отделяте време
    • Ще получавате помощ, но трябва да сте
    мотивирани да изкачите планината
    сами

    View Slide

  155. https://www.facebook.com/groups/
    RailsGirlsVarnaStudyGroup/

    View Slide

  156. View Slide

  157. Благодарности

    View Slide

  158. Благодарности
    • На целия организационен екип

    View Slide

  159. Благодарности
    • На целия организационен екип
    • На екипа на VarnaConf, домакините и
    спонсорите и партньорите ни

    View Slide

  160. Благодарности
    • На целия организационен екип
    • На екипа на VarnaConf, домакините и
    спонсорите и партньорите ни
    • На всички инструктори

    View Slide

  161. Благодарности
    • На целия организационен екип
    • На екипа на VarnaConf, домакините и
    спонсорите и партньорите ни
    • На всички инструктори
    • На вас!

    View Slide

  162. Снимка!

    View Slide

  163. View Slide