pkwpres

View Github Repository Open presentation in a new window

miastojestnasze

See all presentation from miastojestnasze

pkwpres

0 0

pkwpres

On Github miastojestnasze / pkwpres

Hacktivism

Projekty IT zaangażowane społecznie

Cześć!

Paweł Gawła
Łukasz Fiszer
MJN - stowarzyszenie, warszawski ruch miejski działający na rzecz
  • zwiększenia przejrzystości w działaniach władz
  • lepszego zaangażowanie mieszkanów w życie miasta
  • poprawy jakości przestrzeni publicznych

Co zaprezentujemy?

Case study #1: Wyręczamy PKW

Case study #2: PosprzątajmyReklamy.pl

Podsumowanie

pkw.miastojestnasze.org

W tej prezentacji pokażę Wam jak ważne zbudować solidne podstawy w projekcie, bo dzięki temu udało nam się wprowadzić wiele zmian pod sam koniec.|| W tej aplikacji wyręczyłem PKW. Jeśli pamiętacie, rok temu PKW zaliczyła ogromny fakap. Przez wiele godzin czekaliśmy na wyniki wyborów, i gdy je końcu uzyskaliśmy, okazało się że nie ma wśród nich wyników dla Warszawy. I ten stan rzeczy oficjalnie trwa do dziś. Jeśli wejdzie na stronę pkw i spróbujecie znaleźć Warszawę, to dostaniecie: (screen). Dlatego postanowiliśmy to zmienić. Kolega na drodze informacji publicznej uzyskał dane - w formacie tabelek z excela a ja dostalem zadanie ich zwizualizowania. ’
Na samym początku pokażę Wam wspomnianą aplikację. Możemy w niej wybrać typ wyborów, doprecyzować dla jakiego regionu chcemy... Możemy znaleźć bardziej ogólne statystyki jak frekwencja czy też wyszukać interesującego kandydata.

Założenia początkowe

  • Dwa osobne repozytoria na back-end i front-end
  • Zbudowanie solidnych podstaw
  • Prototypowanie i skończenie aplikacji
  • Optymalizacja
Aplikację stworzyłem w czterech w etapach: najpierw zaprojektowałem bardziej ogólną architekturę, czyli wydzieliłem dwa osobne repozytoria..

Backend

Python + Django Web Framework + PostgreSQL

Aby ułatwić sobie to zadanie, użyłem technologii, którą trochę znałem, czyli Python, Django, Postgresql.

Dlaczego nie mongoDB?

  • Wiele relacji
  • Dużo joinów
  • i wiele innych obliczeń dokonywanych w bazie danych
Domyślam się, że wśród frontowej braci może się pojawić pytanie dlaczego nie użyłem znanego mongoDB? Jest kilka istotnych argumentów za tym

Front-end

Angular + Jade + Stylus

i wieloplikowy gulp

W przypadku frontendu również istotne było zbudowanie solidnych podstaw. Wiązało się to głównie ze stworzeniem zestawu narzędziowego. I to było bardzo bolesne. Często natrafiałem na biblioteki, które nie działy, inne znowu nie lubiły się z resztą stacku... Ale w tym wszystkim był jeden jasny punkt: gulp napisany w wieloplikowym stylu
Tak wygląda typowy gulp. Nie jest najgorszy, ale po kilku miesiącach może tam być niezły śmietnik. Przyznam się że zazwyczaj task runnery pisałem z konieczności, gdyż późniejszy rozwój jest bolesny. Na szczęście jest lepsze wyjście z tej sytuacji 
module.exports = angularTemplates;

function angularTemplates(gulp, plugins) {
  return function() {
   gulp.src('./app/**/*.jade')
    .pipe(plugins.jade())
    .pipe(plugins.angularTemplatecache({
      module: 'wyborySam2014',
      filename: 'templates.min.js'
    }))
    .pipe(plugins.uglify())
    .pipe(gulp.dest('build'))
  }
}


function getTask(task) {
  return require('./gulp_tasks/' + task)(gulp, plugins);
}

gulp.task('angular-templates', getTask('angular-templates'));
Gulp napisany w stylu wieloplikowym jest moim zdaniem całkowitą przeciwnością wspomnianego śmietnika. Zyskujemy tu możliwość łatwej organizacji kodu i jego późniejszego rozwoju. *powiedz co się tam dzieje* Napisanie dobrego gulpa skończyło tworzenie solidnej frontowej podstawy. Później było tylko łatwiej.

Prototypowanie...

I w tym miejscu zaczęła się już bardziej normalna część pracy. |||| Mogę Wam zdradzić tajemnicę, że niemalże do dnia premiery aplikacji nie wiedziałem jak ona będzie wyglądała. Dlatego przydały się solidne podstawy, bo dzięki temu moglem kilka razy radykalnie zmienić design...

... i dopracowywanie aplikacji

... aż w końcu ostatecznie zrobil to Łukasz dzień przed premierą appki

Optymalizacja

  • Caching czasochłonnych obliczeń
  • Ograniczenie liczby requestów do back-endu
  • Gzip
Dokładnie wtedy też zająłem się jej optymalizacją, bo takie rzeczy powinno robić się na końcu. Wykonałem prostych czynności takich jak...
Przyśpieszenie było ogromne. Na pokazanym requescie jest czas oczekiwania na dane z najbardziej czasochłonnego elementu aplikacji: wyników wyborow do rad dzielnic dla całej Warszawy.

Rezultat?

PosprzątajmyReklamy.pl

czyli jak udało się zmienić tzw. Ustawę Krajobrazową

Ustawa Krajobrazowa?

Co to jest i z czym się je?

Obecnie: zalew reklam, słabe prawo, małe kary

Prawo nie reguluje obecności reklam w wielu miejsach. Tam gdzie to robi jest nieskuteczne. Usunięcie nielegalnej reklamy trwa długo, kary są bardzo niskie. Nielegalna reklama opłaca się.

Cel: dać miastom możliwość ustalania reguł i kar

Miasta mogą ustalac własne prawo dot. gdzie i jaka reklama jest dozwolona. Mogą karac za nielegalna reklame

Kartka z kalendarza

2013-2015

2 lata ciężkich prac nad ustawą

marzec 2015

"przepchnięcie" ustawy i głosowanie w Sejmie

Okazuje się, że ustawę zmieniono w ostatniej chwili...

Wyszedł bubel. Ostatni ratunek - Senat.

Rozwiązanie

★ PosprzątajmyReklamy.pl ★

Zbudowana w 3 wieczory strona umożliwiająca zaspamowanie senatorów.

Stack techniczny

Klient: HTML + CSS + Bootstrap + jQuery

Serwer: firebase + Node.js + express.js + MongoDB

Usługi: Mandrill, Github

Hosting: Heroku ❤

Wyzwania

Wysyłka maili

Moderacja maili

Wysyłka maili: Mandrill - autentykacja SPF i DKIM, reputacja serwerów, statystyki dotyczące dostarczalności

Rezultat

Kilkadziesiąt organizacji

Dziesiątki artykułów prasowych

13000 wysłanych maili

16 kwietnia:Senat przyjmuje wszystkie nasze poprawki!

Dlaczego Hacktivism jest fajny?

To lepsze od kolejnego frameworku JS

Pożyteczne i potrzebne!

Sława w mediach!

Użycie dowolnych technologii

Wyjście poza rolę programisty

Jak zacząć?

Dołącz do nas! kontakt@miastojestnasze.org

Dołącz do innych inicjatyw, np. Koduj dla Polski

Skontaktuj się z lokalnymi stowarzyszeniami

Dziękujemy!

https://github.com/miastojestnasze

Hacktivism Projekty IT zaangażowane społecznie