TREBALL’DERECERCA’ - Pehocpehoc.cat/wp-content/uploads/2013/09/Faraway.pdf! 6!...

1

TREBALL DE RECERCA

Faraway El teu telèfon estarà lluny però no del tot.

Autor: Marc Ortiz Torres

2n Batxillerat

Tutor: Toni Moreno

IES La Garrotxa

Data: 11-‐10-‐2012

2

INDEX

1. Agraïments.

2. Objectius

2.1 Treballar diversos llenguatges de programació De forma practica.

2.2 Implementar una aplicació per Android.

2.3 Fer una aplicació professional.

2.4 Enriquir coneixements sobre programació.

2.5 Fer útil la aplicació.

2.6 Treball en grup.

2.7 Redacció d’un bon treball de recerca.

3. Introducció.

4. Precedents .

5. Metodologia.

6. Cerca informació.

a. Que són els llenguatges de programació?

b. Php.

i. MVC.

c. Java.

d. XML.

e. Javascript.

f. HTML.

7. Funcionament de l’Aplicació.

8. A qui va dirigida la aplicació.

9. Monetització.

8.1. Com monetitzarem la aplicació?

8.2. Que farem amb els guanys?

9. Conclusions.

10. Bibliografia.

3

Estoy convencido de que la mitad de lo que separa a los emprendedores exitosos de los que no triunfan es la perseverancia. (Steve Jobs)

4

1.Agraiments

Vull agrair a un seguit de persones que sense elles el meu treball de recerca no hagués

set el mateix.

Primer vull començar per en Toni Moreno, el meu tutor del treball de recerca, que

m’ha donat consells per el treball, m’ha ajudat a estructurar la part escrita i ha tingut la

paciència de guiar-‐me durant la redacció del treball escrit.

Una altre persona important en aquest treball han set els altres tres membres del grup

(Alejandro Rodríguez, Mario Montes i Marina Aisa) que tots junts hem pogut tirar

endavant aquest projecte. Amb l’esforç de tots quatre i el treball de sis mesos hem

pogut muntar una cosa competent.

Agrair també a amics que han tingut paciència quan els demanava favors per fer

proves i que em donaven idees que m’han servit per millorar la aplicació.

I agrair finalment a Tim Berners-‐Le perquè sense ell no hagués tingut els coneixements

necessaris per poder crear Faraway.

Vull dir que tots els programes del treball de recerca són fets per mi i no copies. També

dir que m’ha costat mesos fer aquesta part procedimental, no ho feia per treball de

recerca sinó per gust, però em va servir d’excusa per continuar-‐lo, ja que Faraway el

feia quan tenia temps lliure (dos hores al dia).

5

2. Objectius

Els objectius que vull assolir quan hagi acabat el treball de recerca són:

1. Fer una aplicació per Android.

2. Fer una aplicació més professional que les que he anat fent. Que aprofiti molt

els recursos del telèfon, consumeixi poca memòria, no falli (que falli el mínim

possible) i molt simple perquè sigui accessible a tothom.

3. Aprendre molt sobre programació en general, no només resoldre un problema

sinó saber resoldre’l de diferents maneres i escollir la millor.

4. Fer el màxim possible perquè la gent li sigui útil la aplicació.

5. Aprendre com treballar en grup en alguna cosa que ens sembla important.

6. Aprendre a estructurar i a redactar un bon treball de recerca.

7. Preparar una bona presentació oral.

6

3. Introducció

Com sorgeix la idea del treball de recerca? Tot va començar quan un dia estava

esperant una trucada molt important, tant important que el pitjor que em podia

passar seria deixar el mòbil a casa no? Doncs, va passar això. Aquesta trucada feia

referencia a entrar en un treball, molt important per mi, però desgraciadament aquell

dia no la vaig poder contestar, ni enviar un SMS, ni veure si el meu telèfon tenia

cobertura, ni la suficient bateria... res d’això.

Òbviament gràcies als petits coneixements d’informàtica que tinc i com a hacker

(actualment a la paraula hacker se li atorga un sentit dolent, tot i això hacker significa

crear coses, persona que li agrada crear coses ), em vaig posar a investigar i a resoldre

el problema que es plantejava. Vaig demanar si volien participar en el projecte tres

persones més (una dissenyadora, un programador web i un dissenyador de la

aplicació). Finalment al cap de molt de treball i mesos, vaig poder acabar aquesta eina i

així poder resoldre el problema.

Aquest dossier explica en general de que va el meu treball de recerca.

4. Precedents

Totes les aplicacions que els programadors fan, s’envien a un lloc anomenat Google

Play, la mare de les aplicacions. Des d’aquesta gran aplicació anomenada Google Play i

que ja be integrada en el telèfon permet descarregar i tenir accessibilitat a més de

675.000 aplicacions de programadors i sobretot empreses potents de tot el món. Avui

en dia és difícil competir contra aquestes grans empreses, però es pot intentar. També

hem de dir que Google Play fa poc va superar les 25.000 milions de descarregues.

7

Tot i la gran quantitat d’aplicacions, no n’hem trobat cap que pugui fer el mateix que

Faraway (la aplicació que hem creat). Per això creiem que pot ser molt útil i pot tenir

èxit. És molt i molt difícil crear alguna cosa que no la hagin fet ja i fer-‐la de una manera

que funcioni molt bé (els usuaris són molt exigents), hi han empreses que tenen un

capital important i per tant ens poden guanyar fàcilment. Nosaltres a més de passar

molt de temps (5-‐6 mesos) fent i millorant la aplicació no ens hi dediquem

professionalment.

Aquí deixo la gràfica de les descarregues de Google Play.

Com he dit abans, no hi ha cap aplicació com la que hem fet (no n’hem vist cap), per

tant la part procedimental del treball no és copiada sinó inventada, per això ens ha

costat 6 mesos de treball i mal de caps.

8

5. Metodologia

En el diagrama de flux que podem trobar a la part inferior, explica el desenvolupament

del meu treball de recerca. En primer lloc vaig escollir un tema per el meu treball de

recerca (Faraway), més tard vaig escollir el tutor que més coneixements electrònics i

informàtics té per aquest tipus de treball. Un cop escollit el tutor, vaig començar a

cercar informació relacionada amb aquest tema informàtic i que em podria ajudar a

l’hora de fer la part procedimental. Un cop apresos aquests conceptes bàsics per fer la

aplicació em vaig posar a crear la aplicació, i el més important, que funciones

correctament. Un cop enllestida la aplicació, es pensa un públic concret que li pugui

interessar i ajudar la aplicació.

Finalment amb la part procedimental acabada, vaig concloure amb el treball acabant

les parts de les conclusions i bibliografia.

9

Escollir temàtica

Escollir tutor

Cercar informació prèvia

Android Livecicle

Web Services

Android extraction methods

Implementació de Services a Android

Creació de la aplicació per

mòbils Android

Funciona? NO

SI

Centrar-‐nos en un públic concret

Conclusions Bibliografia

10

6.1 Que son els llenguatges de programació?

Un llenguatge de programació és un llenguatge artificial que permet fer diferents

processos a una màquina. Aquests poden ser utilitzats per controlar el comportament

físic de la màquina o per interactuar amb els humans. I com a llenguatge té els seus

signes, la seva sintaxis i les seves regles que l’estructuren i li donen una lògica.

Els llenguatges de programació es poden classificar en llenguatges d’alt nivell i de baix

nivell:

• De baix nivell: són molt propers al codi binari i internament utilitzats per un

tipus d’ordinador determinat.

• D’alt nivell: són més propers al llenguatge humà i independents de l’ordinador.

Podem veure la diferència entre dos llenguatges, un és ensemblador (baix nivell) i

l’altre Python (alt nivell).

Ensamblador:

MODEL SMALL IDEAL STACK 100H DATASEG HW DB 'Hola!$' CODESEG MOV AX, @data MOV DS, AX MOV DX, OFFSET HW MOV AH, 09H INT 21H MOV AX, 4C00H INT 21H END

11

Python:

print "Hola!"

Els dos l’únic que fan és imprimir el valor Hola! Com podem veure l’Ensamblador és

més complicat i per això s’està utilitzant molt més els llenguatges d’alt nivell. Per la

seva senzillesa bàsicament.

6.2 Quins llenguatges són utilitzats en el projecte i perquè?

En el projecte, són utilitzats els següents llenguatges de programació:

1. PHP (MVC)

2. Java

3. Javascript

4. JQuery

5. Ajax

6. HTML5

7. CSS3

8. XML

9. SQL (inserció/extracció/modificació de dades del servidor).

Gràcies a la explicació dels llenguatges anteriorment, podem entendre que aquests

llenguatges fan funcions de llenguatges de programació, es a dir, poder entrenar o

preparar l’ordinador per fer un seguit de funcions/tasques.

Per ser un projecte complert i actual, ja que la tecnologia avança molt ràpid,

necessitem utilitzar les últimes eines que hi ha, quan em refereixo a eina ara mateix

em refereixo a els últims llenguatges, els més moderns.

La part web del projecte esta format per php,javascript, jquery,ajax,html i css, i la part

de la aplicció està formada per java y xml.

12

Perquè aquests llenguatges?

6.3 Php

Aquest llenguatge és bàsic per poder executar funcionalitats en el servidor, es a dir

treballa dintre del propi servidor, actualment totes les pagines web necessiten mostrar

dades, emmagatzemar-‐les en una base de dades, jugar amb elles, ja que les dades són

el més important. Per poder mostrar les dades, guardar-‐les i tots aquests processos és

necessari el PHP. Més endavant explicaré més clarament amb el que utilitzarem aquest

llenguatge. Es pot dir que el 60-‐70 % del projecte és amb PHP.

PHP és un llenguatge per fer pàgines web dinàmiques. PHP significa Hipertext

Preprocessor. PHP treballa a la banda del servidor com he dit anteriorment i per tant

en la web només es pot veure el codi HTML i no es pot veure el codi PHP.

Actualment hi ha fins la versió 6 de PHP, la primera versió o els seus inicis van ser al

1994 creat per Rasmus Lerdorf. El llenguatge PHP és molt versàtil, permet ser inclòs

dintre altres llenguatges com HTML mitjançant els caràcters <?php ... ?>, suporta grans

tipus de bases de dades com ORACLE, MySQL, SQLite i moltes més. És molt ràpid

d’aprendre i no gaire complicat. S’assembla molt al llenguatge de programació C o C++

per la seva estructuració i malgrat la seva senzillesa es poden crear grans projectes

professionals. Un clar exemple d’això es que la gran xarxa social Facebook, Wikipedia,

Wordpress, Tuenti o el propi Moodle de les escoles utilitzen aquest llenguatge.

En la pàgina web, utilitzem un concepte de programació anomenat Model-‐View-‐

Controller (MVC). Actualment les pàgines web una mica series utilitzen aquest

concepte, per seguretat i per organització.

13

6.3.1 Com funciona/Que és el concepte MVC?

El MVC és un patró, un concepte de programació que separa les dades de una pàgina

web en tres components diferents i molt importants, el model, la vista i el controlador.

o La vista és un codi HTML que és on es produeix la interacció

entre usuari – pàgina web, com per exemple un botó, una caixa per

introduir-‐hi text, imatges, etc...

o El controlador és la part del programa que s’encarrega de

ingressar, extreure modificar dades del servidor, el controlador treballa

sobre el servidor. Aquest li passa les dades al model.

o El model recull les dades del controlador i implementant una

lògica les mostra a la vista perquè l’usuari estigui informat.

Posem un exemple: L’usuari entra a la pàgina web www.farawayapp.com , la pàgina

web utilitza MVC i la part que nosaltres podem veure seria la vista, que consta de els

seus respectius botons i imatges. Si nosaltres volem per exemple prémer un botó com

pot ser el control panel ( botó de la pàgina web www.farawayapp.com ), un cop

premut el botó el model s’encarrega de agafar la informació o les dades necessàries

com podria ser el nom d’usuari, mostrar-‐les per pantalla mitjançant la vista. Aquestes

dades que el model li passa a la vista perquè la vista les mostri són donades

prèviament per el controlador. El controlador és com el cuiner, el model el cambrer i la

vista el plat de menjar.

El MVC va ser creat per Trygve Reenskaug l’any 1979.

Actualment hi ha molts frameworks ( eines de desenvolupament de programes

informàtics ) que utilitzen aquesta estructura de programació, n’hi ha molts, i no tots

són amb PHP sinó que hi ha molta diversitat i molts llenguatges que suporten aquesta

manera de programació. Aquí us deixo una taula perquè us doneu compte de la

quantitat per triar:

14

Lenguaje Licencia Nombre

Objective

C Apple Cocoa

Ruby MIT Ruby on Rails

Ruby MIT Merb

Ruby MIT Ramaze

Ruby MIT Rhodes

Java Apache Grails

Java GPL Interface Java Objects

Java LGPL Framework Dinámica

Java Apache Struts

Java Apache Beehive

Java Apache Spring

Java Apache Tapestry

Java Apache Aurora

Java Apache JavaServerFaces

JavaScript GPLv3 ExtJS 4

Perl GPL Mojolicious

Perl GPL Catalyst

Perl GPL CGI::Application

Perl GPL Gantry Framework

Perl GPL Jifty

Perl GPL Maypole

Perl GPL OpenInteract2

15

Perl Comercial PageKit

Perl GPL Cyclone 3

Perl GPL CGI::Builder

PHP GPL

Self Framework ( php5, MVC, ORM, Templates,

I18N, Multiples DB)

PHP LGPL ZanPHP

PHP LGPL Tlalokes

PHP GPL SiaMVC

PHP LGPL Agavi

PHP BSD Zend Framework

PHP MIT CakePHP

PHP GNU/GPL KumbiaPHP

PHP MIT Symfony

PHP MIT QCodo

PHP GNU/GPL CodeIgniter

PHP BSD Kohana

PHP MPL 1.1 PHP4ECore

PHP BSD PRADO

PHP GNU FlavorPHP

PHP Apache 2.0 Yupp PHP Framework

PHP BSD Yii PHP Framework

PHP GPL Logick PHP Framework

PHP GPL Osezno PHP Framework

PHP MIT (sPHPf) Simple PHP Framework

PHP GNU/GPL gvHidra

16

Python ZPL Zope3

Python Varias Turbogears

Python GPL Web2py

Python BSD Pylons

Python BSD Django

.NET Castle Project MonoRail

.NET Apache Spring .NET

.NET Apache Maverick .NET

.NET MS-‐PL ASP.NET MVC

.NET Microsoft Patterns &

Practices

User Interface Process (UIP) Application Block

AS3 Adobe Open Source Cairngorm

AS3 y Flex MIT License CycleFramework

Nosaltres no hem utilitzat cap framework. Un dels més utilitzats és Zend i Yii

framework en PHP.

Més endavant hi ha un petit codi en PHP perquè fer-‐nos una idea de la seva sintaxis i la

seva estructura. Si desenvolupem un programa amb PHP, el que necessitem fer és

crear un servidor localhost al nostre ordinador i amb el buscador anar a buscar l’arxiu

PHP.

17

Programa senzill amb PHP:

<html>

<head>

<h1>

Petit programa per Treball de recerca

</h1>

</head>

<body>

<center>

<h4>

<?php

$frase = "Petit programa per veure el funcionament de PHP";

echo $frase;

?>

</h4>

</center>

</body>

</html>

Com hem dit anteriorment, el PHP pot ser inserta dins altres llenguatges, com per

exemple aquest codi HTML. El resultat d’aquest codi seria un

18

Programa amb més complexitat PHP:

<?php

$apikey = "AIzaSyBHE3J5svK";

$registrationIDs = array("_RVptaNOCI2_Xa9Cf0ve-‐

mfKSyUQ5qKUYVM_OrLparPtK0jRD");

$url = "https://android.googleapis.com/gcm/send";

$headers = array(

'Authorization: key='.$apiKey,

'Content-‐Type: application/json'

19

);

$msgType = "msg";

$msgExtra = "rock";

$userId = '1';

$fields = array(

'data' => array(

"type" => $msgType,

"extra" => $msgExtra),

'registration_ids' => $registrationIDs,

);

print (json_encode($fields));

$ch = curl_init();

curl_setopt( $ch, CURLOPT_URL, $url );

curl_setopt( $ch, CURLOPT_POST, true );

curl_setopt( $ch, CURLOPT_HTTPHEADER, $headers);

curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );

curl_setopt( $ch, CURLOPT_POSTFIELDS, json_encode($fields));

$result = curl_exec($ch);

curl_close($ch);

echo $result;

20

Aquest programa el que fa és enviar un POST (petició) al servidor de Google mitjançant

curl perquè el meu telèfon mòbil rebi una notificació. Aquesta notificació podria fer

que per exemple s’encengués la pantalla, enviés un SMS, tenir el control total del

telèfon. Es clar, això només es la part PHP, per fer que s’encengués la pantalla i coses

d’aquestes necessito Java, un llenguatge de programació per programar els telèfons

mòbils (Android i Blackberry).

6.4 Java

Java és un dels llenguatges més importants per no dir el més important en la part de la

aplicació del telèfon mòbil. Java es un llenguatge de programació dissenyat per James

Gosling amb altres companys de Sun Microsystems al 1990. Es va crear a partir de C++,

per tant són molt i molt semblants. És de programari lliure i per tant és un dels

llenguatges de programació més utilitzats en aquest moment. Java es pot utilitzar per

la creació de pàgines web, aplicacions mòbils o aplicacions d’escriptori. Com que és un

llenguatge interpretat (necessiten ser interpretats perquè pugui funcionar) a vegades

pot semblar més lent que altres llenguatges, per això es fa servir poc als videojocs. Tot

i això és molt flexible, compte amb moltes llibreries d’ajuda i té una gran facilitat per

reutilitzar el codi, això el fa molt potent.

21

Algunes de les característiques del llenguatge de programació Java són:

• Senzill: Java s'ha creat per a que sigui un llenguatge senzill amb una

sintaxi elegant

• Orientat en la programació orientada a objectes: com altres

llenguatges de programació, manipula i crea objectes.

• Distribuït.

• Interpretat: Necessita d’un interpretador, un programa que tradueix i

permet el seu funcionament.

• Robust: és un llenguatge molt robust i fiable ja que s’ha treballat molt i

s’han corregit molts errors respecte altres llenguatges de programació com

C++.

• Segur: Java té pocs problemes de seguretat, com hem dit abans, ha

estat molt treballat i continua sent treballat i per tant és robust i segur.

• Arquitectura neutral: Un avantatge també que té Java i que fa que sigui

el llenguatge de programació més utilitzat avui dia, es que es independent on

s’executi, per exemple si executem un programa/aplicació Java en un

escriptori, tant li fa si es Windows com Mac com alguna distribució de Linux,

sempre funcionarà gràcies al intèrpret.

• Portable: com hem dit abans funciona en qualsevol plataforma

• Alt rendiment: els compiladors de Java són molt treballats i fa que

tinguin un gran rendiment.

• Concurrent: Java permet que una aplicació executi dues o més tasques

de manera simultània, això fa que sigui un gran avantatge. Aquestes tasques

són anomenades threads (fils).

• Dinàmic.

22

Java permet la creació d’aplicacions i miniaplicacions:

• Aplicacions: són programes autònoms i independents.

• Miniaplicacions: Són programes Java incrustats en codi HTML i executats

en un navegador web ( Chrome, Mozilla o Safari ). Són anomenades Java

Applets. Aquestes tenen un seguit de limitacions com per exemple, no poden

llegir ni escriure en el sistema d’arxius de la computadora.

Codi molt senzill per a la creació de les Applet:

public class Applet extends Applet {

public void init(){

//Iniciació de la Applet, implementació de la lògica

}

public void paint(Graphics g){

g.drawLine('Coordenades i llargada de la línia');

}

}

Com podem observar, dins de la classe Applet, hi ha un mètode d’iniciació (init) que és

on hi haurem d’escriure l’algoritme , i un mètode paint, que rep un objecte Graphics

que permet dibuixar sobre la Applet. Molt útil per a jocs o per mostrar objectes en 3D.

Un cop vist un exemple de Java Applet, ja podrem entendre un fragment de programa

que controla el telèfon mòbil.

23

Aquest es un tros de programa extret de la aplicació del mòbil:

package com.background;

import android.content.Context;

import android.net.ConnectivityManager;

import android.net.NetworkInfo;

public class CheckConexion implements Variables {

public boolean isOnline(Context c) {

boolean hasConnectedWifi = false;

boolean hasConnectedMobile = false;

ConnectivityManager cm = (ConnectivityManager) c

.getSystemService(Context.CONNECTIVITY_SERVICE);

NetworkInfo[] netInfo = cm.getAllNetworkInfo();

for (NetworkInfo ni : netInfo) {

if (ni.getTypeName().equalsIgnoreCase(WIFI))

if (ni.isConnected())

hasConnectedWifi = true;

if (ni.getTypeName().equalsIgnoreCase(MOBILE_INTERNET))

if (ni.isConnected())

hasConnectedMobile = true;

}

return hasConnectedWifi || hasConnectedMobile;

}

}

Que fa exactament aquest algoritme? El que fa és comprovar si el telèfon mòbil

disposa de connexió internet, tant 3g com per wifi. I retorna el resultat com a una

variable booleana, es a dir si hi ha internet retornarà true (veritat) i si no hi ha internet

retornarà false (falç).

24

Gràcies a això, abans de pujar per exemple un nou contacte, el que fa es cridar el

mètode anterior de Java per demanar si hi ha connexió, si retorna true, llavors podrem

pujar el nou contacte al servidor. Si ens retorna false, que pot ser molt probable, hi ha

uns mètodes perquè quan en aquell moment no hi hagi connexió a internet esperi a

pujar el contacte que hem creat més tard (quan torni a haver-‐hi connexió a internet).

És lògic que en la aplicació necessitarem alguna manera per poder emmagatzemar

informació en el telèfon mòbil i més tard consultar-‐la o modificar-‐la. Per això és

necessari aquest codi que veurem:

public class Database {

public static final String KEY_ROWID = "id";

public static final String KEY_NAME = "sync";

public static final String ID_ROW = "_ids";

public static final String VALUE_ROW = "_value";

public static final String ID = "id";

public static final String STATE = "state";

public static final String ID_CONTACTS = "idcontacts";

public static final String NAME = "name";

public static final String NUMBER = "phone";

public static final String ID_OFFLINE = "_id";

public static final String BODY = "body";

public static final String CONTACT = "name";

public static final String APP_NAME = "app_name";

public static final String PACKAGE = "package";

25

public static final String VERSION = "version";

public static final String PHONE = "phone";

public static final String DATE = "date";

public static final String M_TYPE = "m_type";

public static final String DURATION = "duration";

public static final String TYPE_CALL = "type_call";

public static final String TYPE = "type";

public static final String ID_CALL_LOG = "_id";

public static final String ID_CALL_LOG_ID = "idreal";

private static final String DATABASE_NAME = "faraway";

private static final String DATABASE_TABLE = "sync";

private static final String DATABASE_TABLE_2 = "user";

private static final String DATABASE_TABLE_3 = "service";

private static final String DATABASE_TABLE_4 = "contacts";

private static final String DATABASE_TABLE_5 = "offline";

private static final String DATABASE_TABLE_6 = "id_callLog";

private static final int DATABASE_VERSION = 1;

private DbHelper ourHelper;

private final Context ourContext;

private SQLiteDatabase ourDatabase;

ArrayList<String> list = new ArrayList<String>();

String proba = "";

private static class DbHelper extends SQLiteOpenHelper {

public DbHelper(Context context) {

super(context, DATABASE_NAME, null, DATABASE_VERSION);

}

26

@Override

public void onCreate(SQLiteDatabase db) {

db.execSQL("CREATE TABLE " + DATABASE_TABLE + " (" +

KEY_ROWID

+ " INTEGER PRIMARY KEY AUTOINCREMENT, " +

KEY_NAME

+ " INTEGER NOT NULL);");

db.execSQL("CREATE TABLE " + DATABASE_TABLE_2 + " (" +

ID_ROW


VALUE_ROW


db.execSQL("CREATE TABLE " + DATABASE_TABLE_3 + " (" + ID


STATE



ID_CONTACTS


NAME

+ " TEXT NOT NULL, " + NUMBER + " TEXT NOT

NULL);");


ID_OFFLINE


BODY + " TEXT, "

27

+ PHONE + " TEXT, " + DATE + " TEXT, " + M_TYPE +

" TEXT, "

+ CONTACT + " TEXT, " + APP_NAME + " TEXT, " +

PACKAGE

+ " TEXT, " + VERSION + " TEXT," + TYPE + " TEXT, "

+ DURATION + " TEXT, " + TYPE_CALL + " TEXT);");


ID_CALL_LOG


ID_CALL_LOG_ID


}

@Override

public void onUpgrade(SQLiteDatabase db, int oldVersion, int

newVersion) {

db.execSQL("DROP TABLE IF EXIST " + DATABASE_TABLE);

db.execSQL("DROP TABLE IF EXIST " + DATABASE_TABLE_2);





onCreate(db);

}

Com podem veure, aquí tenim un codi per crear una sèrie de taules en la base de

dades del telèfon mòbil. La base de dades del telèfon es basa en SQLite.

SQLite és un tipus de base de dades de codi lliure (domini públic), és una base de

dades racional, es a dir, són les utilitzades avui dia. També el que fa és que no és

28

centralitzada sinó de cada programa, la base de dades SQLite és només un fitxer

pertanyent a cada programa, on s’hi van emmagatzemant la informació pertinent.

Com podem veure, en aquesta part del programa necessitem coneixement d’un altre

llenguatge de programació, la programació SQL. Aquest tipus de programació, pot ser

molt senzilla d’entendre ja que fa consultes al servidor.

Un exemple de SQL seria: Volem crear una taula dintre la base de dades del telèfon

mòbil que emmagatzemi el correu electrònic de l’usuari, el nom i la data. Per crear

aquest tipus de taula tenim que utilitzar codi SQL dintre una ordre Java:

db.execSQL(“Aquí codi SQL”);

db és un objecte SQLiteDatabase rebut per el mètode, execSQL és un mètode o una

característica de l’objecte que permet executar codi SQL, i dintre de els parèntesis hi

inserim el codi.

Exemple de codi SQL:

db.execSQL("CREATE TABLE TAULA_MAILS (" + “ID_USUARI”

+ " INTEGER PRIMARY KEY AUTOINCREMENT, " + MAIL

+ " TEXT NOT NULL, " + NAME + " TEXT NOT NULL);");

Aquest codi ens crearà una taula que contindrà una id (s’incrementa automàticament),

correu electrònic (text que no pot estar buit) i el nom (text que no pot estar buit).

29

La taula que hem creat abans amb codi SQL, visualment seria això:

Nom taula: TAULA_MAILS:

6.5 Xml

La part gràfica de la aplicació utilitza XML (modificat) que controla la UI (User

Interface).

XML prové de eXtensible Markup Language. XML no ha nascut només per a la seva

aplicació a Internet, sinó que es proposa com a un estàndard per a l'intercanvi

d'informació estructurada entre diferents plataformes. Es pot utilitzar per a bases de

dades, editors de text, fulls de càlcul i per moltes altres aplicacions diverses. XML és

una tecnologia relativament senzilla que té al seu voltant altres que la complementen i

la fan notablement més extensa, a més de proporcionar-‐li unes possibilitats molt més

grans. A l'actualitat té un paper molt important, ja que permet la compatibilitat entre

sistemes, permetent de compartir informació d'una manera segura, fiable i fàcil.

XML va ser creat per IBM (empresa puntera en tecnologia) als anys 70. Aquest

llenguatge va agradar i va ser normalitzat, ja que tenia un gran ventall de possibilitats.

El llenguatge XML no és un llenguatge de programació en si, és una fusió amb d’altres

com per exemple XHTML (XML+HTML) per crear pàgines web.

ID: 1 Mail: [email protected] Name: Marc Ortiz

ID: 2 Mail: [email protected] Name: Pep

30

Aquí tenim un petit exemple de XML:

<?xml version="1.0" encoding="ISO-‐8859-‐1" ?>

<!DOCTYPE Edit_Missatge SYSTEM "Llista_dades_missate.dtd"

[<!ELEMENT Edit_Missatge (Missatge)*>]>

<Edit_Missatge>

<Missatge>

<Remitent>

<Nom>Nom del remitent</Nom>

<Mail> Correu del remitent </Mail>

</Remitent>

<Destinatari>

<Nom>Nom del destinatari</Nom>

<Mail> Correu del destinatari</Mail>

</Destinatari>

<Text>

<Paràgraf>

Aquest és el meu document, amb una estructura molt senzilla. No conté atributs ni

entitats...

</Paràgraf>

</Text>

</Missatge>

</Edit_Missatge>

31

Ara posarem un exemple de XML amb el seu resultat com a imatge, comencem amb

una part de XML molt senzilla i despès una altre de més complexa.

Primer exemple senzill:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<ScrollView


android:layout_height="match_parent" >

<LinearLayout


android:layout_height="match_parent"

android:orientation="vertical"

android:padding="10dp" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/text_intro" />

<Button



android:onClick="change"

android:text="Go to the app!" />

</LinearLayout>

</ScrollView>

</LinearLayout>

32

Aquesta part de XML consta de un LinearLayout (una estructuració lineal, es a dir, un

element al cantó de l’altre). Un ScrollView és un element molt útil posat el cas de que

no hi hagi espai en la pantalla del telèfon mòbil, de manera que amb un simple gest de

pujar i baixar el dit sobre la pantalla, es poden arribar a veure tots els components.

Dintre del LinearLayout trobem dos components, el TextView (àrea on s’incorpora el

text) i un botó.

El TextView té una sèrie de característiques :

• La llargada : fill_parent (igual que el pare).

• Altura: wrap_content (la que li hem dit nosaltres manualment).

• Text: el text que mostrarà.

El botó té les següents característiques:

• Llargada.

• Altura.

• Text del botó

• Mètode onclick: és el nom de la funció on anirà quan premem el botó.

Aquí trobem el que gràficament seria el codi anterior:

33

Un cop introduïts una mica en la programació XML, veurem l’estructura i el

funcionament d’un programa més complex. Un altre cop, per fer-‐ho més fàcil, veurem

el codi, l’explicació i al final la imatge de com queda:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/db1_root"


android:layout_height="fill_parent"

android:background="@drawable/app_background"


tools:context=".AnonymeActivity" >

<LinearLayout



android:layout_weight="1"


android:padding="6dip" >

<LinearLayout




android:orientation="horizontal" >

<ToggleButton

android:id="@+id/btSms"

style="@style/HomeButton"

34

android:drawableTop="@drawable/selector_sms_icon"

android:textOff="@string/SMS"

android:textOn="@string/SMS" />

<ToggleButton

android:id="@+id/btCalls"


android:drawableTop="@drawable/selector_calls_icon"

android:textOff="@string/calls"

android:textOn="@string/calls" />

</LinearLayout>

<LinearLayout





<ToggleButton

android:id="@+id/btContacts"


android:drawableTop="@drawable/selector_contacts_icon"

android:textOff="@string/contacts"

android:textOn="@string/contacts" />

<ToggleButton

android:id="@+id/btApps"


android:drawableTop="@drawable/selector_apps_icon"

android:textOff="@string/apps"

android:textOn="@string/apps" />

</LinearLayout>

<LinearLayout

35





<ToggleButton

android:id="@+id/btGps"


android:drawableTop="@drawable/selector_gps_icon"

android:textOff="@string/GPS"

android:textOn="@string/GPS" />

<ToggleButton

android:id="@+id/btSyncAll"


android:drawableTop="@drawable/selector_sync_icon"

android:textOff="@string/syncall"

android:textOn="@string/syncall" />

</LinearLayout>

</LinearLayout>

</LinearLayout>

Podem veure que el programa comença amb un <LinearLayout></LinearLayout>.

Aquesta etiqueta, és una manera d’estructurar la el text, botons i imatges de manera

lineal. Veiem que també apareixen una sèrie d’etiquetes anomenades

<ToggleButton></ToggleButton>, els ToggleButton el que fan, són un tipus de botons

que tenen dos posicions, ON/OFF. De manera que si premem un toggle button un cop

es posarà de color (ON) i el següent sense color (OFF). Dintre la etiqueta de Toggle

Button podem especificar-‐hi el text del botó, l’identificador del botó i la imatge que

volem que tingui el botó.

36

A continuació, veurem la imatge corresponent al codi anterior. Aquest tipus

d’estructuració que hem fet s’anomena dashboard, i la xarxa social Google + ho fa

servir.

Aquesta vista és la vista principal de la aplicació, es a dir la més important per la

interacció usuari-‐telèfon.

Dashboard de Faraway Dashboard de Google

37

6.6 JavaScript

JavaScript és un llenguatge de programació interpretat. Un llenguatge de programació

interpretat és un llenguatge que està dissenyat per ser executat per un intèrpret, en

contrast amb els llenguatges de programació compilats. És interpretat perquè si es

compilés, es perdria la eficàcia del llenguatge.

JavaScript va ser implementat originàriament per Netscape Communications

Corporation. És molt conegut en el seu ús en pàgines web, tot i que també s’utilitza

per a moltes altres coses, com per exemple una aplicació d’escriptori que no necessita

connexió a internet, o fins i tot un sistema operatiu amb JavaScript utilitzant un

compilador de Javascript a C++.

Malgrat el les similituds en els noms de Java i JavaScript, no són el mateix ni provenen

del mateix, es a dir, que JavaScript no deriva de Java ni al contrari.

Tot i això, tots dos comparteixen unes similituds de sintaxi, ja que estan inspirats en el

llenguatge C, tot i això JavaScript és més pròxim als llenguatges Self i ActionScript.

Actualment, JavaScript és una marca registrada de Sun Microsistems.

Al 1995, Brendan Eich va desenvolupar en Netscape Corporation la primera versió

d'este llenguatge sota el nom Mocha, rebatejat LiveScript i finalment Javascript.

Aquest últim canvi de nom va coincidir amb la introducció de la tecnologia Java per

part del navegador web Netscape.

Característiques de JavaScript:

• Les relacions d’objectes de JavaScript no són per classes i subclasses,

sinó individuals entre un.

• No es pot establir prototipus en una funció constructora.

• Els prototipus han de formar una cadena finita, no cíclica.

38

Com el llenguatge PHP, JavaScript també es pot incrustar en arxius de altres

llenguatges de programació.

Veiem un exemple de JavaScript incrustat en un HTML:

<html>

<head>

<script type=”text/javascript”>

function clicked(){

var element = document.getElementById(“div_text”);

if(element.value != null){

document.getElementById(“div_insert”).innerHTML =

“correct!”;

}else{

alert(“Please insert text in the box”);

}

}

</script>

</head>

<body>

<form>

<input type=”text” name=”div_text”/>

<input type=”submit” onclick=”clicked();” value=”check”/>

</form>

<div id=”div_insert”></div>

</body>

</html>

39

Aquest programa, consta de un petit formulari ,que quan premem el botó, el

JavaScript es posa en marxa. En la part de JavaScript primer assignem una variable a la

caixeta per entrar-‐hi text mitjançant document.getElementById(“”), desprès gràcies al

tros de codi .value, obtenim el text que hi ha en la caixa. Si no hi ha text envia una

alerta indicant a l’usuari que introdueixi el text, i si tot està correcte, afegim la paraula

correcte a un div html.

També és possible que per estructuració, la part de codi JavaScript estigui en un altre

document (.js), i així tindríem estructurats la part de codi html i la part de codi

JavaScript. Posem-‐ne un exemple:

Aquest seria l’arxiu index.html amb el seu codi html, i a la vegada diríem que hi ha un

script dintre un arxiu anomenat javascript.js. Com que no el volem escriure en el

mateix arxiu el JavaScript, el que fem és crear un altre arxiu anomenat javascript.js que

conté el codi JavaScript.

<html>

<head>

<script type=”text/javascript” src=”javascript.js”></script>

</head>

<body>

<form>

<input type=”text” name=”div_text”/>

<input type=”submit” onclick=”clicked();” value=”check”/>

</form>

<div id=”div_insert”></div>

</body>

</html>

40

L’arxiu javascript.js contindrà aquest codi:

function clicked(){

var element = document.getElementById(“div_text”);

if(element.value != null){

document.getElementById(“div_insert”).innerHTML =

“correct!”;

}else{

alert(“Please insert text in the box”);

}

}

Com podem veure, ara ja no porta els tags <script></script>, ja que no està incrustat

dintre cap codi HTML.

Un altre exemple de JavaScript és el de fer una caixa on ens avisi d’alguna cosa:

function makealert(var frase){

alert(frase);

}

41

6.7 Html

(acrònim d'Hyper Text Markup Language, en català, "llenguatge de marcat

d'hipertext"), és un llenguatge de mercat (llenguatge que combina dades i etiquetes

que contenen informació addicional sobre l’estructura del text o la seva informació, el

més conegut avui en dia és HTML que s’utilitza per la estructuració i contingut de les

pàgines web) que deriva de l'SGML dissenyat per estructurar textos i relacionar-‐los en

forma d'hipertext. Avui en dia és un dels llenguatges més emprats per l’estructuració

de les pàgines web.

En els seus orígens, el llenguatge HTML va ser utilitzat per compartir informació

científica per tot el món, era purament un llenguatge estructural ja que no hi havia

manera de descriure la aparença de la pàgina web, però més endavant, s’hi va afegir

aquestes funcionalitats (posar el text en cursiva o en negreta).

Al 1990 HTML ja va tenir més expectació, però tot i això encara no era un llenguatge

del tot estàndard en els navegadors web.

Més tard, va sorgir un pas important, separa el contingut de la visualització. Amb

l’aparició de HTML 4 va fer que la visualització es fes amb CSS i el contingut amb HTML.

42

Actualment es recomana l’ús de XHTML que aprofita les propietats de HTML + les de

XML.

Etiquetes bàsiques de HTML:

• <html> : és la etiqueta arrel de tot arxiu/programa HTML.

• <head> : és la capçalera de HTML, molts cops conté metainformació del

programa, que no es mostra per pantalla.

o Dintre del head hi podem trobar:

<title> : el nom de la pàgina web.

<meta> : informació complementària com el nom del

autor i descripció del document.

• <body> : conté la informació que es mostrarà per el navegador

o Dintre del body hi podem trobar:

<a> : un enllaç a un altre document o a una part del

mateix.

<h1><h2><h3>... : Títols de documents.

<div> : divisió estructural de la pàgina.

<p> : paràgraf.

<br> : salt de línia.

<table> : taula

<html>

<head>

<script type="text/javascript" src="check.js"></script>

<title>Marc Ortiz Torres</title>

<style type="text/css">

body{

background-‐color:#8FBC8F;

}

43

#title{

font-‐family:Arial,Helvetica,sans-‐serif;

font-‐size: 60px;

text-‐align: center;

color:white;

background-‐color:#008000;

width:900px;

height: 100px;

margin: 10px auto 0px;

border-‐radius: 15px;

box-‐shadow: 2px 2px 3px 3px black;

}

#loginbox{

background-‐color:white;

width: 900px;

height: 500px;

margin: 40px auto 0px;


opacity: 1.0;

box-‐shadow: 2px 2px 3px 3px black;

}

#meet{

width:880px;

height:480px;

background-‐color:white;

position:absolute;

margin: 10px;


overflow:hidden;

44

}

#image{

height:300;

width:250;

margin: 30px;


}

#images{

float:left;

width: 200px;

}

#text{

text-‐align: center;

float:right;

margin: 10px;

width:500px;

height: 400px;

font-‐family: â€œMyriad Proâ€�, Arial, Helvetica,

Tahoma, sans-‐serif;

font-‐size: 17px;

}

#icons{

float:center;

}

#icon{

margin: 5px;

}

45

</style>

</head>

<body>

<div id="title">Marc Ortiz Torres</div>

<div id="loginbox">

<div id="meet">

<div id="text"><b>About me :</b><br><br>I'm

Marc Ortiz a 17 year-‐old student from Olot (Catalunya, near Barcelona). I define myself

like a young entrepreneur who wants to change the world.<br><br><b>Past

:</b><br><br>I was programming Visual Basic at the age of 15 and i did several

projects that helped me to continue this hobby. Later at the same age, I was starting

android programming to create applications for smartphones. My first app was <a

href="https://play.google.com/store/apps/details?id=com.polinomi">Ecuation

Solver</a>. Thanks to this app I was awarded a prize JNC (The first catalan to develop

an Android app). I also did a webpage where my classmates could exchange their

homeworks! <br> <b><br>Now :</b><br><br> I'm developing apps for Swedish State.

I'm in a project called <a href="http://anonyme.mariomontes.es/">Faraway!</a> This

project is based on the connection between your tablet-‐smartphone to evrithing with

Internet. It will be awsome. I'm also on several projects I could not tell.</div>

<div id="images"><img id="image" src="jo.jpg"

></div>

</div>

</div>

<div id="icons">

<a

href="https://plus.google.com/u/0/104432875728154330611/posts"><img id="icon"

src="google.jpg"></img></a><a

href="http://www.facebook.com/mark.ortiz.334"><img id="icon"

src="facebook.jpg"></img></a><a href="https://twitter.com/#!/urtotorras"><img

46

id="icon" src="twitter.jpg"></img></a><a

href="http://www.linkedin.com/profile/view?id=176778878&trk=tab_pro"><img

id="icon" src="linked-‐in.jpg"></img></a><a

href="http://stackoverflow.com/users/1262638/user1262638"><img id="icon"

src="stack.jpg"></img></a>

</div>

</body>

</html>

En aquesta pàgina web HTML + CSS + JavaScript, podem veure que la part HTML

controla la part de estructuració i contingut, la part de CSS controla la visualització, els

colors i les imatges. Això està fet amb HTML (versió 4).

Tot el codi anterior fet amb HTML4 + CSS + Javascript, forma la meva pàgina web

( www.marc-‐ortiz.com ) que es pot veure en la imatge següent:

47

7. Explicació del funcionament de la aplicació:

En aquest apartat, explicarem el funcionament pas a pas de la aplicació mòbil, i com

s’implementa la lògica per poder fer que tot estigui coordinat i funcionant.

Primer de tot, un cop instal·∙lem la aplicació, ens apareix un tipus de vista

implementada:

Com podem veure, en entrar en la aplicació, et va explicant el seu funcionament com

en les pàgines d’un llibre, i tu les pots anar passant pàgina fins que arribes al final.

Aquest tipus de vista s’anomena View Pager.

El View Pager consta de fragments, els fragments serien les pàgines que es van

passant. Si volem que l’usuari passi 10 pàgines, tindrem que crear 10 fragments

diferents. Cada fragment, és una classe amb Java, aquí en podem veure un exemple:

48

public static class ArrayListFragment extends Fragment {

int mNum;

static ArrayListFragment newInstance(int num) {

ArrayListFragment f = new ArrayListFragment();

// Supply num input as an argument.

Bundle args = new Bundle();

args.putInt("num", num);

f.setArguments(args);

return f;

}

/**

* When creating, retrieve this instance's number from its arguments.

*/

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

mNum = (getArguments() != null ? getArguments().getInt("num")

: 1) + 1;

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View v = inflater.inflate(R.layout.fragment_pager_list, container,

false);

Button bChange = (Button) v.findViewById(R.id.btChange);

bChange.setOnClickListener(new View.OnClickListener() {

49

public void onClick(View v) {

}

});

return v;

}

@Override

public void onActivityCreated(Bundle savedInstanceState) {

super.onActivityCreated(savedInstanceState);

}

}

El que ens fa aquesta part del programa es la creació de una classe que fa un extends

de Fragment. Primer de tot, se li passa el numero de la pàgina que vol ser assignat, si

es vol mostrar en primera posició, en segona... Un cop definit el títol del fragment

assignat, llavors se li assigna una estructura, en aquest cas hem importat una

estructura que consta de un botó + un text. A part d’això, dintre d’aquesta classe

fragment, tenim que incorporar-‐hi les accions de cada fragment. Si volem que al

prémer un botó faci alguna acció determinada, llavors tenim que assignar-‐li al botó del

fragment unes funcions addicionals.

Gràcies a aquestes vistes, podrem veure que per a l’usuari és molt més fàcil i més

divertit poder aprendre com funciona la aplicació.

Al final de tota la explicació, podrem veure una pàgina que ens demana que es el que

es vol sincronitzar, es a dir, el que fa la aplicació és pujar una sèrie de coses a internet

perquè l’usuari si no te el telèfon mòbil pugui consultar-‐ho allà. Per tant ens demana

50

que és el que es vol que es pugi, d’aquesta manera els usuaris tindran privacitat,

llibertat i veuran que ells mateixos poden controlar la seva informació.

Com he dit abans, l’usuari pot triar el que es sincronitza. Hi ha la opció de triar SMS,

trucades, posició (GEO localització), contactes, aplicacions o tot. Per defecte be tot

seleccionat .

L’idioma no es cap problema, la aplicació està feta amb portuguès, català, castellà,

angles i francès. Hem implementat també un sistema que automàticament et detecta

el teu idioma.

La aplicació, per fer-‐la el més eficient possible, el que fem és que primer mostrem el

view pager, i quan l’usuari esta llegint el funcionament de la aplicació, ella mateixa el

que fa és crear l’usuari i preparar la base de dades per ser escrita/sobreescrita.

51

Com es crea l’usuari?

Com podeu veure, el nostre projecte no et demana en cap moment de crear cap usuari

ni coses d’aquestes que fan molestar a l’usuari, per tant la aplicació mateixa

s’identifica ella mateixa. Com que els mòbils Android tenen tots una conta de Google i

un número de sèrie, podríem utilitzar aquestes dades per identificar a l’usuari. Per tant

el que fem quan s’obra la aplicació per primer cop, és extreure la conta de Google,

extreure el número de sèrie del telèfon i pujar-‐los a internet.

Codi per extreure el correu Mail de Google:

public String mail() {

AccountManager manager = AccountManager.get(c);

Account[] accounts = manager.getAccountsByType("com.google");

for (Account account : accounts) {

mail = account.name;

}

return mail;

}

A part de pujar el Mail, també pugem a internet el model de mòbil (Samsung Galaxy

SII, Samsung Galaxy SIII, Samsung Galaxy Nexus, HTC Evo 4G,...) i la versió d’Android

(4.0, 2.3.3, 4.0.3, 2.2, 4.0.4, 4.1.2).

Un cop dintre la aplicació, el que farà és començar tres Services. Els services són uns

components, o una manera de funcionament del sistema operatiu d’Android. El que

fan és que s’executen sense necessitat de cap vista, de manera que poden per

exemple estar funcionant sense que hagis obert la aplicació ni que tu ho sàpigues. És

necessari utilitzar aquests components perquè si no el tinguéssim, seria necessari tenir

oberta la aplicació sempre perquè funciones correctament, d’aquesta manera, no cal

ni obrir la aplicació i ella sola ja fa tota la feina.

52

Aquests importantíssims services escolten novetats. Quines novetats? Una novetat per

exemple seria que t’han enviat un missatge, o que tu l’envies, o que algú et truca. Tot

això és escoltat per aquests services i així poden retenir aquestes novetats, tractar-‐les i

pujar-‐ho tot a internet. Dos dels tres services només es dediquen a això, a escoltar un

seguit de novetats que nosaltres hem programat (novetats internes del telèfon). L’altre

service és una mica més especial i més impressionant. El que fa és escoltar també unes

novetats, però no internes (del telèfon mòbil) sinó externes. Externes vol dir que si des

de la web vull encendre el Wifi, Bluetooth, posar una alarma, obrir una aplicació al

telèfon mòbil, enviar un SMS... tot això ho escoltarà el service i el telèfon mòbil obeirà

les ordres.

Exemple de service:

public class MyService extends Service {

Context context;

Database db;

Contacts c;

static final Uri URI = Uri.parse("content://sms");

@Override

public IBinder onBind(Intent arg0) {

return null;

}

public void onCreate() {

super.onCreate();

context = this;

db = new Database(context);

Log.i("**********", "Started Service!");

// Sms

53

Sms sms = new Sms(new Handler(), context);

context.getContentResolver().registerContentObserver(URI, true, sms);

// Contacts

Contacts contacts = new Contacts(context);

context.getContentResolver().registerContentObserver(

ContactsContract.CommonDataKinds.Phone.CONTENT_URI, false,

contacts);

// Localizacion

MyLocation ml = new MyLocation();

ml.getLocation(context, 60000 * 120);

// Call Log (Registro de llamadas)

ContentResolver cr = getContentResolver();

MyCallLog co = new MyCallLog(new Handler(), context);

cr.registerContentObserver(CallLog.Calls.CONTENT_URI, true, co);

}

@Override

public int onStartCommand(Intent intent, int flags, int startId) {

Log.i("LocalService", "Received start id " + startId + ": " + intent);

return START_STICKY;

}

public void onDestroy() {

super.onDestroy();

}

54

Aquest és un dels tres services de la aplicació, escolta quan arriba un SMS, el registre

de trucades, afegir/modificar contactes o canvi de posició.

Una altre cosa molt important és el fet de poder mantenir oberts aquests services

sempre i en el moment en que nosaltres obrim el telèfon mòbil dons ja doni la senyal a

aquests services per posar-‐se en funcionament.

Aquest codi de donar la senyal per posar-‐se en funcionament es fa amb Xml:

<receiver android:name="com.background.Openit" >

<intent-‐filter>

<action android:name="android.intent.action.BOOT_COMPLETED" />

</intent-‐filter>

</receiver>

Un cop tenim els services que escolten les novetats, tenim que crear unes classes i

funcions determinades per extreure la informació de manera correcta i sobretot

extreure només la informació necessària per pujar-‐la al servidor. Només la necessària

per no col·∙lapsar el servidor d’informació innecessària que no farem servir. Tenim

diferents classes per poder extreure la informació, cada classe correspon a un tipus

d’informació que nosaltres volem extreure (SMS, contactes, GEO localització, registre

de trucades, aplicacions,...).

Si tenim que el telèfon mòbil rep la notificació de que t’ha trucat algú (trucada

perduda), faria falta el codi necessari per saber extreure informació de aquesta

trucada perduda (nom, telèfon mòbil i a quina hora) i pujar-‐la a internet per poder-‐la

veure el més ràpid possible.

55

El que volem extreure i que és més important en el telèfon mòbil serien:

• SMS.

• Registre de trucades.

• Localització en tot moment del telèfon.

• Aplicacions del telèfon mòbil.

• Contactes del telèfon.

Que pugem en cada part?

• En SMS el que pugem a internet són la data i hora, el missatge en si, el

que envia el missatge i el que rep el missatge.

• En contactes, el que pugem són (de moment) el número de telèfon i

també el nom del contacte.

• En el registre de trucades, es pugen els següents paràmetres:

o El tipus:

Perduda.

Que et truquen i tu l’agafes.

Que tu truques a algú.

o La duració de la trucada (amb segons).

o La data i hora de trucada (el 25-‐07-‐2012 a les 10:46:03).

o El nom del que et truca.

o I el número de telèfon.

• En la localització, es passa:

o La data i hora.

o Latitud (40.3212156).

o Longitud (3.71174).

• En les aplicacions:

o El nom de la aplicació. (Faraway)

o El Package (com.anonyme.app).

o La versió de la aplicació (1.0).

56

Per extreure tota aquesta informació necessitem demanar uns permisos perquè

Google ens doni permís per obtenir la informació dels usuaris. Els permisos, són

demanats en un arxiu XML anomenat Manifest.

<?xml version="1.0" encoding="utf-‐8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.anonyme.app"

android:versionCode="1"

android:versionName="1.0" >

<uses-‐sdk android:minSdkVersion="8" />

<permission

android:name="com.anonyme.app.permission.C2D_MESSAGE"

android:protectionLevel="signature" />

<uses-‐permission android:name="android.permission.WAKE_LOCK" />

<uses-‐permission android:name="android.permission.DISABLE_KEYGUARD" />

<uses-‐permission android:name="com.anonyme.app.permission.C2D_MESSAGE"

/>

<uses-‐permission android:name="com.google.android.c2dm.permission.RECEIVE"

/>

<uses-‐permission android:name="android.permission.INTERNET" />

<uses-‐permission android:name="android.permission.GET_ACCOUNTS" />

<uses-‐permission android:name="android.permission.USE_CREDENTIALS" />

<uses-‐permission android:name="android.permission.ACCOUNT_MANAGER" />

<uses-‐permission android:name="android.permission.GET_ACCOUNTS" />

<uses-‐permission android:name="android.permission.INTERNET" />

<uses-‐permission android:name="android.permission.READ_CONTACTS" />

<uses-‐permission android:name="android.permission.READ_PHONE_STATE" />

<uses-‐permission android:name="android.permission.ACCESS_NETWORK_STATE"

/>

57

<uses-‐permission android:name="android.permission.BATTERY_STATS" />

<uses-‐permission android:name="android.permission.READ_SMS" />

<uses-‐permission android:name="android.permission.READ_CONTACTS" />

<uses-‐permission android:name="android.permission.SEND_SMS" />

<uses-‐permission android:name="android.permission.WRITE_SMS" />

<uses-‐permission android:name="android.permission.RECEIVE_SMS" />

<uses-‐permission

android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

<uses-‐permission

android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-‐permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-‐permission android:name="android.permission.REBOOT" />

<uses-‐permission android:name="android.permission.DEVICE_POWER" />

<uses-‐permission android:name="android.permission.ACCESS_WIFI_STATE" />

<uses-‐permission android:name="android.permission.UPDATE_DEVICE_STATS" />

<uses-‐permission android:name="android.permission.CHANGE_WIFI_STATE" />

<uses-‐permission android:name="android.permission.WRITE_SETTINGS" />

<uses-‐permission android:name="android.permission.BLUETOOTH_ADMIN" />

<uses-‐permission android:name="android.permission.VIBRATE" />

<uses-‐permission android:name="android.permission.MASTER_CLEAR" />

<uses-‐permission android:name="android.permission.BLUETOOTH" />

<uses-‐permission

android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<application

android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMod

e|screenSize|smallestScreenSize"

android:icon="@drawable/ic_launcher"

android:label="Faraway"

android:theme="@style/Theme.Styled" >

<activity

58

android:name=".IntroActivity"


e|screenSize|smallestScreenSize" >

<intent-‐filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-‐filter>

</activity>

<activity

android:name=".AnonymeActivity"



</activity>

<service android:name="com.background.MyService" />

<service android:name="com.background.BroadcastService" />

<service android:name="com.background.LocationService" />

<activity

android:name=".Introduccion"



</activity>

<service android:name=".GCMIntentService" />

<receiver android:name="com.background.AlarmActivity" >

</receiver>

59

<receiver android:name="com.background.Openit" >

<intent-‐filter>

<action android:name="android.intent.action.BOOT_COMPLETED" />

</intent-‐filter>

</receiver>

<receiver

android:name="com.google.android.gcm.GCMBroadcastReceiver"

android:permission="com.google.android.c2dm.permission.SEND" >

<intent-‐filter>

<action android:name="com.google.android.c2dm.intent.RECEIVE" />

<action android:name="com.google.android.c2dm.intent.REGISTRATION" />

<category android:name="com.anonyme.app" />

</intent-‐filter>

</receiver>

</application>

</manifest>

Com podem veure, en negreta hi han els diferents permisos. Tenen aquesta

estructura: <uses-‐permission android:name="android.permission.BLUETOOTH" />, el

tag uses-‐permission i el nom del permís que volem sol·∙licitar.

Una altre cosa molt important que vam fer va ser la incorporació de mode offline, que

el que fa es que quan no hi ha connexió a internet per qualsevol cosa, i en aquell

moment rebem un SMS, llavors el que farà el programa és guardar-‐se les dades i un

cop torni a haver-‐hi connexió a internet llavors es tornarà a pujar a internet.

60

Ara que hem vist que tenim els permisos necessaris, ja podem començar a extreure i

jugar amb les dades. Veurem un exemple de com extreure els SMS:

public void uploadNewSms(Intent intent) {

db.open();

if (db.Preferences(1)) {

Bundle bundle = intent.getExtras();

Object messages[] = (Object[]) bundle.get("pdus");

SmsMessage smsMessage[] = new

SmsMessage[messages.length];

for (int n = 0; n < messages.length; n++) {

smsMessage[n] = SmsMessage.createFromPdu((byte[])

messages[n]);

String body = smsMessage[n].getMessageBody();

String sender = smsMessage[n].getOriginatingAddress();

if (cc.isOnline()) {

putJson(body, sender, TYPE_INGOING,

date_fecha.getDate());

} else {

db.insert_offline("sms", date_fecha.getDate(),

sender,

null, body, null, null, null,

TYPE_INGOING, null,

null);

}

}

db.close();

}

db.close();

}

61

El que fa aquest tros de programa és extreure els SMS, només els rebuts, els SMS

enviats també tenen el seu propi codi però funcionen de una manera diferent i més

complicada. Comencem el programa mirant si l’usuari ens deixa sincronitzar els SMS, si

no ens deixa llavors no fem res, però si ens deixa llavors obtenim els extres de un

Intent que ens han passat quan es rep un missatge. Recorrem el nombre de SMS

rebuts. Llavors a partir d’aquí, extraiem de cadascun d’ells el cos, el número de telèfon

de la persona que envia el SMS i la data i hora en que ha set rebut. Si hi ha connexió

els puja a internet sense cap problema, i si no n’hi ha llavors es guarda les dades per

pujar-‐lo quan hi torni a haver internet.

Un cop els permisos sol·∙licitats i tot preparat per extreure, falta saber la manera de

passar les dades de el telèfon mòbil fins al servidor d’internet. Per passar les dades

utilitzem un tipus de Web Service anomenat REST (Representational State Transfer).

REST és una manera de connectar , interactuar i transmetre informació entre diferents

màquines (servidors). REST és un tipus de Web Service, però n’hi han molts més.

El que fem en la aplicació és emmagatzemar la informació en unes eines anomenades

JSON (Javascript Object Notation). JSON és un estàndard obert basat en text dissenyat

per a intercanvi de dades llegible per humans. Deriva del llenguatge script JavaScript,

per a representar estructures de dades simples i llistes associatives, anomenades

objectes.

Nosaltres nomes utilitzem el JSONObject i el JSONArray que presenten diferent

estructura però filosofia molt semblant.

Exemple de JSONObject:

"id": "153",

"phone_id": "1",

"number": "+34679484421",

"body": "Has aconseguit algo de l'Office?\nPD: arrivo aquest vespre",

"type": "ingoing",

"date": "24-‐08-‐2012 12:21:46"

62

Veiem que això és un JSONObject que fa referència a un SMS que el telèfon ha rebut,

la notificació ha set rebuda mitjançant els Services que sempre estan escoltant

notificacions, extreu les diferents parts d’un SMS les inserta en un JSONObject (més

endavant explicaré com), i les envia al servidor.

Cada cop que es rep un SMS és enviat des del telèfon fins a la web, es clar, modificant

el contingut però no canviant els paràmetres. Com introduïm les dades dintre d’un

JSONObject amb Java?

String body = “Hola com estas?”;

String sender = “+34673284392”;

String date = ”24-‐1-‐2012”;

JSONObject jobject = new JSONObject();

Jobject.put(“body”,body);

Jobject.put(“sender”,sender);

Jobject.put(“date”,date);

Com podem veure és facilíssim introduir diferents paràmetres dintre un JSONObject.

Només tenim que fer una instància de la classe JSONObject, i accedir al mètode put();.

Dintre d’aquest mètode, tenim que especificar-‐hi dos parts, la primera “identificador”

és per identificar que hi estem passant, i l’altre la variable en si.

Un cop ja tenim la informació adequada dintre de els seus corresponents JSON, només

falta pujar al servidor mitjançant una petició. Ara veurem com es puja la informació al

corresponent servidor.

63

Codi per pujar al servidor:

ArrayList<NameValuePair> nvp = new ArrayList<NameValuePair>();

DatosRegistro dr = new DatosRegistro(c);

nvp.add(new BasicNameValuePair(CONTENT, value));

nvp.add(new BasicNameValuePair(TOKEN, dr.getHashFinal(

dr.getSecretToken(dr.mail(), MAIL), value)));

nvp.add(new BasicNameValuePair(ID_PHONE, String.valueOf(dr

.getPhoneId())));

result = upload(url, nvp, c);

Aquesta part, el que fem, és pujar diferents coses en el servidor. Per raons de

seguretat no només pugem la informació en si, sinó que també pugem un token (clau

de seguretat) perquè no tothom pugui penjar coses i l’identificador de cada telèfon

mòbil i així saber a qui correspon la informació enviada. Tot això es fa mitjançant un

tipus d’array list anomenada NameValuePair (doble valor). Un cop afegides a aquesta

array, falta pujar-‐les al servidor.

Per pujar coses al servidor farem:

public JSONObject upload(String url, ArrayList<NameValuePair> nvp, Context c) {

try {

DefaultHttpClient client = new DefaultHttpClient();

HttpPost hpost = new HttpPost(url);

hpost.setEntity(new UrlEncodedFormEntity(nvp));

HttpResponse response = client.execute(hpost);

HttpEntity entity = response.getEntity();

InputStream is = entity.getContent();

64

BufferedReader reader = new BufferedReader(new

InputStreamReader(

is, "iso-‐8859-‐1"), 8);

StringBuilder sb = new StringBuilder();

String line = null;

while ((line = reader.readLine()) != null) {

sb.append(line + "\n");

}

is.close();

String result = sb.toString();

Log.i("******", result);

JSONObject jobject = new JSONObject(result);

return jobject;

} catch (Exception ex) {

ex.printStackTrace();

return null;

El que fem és un post, passant-‐li com a paràmetre una url i esperant la resposta

d’aquest client de post. Un cop obtinguda la resposta, la descodifiquem

(BufferedReader), i la convertim en un String per poder ser llegida. Aquest String serà

també un JSON perquè la web també envia i llegeix JSON, es a dir, la comunicació

s’efectua amb JSON.

I fins aquí hem pogut veure el funcionament intern i extern de Faraway, aquests

trossos de codi que hi ha en el treball, no són ni ¼ part del que trobaríem en el

programa en si, ja que l’original ocuparia unes 60 pàgines a Arial 12. Està explicat des

de que l’usuari obra la aplicació per primer cop fins que la aplicació ella sola va fent la

seva feina. Aquí no està explicat tot el que Faraway fa, sinó les coses més elementals i

les que qualsevol persona pot intuir. Tot i això podem veure el cicle de funcionament i

de vida de la aplicació Faraway, des de que sorgeix una notificació (rebuda de un SMS)

fins a que es puja al servidor.

65

8. Que, com i a qui pot ajudar aquesta aplicació?

Aquesta aplicació està dirigida a tota la gent que tingui un telèfon mòbil Android. En

tot el món hi ha uns 400 milions de dispositius Android. A més cada dia es venen 1

milió de telèfons d’aquest tipus, que això es tradueix amb 14 telèfons cada segon!

Només cal dir que a Espanya un 85 % dels telèfons que es venen avui dia són Android.

Per tant tenim un gran públic que pugui utilitzar la nostra aplicació a diverses parts del

món.

La aplicació va dirigida a tots els públics, tenim la sort que sincronitzem tot o quasi be

tot el contingut del telèfon mòbil, per tant pot utilitzar-‐lo tant un adolescent com un

empresari. L’adolescent busca més l’apartat d’aplicacions, xerrar amb companys i obrir

i tancar funcionalitats remotament des de la web perquè el mòbil ho faci (obrir una

aplicació des de la web i que se t’obri al telèfon mòbil), en canvi l’empresari

segurament busca més la part de contactes, registre de trucades, localitzacions i enviar

SMS des de un ordinador.

L’usuari només tindrà que obrir la aplicació, nosaltres ens encarreguem de tota la

feina, ells només obriran la aplicació i seran capaços de començar a utilitzar-‐la en

l’instant que la obren. A més quan tinguin la aplicació tancada encara funcionarà sense

problemes!

66

Posem l’exemple de algú que marxa de viatge. Es deixa el telèfon mòbil a casa i espera

una trucada important. Des de la web, un cop estigui per exemple a França, podrà

mirar qui l’està trucant, qui li envia SMS, on està el telèfon mòbil, quina quantitat de

bateria li queda, quins són els números de telèfon que té que trucar en cas

d’emergència, tot. A més d’això tindrà l’avantatge de poder enviar SMS quan ell està a

França i com que el telèfon estarà a Catalunya li costaran molt menys que si portés el

mòbil a sobre.

67

9.1 Com monetitzarem la aplicació?

Es del tot clar que una aplicació com aquesta que ha costat molt de treball (6 mesos de

programació) i mal de caps. La aplicació la vam començar al maig quan tot just feia 1r

de Batxillerat. Una cosa que ha costat tant de treball, no té sentit que no ho

amortitzéssim. De moment tenim una sèrie de plans per monetitzar-‐la:

• Usuaris premium (Usuaris que pagant pocs diners al mes, tinguin més

funcionalitats i accessibilitats que els usuaris normals).

• Mostrar anuncis a la nostra pàgina web (cada clic de un anunci suposa el guany

de poc més d’un cèntim).

• Fer publicitat de coses que estiguin relacionades amb el que estem fent. Per

exemple promocionar una sèrie de aplicacions a la nostra web. És màrqueting,

la gent utilitza el nostre servei perquè li agrada el contingut, per tant li

mostrarem més contingut semblant (publicitat orientada).

9.2 Que farem amb els guanys?

Si tenim la sort de poder guanyar alguns diners, el que faríem seria repartir-‐los entre 5,

quatre parts serien per els integrants del grup i la última part seria per comprar

material i servidors sobretot per millorar i tirar endavant Faraway.

De moment ni ens hem plantejat el que faríem amb guanys ja que per nosaltres és

com un joc fer això. Només ens centrem en millorar la aplicació, que és el que sabem

fer i ens agrada.

68

10. Conclusions

He après molt fent aquest treball de recerca, he millorat els meus coneixements

informàtics i estic intentant endinsar-‐me en el món dels negocis, es a dir, com extreure

tot el suc possible a un producte.

He après una sèrie de valors importantíssims com la gran importància de la feina ben

feta, la competitivitat que actualment existeix en tots els sectors, que la gent no

sempre et valora les coses que tu hi has dedicat molt de temps. He après també que

sacrifici i el treball ben fet són la majoria de vegades, sinònims de èxit (depèn també

d’altres factors que potser no estan a la nostre abast, com per exemple estar en el

moment adequat) i finalment poder treballar en grup, amb persones molt talentoses

també.

Voldria aclarir que aquest treball no l’he fet sol, sinó que hi ha agut persones que

també hi han participat. Una dissenyadora (Marina Aísa), un programador web (Mario

Montes) i una persona que millorava la vista de l’aplicació (Alejandro Rodríguez), tots

ells de diferents parts d’Espanya. També dir que m’ha sorprès el que es pot fer si les

persones s’uneixen en grups per resoldre un problema, dir també gràcies a això

l’objectiu de treballar en grup està més que complert.

En aquest treball he dedicat molt de temps en la part procedimental i encara l’estic

perfeccionant. És un programa que no en principi no n’hi ha cap d’igual i que seria el

primer en sortir al mercat. Desitjo que la aplicació sigui molt útil per la gent.

69

L’aplicació de Faraway està acabada i a punt per ser pujada a Google Play, per tant el

primer objectiu que em vaig plantejar està complert.

El segon objectiu que vaig citar, va ser el de fer una aplicació per Android que sigui

molt més professional que les que he anat fent. He de dir que aquest objectiu també

està complert. He estat molt de temps intentant fer una aplicació professional, que

consumeixi pocs recursos del telèfon mòbil i que sigui molt fiable.

Un benefici dels molts que m’ha portat la realització de Faraway ha set la de tenir més

coneixements a l’hora de crear/resoldre coses. No es el mateix resoldre un problema,

que resoldre’l de manera millor possible, això és el que he après (els problemes tenen

més d’una solució moltes vegades).

La presentació oral i el treball de recerca, com que no estan corregits, no puc saber

quina qualitat tenen, per tant, els dos últims objectius (redactar un bon treball de

recerca i preparar una bona presentació oral) no estan complerts.

70

10. Bibliografia

PHP OFFICIAL SITE. Documentació de PHP [en línia]. http://www.php.net/

JAVASCRIPT INTRODUCTION. Llibre on-‐line de Javascript [en línia].

http://www.librosweb.es/javascript/.

JAVA DOCUMENTATION. Lloc oficial de la documentació de Java [en línia].

http://docs.oracle.com/javase/6/docs/.

HTML . Documetntació d’HTML5 [en línia]. http://dev.w3.org/html5/html-‐author/.

ANDROID DEVELOPERS. Centre de desenvolupament i documentació d’Android [en

línia]. http://developer.android.com/reference/packages.html.

DEVELOPER FORUM STACKOVERFLOW. He resolt diferents preguntes sobre

programació en general [en línia]. http://stackoverflow.com/.

ANDROID INTERFACE BUILDER. Hi he trobat recursos per millorar la interfície d’usuari

[en línia]. http://developer.android.com/guide/topics/ui/index.html.

CSS DOCUMENTATION. Documentació sobre el llenguatge de programació CSS [en

línia]. http://www.w3schools.com/css/css_intro.asp.

TREBALL’DERECERCA’ - Pehocpehoc.cat/wp-content/uploads/2013/09/Faraway.pdf! 6!...

Documents

Transcript of TREBALL’DERECERCA’ - Pehocpehoc.cat/wp-content/uploads/2013/09/Faraway.pdf! 6!...