Tapaaminen.net uudistui

Oma projektini Tapaaminen.net sai uutta väriä pintaan. Uudistuipa se käytännössä kokonaan myös koodiltaankin. Tapaaminen.net on nyt Laravelin päälle rakennettu ja avointa lähdekoodia.

Lähdekoodi on tosiaan avoimesti saatavilla Githubista ja sitä kehitetään jatkuvasti eteenpäin – tällä hetkellä lähinnä omin voimin.

Uudistuksia on kasa päin jo itsessään tuolla taustalla. Näkyvin uudistus on nimenomaan ulkoasu, mutta isona ominaisuutena on myös käyttäjätilit saapuneet. Sivustoa voi käyttää ilman käyttäjätiliä kuten aina ennenkin.

Vanhat tapaamisen linkit menee vanha.tapaaminen.net sivustolle, joten nekin toimii aivan kuten ennenkin.

Taustalla tapahtuu paljonkin. Ensinnäkin virheistä tulee suoraan ilmoituksia Bugsnagin kautta minulle ja siitä issue Githubiin – näppärää. Uusi sähköposti tukea varten on avattu: apua@tapaaminen.net. Samoin sivulla on tukea varten myös livechat.

Uusia ominaisuuksia tehdään lähipäivinä vielä lisää. Ihan kaikki vanhan järjestelmän ominaisuudet ei vielä ole tulleet, mutta ne tulevat lähiaikoina.

Suunnitelmissa on myös tuoda kauan kaivattu aikojen määrän valinta sekä aikojen lisäys ja poisto jälkikäteen. Samoin koodia tullaan siistimään ja optimoimaan sekä testejä kirjoittelemaan.

Kommentit ovat aina tervetulleita ja kysymyksiä saa esittää.

Simppelit napit SoMea varten

Kirjoittelin tässä koodia ja en löytänyt sopivaa lisäosaa WordPressiin, jolla saisin hyvin simppelit sosiaalisen median jakonapit näkyviin siihen kohtaan mihin haluan ne. En halunnut mitään hienoja laskureita tai mitään vaan yksinkertaisen ikonin, jota klikkaamalla voi jakaa artikkelin. Enkä halunnut isoa kasaa erilaisia ikoneita vaan nämä neljä: Faceboo, Twitter, G+ ja LinkedIn. Alla on jotakuinkin lopputulos tai ainakin se tulos miltä se tällä hetkellä näyttää – ainakin nuo somenapit jäänee tuommoisiksi. Tätä ohjetta voi kyllä soveltaa mille vain alustalle, mutta WordPress on nyt esimerkkinä sillä sille itse sen tein.

Eli tätä varten tarvitset hieman ymmärrystä ohjelmoinnista ja muutenkin miten WordPressin teemat pelittää. Et paljoa, mutta sen verran kuitenkin, että koet kykeneväsi tähän hommaan. Onhan nyt peloiteltu tarpeeksi?

Ensinnäkin itse käytin Font Awesome ikoneja tätä varten, joten hanki ne tai vastaavat ikonit. Voit toki käyttää kuviakin, mutta muokkaa sitten itse funktiota ja CSS koodia sinulle sopivaksi.

PHP-funktio

Otetaan oman teeman functions.php auki (ellei sitä ole niin sen voit luoda). Liitä sinne alla oleva funktio:

function someJako($url, $title){
	$url 		= urlencode($url);
	$title 		= urlencode($title);
	$source		= urlencode("https://markokaartinen.net"); //kotisivusi osoite
	$twnick		= "MarkoK"; //Twitter nimimerkkisi
	$facebook	= '<a class="somenappi" href="https://www.facebook.com/sharer/sharer.php?u='.$url.'" target="_blank"><i class="fa fa-facebook"></i></a>';
	$twitter 	= '<a class="somenappi" href="https://twitter.com/share?text='.$title.'&amp;url='.$url.'&amp;via='.$twnick.'" target="_blank"><i class="fa fa-twitter"></i></a>';
	$gplus		= '<a class="somenappi" href="https://plus.google.com/share?url='.$url.'" target="_blank"><i class="fa fa-google-plus"></i></a>';
	$linkedin	= '<a class="somenappi" href="https://www.linkedin.com/shareArticle?mini=true&url='.$url.'&title='.$title.'&summary=&source='.$source.'" target="_blank"><i class="fa fa-linkedin"></i></a>';
	echo $facebook.$twitter.$linkedin.$gplus; //tulostetaan tuossa järjestyksessä
}

Tämä funktio on suhteellisen simppeli. Se ottaa parametrinä osoitteen (url) ja otsikon (title). Tämän jälkeen syötät vielä kotisivusi osoitteen source muuttujaan ja Twitter nimimerkkisi twnick muuttujaan. Mikäli haluat muuttaa järjestystä niin muuta echottavien muuttujien järjestystä.

Funktion kutsuminen

Itse halusin tämän yhteen paikkaan joten käytin jakonapit id:llä diviä, mutta sinähän voit muuttaa tuon miten haluat. Sen sisään laitoin tuon funktio kutsun. Otathan huomioon, että tämän pitää olla WordPressin loopin sisällä, jotta saadaan linkki ja osoite haettua. Kannattaa tutustua WordPressin dokumentointiin näissä asioissa.

<div id="jakonapit">
	<?php someJako(get_permalink(), get_the_title()); ?>
</div>

Tyylittelyä

Itse halusin tämän keskitettynä ja kaikki napit vierekkäin – kuten kuvassakin näkyy. Alla onkin suhteellisen simppeli CSS-koodi.

#jakonapit {
	text-align: center;
	margin-top: 20px;
}
 
.somenappi {
	font-size: 25px;
	line-height: 40px;
	height: 40px;
	width: 40px;
	text-align: center;
	display: inline-block;
	background:#404040;
	margin: 5px;
	color: #FFF;
}
 
.somenappi:hover {
	color:#A4CF2E;
	text-decoration: none;
}

Tässähän ei sinänsä mitään ihmeellistä ole. Tuolle jakonapit diville määritetään keskitys ja hieman marginia ylös. Itse napeille taas annetaan koot ja värit.

Lopuksi

Ei tuo muuta vaadi. Tallenna tiedostot ja katso menikö se nyt ihan niin miten halusitkaan. Bugit, kommentit, kysymykset ja muut voi pistää tuonne kommenttiboxiin tai keskustelualueen puolelle.

Asennetaan palvelimelle ”perusohjelmat”

”Perusohjelmilla” tarkoitan tässä tapauksessa ohjelmia, joita tarvitsen saadakseni webbipuolen toimimaan. Sekä samalla asennellaan phpMyAdmin sekä Webmin ja muuta mukavaa. Kaikki komennot toimivat Ubuntussa ja pitäisi toimia muissakin koneissa missä on APT käytössä.

Tämän on tarkoitus olla muistilista itselle ja muille, jotka tarvitsee tämänkaltaisia komentoja.

Jatka lukemista ”Asennetaan palvelimelle ”perusohjelmat””

Liikennetieto botin tekeminen

Ajattelin aukaista teille hieman tekniikkaa ja koodia tuon @Liikennetieto botin takaa. Tässä postauksessa on siis aimo annos nörtti-puhetta.

Käytetyt tekniikat

Liikennetieto botin takana on paljon muutakin, kuin pelkkä Twitter-tili johon ilmestyy automaattisesti päivityksiä. Kerron tässä kappaleessa seikkaperäisesti eri tekniikoista ja miten niitä käytetään tämän botin kanssa.

TwitterOAuth on PHP-kirjasto, jonka avulla voidaan käyttää Twitterin APIa suhteellisen helposti. Tämän kirjaston avulla saadaan Twitteriin uusi päivitys.

Cronilla taas saadaan koodinpätkä katsomaan 5 minuutin välein onko tullut uusia liikennetiedotteita ja päivittämään ne Twitteriin ja tietokantaan automaattisesti.

Google Maps APIlla toteutin kartan botin kotisivuille ja sitä on muutenkin käytetty hyödyksi esim. staattisissa karttakuvissa, 24h kartassa sekä liikennetiedotteen infoissa.

Bootstrap sai tälläkin kertaa toimia ulkoasun frameworkkinä. Suosittelen lämpimästi tätä täysin ilmaista ”koodikasaa”.

Fancyboxilla saatiin aikaan se kiva efekti, jossa kuva pomppaa nokkasi eteen.

Htaccess -tiedostolla saatiin aikaan ”siistit” urlit tuonne sivuille. Tällöin esimerkiksi osoite http://liikenne.kaartinen.eu/arkisto/kunta/Kuopio onkin muotoa http://liikenne.kaartinen.eu/index.php?p=arkisto&do=kunta&kunta=Kuopio – ei liene vaikeaa päätellä kumpi on luettavampi muoto?

GIT on erittäin pätevä versionhallintaohjelmisto, jota itse käytän työssäni päivittäin ja käytän sitä myös omissa koodausprojekteissani. Tässä projektissa sille muodostui kuitenkin omanlainen rooli sillä sen avulla päivitän myös tuotannon. Ohjelmoin ensin muutokset ja korjaukset localhostiin ja sen jälkeen pushaan ne GIT repositoryyn. Tämän jälkeen pullaan muutokset tuotannossa ja tadaa – muutokset ovat toiminnassa.

Käytetyt ohjelmointikielet

PHP on se kieli mitä itse tulee käytettyä lähes päivittäin, teen tällä kielellä työkseni sovelluksia joten valinta oli itselleni luonteva.

Javascript ja jQuery kulkee itsellä nykyään käsikädessä ja aika monessa tekemässäni sovelluksessa on mukana näitä kieliä jollain tapaa.

Yleistä

Tämän botin koodaaminen oli sinällään erittäin hauska haaste, sillä en ole Twitterin APIn kanssa puljannut ja sitä kautta kun löysi tuon TwitterOAuth kirjaston niin homma vaan helpottui. Tämän myötä kynnys tehdä Twitter yhteensopivia koodinpätkiä madaltui ja voin luottavaisin mielin sanoa pystyväni tekemään Twitter botin joka toimii!

Botti on nyt ollut toiminnassa noin 10 päivää ja en ole huomannut sen toiminnassa mitään ongelmia. Jokusen bugin olen liiskannut verkkosivun puolelta ja siellä taitaa joitain vielä lymytä. Tulen myös kehittämään tuota verkkosivun puolta mm. tilastoilla ja päiväkohtaisella arkistolla. Tietty te voitte ehdottaa jos haluatte jotain lisäominaisuuksia tuohon!