{"id":8270,"date":"2012-01-16T18:02:42","date_gmt":"2012-01-16T17:02:42","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=8270"},"modified":"2013-09-18T12:54:17","modified_gmt":"2013-09-18T10:54:17","slug":"t105-json-e-ios-5-creiamo-il-backend-con-json-e-php-parte-1","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t105-json-e-ios-5-creiamo-il-backend-con-json-e-php-parte-1\/","title":{"rendered":"T#105 \u2013 JSON e iOS 5: creiamo il backend con JSON e PHP (Parte 1)"},"content":{"rendered":"<p><a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/json.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/json.jpg\" alt=\"json JavaScript Object Notation\" title=\"json JavaScript Object Notation\" width=\"192\" height=\"119\" class=\"alignleft size-full wp-image-8420\" \/><\/a> Le novit\u00e0 introdotte con iOS 5 sono state davvero tante e qui su devAPP cerchiamo sempre il modo migliore per proporvele. In questo articolo analizzeremo la classe <strong>NSJSONSerialization<\/strong>, che bench\u00e9 non faccia parte delle novit\u00e0 tra le pi\u00f9 acclamate e conosciute come ARC, Storyboard e UIPageViewController \u00e8, a mio avviso, un comodo strumento per la realizzazione di applicazioni che si interfacciano con un web service.<br \/>\nCome possiamo leggere dalla reference (<a href=\"http:\/\/developer.apple.com\/library\/ios\/#documentation\/Foundation\/Reference\/NSJSONSerialization_Class\/Reference\/Reference.html\" target=\"_blank\">QUI<\/a>) la classe NSJSONSerialization si occupa di codificare e decodificare da e verso oggetti foundation a JSON, sembra quindi doveroso fare una premessa per spiegare cos&#8217;\u00e8 JSON.<!--more--><\/p>\n<h4>Cos&#8217;\u00e8 JSON<\/h4>\n<p>La pagina di wikipedia (<a href=\"http:\/\/it.wikipedia.org\/wiki\/Json\" target=\"_blank\">QUI<\/a>) ci dice che JSON \u00e8 l&#8217;acronimo di JavaScript Object Notation ed \u00e8 un formato dati standardizzato per comunicazioni client server. Nato inizialmente per essere usato in javascript ha invece preso piede per via della sua semplicit\u00e0 anche in altri ambiti. In effetti il formato JSON non ha nulla in pi\u00f9 dell&#8217;XML anzi, proprio la versatilit\u00e0 e la generalit\u00e0 dell&#8217;XML fa si che un parser XML sia &#8220;un tantino&#8221; pi\u00f9 complesso di un parser JSON.<\/p>\n<p>Sempre wikipedia ci fornisce un esempio di codice JSON:<\/p>\n<pre>\r\n{\r\n    \"type\": \"menu\",\r\n    \"value\": \"File\",\r\n    \"items\": [\r\n        {\"value\": \"New\", \"action\": \"CreateNewDoc\"},\r\n        {\"value\": \"Open\", \"action\": \"OpenDoc\"},\r\n        {\"value\": \"Close\", \"action\": \"CloseDoc\"}\r\n    ]\r\n}\r\n<\/pre>\n<p>La sua sintassi \u00e8 semplice, tra le parentesi graffe { } vengono inseriti i dizionari, mentre tra le parentesi quadre [ ] vengono inseriti gli array classici.<br \/>\nNel codice qui in alto possiamo quindi distinguere la rappresentazione JSON di un dizionario dotato delle chiavi type, value e items. Il valore di quest&#8217;ultima chiave \u00e8 un array contenente 3 dizionari dotati delle  chiavi value e action.<\/p>\n<h4>Il nostro progetto<\/h4>\n<p>Potremmo far pratica con JSON utilizzando uno dei tantissimi siti che espongono API di comunicazione che utilizzano JSON, come ad esempio lo stesso youtube (<a href=\"http:\/\/code.google.com\/apis\/youtube\/2.0\/developers_guide_jsonc.html#Video_search\" target=\"_blank\">QUI<\/a>) basterebbe infatti visitare questa url:<\/p>\n<pre>\r\nhttps:\/\/gdata.youtube.com\/feeds\/api\/videos?\r\n    q=ipod+binary+clock\r\n    &max-results=1\r\n    &v=2\r\n    &alt=jsonc\r\n<\/pre>\n<p>per ottenere in tutta risposta un perfetto JSON con tutti i dati del video richiesto (potete vedere una versione indentata del JSON di risposta <a href=\"http:\/\/codepad.org\/gWwbvVNS\" target=\"_blank\">QUI<\/a>) ma noi vogliamo fare qualcosa di pi\u00f9 in questo tutorial: realizzeremo infatti anche la parte server!<\/p>\n<p>Creeremo una semplice app che visualizzi in una tabella un&#8217;elenco di nomi prelevandoli dal nostro webservice, inoltre cliccando sulla cella contenente il nome verr\u00e0 visualizzata la schermata di dettaglio.<\/p>\n<p>Per fare ci\u00f2 utilizzeremo in perfetto stile iOS 5 sia ARC che storyboard.<\/p>\n<h4>Installazione di un server LAMP\/MAMP <\/h4>\n<p>Per la creazione del nostro piccolo server avremo bisogno di tre cose:<\/p>\n<ul>\n<li>un server web Apache,<\/li>\n<li>un server db MySql<\/li>\n<li>e ovviamente il supporto PHP.<\/li>\n<\/ul>\n<p>Questi tre programmi spesso vengono installati insieme portando alla creazione di un server *AMP, se tale installazione \u00e8 su linux allora si chiamer\u00e0 LAMP, su Mac MAMP e ovviamente su windows WAMP.<\/p>\n<p>Installeremo quindi un server MAMP sul nostro mac e lo utilizzeremo per lo sviluppo dell&#8217;applicazione. Quando scriveremo la nostra applicazione reale il server dovr\u00e0 essere ospitato da una server farm ma in fase di sviluppo il server locale andr\u00e0 pi\u00f9 che bene.<\/p>\n<p>Per configurare un server MAMP abbiamo una comoda opportunit\u00e0 data dal programma omonimo (<a href=\"http:\/\/www.mamp.info\/en\/index.html\" target=\"_blank\">QUI<\/a>) scaricate quindi ed installate MAMP&#8230; purtroppo vi installer\u00e0 anche la versione PRO (a pagamento) ma baster\u00e0 fare attenzione in fase di avvio assicurandosi di avviare sempre quella free.<\/p>\n<p>Una volta avviato il software vedrete questa schermata:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_01.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_01-300x255.png\" alt=\"\" width=\"300\" height=\"255\" class=\"aligncenter size-medium wp-image-8276\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_01-300x255.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_01.png 537w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>I led verdi indicano che i due server Apache e MySql stanno lavorando correttamente. Se non si fosse gi\u00e0 aperta potete cliccare sul pulsante &#8220;Open start page&#8221; per visualizzare la pagina principale del nostro server MAMP dalla quale possiamo poi accedere a diverse funzionalit\u00e0.<\/p>\n<h4>Creiamo il database<\/h4>\n<p>Il database in questa applicazione sar\u00e0 veramente molto semplice infatti conterr\u00e0 una sola tabella che chiameremo &#8220;contatti&#8221; composta da 5 campi:<\/p>\n<ul>\n<li>id<\/li>\n<li>nome<\/li>\n<li>cognome<\/li>\n<li>data_nascita<\/li>\n<li>sesso<\/li>\n<\/ul>\n<p>Nella realt\u00e0 saranno probabilmente necessari pi\u00f9 campi o pi\u00f9 tabelle ma non cambia in ogni caso l&#8217;approccio da utilizzare.<\/p>\n<p>Per creare il database utilizzeremo phpmyadmin, un frontend web per mysql. Apriamo quindi la pagina principale con &#8220;Open start page&#8221; (se l&#8217;avete gi\u00e0 chiusa) e clicchiamo nel men\u00f9 in alto su phpMyAdmin. Si aprir\u00e0 la pagina principale di phpmyadmin:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_02.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_02-300x213.png\" alt=\"\" width=\"300\" height=\"213\" class=\"aligncenter size-medium wp-image-8280\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_02-300x213.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_02.png 500w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Il primo passo da fare \u00e8 creare un nuovo database, inseriamo quindi nell&#8217;apposita casella di testo un nome di nostro gradimento (io ho inserito &#8220;devapp_db&#8221;) e clicchiamo su &#8220;create&#8221;. Il programma mostrer\u00e0 un messaggio di conferma dell&#8217;avvenuta creazione.<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_03.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_03-300x25.png\" alt=\"\" width=\"300\" height=\"25\" class=\"aligncenter size-medium wp-image-8282\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_03-300x25.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_03.png 323w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Se avete voglia di creare manualmente la tabella potete cliccare su &#8220;struttura&#8221;, inserire il nome della tabella (io ho digitato &#8220;contatti&#8221;) e inserire 5 come numero di field. Al click sul tasto GO apparir\u00e0 la pagina dove bisogner\u00e0 specificare per ciascun field il tipo di dato memorizzato ed eventuali vincoli e indici:<\/p>\n<ul>\n<li>id: integer, chiave primaria con autoincremento<\/li>\n<li>nome: varchar di lunghezza 255<\/li>\n<li>cognome: varchar di lunghezza 255<\/li>\n<li>data_nascita: data<\/li>\n<li>sesso: set [M,F]<\/li>\n<\/ul>\n<p>Se invece volete vedere subito il risultato finale potete usare il file qui allegato (<a href=\"http:\/\/dl.dropbox.com\/u\/31437518\/contatti.sql\" target=\"_blank\">contatti.sql<\/a>) che potrete importare semplicemente cliccando sulla voce &#8220;import&#8221;, quindi su &#8220;choose file&#8221; ed infine su &#8220;go&#8221;. Se avete fatto tutto correttamente riceverete il messaggio di conferma come mostrato in questa immagine:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_04.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_04-300x162.png\" alt=\"\" width=\"300\" height=\"162\" class=\"aligncenter size-medium wp-image-8284\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_04-300x162.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_04.png 1000w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Per assicurarci che siano stati inseriti anche i dati clicchiamo su Sql e digitiamo una query SQL per ottenere tutti i contatti inseriti:<\/p>\n<pre>\r\nSelect * from contatti;\r\n<\/pre>\n<p>Clicciamo su &#8220;go&#8221; e analizziamo il risultato, che dovrebbe essere uguale a questo:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_05.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_05-300x172.png\" alt=\"\" width=\"300\" height=\"172\" class=\"aligncenter size-medium wp-image-8286\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_05-300x172.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2012\/01\/TUT_JSON_05.png 950w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Complimenti! La realizzazione del database \u00e8 terminata, passiamo ora alla prossima sezione della guida in cui genereremo il webservice in php.<\/p>\n<h4>Creazione del webservice<\/h4>\n<p>Adesso che abbiamo creato il database dobbiamo creare il web service vero e proprio, tramite la stesura di pagine php che faranno da &#8220;interfaccia&#8221; tra iOS ed il database stesso.<\/p>\n<p>Apriamo quindi il nostro editor di testo preferito (smultron, textwrangler,emacs) e creiamo un nuovo file chiamandolo index.php. Questo file va salvato all&#8217;interno della cartella Application\\Mamp\\htdocs.<br \/>\nNon spaventatevi se non conoscete il php, non sar\u00e0 necessario essere dei guru per capire il codice che andremo a scrivere.<\/p>\n<p>Iniziamo con inserire il prototipo di una nuova classe:<\/p>\n<pre lang=\"php\" line=\"1\" escaped=\"true\">\r\n<?php\r\n\tclass Contatto {\r\n\t\tpublic $nome;\r\n\t\tpublic $cognome;\r\n\t\tpublic $datanascita;\r\n\t\tpublic $sesso;\r\n\t\r\n\t\r\n\tpublic function setNome($nome) {\r\n\t\t$this->nome = $nome;\r\n\t}\r\n\tpublic function setCognome($cognome) {\r\n\t\t$this->cognome = $cognome;\r\n\t}\r\n\t\r\n\tpublic function setDataNascita($datanascita) {\r\n\t\t$this->datanascita = $datanascita;\r\n\t}\r\n\tpublic function setSesso($sesso) {\r\n\t\t$this->sesso = $sesso;\r\n\t}\r\n\r\n\t}\r\n?>\r\n<\/pre>\n<p>Come si pu\u00f2 intuire la classe Contatto disporr\u00e0 di 4 propriet\u00e0: nome, cognome, datanascita e sesso (rispecchiano la struttura del database) e quattro metodi setter.<\/p>\n<p>Il php \u00e8 un linguaggio non tipizzato quindi non dovremo specificare se si tratta di stringhe, di interi o di date.<\/p>\n<p>Proseguiamo dichiarando quattro variabili che conterranno i dati per la connessione al database:<\/p>\n<pre lang=\"php\" line=\"1\" escaped=\"true\">\r\n<?php\r\n\t$db_hostname = 'localhost'; \r\n\t$db_database = 'devapp_db';\r\n\t$db_username = 'root';\r\n\t$db_password = 'root';\r\n<\/pre>\n<p>Unsername e password sono quelli di default di Mamp e sono visibili nella pagina principale.<\/p>\n<p>A questo punto effettuiamo la connessione a mySQL tramite le istruzioni:<\/p>\n<pre lang=\"php\" line=\"1\" escaped=\"true\">\r\n$db_server = mysql_connect($db_hostname, $db_username, $db_password);\r\nif (!$db_server) die(\"Unable to connect to MySQL: \" . mysql_error());\r\n<\/pre>\n<p>Se la connessione non andr\u00e0 a buon fine verr\u00e0 interrotto il caricamento e visualizzato un messaggio di errore.<\/p>\n<p>Proseguiamo con la scelta del database e con l'esecuzione della query:<\/p>\n<pre lang=\"php\" line=\"1\" escaped=\"true\">\r\nmysql_select_db($db_database) or die(\"Unable to select database: \" . mysql_error());\r\n\r\n$query = \"SELECT * FROM contatti\";\r\n$result = mysql_query($query);\r\nif (!$result) die (\"Database access failed: \" . mysql_error());\r\n\r\n$rows = mysql_num_rows($result);\r\n<\/pre>\n<p>Possiamo a questo punto iterare sull'oggetto result per ottenere ciclicamente tutti i record e creare delle istanze della classe Contatto da memorizzare in un array:<\/p>\n<pre lang=\"php\" line=\"1\" escaped=\"true\">\r\nfor ($j = 0 ; $j < $rows ; ++$j)\r\n{\r\n\t$row = mysql_fetch_row($result);\r\n\t$contatti[$j] = new Contatto;\r\n\t$contatti[$j]->setNome($row[1]);\r\n\t$contatti[$j]->setCognome($row[2]);\r\n\t$contatti[$j]->setDataNascita($row[3]);\r\n\t$contatti[$j]->setSesso($row[4]);\r\n\t\r\n}\r\n<\/pre>\n<p>La magia adesso avviene con una funzione predefinita di PHP 5.2, che riesce a convertire il nostro array in una stringa JSON in modo veramente semplice, infatti ci baster\u00e0 scrivere:<\/p>\n<pre lang=\"php\" line=\"1\" escaped=\"true\">\r\n$json_string = json_encode($contatti); \r\necho $json_string; \r\n?>\r\n<\/pre>\n<p>Per visualizzare il risultato del nostro lavoro baster\u00e0 aprire un browser e digitare http:\/\/localhost:8888\/ per visualizzare questo risultato:<\/p>\n<pre>\r\n[\r\n  {\r\n    \"cognome\": \"Rossi\", \r\n    \"datanascita\": \"2012-01-01\", \r\n    \"nome\": \"Mario\", \r\n    \"sesso\": \"M\"\r\n  }, \r\n  {\r\n    \"cognome\": \"Verdi\", \r\n    \"datanascita\": \"2012-01-12\", \r\n    \"nome\": \"Luigi\", \r\n    \"sesso\": \"M\"\r\n  }, \r\n  {\r\n    \"cognome\": \"Franchi\", \r\n    \"datanascita\": \"2012-01-12\", \r\n    \"nome\": \"Franco\", \r\n    \"sesso\": \"M\"\r\n  }, \r\n  {\r\n    \"cognome\": \"Neri\", \r\n    \"datanascita\": \"2012-01-22\", \r\n    \"nome\": \"Luca\", \r\n    \"sesso\": \"M\"\r\n  }, \r\n  {\r\n    \"cognome\": \"Pannocchia\", \r\n    \"datanascita\": \"2012-02-01\", \r\n    \"nome\": \"Anna\", \r\n    \"sesso\": \"F\"\r\n  }, \r\n  {\r\n    \"cognome\": \"Marturano\", \r\n    \"datanascita\": \"2012-02-03\", \r\n    \"nome\": \"Filomena\", \r\n    \"sesso\": \"F\"\r\n  }, \r\n  {\r\n    \"cognome\": \"Luciani\", \r\n    \"datanascita\": \"2012-02-12\", \r\n    \"nome\": \"Licia\", \r\n    \"sesso\": \"M\"\r\n  }, \r\n  {\r\n    \"cognome\": \"Scongiuri\", \r\n    \"datanascita\": \"2012-12-21\", \r\n    \"nome\": \"Maya\", \r\n    \"sesso\": \"M\"\r\n  }\r\n]\r\n<\/pre>\n<p>Non vi preoccupate se il vostro browser non indenta correttamente il testo, \u00e8 normale.<\/p>\n<p>E con questo abbiamo terminato lo sviluppo del nostro server, nella prossima puntata affronteremo la realizzazione del cliente iOS.<\/p>\n<p>Buona programmazione a tutti!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le novit\u00e0 introdotte con iOS 5 sono state davvero tante e qui su devAPP cerchiamo sempre il&#8230;<\/p>\n","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[1023,1025,1022,1026,982,1024],"class_list":["post-8270","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-arc-ios-5","tag-json-e-applicazioni-iphone","tag-nsjsonserialization","tag-parsing-json-xcode","tag-storyboard-xcode","tag-webservice-e-iphone"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/8270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=8270"}],"version-history":[{"count":63,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/8270\/revisions"}],"predecessor-version":[{"id":10784,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/8270\/revisions\/10784"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=8270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=8270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=8270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}