Bonjour, Hello!
The app that we will make, displays our geographic position on a map
as well as a second position, that you will tell the phone.
Here is how the app will show up :
I will click on the go button and tell an address to the phone.
"Place de la Concorde"
There it is : it diplayed "place de la Concorde"
with a blue icon, and my own geo-location with a red icon.
Let's give it an other try!
"Médiathèque Marguerite Yourcenar" (Yourcenar library)
Here it is : the Yourcenar library shoes up in blue, and here I am.
Last try :
Bibliothèques sans Frontières in Montreuil. (Librarians with No boarders)
Here it is : it displayed "Librarians with No boarders" and my own location.
OK.
Let us now build this app.
We will start with the DESIGN part
Which includes design of the user interface
and selection of resources that we will need for this app.
For the user interface, we need a textbox to display the address
and a button to start voice recognition.
To display the map we need a canvas.
Then, we will need service components :
A geo-LOCATION component for our own geo-location,
and a VOICE RECOGNITION component, to catch the address.
With these two service components, we will need
a WEB component that will help us shape or format the image internet address,
and a NOTIFIER that will enable us display error messages, if needed.
Let us now switch to blocs programming,
On top of the screen, we will put
a textbox to diplay the address, and a button.
This address and button, will be set inside an horizontal arangement,
so thet they appear side by side,
So, let's take an horizontal arangement with max width, (fill parent),
where we will put a textBox, ... which is here,
OK,
Now add a button which we name "GO".
We will set the textBox, with max width (fill parent).
Now that we have added this GO button which will start voice recognition,
and this cette textBox that will display address,
we need an area to display the map, which we will get under an image format (not as a web page).
To display a map with an image format,
we need a "canvas" component.
We set this canvas, with max height (fill parent)
and max width (fill parent) to get a fullscreen map.
We further need other components :
We will take a NOTIFIER,
in case we need to display temporary or error messages,
and a VOICE RECOGNITION component,
where is this component ? it's in the media drawer,
Here, we take a voice recongnition component.
We will also need a LOCATION component,
and that is a SENSOR.
So we take a location sensor.
The last component we need - as we will see later -
is a WEB component in the connectivity drawer.
OK, I completed selection and configuration of components and user's interface,
We will now switch to blocks programming.
The first event to deal with,
is when I click the button.
So, what should I do on button click ?
I must ask the phone to listen to what I say and recognize the address.
To do this, I will use the voice recognition component,
It will translate what I say in clear text, which will be the address.
Next event is when the voice recognition component sends back the result,
I will then display this result as the address in the textBox,
then I will call the function that will display the map in the canvas.
So : let's get started with the textBox first.
I will ask this textBox to display what has been returned in the result (résultat),
This result is the address that has been translated to text by the voice recognition component.
Then, I will display the map.
For this, I will create a function,
I will name this function "afficherLaCarte" (displayMap).
and this "afficherLaCarte" (or displayMap) function,
and call this function following the address display block.
We now have to write or code the "AfficherLaCarte" (displayMap) function or procedure.
To display the map as an image, we only have to set this image as the background image of the canvas,
that is the name of the file or resource which contains this map.
I will use a variable to hold this name and call it "URL" (or imageURL if you like)
This s the abbreviation for "Uniform Resource Locator"
which is the way Web resources access names are called.
I will initialize it as an empty string "",
and set this variable, as the canvas background image.
Now, what I need to do ist to create the adequate URL
to catch the map I want ...
Well, we then need a web server to give us this map,
when we provide the appropriate URL.
There is a server that matches this requirement,
It is the "Google Static Maps" server,
which the internet address displayed here.
So, you SHOULD read the documentation, but we will now directly see
an example, with a map of New York.
I copy this URL in a browser's address box.
and click to see the map that matches this URL.
So, what we need to do now,
is to write the URL that matches the map that we want to display.
This URL starts with the server's general address :
https://maps.googleapis.com/ ... down to the question mark.
THen we find map parameters :
center, zoom factor, map size,
map type, for example a roadmap,
then, markers that I want to display.
In our case, as we have (one or) two markers,
center and zoom factor may be computed automatically by server,
and we do not need to set them.
So now, we will write-code the URL that matches the map that we want.
Let'go back to blocks and display the strcuture of the URL.
and we will buil the URL variable with blocks,
as the join of text pieces,
with each piece holding significant aprts of the URL.
We will first have, the "header" piece,
then "map type",
then "size",
then two markers.
and we can use copy/paste from the URL model or sample
that we saw earlier.
We see that the URL is built with a header followed by a list of "parameter, value" couples,
for example "maptype=roadmap"
A "&" character is used to split these "parameter, value" couples,
except for the first one which follows the "?".
You must be careful that there is no space or special characters
that may spoil the URL.
If we run this first program, it will work,
but will stay with the same map and odd shape.
This URL, has further been broken down to separate parameters and values
until we can hnadle them as separate fields,
or variables to be set :
width and height of the map,
address for the first marker
and latitude and longitude for the second marker.
So, let's go and program these elements with blocks.
Image width and height will be set from canvas width and height,
We will take the width and height properties of the canvas.
and set this information in the "size" parameters.
For the address marker,
we will take the address from the textBox ,
in the "text" property.
But this text, should not be used as-is in the URL,
because this address may contain space characters,
as well as other characters that are not allowed inside a URL.
To solve this problem, we will use a function that is available in the "WEB" component
It is the "URI Encode" function.
So we "URI encode" the initial address to translate it
under a form taht can be used inside the URL as the adress for the first marker.
Last thing to do is to set coordinates for our own location,
for display of the second marker.
These coordinates area available as the latitude and longitude properties
of the location sensor.
so: we take latitude and longitude.
Then we will take a third parameter
that we tell us if latitude and longitude are currently valid or not.
This third parameter is named "hasLongitudeLatitude".
I set latitude at the apprpriéte place in the second marker,
then the longitude.
So, this URL will display amarker with these coordinates.
However these coordinates need to be valid,
This I can check with the "hasLatitudeLongitude" property.
So I will introduce a logical test.
if coordinates are valid,
then I can use them to display the marker,
and if coordinates are not valid,
then I will not display the second marker and use aan empty string.
To complete my program, I need to set this URL blocs
in the map display routine, before setting the canvas backround image
I can further delete blocs that are now useless.
and that cmopletes our program,
except for a small addon, which can be useful :
When canvas is touched, update map display.
On canvas touched event,
call the "mapDisplay" (or "afficherLaCarte") procedure.
Touching the canvas
will update the map,
which will be useful if your own location has changed.
Let us now test this program.
I will replicate my phone screen on my PC screen
so that you can see it,
then connect to the App Inventor companion
run the AI ompanion on the phone, then click and scan.
Point at the flashcode.
Done.
Now we are ready to go.
I will click on the "go" button and tell an address.
"Place de la Concorde".
OK, it displayed "place de la Concorde" as the bue icon and my location as red.
Try again.
"Place de l'Arc de Triomphe".
So, our app works fine.
what you need to be careful about,
is that your phone's configuration is adequate.
What commonly happens is that you work indoors,
you must then set your phone location mode to "battery saving",
which is my case here,
That's because GPS does not work (or not well) indoors,
so that if your phone is configured in "high precision" mode,
you might not catch your own location.