Home » AppInventor » How to send direct emails with App Inventor

How to send direct emails with App Inventor

Introduction

App Inventor provides an easy mechanism to send mails using the client installed in the device. It’s based on the startActivity component and is extremely simple to implement as explained in the App Inventor reference documentation. Unluckily using the device mail client is not adequate when the mail needs to be sent without the user noticing it, or at least with minimal interaction (maybe just a notification). For example, I recently created a Login Template where it was unsuitable to show the mail prior to sending it because it contains a secret password and hence only the email receiver should be able to read it.

Therefore we’ll show an alternative way to send mails without user interaction.

What are we going to build

Actually the solution is not original but rather provided in a project by ShivalWolf (see next chapter for more details). However this post adds some practical details that were necessary to integrate the solution in my app, and which I think will be common to most apps:

  • How to set up the mail sending service together with the TinyWebDB service. Since we’ll usually have an application service to provide de DB capabilities, it would be a pity to use a different one for sending mails (remember Google AppEngine’s limitation to 10 free services).
  • How to deal with security issues for the service, i.e. the ability to restrict its utilization to privileged users. This is probably more relevant for the TinyWebDB than for the mail sending itself.
  • Upgrade the service to Python2.7. For an explanation of the steps involved you may be interesed in this post: Python 2.7 migration demystified.

By the way when explaining the Web DB service we’ll also mention a useful trick to ease DB editing which you may not be aware of since the TinyWebDB describes an alternative way of doing it.

Installation

Mail sender service (App Engine)

Assuming we really intend to provide a shared service for both the TinyWebDB and mail sending, I recommend following these steps to install the solution:

  1. Create and deploy the TinyWebDB service as explained in the tutorial Creating a Custom TinyWebDB Service
  2. Download the files app.yaml and main.py and replace the files with the same name located in the folder where you downloaded the TinyWebDB.
  3. Edit the main.py and replace the contents of the variables EmailFrom and AuthKey as explained below
  4. Deploy again the application as in the first step (i.e. with the AppEngine console)

Client side (App Inventor)

Download these sources and upload them into App Inventor. You’ll realise there’s some functionality that is not explained in this tutorial because this is actually a more general application (which is explained in the Login template post). The part that concerns us is just the mail sending window (see below). Alternatively, since both user interface and code blocks are very simple, you may consider developing the client side from scratch.

How it works

The service deployed in this tutorial serves two purposes: unify both services (TinyWebDB and SendMail) and introduce security. We’ll just explain the small adaptations required for these two purposes since the services are fully explained in the above mentioned posts.

The combination of both services consists of merging the contents of the respective main.py files. This can be done for example starting from the TinyWebDB file and including into it the classes from SendMail. Additionally we’ll need to indicate the function associated to each GET request, i.e. modify the following line:

### Assign the classes to the URL’s
app = webapp2.WSGIApplication([(‘/’, MainPage),
(‘/storeavalue’, StoreAValue),
(‘/deleteentry’, DeleteEntry),
(‘/getvalue’, GetValue),
(‘/sendemail’, sendemail)],
debug=True)

Also in the main.py file we need to inform the configuration variables as indicated by ShivalWolf:

############ SETTINGS ############
EmailFrom = “yourmail#set this to a valid email name and address eg “ShivalWolf <me@domain.com>”
AuthKey = “yourapp#Set the Auth key This is just a random value that you set in your App Inventor code

Regarding security, configurations must be made in the app.yaml file, concretely informing the value ‘login: admin‘ in the handlers section to indicate the service can only be called by the administrator. However this alone would not work because this restriction would also prevent App Inventor to access the services, so we must specify that our services are excluded from this restriction:

handlers:
login: admin
– url: /getvalue
script: main.app
login: optional
– url: /storeavalue
script: main.app
login: optional
– url: /sendemail
script: main.app
login: optional

That’s all regarding the two purposes of this tutorial. However, since we’re modifying the app.yaml file, I’ll profit to mention there is a useful parameter that allows using the Datastore administration for App Engine.

builtins:
– datastore_admin: on

Among other things, this will allow us to consult and modify our database records from the App Engine administrative console using a more user-friendly interface than the one provided by the TinyWebDb service.

User interface

logintutorial_81

As stated above, we’re interested in just a small part of the app:

  • HiddenMail_SEND: A textbox containing the address where the mail must be sent
  • ButtonOK_SEND: The button that provokes the mail to be sent
  • WebMailSend: The web component that performs the actual job. No need to inform any attribute since it’s done by code

Code blocks

Here’s a screenshot of the core function, both for AI classic and AI2:

 

 

logintutorial_92

The first thing to do is indicate the value for the two configurations variables:

  • APPENGINE_ADDRESS: You must replace this variable by the URL where you’ve set up the service
  • AUTH_KEY: Replace it by the authentication key you’ve informed in the main.py file

After this, sending the mail consists simply in posting a string to our service, containing five pieces separated by ‘|||‘:

  1. Authentication key
  2. Email address
  3. Email subject
  4. Email body
  5. Indicator of attachment. It must be informed as no because I’ve removed this part from the service.
Advertisements

108 Comments

  1. akara99 says:

    Hello! First of all, thanks for making this tutorial! However, I have a question about the installation process. when I tried to deploy the tinywebdb, I got this log file error:

    2013-05-28 19:59:37 Running command: “[‘c:\\Python27\\pythonw.exe’, ‘-u’, ‘C:\\Program Files\\Google\\google_appengine\\appcfg.py’, ‘–no_cookies’, u’–email=xxxx@gmail.com’, ‘–passin’, ‘update’, ‘C:\\Users\\mc\\Documents\\do not delete\\customtinywebdb’]”
    07:59 PM Host: appengine.google.com
    Error parsing yaml file:
    Unable to assign value ‘xxxs.appspot.com’ to attribute ‘application’:
    Value ‘xxxs.appspot.com’ for application does not match expression ‘^(?:(?:[a-z\d\-]{1,100}\~)?(?:(?!\-)[a-z\d\-\.]{1,100}:)?(?!-)[a-z\d\-]{0,99}[a-z\d])$’
    in “C:\Users\mc\Documents\do not delete\customtinywebdb\app.yaml”, line 1, column 14
    2013-05-28 20:00:00 (Process exited with code 1)

    You can close this window now.

    Can you explain in simple English what went wrong ( newbie to programming here). I believe there is an error because when i tried to access my app engine address, I get a ” 500 server error”. common sense tells me that it should exactly look like http://appinvtinywebdb.appspot.com/ but with a different address.

    Moreover, I tried to access localhost:8080 to test the service, but my browser is unable to connect.

    I hope you can enlighten me on the possible solutions.

    Thank you and more power to your site!

    • eixerits says:

      Hi, I think the problem is that you’ve informed an invalid application name in the first line of the ‘app.yaml’ file. Concretely it seems you’ve indicated the full path of your service (“xxxs.appspot.com”) when only the first identifier must be informed (“xxxs”).

      Because of this problem it’s normal that you cannot access to the service. For the deployment to be ok, the log last line should be “Process exited with code 0”. Once you get this message, you should be able to access your service in https://xxxs.appspot.com

      The same problem seems to be the cause for not accessing your service in the localhost:8080. Actually to test the service locally it must be running. For example you can open the appengine launcher, select you project and press “run”. If everything is ok, a green circle should appear in the first column. Otherwise you’ll probably see a yellow triangle (I think this is what will happen until you correct the app.yaml file)

    • Toshi says:

      Don’t know if you figured it out but there is a space between ‘python’ and ’27’ in the app.yaml file (you can’t see though, but trust me it’s there), just delete that space and it will work

  2. akara99 says:

    Hello eixerits! thanks for the info! I have followed your suggestions and it works!

  3. Butterice99 says:

    Hello! I found your site while I was seeking alternatives to ShivalWolf’s tutorial.

    I tried to replicate the example you’ve shown but I think something isn’t working. I can’t receive the messages from my app.

    I assume it has something to do with a.) blocks??

    I am attaching a screenshot for your reference.

    1.) http://www.troovi.com/JCbqpBKtvjpu

    2.) http://www.troovi.com/8HF0r6OUkDgb

    3.) http://www.troovi.com/FZcu4mxN9RC2

    or b.) perhaps in the main app.yaml file, I did not include the following:

    handlers:
    login: admin
    – url: /getvalue
    script: main.py
    login: optional
    – url: /setvalue
    script: main.py
    login: optional
    – url: /sendemail
    script: main.py
    login: optional

    Your response is appreciated.

    • eixerits says:

      Hi, I see you send 6 “pieces” in the POST and there should be only 5 (Authentication key, Email address, Email subject, Email body, Indicator of attachment). It’s very likely that this is the problem since the python function starts validating the length (‘if len(details) == 5 or len(details) == 7’). So the function allows only 5 or 7 parameters. In my simplified version, only 5 should be sent since I have removed the possibility of sending attachments.

      The parameters from the app.yaml should not be the problem as far as you redirect the call to the “main.py”, i.e. I understand that you have something like:

      handlers:
      – url: .*
      script: main.py

      So what you can do is review what happens with this extra piece (maybe just remove one piece and try again). If this is not the problem, you could add some traces into the log to verify that the function is really invoked and how far it arrives. For example:
      – Add a line logging.info(“Sendmail function”) in the line after def process_email(self, data):
      – Execute your app
      – Open the dashboard (https://appengine.google.com/dashboard?app_id=xxxx) and go to the log menu. You should see the message

  4. Butterice99 says:

    Hello! Thank you for your response. I understand that there should only be 5 (Authentication key, Email address, Email subject, Email body, Indicator of attachment) to be attached in the blocks.

    but my concern is, what about the user input that is gathered in the app ( as shown in image # 1, name, address,etc)? my objective is to send this data with just one click via ” send” button.

    I tried to make a ” definition” block by attaching the ” make text block” and attached to it is the user input data.

    attached is a screenshot for your reference:

    http://www.troovi.com/DTb8Ud7tOVPd/

    Then, I would have to pull the my definitions drawer,locate the global ” definition” block and use this to replace the” email body”. that way, there will only be 5 blocks as you mentioned earlier.

    However, my method does not work since there will be an error that appears.

    May I know if there are any possible solutions that will enable me to send the user input data?

    Your response is appreciated.

    • eixerits says:

      Hello, if I understand it correctly, your idea is to include in the mail body several user inputs and some fixed texts (e.g. “name: Peter address: Oxford Street”), and to do this you have created a separate variable where you compose this text using the “Make text” option. If this is the case and the image you send me corresponds to this composition, I think the problem is that these texts should not have the “|||” separator.
      Actually I’m not sure to understand the full situation. If you send me the complete picture of your code blocks I’ll try to help you more. You could also precise where does appear the error (in App Inventor or in the log).

  5. Butterice99 says:

    Hello eixerits,

    Yes, you are right. My objective is to include the user input you have mentioned. but then again you mentioned that Python could only recognize
    5 pieces (Authentication key, Email address, Email subject, Email body, Indicator of attachment).

    To solve the issue, I decided to edit my blocks once more. I made a definition block as shown below:

    http://www.troovi.com/xlCjcJYfNRWE

    Next I created the blocks to compose the message with app engine as shown below:

    http://www.troovi.com/eJmiSScBBb0X *

    Note: global huhu block = email body as posted earlier.*

    Finally, in my app, there is a “proceed” button. once the user clicks this, all the user input data is supposed to be sent via the app engine address.

    screenshot is attached for your reference.

    http://www.troovi.com/YnYkrAzdGpLb

    The error message appears in the app inventor block.

  6. Butterice99 says:

    I followed the suggestion you mentioned. attached is a screenshot of the block for reference.

    http://www.troovi.com/pSXxcpuC2UlJ

    however, there is one problem though. as you can see, there is an error message that appears saying that it is impossible to create the block I made.

    anyway, I tried to experiment a little bit. in the POST function, I decided to attach the user input instead of creating a definition block for the body of the email ( which contains user input).

    please see attached screenshot.

    http://www.troovi.com/KbOkhCk5k7Zi

    I tried to run the app, and it was successful. no error message appeared in app inventor. next, I checked the log file of my app engine.

    attached is a screenshot for your reference.

    http://www.troovi.com/n92WkS475L2Z

    With regards to the interpretation of the log file, I’m guessing that the app engine was able to get the necessary information and thus, sent it to an email address.

    I tried to check my gmail account if the message entered, heck no luck.

    am I missing something here??

    • eixerits says:

      1) The error from the first image occurs because it’s not possible to reference controls during initialization (“Def” block). You could leave the “Def” block with just one “Text” block and move the “Make text” within the Sendmail function.
      2) However your solution from the second image would also be correct. Just one “|||” missing after the “subject” block.
      3) Unluckily the log shows that the mail has not been sent. There should be more lines, among them one saying “Email Sent”. Add the “|||” mentioned in the previous point and try again

  7. Butterice99 says:

    so I added the “|||”the “subject” block, run the app and checked my app engine log. still no luck. there was no ” Email Sent”.

    since the error still persists, I decided to try something else. edit the main.py code.

    I am attaching screenshots for your reference. Please refer to the violet highlight.

    http://www.troovi.com/LzDV8kpskUcn

    http://www.troovi.com/k6kD9qumloi1

    I tested the app once more and checked the log file at app engine, but it
    is still the same like what I have sent you earlier.

    I’m not sure if I am doing the right thing? May I know if I missed something?

    Your response is appreciated.

    • eixerits says:

      The code highlighted in violet is not syntactically correct. You should leave it as it was, because the problem does not appear to be here.
      Maybe your service is not deployed because otherwise you should at least see in the log a line “Sendmail function” which is called in the first line. To verify if the service is deployed you can type the URL in a browser

  8. Butterice99 says:

    I edited the main.py back to its original code. anyway,

    I also decided to check again if my deployment is ok. I got this message:

    http://www.troovi.com/dNM78GVCRQJa.

    Next,I decided to double check the info via log in app engine:

    http://www.troovi.com/PD49OqWVxzAg

    Finally, I checked my app engine address and this message appeared:

    : Non-ASCII character ‘\x93’ in file /base/data/home/apps/s~( my identifier’s address )/1.367842763257558339/main.py on line 30, but no encoding declared; see http://www.python.org/peps/pep-0263.html for details (main.py, line 30)

    I don’t understand what happened to the code. I’ve already edited it back to its original and got a confirmation that deployment was successful.

    I’ve also checked the page http://www.python.org/dev/peps/pep-0263/, but I am not sure if I should add the additional codes as mentioned in the website, but then again, in the main.py, like you said, there is nothing wrong with it.

    May I know what went wrong?

    • eixerits says:

      The problem is in the line you added in the main.py:

      logging.info (“sendmail function”)

      You’ve put a character for ” which python does not understand (otherwise the text between “” would appear in green). At least this proves that the service is being called, so if you correct this and deploy again you should see in the log the line “Sendmail function”. We’re not too far…

  9. Butterice99 says:

    With regards to the logging.info (“sendmail function”) error, are you saying that I should correct it to this?

    attached is a screenshot.

    http://www.troovi.com/DD6bEH85Fkfd

    if this is what you mean then, I got the log file message :

    http://www.troovi.com/SQlmN3Xph375

    I also checked my app engine address… the error message in line 30 did not appear anymore.. instead, this is what came out:

    http://www.troovi.com/20DH1RLdKMvw

    There is still something wrong. perhaps it’s the way I edited line 30 again based on the log file error?

    I’m not sure if I should rewrite line 30 to the following:

    1.) sendmail( ‘my email address’)
    2.)or “s.sendmail ( ‘my email address’)

    I am so confused since I have no experience in programming in Python.

    • eixerits says:

      Line 30 is just a trace to check whether the service is started. I don’t think it’s harmful currently.
      The problem seems rather in the URL names. I see the AppInventor call is “/sendmail” whilst in my template it was “/sendemail”. The main.py must match exactly with this name, i.e. by the line 329 you should have something like:

      application = \
      webapp.WSGIApplication([(‘/’, MainPage),
      (‘/storeavalue’, StoreAValue),
      (‘/deleteentry’, DeleteEntry),
      (‘/getvalue’, GetValue),
      (‘/sendmail’, sendemail)
      ],
      debug=True)

      The important thing to review is that it says “/sendmail” and not “/sendemail”. Alternatively you can change it in AppInventor but both texts must be exactly the same.

  10. alvin says:

    hi..is there a way i can configure the app to send the email to a pre set address and from a pre set address automatically for purposes of confidentiality?

    • eixerits says:

      Hi Alvin, I’m not sure where you’d like to pre-set the addresses. Here are some possibilities:
      – The “Mail to” is currently defined by the user in AppInventor. If you want it to be fix you can either change the “Sendmail” function from AppInventor in order to pass a fix mail (instead of reading it from the “mail_SEND” textbox) or modify the line “EmailTo = details[1]” from the main.py by something like “EmailTo = ‘address@gmail.com'”
      – The “Mail from” is currently predefined in the main.py file (line EmailFrom = … ). I don’t know if you’d prefer to define it in appinventor. If this is the case you should modify both the “Sendmail” function in AppInventor and the “process_email” function in main.py

      • alvin says:

        i am kinda new to this and i am trying thoiu…do i modify in the blocks editor?and create variables defining them as the emails i want to use?

      • eixerits says:

        You cannot modify the “Mail from” in the blocks editor. I think the fastest way to do what you intend is replacing lines 37 to 39:

        message.sender = EmailFrom
        NewAuthKey = details[0]
        EmailTo = details[1]

        by these new code:

        message.sender = ‘mail1@gmail.com’
        NewAuthKey = details[0]
        EmailTo = ‘mail2@gmail.com’

        Where ‘mail1’ is the sender and ‘mail2’ the receiver

      • alvin says:

        hi…my app cant run in the google app engine…are there internet settings or proxys i have to configure, cuz typing “localhost:8080” resulta in a “web page not available”

      • eixerits says:

        A good way to find out the problem is execute your app from AppEngineLauncher, i.e.:

        1) Open the AppEngineLauncher
        2) Add you project using the “Add existing application” option (you’ve probably already done it)
        3) Press the “Run” button and wait until the left ball gets green
        4) Press the Logs button
        5) Press the Browse button
        6) The browser will probably show an error. Look at the logs window because it will probably show the reason

      • alvin says:

        i have done that and the log is saying” File “C:\Python27\lib\urllib2.py”, line 531, in http_error_default
        raise HTTPError(req.get_full_url(), code, msg, hdrs, fp)
        HTTPError: HTTP Error 503: Service Unavailable
        INFO 2013-06-17 11:05:40,871 server.py:585] default: “GET /favicon.ico HTTP/1.1” 500 –

      • eixerits says:

        I don’t know where can be the problem. I see there are people with similar problems in the forums but no one seems to have found a convincing solution. Just to try to find a hint, have you deployed the app? I.e. does it work in the google URL (https://xxx.appspot.com)?

  11. Butterice99 says:

    eixerits, It finally works! you were right, it was a typo that did create the error message. Thank you very much for the help and more power to your site! 🙂

  12. Vanderlei Corr says:

    I”m new to App Inventor, like few weeks, and now found this direct solution to send e-mails.
    So not being expert on Java, CSS, HTML, Pything, etc… it’s getting hard to do some things.
    I installed the App Enginne, and then now while trying to get to the locahost I get message: Access Denied (using Maxthon browser) or “Could not connect to remote server (with Opera).
    Any idea why ?
    thanks,
    Vanderlei

    • eixerits says:

      You can try to find a hint in the log, i.e.:
      1) Open the AppEngineLauncher
      2) Add you project using the “Add existing application” option (you’ve probably already done it)
      3) Press the “Run” button and wait until the left ball gets green
      4) Press the Logs button
      5) Press the Browse button
      6) The browser will probably show the error you mention. Look at the logs window because it should give more information about the reason

      • Vanderlei Corr says:

        already find portion of problem: I installed App Engine before installing Python, so somehow even adding the correct link to the Python file seems Engine had problems, so I uninstall App Engine and re-installed it after having Python there, and seems it’s working.
        Now I’m figuring out how to change main.py and app.yaml files to add what you wrote above – or where to put those lines…
        anyway, thanks for really fast response to my message.

  13. Vanderlei Corr says:

    when you say: “The combination of both services consists of merging the contents of the respective main.py files. This can be done for example starting from the TinyWebDB file and including into it the classes from SendMail.” I found just one main.py file that is the one from shivawolf so just change this file (emailFrom and AuthKey) plus adding the ### Assign the classes to the URL’s lines to this same main.py ?
    sorry for such simple questions, but really I’m a hardware guy, learning now some codes 🙂

    • eixerits says:

      I haven’t tested the main.py from Shivalwolf, so I’d recommend you to use the file from the post. Since I don’t know in which exact point are you, I rewrite the instructions from the “Installation” chapter with some extra details:

      1) Deploy the TinyWebDb following this tutorial
      2) Download these files: main.py and app.yaml. These files must replace the files with the same name in the folder that you have created in the first step
      3) Edit the main.py and replace the contents of the variables EmailFrom and AuthKey (lines 13 and 14)
      4) Edit the app.yaml and indicate the name of your application (line 1)
      5) Deploy again the application as in the first step (i.e. with the AppEngineLauncher)

  14. vanderlei corr says:

    I was trying to figure out when you wrote “merging the contents of the respective main.py files. This can be done for example starting from the TinyWebDB file and including into it the classes from SendMail.” which files (in the plural) are them. If it’s only to add those lines of code (Assign the classes to the URL’s lines of your main.py and then also replace ontents of EmailFrom and AuthKey) or have other main.py files somewhere else that also need to be changed.
    I’ve already did steps 1 and 2 successfully and now figuring out about which main-py have to change.
    sorry again for such questions… 😦

  15. vanderlei corr says:

    I just found out that the “Assign the classes…” is already inside the main.py file, and then before run it I made changes on app.yaml and it didn’t work, as maybe info must be on specific lines/position, so seems the login:admin must go to some correct position.
    anyway, it’s better than few hours ago that nothing was working. 🙂

    • eixerits says:

      In the app.yaml you just need to modify the first line.
      When you say it’s not working I suppose you mean you’re trying to send the email from the device and it is not sent. If this is the case the problem may be that the service is not correctly deployed so we should look at the appengine logs. Have a look at the comments above from Butterice99 because he was in a similar situation and finally we were able to find out the problem, i.e. we should first make sure the service is deployed and then see in the logs how far it is arriving.

  16. vanderlei corr says:

    on app.yaml the first line is the application name, and then seems you have some blank lines that must be there and can’t just put all together like your above example (at least I deleted almost all blank lines and got errors – maybe not because of this but because of wrong positioning).
    so I put the login: admin right after the “handlers:” line and log showed like command not accepted.
    I still didn’t go and run app on device, as was trying to have the local server on my computer up and running first, and then go to this next step, which also I have doubts, like how to make the device “find” my local server, instead of go to an internet based server ??
    sorry for all “ugly” questions, but I’ve been a hardware and components guy since maybe 25 years ago, and did some Assembly codes those days where our telex machine had only 32kB of memory and we had to put whole system inside it, including a text processor, so really had to make the best usage of each bit those days 🙂

    • eixerits says:

      I think your editor is doing strange things with the app.yaml. Maybe the launcher editor would help you, i.e.if you open the AppEngineLauncher, select the project and press “EDIT” the text should be more “readable” and allow to make changes without losing valid contents. If it does not work, you can start from a blank file and type the contents.
      About testing the localhost from your device, as far as I know this is not possible.
      I also suffered/enjoyed those assembly code times when every single bit was a treasure! Problems are currently different but I don’t know which ones are harder to solve!

      • vanderlei corr says:

        I just started using the http://notepad-plus-plus.org as seems it can handle most of the file formats needed here, and using the standard Wordpad that AppEngine uses is simpler than this Notepad one.
        anyway let me try again the Wordpad and see if it work.
        yes… I thought the same about trying to use localhost to do the tests, instead of going to the e-mail server.

  17. vanderlei corr says:

    after starting the server then if I try to connect as user on localhost:8080 then log file shows that server could not load the simplejson as json as requested by main.py file on line 23 – meaning it can’t find the file using the “from django.utils import simplejson as json” link.
    I’m trying to understand and find where this file is located inside App Engine, and then how to put it in the main.py file.

    • eixerits says:

      This is an issue that has to do with the appengine version. If instead of connecting to localhost you deploy the service the problem will disappear. If you want to connect with localhost, you need to replace the line by this one: “import json”. The inconvenience is that with this line you won’t be able to deploy the service with your current version. Therefore I recommend you to have both lines and comment the one you’re not using, i.e.:

      TO TEST LOCALHOST:
      #from django.utils import simplejson as json
      import json

      TO DEPLOY:
      from django.utils import simplejson as json
      #import json

      The alternative is upgrading the appengine version but this has some risks so I recommend that you first try to make it work with your current version

      • vanderlei corr says:

        great ! thanks for tip.
        let me try with actual version and later try to update, but seems while checking the AppEngine update option its already on latest one available.

      • vanderlei corr says:

        server is working here, so now will start testing client, and learn how it works instead of just use it 🙂
        by the way, did you see this article, as yaml calls for older Python, and new one 2.7 recommends use of native json library only only, and not anymore simplejson ??
        https://developers.google.com/appengine/docs/python/python25/diff27

      • eixerits says:

        I’m glad you’ve made the server work. Don’t hesitate to ask any clarification about the client.

        About “simplejson”, yes, I was aware of this article and the need to converge into “json” before 2014. I’ll have to publish a new version in the post or maybe just give some guidelines about how to adapt the service.

  18. vanderlei says:

    yes.. server is working, and first test I did with client didn’t work, so next step to find out where is the problem.
    as you app catch e-mail address from TinywebDB, and for the test I just forced an e-mail address in the text box, don’t know if not using an e-mail address from DB is causing this problem.
    and then next steps are
    – how to integrate APP Inventor with a “normal” web page, meaning using something like Bootstrap as UI (much better than App Inventor ones) and then get inputs from web page and handle that inside AppInventor
    – how to reduce App Inventor file size, as it’s getting a simple app to around 8MB, which is quite big and heavy
    – how to integrate App Inventor with standard Javascript files, as I found some useful snippets that could handle good portion of app I’m working
    – and finally, how to integrate with with iOS, as seems for some market niches you MUST have also app int eh Apple world

    so still lot of work to do here.

    • eixerits says:

      Not using mail from DB should not be the problem. To find out the cause you could look at the log. When it works, it should show something like this:

      2013-07-05 00:39:13.769 /sendemail 200 139ms 0kb Dalvik/1.6.0 (Linux; U; Android 4.2.2; Nexus 4 Build/JDQ39)
      I 2013-07-05 00:39:13.688 GetValue POST Client IP: 85.61.254.245
      I 2013-07-05 00:39:13.688 data: xxxx|||xxxx@gmail.com|||Register information|||Your password is: a|||no
      I 2013-07-05 00:39:13.688 Auth Key Valid
      I 2013-07-05 00:39:13.767 Email Sent

      Some quick notes about your other challenges:
      – Integrate with web pages. The difficult issue is getting inputs from the web. A typical trick is that the web page writes its messages into the page title and the set a timer in app inventor to periodically inspect the web component’s title. Puravida has good snippets showing this method
      – I’ve never worked in reducing app size so I can’t give you any hint. You hardware people are good at this so I’m sure you’ll will find out a solution much faster than I would do
      – Javascript: Yes, Puravida snippets are a very valid resource
      – Apple world: I’m afraid AppInventor is not the right choice for that. As far as I know, the current trend for compatible apps is using HTML5 with the help of some framework

      • vanderlei says:

        let me try to test this later.
        as tuesday is holiday here in Sao Paulo State, then we’ll have a very looong weekend here, and I’ll be out.

        about challenges:
        – web pages: this means web pages write this automatically, or need to write some code inside web application to write this on it’s page title ?
        – Apple world: my idea was to go to HTML5 but then means use web browser and not native code, so I’m checking some other tools that have this feature of compile code on different platforms, but it’s a next step as by now still have lots of things to learn/do.
        thanks again, and have a great weekend there.

      • eixerits says:

        Yes, you need to write some code inside the web application in order to update the title with the message to be sent to App Inventor.
        Tell us if you find a good tool for compiling code on different platforms. Multiplatform is also something I’ve got in the TO-DO list.

  19. vanderlei says:

    thats what I thought, so last 2 days I spent inside the JoomlaDay Brazil, not only because Joomla (that I didn’t know until like two weeks ago.. 🙂 ) but because met some people there with good knowledge of things I’ll need to do/learn, like security (brazilian hackers are one of the best in the world – if you are interested I’ll send you the link of a local web server that they offer US$5k to the first one that get inside their server…and they got already about 5M temptatives without luck) and web server adjusts.
    First tool that I found was Phonegap, that is based on Cordova, but still couldn’t make it run here as need some deeper knowledge on JS that I don’t have… yet.
    here is a good link with tools for all worlds:
    http://en.wikipedia.org/wiki/Multiple_phone_web_based_application_framework
    What some people directs you is in use HTML5 based apps, so basically running under/above a browser instead of being native, so you can swing to any platform that supports this, BUT then means being “internet based” app instead of native, so depending on what you’ll do it’s an interesting way to go.
    well… back tot he beach here 🙂

  20. van corr says:

    hi and sorry for long delay to get back here, but I spent most of my past two weeks learning about these “multi-platform” solutions.
    Here what I found, from someone not really a software expert:
    – you can find tools that do multi-platform, that go only native, hybrid or web-based
    – initial web based I found was Phonegap, and lots of people uses it, but also some others complain about it’s performance, as it’s not native, so depending if you’ll need most of time internet access then it could be a good option
    – others that are web based are: SenchaTouch, Lungo, Qt, Appspresso
    – talking about native platforms then you can see: Titanium, Firemonkey, IntelliJ IDEA, Netbeans and Xamarin

    Titanium is the one I was testing here, and seems pretty interesting, with lots of users around the world which means a big community and code available to test and re-use for a newbie like me.
    Yesterday one friend mentioned that already used Xamarin, and I downloaded it (1.3GB of data including Eclipse plus other things) and it has a very clean UI, and something interesting for me: UI blocks ready to just copy and insert in the UI you are developing, and then add it’s link to the application that will run in the back; simple and clean way to go.
    Xamarin uses C# as basic language, so if you know it then it’s easy to move ahead, plus that it also has WebView so then you add other fancy UI blocks. Main problem is that their free version can make small code only, seems only to tease you, and then you’ll need to buy their starter package.
    Titanium uses Javascript, so then you could find thousands of code around the internet, and then also adding WebView means adding jQuery, jQuery Mobile, Bootstrap, Zepto and other fancy and fast and nice UI frameworks to the project.
    I installed IntelliJ but didn’t test it too much, and comparing it with Titanium it shows a better UI, but don’t know about usability (lots of people mentioned that liked it more than titanium…).
    Netbeans and Eclipse seems to be on same market, needing deeper SW expetise that I don’t have now, so kind of more difficult to go into these two directions.

    So something for you to go and find out which tool is your choice, or install most of them (like I did) and keep your machine full of widgets until you choose one and delete all the others.

    Later I’ll get back to App Inventor on how to use it for some other ideas here.

  21. Orlando says:

    Hello I am new to this site. I have used the Login Template your created succesfully excluding sendmail and the google page. My question is simple I hope. Can i use

    app.yaml

    line3: python27 #instead of

    line3: python

    I know there are a few things I would need to change in the main.py, for example using webapp2 instead of webapp. but I cant get it to show the admin log in page. All i get is direct access to the data base. if i really need to use regular python25 i will. but if not what do i need to do to change the main.py to fit?

    • eixerits says:

      You need also to change the scripts extension in the app.yaml. Maybe this is why it does not work.
      Precisely this weekend I’ve been writing a post about this!
      I think this can help you make the changes, but tell me if you have any doubt or if it does not work. I also intend to update the login template post when I have the time.

      • Orlando says:

        Thanks! I got it working on the python25! And im able to get storeAvalue and getAvalue to work on python27 but not sendmail. I’ll keep tinkering around with the code until i get something. If i get it working I’ll let you know. Oh and from the bottom of my heart. Thank you soooo much for this post! You have opened allot of doors for me and many others!

      • eixerits says:

        Thanks Orlando, this is the kind of comments that makes us bloggers keep posting!

  22. Reshad says:

    Hello,

    I downloaded the code and steps you suggested and it works in localhost, but when I deploy and type the address xxx.appspot.com, it displays the page correctly, but when I attempt to click the storeavalue button or a delete button on the web page it gives this error (Error: Not Found
    The requested URL /deleteentry was not found on this server.) This was not present before with simply deploying the Tiny Webdb. Also, after adding the new files to the Tiny Webdb (app.yaml & main.py) and running my app on my phone, it does not store values or get values.

  23. Reshad says:

    Also, here is the log from GAE (

    2013-11-30 17:48:44.002 /deleteentry 404 6ms 0kb Mozilla/5.0 (Windows NT 6.2; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0 module=default version=1

    24.1.197.181 – keniemoses [30/Nov/2013:17:48:44 -0800] “POST /deleteentry HTTP/1.1” 404 0 “http://www.xxx.appspot.com/” “Mozilla/5.0 (Windows NT 6.2; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0” “www.xxx.appspot.com” ms=6 cpu_ms=0 app_engine_release=1.8.8

    W 2013-11-30 17:48:44.001

    No handlers matched this URL.

    This is what i get when I attempt to delete an entry from the web page TinyWeb db interface.

    • eixerits says:

      It looks like the ‘deleteEntry’ class is missing in the ‘main.py’ file. Actually I’ve removed this class in some of my projects because I’m not using it but I’ve seen the sources from the ‘Installation’ chapter are correct.

      I assume you’ve downloaded the sources from somewhere else but I’m not able to locate the place. If you can tell me which sources you downloaded I’ll have a look because there’s probably a bug.

      Alternatively, and maybe simpler for you to fix the problem, you can edit the ‘main.py’ file and search if there’s a line with the contents ‘class DeleteEntry(webapp2.RequestHandler):‘. Probably it will not be there so you’ll have to add the following code anywhere (for example, right before the line ‘class StoreAValue(webapp.RequestHandler):

      class DeleteEntry(webapp2.RequestHandler):

        def post(self):
           logging.debug('/deleteentry?%s\n|%s|' % (self.request.query_string, self.request.body))
           entry_key_string = self.request.get('entry_key_string')
           key = db.Key(entry_key_string)
           tag = self.request.get('tag')
           db.run_in_transaction(dbSafeDelete,key)
           self.redirect('/')

      • Hello,

        Thanks for the swift response. I downloaded the source from your site (How to send direct emails with App Inventor https://eixerits.wordpress.com/2013/03/14/371/) The class d=DeleteEntry is in the Main,py file which is why i don’t understand why it gives such error when the delete button is pressed to remove an entry on the web page. It also give a similar error when the StoreaValue button is pressed. I noticed in your code you had a comment in the StoreaValue class that said that there might be an error. Just pointing that out. I am also using your login template and it’s source is at https://eixerits.wordpress.com/2013/02/03/a-login-template/. Also, the purpose for this is so that I can get the email client up and running for my app.

      • eixerits says:

        Indeed the bug was in the ‘app.yaml’ file! The handler to ‘deleteentry’ was missing. I’ve just fixed the link on the post. You can download it again or simply edit your app.yaml and add these lines:

        – url: /deleteentry
        script: main.app
        login: optional

        I don’t know if this will be enough to solve your issue, but at least this is something to be solved. Try deploying again and let’s see what happens.

      • Thanks for the swift reply. This indeed did fix the problem deleting values from the Tiny Web db that I set up. I also noticed that instead of storeavalue in the app.yaml file, it is – url: /setvalue script: main.app login: optional which is the same reason as the deleteentry was not working. Thank you!!! Next, lol, i am not able to send emails. I set up the EmailFrom and the AuthKey in the settings section. Using your login template, I would like to send an email once the email is provided in registration. A little insight please because there is a lot to go through in the login template….

        Thanks in advance!

  24. Hi again,

    You indicated earlier in posts that the The “Mail to” is currently defined by the user in AppInventor. What is that defined under in app inventor? When the user registers and selects email notifications, I want an email to be sent to the new user that has their user name and password contained in the email. Everything looks good, but I would like to know what block sets the info contained in the email message, as well as the email recipient.

    -Reshad

    • eixerits says:

      I’m not sure if your question refers to AppInventor or AppEngine. If it’s AppInventor, the key block is shown in the picture in the “Code blocks” chapter, i.e. the ‘maketext’ block in the ‘sendmail’ function prepares a single string containing the key, address, title and contents. If you’re referring to the python code, the job is performed in the ‘sendemail’ function where the parameter received is split and then informed into the ‘message’ object.

      If you intend to send the username and password, you should change this ‘maketext’ and add a new block of the kind:

      \n\nUsername: —- join —- TextBoxUser.Text

  25. Sorry to keep bugging you, but the db is not being loaded with the info the user registers with. It gives the error incorrect user name or password after the user registers and clicks login.

    Thanks!,

    Reshad

  26. I have 2 versions of my tinyweb db. 1 with the email client and 1 without. When using the tinyweb without email client I am able to store and get values using the login template you designed that I am employing in my app. When I use the tinyweb with your email client, I am not able to store values to the tinyweb I created. There is a bug somewhere in the storeavalue class within the main.py. Any advice how to clear this up? You commented in the main.py that there is potential for error there, if you look at your code.

    -Reshad

  27. eixerits says:

    You could put an alert at the beginning of the TinyWebDB_Login.gotValue block in order to inspect what value are you receiving from the server. I.e. a block of the kind:

    Notifier1.showAlert —- reg

    • Is this reply for me? I was referring to the main.py file where the store function(class) is not storing the user info to the tiny webdb. Here is your code from tinyweb db w/ email client that does not store values-

      class StoreAValue(webapp2.RequestHandler):
      def store_a_value(self, tag, value):
      store(tag, value)
      # call trimdb if you want to limit the size of db
      # trimdb()
      ## Send back a confirmation message. The TinyWebDB component ignores
      ## the message (other than to note that it was received), but other
      ## components might use this.
      result = [“STORED”, tag, value]
      ## When I first implemented this, I used json.JSONEncoder().encode(value)
      ## rather than json.dump. That didn’t work: the component ended up
      ## seeing extra quotation marks. Maybe someone can explain this to me.
      if self.request.get(‘fmt’) == “html”:
      WriteToWeb(self,tag,value)
      else:
      WriteToPhoneAfterStore(self,tag,value)

      Here is the tiny webdb that does store values, but does not have the email client-

      class StoreAValue(webapp.RequestHandler):
      def store_a_value(self, tag, value):
      # There’s a potential readers/writers error here 😦
      entry = db.GqlQuery(“SELECT * FROM StoredData where tag = :1”, tag).get()
      if entry:
      entry.value = value
      else: entry = StoredData(tag = tag, value = value)
      entry.put()
      ## Send back a confirmation message. The TinyWebDB component ignores
      ## the message (other than to note that it was received), but other
      ## components might use this.
      result = [“STORED”, tag, value]
      WritePhoneOrWeb(self, lambda : json.dump(result, self.response.out))

      I need the one that has the email client to work(store values)

      Reshad

  28. Hey, I fixed it! I simply swapped out store functions(class) and commented out the store(tag, value). It now stores. Thank you so much for your help! Now, I just need to have an email sent to the new user when they register. Ideas?

    -Reshad

    • eixerits says:

      If I understand it, the service is currently ok but you haven’t tried the sendmail function yet because first you intend to make some adaptations in AppInventor consisting in sending an email when the user registers.

      If this is the case, you can implement this idea by adding a call to the “Sendmail” function in the “TinyWebDB_REG.GotValue” event, concretely in the “else” block after storing the value. The contents of the address, username and password can be obtained from the components in the “TableArrangementRegister”, i.e. TextBoxMail_REG, TextBoxName_REG and Password_REG.

      I don’t know if this helps you. Otherwise tell me.

      • King Moses says:

        Hello,

        To your first question, I am not sure if the service works because, from the program and structure, I am not seeing where and when it is supposed to send an email. With that said, to your second question, yes. That is what I am trying to do. I will attempt to implement this right now and shoot you a response in a few minutes.

        Thanks bunches,

        Reshad

        P.S. I would like to collaborate with you, if at all possible, on developing an educational application for engineers. This is part of the project that I am working on for my dissertation, but this piece is for a final project that I am working on that is due tomorrow. YIKES!

      • King Moses says:

        Hello,

        No, the send mail function is not working properly.

        Reshad

        Sent via the Samsung Galaxy Note® II, an AT&T 4G LTE smartphone

      • eixerits says:

        Can you be more precise? Do you get any error message or see hint in the server log?

      • King Moses says:

        when is the program supposed to send an email? At what point? I set it up to send an email once the user registers, but nothing happens.

      • eixerits says:

        Can you send me a picture of the appinventor block that should send the mail?

      • King Moses says:

        sure. give me a bit. I am not at home right now. it will be about noon….and thanks for your prompt reply. did you get the messsage about collaboration?

        Reshad

      • eixerits says:

        Yes, tell me more about this. My mail is eixerit2@gmail.com

  29. King Moses says:

    HI,

    Again to your response: “The contents of the address, username and password can be obtained from the components in the “TableArrangementRegister”, i.e. TextBoxMail_REG, TextBoxName_REG and Password_REG.”

    Are you saying that I should put these blocks somewhere? Would it be in the webmailsend.postext block?

    You indicated in your post- “After this, sending the mail consists simply in posting a string to our service, containing five pieces separated by ‘|||‘:

    Authentication key
    Email address
    Email subject
    Email body
    Indicator of attachment. It must be informed as no because I’ve removed this part from the service.”

    Should I replace ( Email address, Email subject & Email body) with the code blocks you mentioned TextBoxMail_REG, TextBoxName_REG and Password_REG?

    Reshad

  30. Victor says:

    I would like, if possible, have theses blocks translated to app inventor 2, I am having trpuble doing it..

  31. Victor says:

    Hi,

    I have already done everything as said, and finally my app was able to send emails, but I have only one problem, for each time i click on my send email button (in my case is a reservation button) the app sends several emails, one after other infinitly, can somebody please check my block code to see if you can discover where the error is….
    Here pictires of the blocks

    https://drive.google.com/file/d/0B58Fn_EN0ud4Q01qQ290VG9abG8/edit?usp=sharing
    https://drive.google.com/file/d/0B58Fn_EN0ud4Z2c1ZG85Nm5RQUU/edit?usp=sharing

    • eixerits says:

      I have no experience with app inventor 2, but it seems to me the problem might be in the “Web1.gotText” block. This block calls to SetWebUri which in turn launches a post to Web1. The result of this post fires the “Web1.gotText” event and that’s why it sends mails indefinitely.

      This is a theory. You can try to replace the contents of “Web1.gotText” by an alert message and see the results. If my theory is true, you’ll get only one message and one email sent.

      • Victor says:

        Great I did it, its is working perfectly.
        Now my nxt question is, is there any chace to see a tutorial from your side to do this using eclipse….te thhing is thata I want to create a booking form in one of my apps nad send that form directly. But now I am using eclipse and programiong with java…

      • eixerits says:

        I’ve been also experimenting with other technologies recently, but not too much in Eclipse (mostly JQuerymobile and also something with Google apps). So I’ve got some tutorials in mind, but not with Eclipse for the moment. Anyway if you have concrete questions you can post them here and see if someone can help. Once the mail service is working, it should be possible to call it from within any client regardless of the technology… at least in theory!

  32. Jaga says:

    Hi, I’m Dutch, my English is well, but not too well 🙂

    Trying to find a solution for this goal:

    User of the App I built have to enter some information.

    This information (4 lines of small text/numbers) is send by e-mail User has to press send in the e-mail and can edit the mail.

    But now I don’t want to show the e-mail, I want the informations being sent withought the user to see it actually. So that the user cannot edit the mail.

    Is this possible? I’m using App Inventor 2.

    Regards,

    Jaga

    • Jaga says:

      And I don’t want to show the user where the e-mail goes to.

      • eixerits says:

        Yes, it’s possible and this is the goal of this tutorial. Unluckily it’s not in version 2 yet (presumably within 1 month). Anyway, the difficult part is setting up the service with AppEngine. Once you have the service ready, it should not be difficult to adapt your app for sending emails transparently.

      • Jaga says:

        Thank you for your early reply! Do I have to build a webserver for this?

      • eixerits says:

        Exactly. Actually it’s the web server who will send the emails.

      • Jaga says:

        Then I will get in that material since I do not have experience with it.

        I’ll search on the Internet for it.

        Jaga

  33. Nick says:

    Hello,

    First I would like to say that I appreciate your work so much, it really has been helping me a lot and I am sure I will use it for future reference, thanks a lot for landing us your time and knowledge!

    So I am having the following error when trying to update through the app through google cloud SDK with the due changes for making it able to sendemail.

    appcfg.py: error: Error parsing appengine-try-python-flask/app.yaml: in “appengine-try-python-flask/app.yaml”, line 8, column 10.

    The line 8, column 10 is the “login: admin” line, and I can’t figure out what is going wrong since there isn’t any typos.

    Thanks in advance for your answer and time.

    Nick.

    • eixerits says:

      Hi Nick, sorry for the delay in the answer. I’ve changed my PC and forgot to configure this email. Chances are that you problem has to do with the editor. For example I’ve had problems with Windows Notepad in the past, and I’m currently using Notepad++ which gives no problems. If this is not the problem you can send me the app.yaml by email and I’ll try to help you.

  34. luweiqi says:

    Hi, thanks for this useful tutorial, is it possible to auto-send an email with HTML formatting?

  35. nishsingh says:

    Hi,
    Thanks for the useful turtorial!

    I replicated the codes like in the picture, but I can’t get it to send an email.

    My app engine server is running as it is working with the URL.

    I am new to both App Inventor and Programming in general, how would I go about sending an email from my address to someone else’s?

    • eixerits says:

      Hello Nishsingh, the problem may be in several places, but I’d first try to find out whether the request is arriving to the server. In order to do this, after trying to send the email you can look for the log messages that appear in the appengine dashboard. I.e. open https://appengine.google.com, select your project and go to the logs link. When everything works you should see the lines below, but I assume you’ll currently see something else. I hope it helps you but in case it doesn’t, send me the message and I’ll try to help you.

      2015-07-05 00:39:13.769 /sendemail 200 139ms 0kb Dalvik/1.6.0 (Linux; U; Android 4.2.2; Nexus 4 Build/JDQ39)
      I 2015-07-05 00:39:13.688 GetValue POST Client IP: 85.61.254.245
      I 2015-07-05 00:39:13.688 data: xxxx|||xxxx@gmail.com|||Register information|||Your password is: a|||no
      I 2015-07-05 00:39:13.688 Auth Key Valid
      I 2015-07-05 00:39:13.767 Email Sent

  36. Lasse Jensen says:

    Hello is it possible to sent the e-mail in an HTML format? i couldn’t figure out how to do it so i was unsure of weather it was possible or not.

  37. Arjen says:

    Hi,
    Thanks for this nice e-mail solution! After a month of using this solution for some users the e-mails are delivered to the gmail spam folder. Any idea how to prevent this?

    • eixerits says:

      I’ve never found this issue so I have no experience with it. After a quick search I’ve seen you’re not the first one facing this problem, and there seem to be lots of possible causes. Some people recommend publishing an SPF for your domain, in order to demonstrate your messages come from an authorized mail server (https://support.google.com/a/answer/178723?hl=en&ref_topic=2759192).

      Sorry for not being more helpful, but as I said this is new to me. If you find the solution please post it here to help others!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: