SocialSkip Service v1.0

SocialSkip Service v1.0 Οδηγίες εγκατάστασης Κωνσταντίνος Παρδάλης Ιόνιο Πανεπιστήμιο - Τμήμα Πληροφορικής Κέρκυρα, Ιανουάριος 2013

Πίνακας περιεχομένων Εισαγωγή... 2 Αρχεία για λήψη... 2 Εγκατάσταση Java Developer Kit 6... 2 Εγκατάσταση του Google Plugin στο Eclipse... 2 Εγκατάσταση Google AppEngine Java SDK 1.6.3... 4 Εισαγωγή SocialSkip Service v1_0 source στο Eclipse... 5 Δημιουργία Google Fusion Tables... 6 Δημιουργία εφαρμογής στο Google App Engine... 16 Ανάπτυξη της εφαρμογής στο Google App Engine... 16 Δοκιμή της εφαρμογής... 18 1

Εισαγωγή Αυτός ο οδηγός περιέχει οδηγίες για τη δημιουργία και το ανέβασμα της εφαρμογής SocialSkip Service v1.0 στο Google App Engine μέσα από το Eclipse Juno (4.2). Η εφαρμογή αποτελείτε από δύο μέρη. Το πρώτο μέρος αποτελείτε από τους ερευνητές, οι οποίοι δημιουργούν τα πειράματα. Το δεύτερο μέρος αποτελείτε από τους δοκιμαστές, στους οποίους επιτρέπετε να δουν και να αλληλεπιδράσουν με το βίντεο. Η εφαρμογή χρησιμοποιεί το Google App Engine framework, Google Fusion Tables για την αποθήκευση των δεδομένων και Google Chart Tools για την γραφική παράσταση των δεδομένων. Αρχεία για λήψη Τι χρειάζεται: 1. JDK 6 (Java SE Downloads) 2. Eclipse IDE for Java (Eclipse Downloads) 3. SocialSkip Service v1.0 source (SocialSkip Downloads) 4. Google AppEngine Java SDK 1.6.3 (AppEngine 1.6.3) Εγκατάσταση Java Developer Kit 6 Αν έχετε ήδη εγκατεστημένο το JDK στον υπολογιστή σας, βεβαιωθείτε ότι έχετε την έκδοση 6. Αυτό μπορείτε να το δείτε γράφοντας στο command-line την εντολή javac version και θα σας εμφανίσει στην οθόνη javac 1.6.x_x εάν έχετε την έκδοση 6. ΠΡΟΣΟΧΗ! Για να σας εμφανίσει την έκδοση της java στο command-line πρέπει να υπάρχει το path στις Μεταβλητές περιβάλλοντος(εnvironment variables). Αν έχετε άλλη έκδοση εγκατεστημένη κάντε απεγκατάσταση της τρέχουσας έκδοσης και εγκαταστήστε την έκδοση 6. Εγκατάσταση του Google Plugin στο Eclipse Αρχικά, κάνετε αποσυμπίεση το Eclipse και είναι έτοιμο προς χρήση, δεν χρειάζεται εγκατάσταση. Στη συνέχεια, ανοίξτε το Eclipse και πατήστε Help -> Install New Software και θα ανοίξει ένα παράθυρο. Τώρα πατήστε το κουμπί Add που βρίσκετε δίπλα από το πεδίο Work with και συμπληρώστε τα πεδία όπως φαίνεται στην παρακάτω εικόνα. Στο πεδίο Location βάλτε την κατάλληλη τιμή για την έκδοση του Eclipse που χρησιμοποιείτε (βλέπε πίνακα). Eclipse version Eclipse 4.2 (Juno) Eclipse 3.7 (Indigo) Eclipse 3.6 (Helios) Eclipse 3.5 (Galileo) Eclipse 3.4 (Ganymede) Eclipse 3.3 (Europa) Value https://dl.google.com/eclipse/plugin/4.2 https://dl.google.com/eclipse/plugin/3.7 https://dl.google.com/eclipse/plugin/3.6 https://dl.google.com/eclipse/plugin/3.5 https://dl.google.com/eclipse/plugin/3.4 https://dl.google.com/eclipse/plugin/3.3 2

Από τη λίστα εφαρμογών επιλέξτε το Google Plugin for Eclipse και Google Web Toolkit SDK 2.4.0 και πατήστε Next. Στο Security warning πατήστε OK και μόλις τελειώσει η εγκατάσταση κάντε επανεκκίνηση το Eclipse. 3

Εγκατάσταση Google AppEngine Java SDK 1.6.3 Κάντε αποσυμπίεση του αρχείου appengine-java-sdk-1.6.3.zip και ανοίξτε το Eclipse και από το μενού πατήστε Window -> Preferences -> Google -> AppEngine και πατήστε το κουμπί Add. Τώρα πατήστε Browse, βρείτε το κατάλογο που βρίσκετε το αποσυμπιεσμένο αρχείο και επιλέξτε το. Στο πεδίο Display name γράψτε App Engine 1.6.3. Τέλος, βεβαιωθείτε ότι είναι επιλεγμένο το Αpp Engine 1.6.3 και πατήστε OK. 4

Εισαγωγή SocialSkip Service v1_0 source στο Eclipse Κάντε αποσυμπίεση το αρχείο SocialSkip_Service_v1_0.zip. Στο Eclipse πατήστε File -> Import -> General - > Existing Projects into workspace και μετά Next. Τώρα πατήστε το κουμπί Browse δίπλα από το πεδίο Select root directory, βρείτε τον κατάλογο που βρίσκετε ο αποσυμπιεσμένος φάκελος(sagisoc) και επιλέξτε το φάκελο και πατήστε Finish. Αφού έχετε ανοίξει το project στο Eclipse, πατήστε Project -> Properties -> Java Built Path, ανοίξτε την καρτέλα Libraries, πατήστε Add External JARs και προσθέστε τα αρχεία gdata-core-1.0.jar και opencsv- 2.3.jar από τον κατάλογο war/web-inf/lib. Επίσης, θα πρέπει στην καρτέλα Libraries να βλέπετε άλλα τρία ακόμα αντικείμενα ακριβώς όπως παρακάτω: App Engine SDK[App Engine 1.6.3 1.6.3] GWT SDK[GWT 2.4.0] JRE System Library[jdk1.6.x ] Αν μέσα στις αγκύλες στο App Engine SDK[ ] δεν υπάρχει η έκδοση 1.6.3, επιλέξτε το και πατήστε το κουμπί Edit και επιλέξτε την έκδοση App Engine 1.6.3. Επίσης, αν μέσα στις αγκύλες στο GWT SDK [ ] δεν υπάρχει η έκδοση 2.0.4, επιλέξτε το και πατήστε το κουμπί Edit και επιλέξτε την έκδοση 2.0.4. Τέλος, αν μέσα στις αγκύλες στο JRE System Library[ ] δεν υπάρχει το jdk1.6.x, διαγράψτε τη βιβλιοθήκη και προσθέστε μία JDK 6 βιβλιοθήκη. Για να προσθέσετε τη βιβλιοθήκη κάντε κλικ στο κουμπί Add Library, επιλέγετε JRE System Library από τη λίστα, κλικ στο Next, επιλέγετε την βιβλιοθήκη jdk1.6.x και κάντε κλικ στο Finish. 5

Δημιουργία Google Fusion Tables Για να δημιουργήσετε fusion tables πρέπει να μπείτε στη σελίδα http://docs.google.com και να κάνετε είσοδο με το λογαριασμό σας Google. Πρέπει να δημιουργήσετε 7 πίνακες. Αρχικά, δημιουργήστε τους πέντε παρακάτω πίνακες. Ακολουθήστε τις οδηγίες κάτω από τους πίνακες. Table 1 (UserBase) Column name VideoId User Time TransactionId TransactionTime Type Number Text Number Number Date/Time Table 2 (Transactions) Column name Id Transaction Type Number Text Table 3 (Researchers) Column name Mail Name Type Text Text Table 4 (RequestsOfResearchers) Column name Type Mail Text Name Text Table 5 (Experiments) Column name ResearcherId VideoURL Controls Questionarie Info VideoDescr Type Number Text Number Text Text Text Παρακάτω, είναι η δημιουργία του πίνακα UserBase. Η διαδικασία είναι η ίδια και για τους υπόλοιπους 4 πίνακες. 6

Από την αρχική σελίδα κάντε κλικ στο Create -> More -> Fusion Table. Από την νέα καρτέλα που θα ανοίξει στο browser σας επιλέξτε Create empty project. Στη σελίδα που σας άνοιξε κάντε κλικ στο File και Rename για να αλλάξετε το όνομα του πίνακα. Σε αυτή τη περίπτωση που δημιουργούμε τον πρώτο πίνακα βάζουμε για όνομα UserBase και τέλος κάντε κλικ στο Save. 7

Τώρα από το μενού κάντε κλικ στο Edit. Με το Add column μπορείτε να προσθέσετε νέα στήλη στον πίνακα και με το Change columns να τροποποιήσετε ή να διαγράψετε κάποια στήλη (στη δικιά σας περίπτωση να διαγράψετε τις ήδη υπάρχουσες στήλες και να προσθέσετε νέες). Μόλις ολοκληρώσετε την παραπάνω διαδικασία θα πρέπει να σας εμφανιστεί ο πίνακας UserBase όπως στην παρακάτω εικόνα. 8

Και όπως αναφέρθηκε παραπάνω η διαδικασία είναι η ίδια και για τους υπόλοιπους 4 πίνακες. Στον πίνακα 2 (Transactions) προσθέστε τις παρακάτω γραμμές. Μπορείτε να τις προσθέσετε κάνοντας κλικ στο Edit και Add row. Id Transaction 1 GoBackward 2 GoForward 3 Play 4 Pause 5 Seekbar O έκτος πίνακας είναι μία σύνδεση του πίνακα 1 με τον 2. Πηγαίνετε στον πίνακα 1 (UserBase) και κάντε κλικ στο File -> Merge, στην επόμενη καρτέλα επιλέξτε τον πίνακα Transactions. 9

Στη συνέχεια, στο This table διαλέγουμε το TransactionId, και στο πίνακα Transactions το Id και κάντε κλικ στο Next. Στην επόμενη καρτέλα βεβαιωθείτε ότι είναι όλες οι στήλες επιλεγμένες και κάντε κλικ στο Merge. Τώρα θα σας εμφανίσει τον 6 ο πίνακα με όνομα Merge of UserBase and Transactions. 10

Τέλος, πρέπει να δημιουργήσετε τον έβδομο πίνακα. Πηγαίνετε στον πίνακα 1 (UserBase) και κάντε κλικ στο File -> Create view. Στη φόρμα που θα ανοίξει επιλέξτε μόνο το VideoId, Time και TransactionId και κάντε κλικ στο Create. Και ο πίνακας έχει δημιουργηθεί με όνομα View of UserBase. Τώρα πρέπει να κάνετε τον τελευταίο πίνακα (View of UserBase) δημόσιο. Ανοίξτε τον πίνακα και κάντε κλικ στο File -> Share. 11

Τώρα κάντε κλικ στο Change. Επιλέξτε Public on the web και μετά κάντε κλικ στο Save. 12

Τέλος, κάντε κλικ στο κουμπί Done. Τώρα πρέπει να πάρετε το encrypted ID από κάθε πίνακα. Αυτό μπορείτε να το κάνετε ανοίγοντας τον πίνακα και κάντε κλικ στο File -> About this table και κάντε copy-paste το encrypted ID και κρατήστε το κάπου. Επαναλάβετε τη διαδικασία για τους πίνακες Researchers, Experiments, UserBase, Merge of UserBase, Transactions, RequestsOfResearchers και View of UserBase. Βάλτε τα encrypted Id των πινάκων Researchers, Experiments, UserBase, Merge of UserBase, Transactions και RequestsOfResearchers στο αρχείο FusionApi.java. Δείτε τα σχόλια μέσα στο κώδικα και την εικόνα παρακάτω. 13

Το encrypted ID του πίνακα View of UserBase πρέπει να το βάλετε μέσα στο αρχείο war/code/researcher2.js. Δείτε τα σχόλια μέσα στο αρχείο και την παρακάτω εικόνα. Στη συνέχεια, πρέπει να μπείτε στη σελίδα https://code.google.com/apis/console. Πατήστε Create project και στη νέα σελίδα που άνοιξε κάντε κλικ στο Services. 14

Και στη σελίδα Services θέστε το Fusion Tables API σε ON. Στη συνέχεια, κάντε κλικ στο API Access και κάντε copy-paste το API key και βάλτε το μέσα στο αρχείο FusionApi.java. Τέλος γράψτε το gmail και τον κωδικό σας στα δύο πεδία (email και password) του αρχείου FusionApi.java. Δείτε παρακάτω την εικόνα για περισσότερη βοήθεια. 15

Δημιουργία εφαρμογής στο Google App Engine Αρχικά, μπείτε στη σελίδα https://appengine.google.com/ και κάντε είσοδο με το λογαριασμό σας google. Μετά κάντε κλικ στο κουμπί Create Application. Αν είναι η πρώτη φορά που δημιουργείτε εφαρμογή στο App Engine θα σας ζητήσει να επαληθεύσετε το λογαριασμό σας. Όταν ολοκληρώσετε την επαλήθευση λογαριασμού, κάντε κλικ στο κουμπί Create Application και βάλτε ένα όνομα στο πεδίο Application Identifier και προαιρετικά στο πεδίο Application Title και τέλος κάντε κλικ στο κουμπί Create Application. Επιπλέον, κρατήστε κάπου το Application Identifier που δώσατε, θα σας χρειαστεί παρακάτω. Ανάπτυξη της εφαρμογής στο Google App Engine Ανοίξτε το Eclipse και κάντε κλικ στο Run από το μενού και Run Configurations. Στο παράθυρο που σας άνοιξε πηγαίνετε Web Application -> SagiSoc και ανοίξτε τη καρτέλα Arguments. Στο πεδίο VM arguments προσθέστε τη τιμή -Dappengine.user.timezone.impl=UTC (χωρίς τα εισαγωγικά). Τέλος, κάντε κλικ στο κουμπί Run. Τώρα κάντε κλικ στο εικονίδιο Google από το toolbar και Deploy to App Engine. 16

Τώρα κάντε κλικ στο App Engine project settings. Στο πεδίο Application ID βάζετε το Application Identifier από την εφαρμογή που δημιουργήσατε στο Google App Engine (https://appengine.google.com/). Μετά κάντε κλικ στο OK. Τέλος, κάντε κλικ στο κουμπί Deploy και η εφαρμογή σας θα ανέβει στο Google App Engine. 17

Δοκιμή της εφαρμογής Μπείτε στη σελίδα http://applicationid.appspot.com. applicationid = Application Identifier από την εφαρμογή που δημιουργήσατε στο Google App Engine (https://appengine.google.com/) Αν όλα πήγαν καλά θα σας εμφανίσει την παρακάτω σελίδα. Πατήστε Sign in και κάντε είσοδο με το λογαριασμό σας google. Η εφαρμογή θα καταλάβει ότι είστε ο διαχειριστής και θα σας εμφανίσει την παρακάτω σελίδα. Σε αυτή τη σελίδα συμπληρώστε το πεδίο Full name με το ονοματεπώνυμο σας και κάντε κλικ στο κουμπί Continue. 18

Τώρα θα σας εμφανίσει την παρακάτω σελίδα και θα είναι η αρχική σελίδα σας από εδώ και πέρα. Επίσης, πλέον είστε και διαχειριστής και ερευνητής. 19

Η σελίδα των ερευνητών. Η σελίδα των επισκεπτών. Το τελευταίο πράγμα που έμεινε να κάνετε είναι να προσθέσετε ερευνητές. Αυτό μπορείτε να το κάνετε στέλνοντας το link της εφαρμογής (applicationid.appspot.com) σε άτομα που ενδιαφέρονται να δημιουργήσουν πειράματα. Τα άτομα αυτά θα μπορούν να σας στείλουν μία αίτηση από τη σελίδα των επισκεπτών για να τους προσθέσετε σαν ερευνητές στην εφαρμογή. 20