Possible to develop ride-sharing app? like Grab

Questions about Thunkable
#1

Hi, Thunkable X, i done my community research about this project, since it is possible in the classic tho with some basic features, i already check the possible blocks and components that might be use using thunkable X, but it wont satisfied the project since

  1. it dont have custom google marker
  2. Only one firebase
If you will recommended using Google Map Api with the support of webviewer, do you have any recommended source code of it, since all backend will be much done in a code based and implement in a block.. Anyone thoughts? I would love to discuss about this project, since this project already exist in our city but in android version and i want to start the IOS.
#2

If you can work the API, it’s easy enough to send data to it.

the thunkable github has documentation on this

start here
https://developers.google.com/maps/documentation/directions/usage-and-billing

then here
https://developers.google.com/maps/documentation/javascript/directions

then here
https://developers.google.com/maps/documentation/javascript/custom-markers

for example. i use this to make a bubblemap, i create the JSON data in my app. i transmit the data to the following HTML document stored on my github server space.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">

    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/maps.js"></script>
    <script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
    <script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js"
        type="text/javascript"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }

        #chartdiv {
  width: 100%;
  height: 900px;
  border: 1px dotted #ddd;
  margin: 1em auto;
}

    </style>

</head>
<!--ThunkableWebviewerExtension.receiveMessage(function (message) {
    try {

        // Themes begin
        am4core.useTheme(am4themes_animated);
        // Themes end

        // Create map instance
        var chart = am4core.create("chartdiv", am4maps.MapChart);

        var mapData = message;

    -->



<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="chartdiv"></div>
    <script>
        ThunkableWebviewerExtension.receiveMessage(function (message) {
            try {

                // Themes begin
                am4core.useTheme(am4themes_animated);
                // Themes end

                // Create map instance
                var chart = am4core.create("chartdiv", am4maps.MapChart);
                
                    var title = chart.titles.create();
                    title.text = "[bold font-size: 20]Current number of confirmed COVID19 cases per countery\nsource: https://api.covid19api.com/";
                    title.textAlign = "middle";

                var mapData = message;


                // Set map definition
                chart.geodata = am4geodata_worldLow;

                // Set projection
                chart.projection = new am4maps.projections.Miller();

                // Create map polygon series
                var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
                polygonSeries.exclude = ["AQ"];
                polygonSeries.useGeodata = true;
                polygonSeries.nonScalingStroke = true;
                polygonSeries.strokeWidth = 0.5;
                polygonSeries.calculateVisualCenter = true;

                polygonSeries.events.on("validated", function () {
                    imageSeries.invalidate();
                })


                var imageSeries = chart.series.push(new am4maps.MapImageSeries());
                imageSeries.data = mapData;
                imageSeries.dataFields.value = "value";

                var imageTemplate = imageSeries.mapImages.template;
                imageTemplate.nonScaling = true

                imageTemplate.adapter.add("latitude", function (latitude, target) {
                    var polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id);
                    if (polygon) {
                        return polygon.visualLatitude;
                    }
                    return latitude;
                })

                imageTemplate.adapter.add("longitude", function (longitude, target) {
                    var polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id);
                    if (polygon) {
                        return polygon.visualLongitude;
                    }
                    return longitude;
                })

                var circle = imageTemplate.createChild(am4core.Circle);
                circle.fillOpacity = 0.7;
                circle.propertyFields.fill = "color";
                circle.tooltipText = "{name}: [bold]{value}[/]";

                imageSeries.heatRules.push({
                    "target": circle,
                    "property": "radius",
                    "min": 4,
                    "max": 30,
                    "dataField": "value"
                })
/*
                var label = imageTemplate.createChild(am4core.Label);
                label.text = "{name}"
                label.horizontalCenter = "middle";
                label.padding(0, 0, 0, 0);
                label.adapter.add("dy", function (dy, target) {
                    var circle = target.parent.children.getIndex(0);
                    return circle.pixelRadius;
                })
*/

            } catch (e) {
                console.error("An error occurred. Message probably wasn't a JSON string of an array of numbers");
            }

        });

    </script>
</body>

</html>```
2 Likes
#3

wow!Thank you so much for this information, one more thing, if it dont consume too much time, can it be a favor to show how to implement this in a block way inside of a project? so anyone or me can view this as a open source code, this i believe some might get into this kind of project soon.

#4

can ell progress/
well im late to reply
sory

#5

You may also try this app

1 Like