Informativa

Come collegare Phonegap a un database MySql con PHP e JSON



Ho deciso di fare questo articolo perchè avevo l’esigenza di collegare la mia app Phonegap, cioè fatta con semplice codice HTML, CSS e Javascript ad un database MySql esterno e non riuscivo a trovare nulla al riguardo. Sono riuscito con un pò di PHP e JSON e con alcune ricerche in rete.

L’idea di base era quella di inserire un sistema di news nella app che io potessi aggiornare con un pannello di controllo hostato da qualche parte su un server.

Cerco di spiegarmi in modo semplice in modo che tutti possano capire. Ho una app ibrida fatta ad esempio con Phonegap, in HTML, CSS e javascript. Se ho nella app ad esempio delle notizie, per inserirle nella app, dovrei metterle nel codice HTML, poi aggiornare la app ad esempio sul Play Store, gli utenti dovrebbe aggiornare e scaricare la nuova versione e poi leggere le news. Capite che non va bene. Come fare? Ci sono moltissime soluzioni, vi dico come ho fatto io nella speranza che possa esservi utile, poi se capite la struttura potete farci non solo un sistema di news, ma una app completamente dinamica e aggiornabile da un pannello di controllo online.

La prima cosa che ci serve è un hosting che ci fornisca un database MySql e un pochino di spazio per poter mettere online alcuni file e il pannello di controllo da dove inseriremo le news. Va bene qualsiasi hosting, o almeno credo, io ho messo tutto su Dreamhost, ho registrato un dominio con lo stesso nome della mia app. E lì ho creato il database.

La struttura di base App, Json, PHP, MySQL

Cerchiamo di capire la struttura di base, perchè poi il codice vedrete che è banale, o almeno molto semplice.

Mettiamo le nostre news in un database MySQL, sul server metteremo un file PHP che, grazie ad un pò di codice leggerà le nostre news e la metterà in formato JSON. Vi faccio uno schema, perchè non ci ho capito nulla nemmeno io di quello che ho scritto.

phonegap-mysql

Come vedete il file json.php legge le news dal database e rilascia un codice leggibile in Javascript sulla stessa pagina json.php con all’interno le news.

Ma perchè tutto sto macello? La risposta è semplice non è possibile inserire codice PHP nella applicazione. In questo modo inseriremo nella app un semplice codice Javascript (JQuery) che si connetterà a json.php e importerà i dati, in questo caso le news.

E il codice dove lo prendiamo? Nessun problema ve lo do io e proverò anche a spiegarlo, non sono un mago nella programmazione, anzi tutt’altro, ma ci proveremo.

Cosa vi serve:

  1. Database MySql
  2. Il codice json.php
  3. Il codice javascript che dovrete inserire nell’HTML della vostra app.

Scaricate il pacchetto offerto gratuitamente, ma siccome tutte le volte che metto le risorse gratuite, tutti scaricate, utilizzate e quasi mai ringraziate e mai donate, allora sta volta per scaricare vi sorbite un pò di pubblicità 🙂

DOWNLOAD DA QUI

Il file con estensione sql denominato news.sql è già pronto non dovrete fare altro che importarlo nel vostro. Magari usando PhpMyAdmin.

Se aprite con un editor di codice news.sql vedrete che c’è una sola tabella con ID, title e content. La tabella si chiama bitcoin_news perchè a me serviva per quello, voi se volete rinominatela, ma poi dovrete rinominarla in tutti i file e in tutti i luoghi del mondo. Fate come volete.

Vediamo ora il file json.php, apritelo perchè dovrete modificarlo. Alla riga 4 ci sono i dati del vostro database, che non saranno uguali al mio, quindi inserite i vostri e in ordine

“INSERIRE INDIRIZZO HOST”,”USER_DATABASE”,”PASSWORD_DATABASE”,”NAME_DATABASE”

Sotto c’è una banale query che interroga il database e dice di restituire tutto quello che c’è in nella tabella “bitcoin_news”, alla fine c’è un comando PHP che chiede gentilmente di esporre i dati in formato JSON.

Tutto chiaro?

Se avete fatto bene tutto fino a qui, e sono sicuro che sarà così sappiate che avete quasi finito. Manca il codice javascript/html che deve leggere il JSON, ovvero quello che va inserito nella vostra app.

Unica accortezza è che vi serve anche JQuery perchè è fatto così.

Per provare se tutto funziona andate nella cartella che avete scaricato, aprite il file index.html e alla riga 19 inserite l’indirizzo dove è il vostro json al posto di https:www.indirizzovostrofilejson.com/json.php

Aprite con un qualsiasi browser index.html, se vedete le news va tutto bene. Ora non dovrete fare altro che copiare il contenuto indicato nel file index.html nella vostra app.

Creare un pannello di controllo per aggiornare le news della app Phonegap.

Adesso la vostra app ha un fantastico sistema di news, il problema è che per inserire le news dovete andare ad esempio in PhpMyAdmin e inserire da lì i testi ed è molto scomodo. Che fare? Basta un semplice pannello di controllo da inserire sul vostro server, proprio lì dove è ospitato il famoso file json.php. Un pannello a cui si acceda con una password e dove sia possibile inserire, cancellare e modificare le news, magari con un editor che permetta di inserire anche dei link, delle immagini e di formattare il testo. Io l’ho già fatto, non è il massimo, forse ha qualche problema di sicurezza, ma funziona egregiamente, nel prossimo articolo vi do il download e vi dico come settarlo. Magari mi aiuterete a migliorarlo e possiamo caricarlo su Git in modo da condividerlo tutti insieme.

Ciao!!!!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *