search

Cloudkibo / KiboPush

0 stars 1 forks source link

Implement WebView Prototype #4572

Closed jekram closed 5 years ago

jekram commented 5 years ago

@sojharo Need to implement WebView prototype for Social Security Administration

https://www.ssa.gov/myaccount/

This is a very high priority.

  1. Read up on Webview https://developer.android.com/reference/android/webkit/WebView
  2. Watch these two Videos https://www.youtube.com/watch?v=waeBQU47GFU https://www.youtube.com/watch?v=UrO5ztx1D5w
  3. Create a WebSite with a Simple Backend
  4. Create Webview within Messenger to show the following see attached document.

https://docs.google.com/document/d/1BPJtg_0yJ9yMgSlKizUQbrTXQa1oS-KRE--55RlemzA/edit

sojharo commented 5 years ago

Salaam,

In 1, the link is of web view of android and it is used to show websites in android app. I think we don't want to see this and we want to see the web view of messenger platform, right?

sojharo commented 5 years ago

I went through couple of web view articles and also watched the two videos yesterday. I have now started to work for sample website. I am basically following the video for this as well.

sojharo commented 5 years ago

Today, we had a demo on web view and here is how it looks on iPhone Messenger:

Compact View

img_8403

Compact View

img_8404

Compact View

img_8405

Latest version of Messenger is required on any device which we use for testing.

Here is the messenger link for testing: https://m.me/sojharomangi

Use the persistent menu or just type social security in message.

sojharo commented 5 years ago

I have created a basic flow and few new pages. Dashboard is under construction.

Here is the messenger link for testing: https://m.me/sojharomangi

Link to documents:

https://docs.google.com/document/d/1BPJtg_0yJ9yMgSlKizUQbrTXQa1oS-KRE--55RlemzA/edit

https://docs.google.com/document/d/1EGBuTY_KhuR5Tp2qC8nbIqkrFB4Iv_K_KVkQy3zJSXk/edit#

sojharo commented 5 years ago

I have worked more on this and have made the pages UI similar to the that of original website. Some of the pages were easily copied from the HTML of page and some required some tweaking. However, I am having some struggle with Dashboard UI to make it similar as I can't access dashboard. Also, on UI side I think I might need to take some help from @ImranBinShoukat as he is very good at UI and I have most of time worked on server side issues. I tried my best but initial UI is not matching it. I am assigning this to Imran with me as well.

Here is how it looks now on Web view:

screen shot 2018-10-26 at 12 51 55 am screen shot 2018-10-26 at 12 52 03 am screen shot 2018-10-26 at 12 52 12 am screen shot 2018-10-26 at 12 52 18 am screen shot 2018-10-26 at 12 52 26 am
jekram commented 5 years ago

Looking Good 👍

jekram commented 5 years ago

Can we move the app someplace else? on our droplet?

sojharo commented 5 years ago

Yes, for now it is running on free service. But, wherever we move it, it should have ssl cert. What we can do is this that we can serve it from kibopush staging as it already has ssl cert and domain name.

sojharo commented 5 years ago

Imran and I worked on the couple of screens from the dashboard. Now they look similar to what we have in screenshots in document. Just two of the screens are remaining now.

screen shot 2018-10-26 at 9 41 56 pm screen shot 2018-10-26 at 9 42 21 pm screen shot 2018-10-26 at 9 42 31 pm screen shot 2018-10-26 at 9 42 52 pm screen shot 2018-10-26 at 9 43 03 pm screen shot 2018-10-26 at 9 43 45 pm
sojharo commented 5 years ago

I have added more 2 pages to this. There are few screenshots in the document regarding screens, I have put comment on them and couldn't understand how to reach them. Kindly, let me know which links point to them. One screenshot seems not complete. Also, there is not screenshot of link "Replacement Documents".

Here is the screenshot of pages that I have created today.

screenshot 2018-10-29 at 5 24 48 pm screenshot 2018-10-29 at 5 25 53 pm screenshot 2018-10-29 at 5 26 28 pm
jekram commented 5 years ago

The links are in this screen: (for My Profile)

screen shot 2018-10-30 at 12 11 58 am
jekram commented 5 years ago

@sojharo Let me walk you thru to these pages

sojharo commented 5 years ago

This is complete now. Here are the remaining screens:

screenshot 2018-10-31 at 8 48 22 am screenshot 2018-10-31 at 8 48 32 am screenshot 2018-10-31 at 8 49 04 am screenshot 2018-10-31 at 8 49 44 am screenshot 2018-10-31 at 8 49 59 am

All the screens in the document are done now.

sojharo commented 5 years ago

I have corrected the table and also corrected the dashboard home page. This is complete from UI perspective and now we can fill the fake amounts and names.

sojharo commented 5 years ago

Salaam, this was completed. what should be the next step here. Kindly, provide me with fake data i.e. fake names and fake money details so that I can put that one as well.

sojharo commented 5 years ago

This is working now. I have done this with Anisha's facebook account on ChatFuel. It was not working for my facebook account.

I have attached the facebook page KiboChat to social security web view. It is working fine on Messenger on Mobile but doing some issue on Messenger on Web. Please test on messenger on mobile on following link:

m.me/kibochat

sojharo commented 5 years ago

The latest status:

We have following three messenger pages which have parts of SSA functionality:

  1. https://m.me/kibochat (kibochat page webview only)
  2. https://m.me/1920424521502818 (kibomarketing page for videos)
  3. https://m.me/382154169188869 (demossa for chatbot, webview and videos)

Update regarding DemoSSA page

Cards and Quick replies are working now. Also, for card, I have opened the webview i.e. when you click on image of card, it would open a webview of ssa website now. To view the card and open web view on its click ask this question from bot:

q. update my status

Videos are added for following questions. Also, the videos are played inside the media template, so it has button which takes to full video link of youtube and also other button opens the web view that we have created.

q1. Can you send me the tutorial on Disability Claims Process q2. How can I file a disability claim q3. Can you send me the tutorial on Medical Evidence (using video of q2 for demo purpose) q4. Can you send me the tutorial on Quality Review (using video of q2 for demo purpose) q5. Can you send me the tutorial on Appeals process (using video of q2 for demo purpose) q6. Can you send me the tutorial on The Appeals Council (using video of q2 for demo purpose) q7. Can you send me the tutorial on end of a claim (using video of q2 for demo purpose)

rest of the questions can also serve their own videos, however, for demo, I just worked on two videos. It is a lengthy process to download the video first and then trim it to facebook size limit and then upload it to facebook and get attachment id and then train the bot to return the attachment id for desired question and use it in media template.

I have also done experiments over the weekend to capture email address and location from the subscriber. Currently, our bot is capable to show webview, give interactive to answers to questions, show videos in webview. I have made some more questions interactive from our server side but they are under testing.

sojharo commented 5 years ago

I further worked on the postbacks of quick replies yesterday. It is under construction.

sojharo commented 5 years ago

I have added the buttons for links now wherever they were appearing in the document. Also, the youtube links which were not part of links that imran uploaded are also on a button click. Further quick replies are also corrected now.

For longer answers I couldn't understand how do we shorten them. One idea is to put the one liner answers and then add button link to guide for more details.

sojharo commented 5 years ago

Yesterday, I went through complete user guide of dialogflow and understood the concepts. After this, I also created one small pizza bot and made it conversational. For SSA, I then started working on separate bot for reporting requirements questions. I am working it and we can have a small demo in our meeting as well.

jekram commented 5 years ago

@sojharo what is the next step here?

sojharo commented 5 years ago

We can close this issue as we are tracking both demo ssa work in other issue #4790