Hey there!! :) I want to develop a Program for a Android Phone App for a school
ID: 3757301 • Letter: H
Question
Hey there!! :) I want to develop a Program for a Android Phone App for a school project. The Project is a Language Exchange App for a University. The goal is that student can look a language exchange partner for studies. Can you help me with a code (preferably made in Python or Javascript).
App must have a welcome screen that says "Welcome choose an option:
1. Creat Account (Information: Name, Picture, Email Address, Language and Brief Description of Self no more than 50 words)
2. Find a Partner (Can view a persons profile and message them)
3. Find a Language (Can sort by language)
4. Close App
Thank You!!!
Explanation / Answer
lingochat.html
<head>
<title>lingochat</title>
</head>
<body>
<h1>LingoChat</h1>
{{> myModal}}
{{> sourceLanguages}}
{{> targetLanguages}}
<div class="text">
{{> messages}}
{{> translations}}
</div>
<div class="textEntry">
{{> leftEntry}}
{{> rightEntry}}
</div>
</body>
<template name="sourceLanguages">
<select name="sourceLanguages" id="source-select">
{{#each sourceLanguages}}
{{> sourceLanguage}}
{{/each}}
</select>
</template>
<template name="sourceLanguage">
<option value="{{name}}">{{name}}</option>
</template>
<template name="targetLanguages">
<select name="targetLanguages" id="target-select">
{{#each targetLanguages}}
{{> targetLanguage}}
{{/each}}
</select>
</template>
<template name="targetLanguage">
<option value="{{name}}">{{name}}</option>
</template>
<template name="defaultSources">
<select name="defaultSources" id="defaultSource-select">
{{#each defaultSources}}
{{> defaultSource}}
{{/each}}
</select>
</template>
<template name="defaultSource">
<option value="{{name}}">{{name}}</option>
</template>
<template name="defaultTargets">
<select name="defaultTargets" id="defaultTarget-select">
{{#each defaultTargets}}
{{> defaultTarget}}
{{/each}}
</select>
</template>
<template name="defaultTarget">
<option value="{{name}}">{{name}}</option>
</template>
<template name="messages">
<div id="messages">
{{#each messages}}
{{> message}}
{{/each}}
</div>
</template>
<template name="message">
<p><strong>{{name}}:</strong> {{message}}</p>
</template>
<template name="translations">
<div id="translations">
{{#each translations}}
{{> translation}}
{{/each}}
</div>
</template>
<template name="translation">
<p><strong>{{name}}:</strong> {{translation}}</p>
</template>
<template name="leftEntry">
<div id="left-entry">
<textarea name="message" class="boxsizingBorder" id="leftMessageBox" rows="2" placeholder="Enter your message..."></textarea>
</div>
</template>
<template name="rightEntry">
<div id="right-entry">
<textarea name="right-message" class="boxsizingBorder" id="rightMessageBox" rows="2" placeholder="Enter your message..."></textarea>
</div>
</template>
<template name="myModal">
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Welcome to LingoChat</h3>
<p>LingoChat instantaneously translates messages you type in one language into more than 50 of the world's most spoken languages.</p>
<br />
<p>Use it to chat with people who speak a different language or as a tool for learning to speak a new language.</p><br />
<p>Enter your name to start:</p>
</div>
<form id="get-username">
<div class="modal-body">
<div>
<input type="text" id="username" placeholder="Your Name">
</div> <br />
<div id="default">
<p>I speak*:</p><br />
{{> defaultSources}}
<p>I want to chat in*:</p><br />
{{> defaultTargets}}
<p id="note">*You can change these later</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
</div>
</template>
lingochat.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
border: 0;
font-family: inherit;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: top;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*--------------------*/
/*--------------------*/
body {
font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
margin: 0;
padding-left: 10px;
background: #f4f4f4 url(client/bootstrap/img/background.png);
}
h1 {
font-size: 30px;
font-weight: bold;
width: 15%;
padding:10px;
}
#name {
}
#target-select {
width: 250px;
margin-left: 308px;
}
#source-select {
width: 250px;
}
#default-select {
width: 250px;
}
.text, .textEntry {
clear: left;
width: 100%;
margin-bottom: 20px;
margin-top: 20px;
}
#left-entry {
clear: left;
float: left;
width: 500px;
}
#right-entry {
float: left;
width: 500px;
margin-left: 50px;
}
#messages {
float: left;
margin-bottom: 10px;
margin-right: 10px;
width: 500px;
height: 400px;
overflow: auto;
background-color: white;
}
#translations {
float: left;
width: 500px;
height: 400px;
overflow: auto;
margin-left: 50px;
background-color: white;
}
#messages p, #translations p {
margin-bottom: 10px;
line-height: 1.2
}
textarea {
resize: none;
width: 100%;
}
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p {
font-size: 20px;
}
#note {
font-size: 14px;
}
lingochat.js
Messages = new Meteor.Collection('messages');
Translations = new Meteor.Collection('translations');
Languages = new Meteor.Collection('languages');
if (Meteor.is_server) {
var loadSourceLanguages = function() {
Languages.remove({});
var request_url = 'https://www.googleapis.com/language/translate/v2/languages';
var request_params = {
key: 'AIzaSyApd5b77jtVRZCfCAn6wzlaD52FoXeJwCw',
target: 'en'
}
Meteor.http.get(request_url, {params: request_params}, function (err, res) {
if(err){
console.log("Error: " + err);
} else {
var languages = res.data.data.languages;
for(var i = 0; i < languages.length; i++){
Languages.insert({
name: languages[i].name,
language: languages[i].language
});
}
}
});
};
Meteor.startup(function () {
loadSourceLanguages();
});
}
if (Meteor.is_client) {
var height = 1000000;
var nameEntry = "Anonymous";
var defaultSource = "";
var defaultTarget = "";
Template.messages.rendered = function() {
//do this only on template load
if(!this._rendered) {
this._rendered = true;
$("#myModal").modal({backdrop:true});
$("#get-username").on('submit', function(e) {
e.preventDefault();
nameEntry = $('#username').val();
defaultSource = $('#defaultSource-select').val();
defaultTarget = $('#defaultTarget-select').val();
$('#source-select').val(defaultSource);
$('#target-select').val(defaultTarget);
$('#myModal').modal('hide');
});
}
$('#messages').scrollTop(height);
$('#translations').scrollTop(height);
}
//COPIED FROM THE METEOR TODOS EXAMPLE:
// Returns an event map that handles the "escape" and "return" keys and
// "blur" events on a text input (given by selector) and interprets them
// as "ok" or "cancel".
var okCancelEvents = function (selector, callbacks) {
var ok = callbacks.ok || function () {};
var cancel = callbacks.cancel || function () {};
var events = {};
events['keyup '+selector+', keydown '+selector+', focusout '+selector] =
function (evt) {
if (evt.type === "keydown" && evt.which === 27) {
// escape = cancel
cancel.call(this, evt);
} else if (evt.type === "keyup" && evt.which === 13) {
// blur/return/enter = ok/submit if non-empty
var value = String(evt.target.value || "");
if (value)
ok.call(this, value, evt);
else
cancel.call(this, evt);
}
};
return events;
};
var translateTextLeft = function(name, text, timestamp){
var srcName = $('#source-select').val();
var trgName = $('#target-select').val();
var src = Languages.findOne({name:srcName}).language;
var trg = Languages.findOne({name:trgName}).language;
var request_url = 'https://www.googleapis.com/language/translate/v2';
var request_params = {
key: 'AIzaSyApd5b77jtVRZCfCAn6wzlaD52FoXeJwCw',
source: src,
target: trg,
q: text
};
Meteor.http.get(request_url, {params: request_params}, function (err, res) {
if(err){
console.log(err);
} else {
Translations.insert({
name: name,
translation:res.data.data.translations[0].translatedText,
timestamp: timestamp
});
}
});
};
Template.leftEntry.events(okCancelEvents(
'#leftMessageBox',
{
ok: function (text, evt) {
//var nameEntry = document.getElementById('name');
if(nameEntry !== ""){
var ts = (new Date()).getTime();
Messages.insert({
name: nameEntry,
message: text,
timestamp: ts
});
evt.target.value = '';
translateTextLeft(nameEntry,text,ts);
$('#messages').scrollTop(height);
$('#translations').scrollTop(height);
}
}
}));
var translateTextRight = function(name, text, timestamp){
var trgName = $('#source-select').val();
var srcName = $('#target-select').val();
var src = Languages.findOne({name:srcName}).language;
var trg = Languages.findOne({name:trgName}).language;
var request_url = 'https://www.googleapis.com/language/translate/v2';
var request_params = {
key: 'AIzaSyApd5b77jtVRZCfCAn6wzlaD52FoXeJwCw',
source: src,
target: trg,
q: text
};
Meteor.http.get(request_url, {params: request_params}, function (err, res) {
if(err){
console.log(err);
} else {
Messages.insert({
name: name,
message:res.data.data.translations[0].translatedText,
timestamp: timestamp
});
}
});
};
Template.rightEntry.events(okCancelEvents(
'#rightMessageBox',
{
ok: function (text, evt) {
//var tag = Session.get('tag_filter');
//var nameEntry = document.getElementById('name');
if(nameEntry !== ""){
var ts = (new Date()).getTime();
Translations.insert({
name: nameEntry,
translation: text,
timestamp: ts
});
evt.target.value = '';
translateTextRight(nameEntry,text,ts);
$('#messages').scrollTop(height);
$('#translations').scrollTop(height);
}
}
}));
Template.messages.messages = function(){
return Messages.find({}, { sort: {time: 1} });
};
Template.translations.translations = function(){
return Translations.find({}, { sort: {time: 1} });
};
Template.sourceLanguages.sourceLanguages = function(){
return Languages.find({}, { sort: name });
};
Template.targetLanguages.targetLanguages = function(){
return Languages.find({}, { sort: name });
};
Template.defaultSources.defaultSources = function(){
return Languages.find({}, { sort: name });
};
Template.defaultTargets.defaultTargets = function(){
return Languages.find({}, { sort: name });
};
}