Click here to Skip to main content
15,881,424 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
How do I create an app that uses a button as a counter, and every time the button is clicked, it will upload that number to my website.?
I would like to add a section on my website that tells the reader how many cups of coffee I have drank so far into that day. I am doing this almost entirely for self development and to learn new skills and coding languages. I would like to develop a mobile application that I can put on my phone (Galaxy S7) so I can just tap a button every time I finish a cup of coffee. The button would basically be a counter and would only hold an integer value. Once this button is pushed, I would like it to upload that integer value to my website so it would display the number of cups of coffee I have had. Once the day is over with, I would like it to reset to 0 on my website.

What I have tried:

Asking the same question on other sites.
Posted
Updated 7-Jul-17 7:02am
v2
Comments
Richard MacCutchan 7-Jul-17 3:41am    
You need to write an app that can send an HTTP message to your website using sockets, or some higher level transport mechanism.

1 solution

Since you mention this is for self development and learning new skills, my suggestion would be to break down your "problem" into smaller pieces are start tackling your desired functionality as separate "issues". This way you'll start with a basis of web development and move up towards implementing your full desired functionality. Also, i'm not going to provide you links or code examples as part of the self development, in my opinion, needs to be for you to figure out how to solve problems on your own (by this i mean, learn to google). Now if you go about trying to implement any of my comments/suggestions below, feel free to come back with samples of your code that those of us here willing to help can use to replicate your issue and a clear explanation of your problem/what you are trying to achieve and i am sure you'll find some useful help around here.

So, based on your question i see 3 or 4 issues you can break out of your question

1)
Quote:
How do I create an app that uses a button as a counter, and every time the button is clicked, it will upload that number to my website.?


You list python and PHP, first thing you need to do is pick a server side language. It doesn't really matter in the end what language you pick as long as it solves your problem and meets the business needs.

Also, you need to define here what an "app" is. You say later that its a phone app but i think you aught to consider, since you are just learning, a mobile first/friendly website and build up towards a mobile application at a later time.

With that said, I am going to make my comments around a mobile first/friendly application.

To create a button that affects a counter you'll need the following

a) server side language selected
b) html/css
c) javascript library (lets go with jquery) for ajax calls.
d) a data store, given the simplicity, a full blow relational database may be overkill but you are more than welcome to utilize mysql. Since you are learning it may be best to start with a relational db. The alternative being a nosql type database like mongo db.

You'll need to learn/implement the following to put a button onto your site

a) Place a element in your website where you desire, attach a click event to that button via jquery that adds 1 to a stored counter on the server side via an ajax call.
b) so learn how to implement an ajax call, with jquery
c) learn how to fire a click even with jquery.
d) figure out how to implement a server side exposed API that takes an inputted number, pulls a value from your data store, increments it by 1 and then saves the new result back to the data store.

2)
Quote:
I would like to add a section on my website that tells the reader how many cups of coffee I have drank so far into that day.


Similar to #1, you'll need to implement a new API call in your chosen server side language that reads from your data store the value of the incremented field from your data store. You'll need to create a server side API that is called via jquery/ajax to pull the value to display it onto your website.




3)
Quote:
I would like to develop a mobile application that I can put on my phone (Galaxy S7) so I can just tap a button every time I finish a cup of coffee.


As I mentioned above, since you are learning, trying to learn web development + mobile app dev can be a lot to undertake all at once and can lead to you getting discouraged. So my suggestion would be to create a mobile friendly site first that you can add as an icon to your app listing on your phone (at least you can on apple, im not that familiar with android) so it behaves like an app but is a website.

Should you desire only to do this as a native app, then you'll need to look into using android studio + java to build your app. There are other frameworks out there that can allow you to utilize web technologies to build native apps but this takes you down quite the rabbit hole of getting overwhelmed by so many different options.

4)
Quote:
The button would basically be a counter and would only hold an integer value. Once this button is pushed, I would like it to upload that integer value to my website so it would display the number of cups of coffee I have had.

Once the day is over with, I would like it to reset to 0 on my website.


I think the only thing here to address would be the reset to 0.

There are a few approaches here, you could just use your data store to hold 1 single value and overwrite it daily or you could use your datastore, have 2 columns, a date and a counter column, and after 12:00am you add a new row which allows you to store, historically, your consumed coffee overtime.

Either way you go about it, the easy way (to me) to implement would to look at the time in your server side call, say "is it past 12am", if so either make the decision to insert a new row + seed that new row/counter at 1 or implement an update statement to your data store to reseed the value back to 1.

In your API that you'll be creating, you'll need to make sure your incrementing API call is smart enough to know whether or not to reseed or insert a new row and update. If you go the path of inserting a new row, you'll effectively need to make sure both of your API calls (your post/update/increment call and your get value api call) know to get the latest row by date in order to increment. Basically saying SELECT * FROM CoffeeConsumption ORDER BY Date DESC Limit 1...i'm rusty on the mysql syntax...but the sql server version being SELECT TOP 1 * FROM CoffeeConsumption ORDER BY Date DESC where CoffeeConsumption is the table that stores your integer.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900