Wappler Weekly Challenge #1

Wappler General Announcements
#1

Welcome to the WWC #1!

The Wappler Weekly Challenge! :raised_hands::raised_hands::raised_hands:

This week we have an awesome challenge as first one for you!

As with the just released API Data Source - a new data connected world opens to Wappler! So finally you can connect to all those great public data APIā€™s and use their valuable data on your website! All rendered real time thanks to the Wapplerā€™s Fast Front-End Framework App Connect!

So the challenge is:

  • find the most useful API to integrate with and make a quick visual integration in an existing good looking website
  • the integration should provide a great value to the website and its users.
  • Examples
    • unsplash photos catalog
    • geolocation to segment your users and offer them the right language and currency
    • get currency data to provide real time conversion or charts
    • get stocks/crypto currency data and draw amazing charts
    • use user data to design better
    • more useful public can be found at: https://github.com/toddmotto/public-apis

Rules

  • your showcase should be as visual as possible
  • make a video
    • it should shoot in a video max 3 mins of how quickly it is done - without audio!
    • the video should then be speed up - so it becomes max 30 secs
    • in the video it should be all clear what you are doing and the final effect
  • and/or produce a step by step guide with screenshots of how it is all done
  • deadline Tuesday 13th of November 2018
  • submit as reply to this topic - including the speed up video and short description of single paragraph!!
  • after Tuesday we will make the best submissions public so people can vote
  • the top 3 winners - will be announced on Friday 16th of November

Prizes

  • Amazing shiny WWC #1 badge :slight_smile:
  • Great recognition by the Wappler gurus!
  • your awesome speedup video will be posted on Wappler Twitter and Facebook channels
  • Eternal fame!

So get your showcases started! And our special @wappler_ambassadors go for it too!

Let the game begin!! Good luck to you all!

6 Likes
API Connect with Aftership
Wappler Weekly Challenge #1 - Winner!
Package Tracking API
Flight Status & Track API
#3

I donā€™t even know how to use the API tools or even whereto find them. So Iā€™m out for this one. Looking forward to what the real Wappler gurus can come up with.

#4

Dear Friend,

I m very sorry but this time, I am the first to post a video on Wappler. An in this case hope to get the priceā€¦ ehm the prize I deserve.

Many times people talk in the forum about the price of Wappler or about PRO developer against Wappler Developer.

In this case I show how to maximize your ROI (return of investment) on wappler, using API with Clients.

Registrazione schermo 2018-11-09 alle 18.13.20.mov (8.1 MB)

Congratulations and wire transfers are welcome. Comments only positive ones :wink:

Roberto

3 Likes
#5

haha good one Roberto :slight_smile: - but try to follow the rules :wink:
otherwise no priZe :slight_smile:

#6

It was just an attemp to give a smile to my friends in the Community. :muscle:

4 Likes
#7

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
#8

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
#9

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

#10

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
#11

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
#12

@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
Wappler Weekly Challenge #1 - Winner!
#13

Just fantastic @psweb :+1:

2 Likes
#14

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
#15

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
#16

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
#17

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
#18

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
#19

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

1 Like
#20

Brilliant as usual @psweb!!

1 Like
#21

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

image
606EB81F-5E47-4172-AC8E-5634F99476AB.jpg1125Ɨ2436 237 KB

1 Like