Wappler Weekly Challenge #1

Hey Brad, you check the docs about API Data Source here: Using API Data Source

It’s an example of what you can do, you just need some interesting API data to connect to :slight_smile:
Think of data APIs as a database, which you are not hosting :slight_smile: You just connect to it, interact with it, get data and use it the same way as a regular database data source.

2 Likes

Adjusted the rules a bit - so you are also allowed to make a step by step guide @psweb or @Hyperbytes, if you can’t really fit it in a small video :slight_smile:

2 Likes

I this 3 minute sped to 30 second video showing the entire site build process from start to finish or just showcasing the API Implementations and the final result @George

Just the highlights are fine. You can put the entire process in an extended doc topic with screenshots.

Think of the video as quick Facebook promotion in 30 secs, being able to get the attention of the scrolling user

1 Like

Guys I’m really sorry I can’t quite find the time to do additional projects except my main project on Wappler. And unfortunately, it doesn’t require any kind of API data source. But I like the idea and hope many users show their skills :slight_smile:

1 Like

@George, this is just a showcase, I will do a write up on what i did where in a bit.

I unfortunately could not possibly get this video length down further than the 2 minutes, lol, for me that is like the shortest video ever, so hope it’s ok.

Waiting to see who else enters, looks like I might be all alone here.

Replaced Video
Wappler Demo Showcase.mp4 (94.3 MB)

This uses 9 API connections from 3 different API providers. @geoplugin

Write Up -
This is a single page I have created with multiple components and data sources.

Wappler components used:

  1. API Data Source
    a. api1 = geoplugin.net - Main with a base currency set to GBP with noload
    b. api2 = geoplugin.net - Extras - Nearby with noload
    c. api3 = geoplugin.net - Extras - PostalCode with noload
    d. api4 = geoplugin.net - Extras - Nearest Transport with noload, and success load api5
    e. api5 = goibibo.com - Flight Search with noload and success load api6
    f. api6 = geoplugin.net - Main with base currency set to INR with noload
    g. geo1 = success load api1, api2, api3, api4
    h. api7 = unsplash.com
    i. api9 = unsplash.com with search
  2. Geo Location
  3. Browser Component
  4. Wappler Slideshow with dynamic slides from api9
  5. Wappler Select menu with data source of api4
  6. Wappler Date Range Picker with custom date format and data bindings formatter
  7. Wappler Maps with Dynamic Marker Data of api4
  8. Wappler cards in a Wappler repeat with unsplash.com image data from api7 and Wappler maps with data from api1 and distance bindings from api4

And that is really all there is to it, took me about an hour to make 90% of it work and 2 days trying to get the flight data sorted out.

This uses no custom code at all, everything was done just with Wappler components.

8 Likes

Just fantastic @psweb :+1:

2 Likes

As excellent as i would expect Paul. Sadly i wont be challenging you this week, urgent deadline before i head off for a weeks holiday next week but “i’ll be back” as Arnie says, refreshed and eager

2 Likes

Ahh thanks @geoplugin, appreciate your feedback considering so much of this was achieved with your brilliant API.

@Hyperbytes, thanks for the kind words, looks like this week unfortunately there are no challengers :joy:

If I do not win the challenge and I am the only entrant, that would be slightly upsetting, haha.

3 Likes

Well done @psweb ! Looks amazing! That is what I’m talking about - such a great rich example!
API possibilities are endless!

Your video show it pretty well and short actually!

Few things about the video:

  • last 50 seconds are black?
  • couldn’t you format those days in the date picker? 20181110 to 20181115 - looks really ugly :slight_smile:

Do you have the demo online somewhere? or send a zip - we can host it at showcase.wappler.io

Awesome work! I do hope that more @wappler_ambassadors participate to the competition - but it will be really difficult to challenge you :slight_smile:

3 Likes

Thanks @George, I am fixing the video now, sorry did not realise it would fill the last bit with black like that, replacing the top video now.

The datepicker formatting was an issue as the api wanted it returned like that so i had to actually add data formatters of date1.start.replace(’-’, ‘’) which did make it view a little uglier than i had hoped.

I have an online demo here https://www.africacollectionbs4.com/test.php
I could give you the file in a zip if you prefer however I will have to message you with it as it has all my api keys in it, don’t want google to get on my case, haha.

2 Likes

Congrats @psweb !!!
This is all through the API? Fantastic.

I was thinking if it is possible to create a website for online tickets. You know the ‘usual’ that many websites have where you check tickets from multiple airlines. I have a friend who works in a company in Holland that creates this API. Don’t know if this API is accessible to anyone or only to professionals.

2 Likes

Thanks @psweb. This is a really inspiring piece of work. Amazing to have achieved this in such a short space of time.

1 Like

Brilliant as usual @psweb!!

1 Like

Absolutely useful and amazing work! Just for these 30-40% of users the Mobile Ui isnt nice. But good real world example

1 Like

yeah, i did not even begin doing the mobile implementation yet, lol. Sorry i did mean to mention that.

2 Likes

so you know how it actually goes, we will all now focus on the fact that work is not optimized for mobile hahaha.

mmm good work @psweb but don’t know… this mobile issue… mmm it’s ok, finish the mobile and send it again and then we will see, haha.

PS. Congrats once again!!!

1 Like

The flight API i linked to is great, but my goodness confusing as can be, i did get some custom code very kindly provided from @geoplugin which almost worded perfect, but for the challenge i really only wanted to use what Wappler gave so i did it a little different.
If anyone really figures out how to get that API data working, I would love to know. I got it working for what I needed, but not for what i wanted. @patrick might be so kind as to take a little look.

1 Like

I’ve just spotted a little typo: ‘OPORTUNITIES’

Another option you might want to add if this facility is to be used for real, is to allow the user to add their own postcode or town. For some reason, my location, based on my IP address presumably, is in Scotland - whereas I actually live near Oxford (UK). It’s about 8 hours by train to the nearest airport (flying to the airport would be a better option).

1 Like

Hurry up Niko! You can still join the competition!

2 Likes