drawRect / Instagram_Stories

Inspired by Instagram Stories functionality. This source is similar to Instagram Stories, which is having both image and video support.
MIT License
415 stars 76 forks source link

Documentation on how to display stories from API #83

Closed codobuxsocial closed 4 years ago

codobuxsocial commented 4 years ago

I was trying to implement this awesome library :) but I could not seem to understand how to fetch stories from API. I know there is a function loadAPIResponse but I am not understanding on how to use it. It would be great if you provided an example of both offline and online data.

ranmyfriend commented 4 years ago

Hi @codobuxsocial Thanks for using it. Actually the loadAPIResponse here you have to make the call for your own backend.

Refer the stories.json file, then you will get to know some basic idea. See for us, we dont have any backend. Simply we went with JSON, and load the JSON and handle it.

Let us know if you need anything else. or further information.

promaticsArun commented 4 years ago

I am trying to implement in ios swift but i stuck in model i am unable to understand how to implement this thorugh my Model and also give me suggestion which model class or viewModel class are modified accodring to me with help of API.

ranmyfriend commented 4 years ago

Hi @promaticsArun Thanks for using it.

First, go through our stories.json you will automatically come to know. And when you are getting a response from the server. please match with our stories.json -> BASED ON THIS JSON RESPONSE ONLY - we have implemented this library.

If you want to explore the Models => Source Folder -> Models -> Here you can find models

Let me know if you need anything else

codobuxsocial commented 4 years ago

I figured this out, for anyone trying to do this, @promaticsArun

  1. Declare a variable e:g var arrStory : IGStories?
  2. After getting response from your stories API

let dataFromJSON = json["data"] let str = dataFromJSON.description let jsonData = str.data(using: .utf8)!

                do {
                    let jsonDecoder = JSONDecoder()
                    let stories = try jsonDecoder.decode(IGStories.self, from: jsonData)
                    self.arrStory = stories
                } catch {
                    print("Unexpected error: \(error).")
                }

You need to ask your backend to create the same model as the one in stories.json file. If everything is okay you now have stories object and next you can use it to return numberOfItems, cellForItem and in didSelect.

Once again I am really thankful of this awesome library for saving so much time. I just had to make some little tweaks according to my preferences and it all works so smooth!

promaticsArun commented 4 years ago

{ "code": 200, "stories": { "count": 29, "rows": [ { "id": 1, "user_id": "1", "story_media": [ { "id": 1, "story_id": "1", "file": "https://viip.s3.amazonaws.com/public/img/StoryMedia/1581750774064check.png", "media_type": "image" }, { "id": 2, "story_id": "1", "file": "https://viip.s3.amazonaws.com/public/img/StoryMedia/1581750774103apple-macbook-air-2017-05.jpg", "media_type": "image" }, { "id": 13, "story_id": "1", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/15821896478711582189639554.png", "media_type": "image" }, { "id": 14, "story_id": "1", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/15821896598271582189652004.png", "media_type": "image" }, { "id": 15, "story_id": "1", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/15821898018851582189793362.png", "media_type": "image" }, { "id": 16, "story_id": "1", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/15821898171341582189809899.png", "media_type": "image" } ], "user_story_data": null }, { "id": 8, "user_id": "29", "story_media": [ { "id": 10, "story_id": "8", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/15821138806641582113855755.png", "media_type": "image" } ], "user_story_data": { "name": "misha" } }, { "id": 10, "user_id": "7", "story_media": [ { "id": 12, "story_id": "10", "file": "https://viip.s3.amazonaws.com/public/img/StoryMedia/15821195530981582119530403.png", "media_type": "image" }, { "id": 17, "story_id": "10", "file": "https://viip.s3.amazonaws.com/public/img/StoryMedia/15822041034561582204080147.png", "media_type": "image" }, { "id": 18, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/15822043607881582204337986.png", "media_type": "image" }, { "id": 19, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/15822046103871582204588270.png", "media_type": "image" }, { "id": 20, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/15822618660141582261864872.png", "media_type": "image" }, { "id": 21, "story_id": "10", "file": "https://viip.s3.amazonaws.com/public/img/StoryMedia/1582634405989viip-1582634407396.jpg", "media_type": "image" }, { "id": 22, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582636891332viip-1582636892921.jpg", "media_type": "image" }, { "id": 23, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582637160907viip-1582637162291.jpg", "media_type": "image" }, { "id": 24, "story_id": "10", "file": "https://viip.s3.amazonaws.com/public/img/StoryMedia/1582690826825viip-1582690804023.jpg", "media_type": "image" }, { "id": 25, "story_id": "10", "file": "https://viip.s3.amazonaws.com/public/img/StoryMedia/1582694429329viip-1582694406698.jpg", "media_type": "image" }, { "id": 26, "story_id": "10", "file": "https://viip.s3.amazonaws.com/public/img/StoryMedia/1582700721729viip-1582700707049.jpg", "media_type": "image" }, { "id": 27, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582701163640viip-1582701130139.jpg", "media_type": "image" }, { "id": 28, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582701307953viip-1582701279663.jpg", "media_type": "image" }, { "id": 29, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582702141637viip-1582702114303.jpg", "media_type": "image" }, { "id": 30, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582702412389viip-1582702387226.png", "media_type": "image" }, { "id": 31, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582702745926viip-1582702743875.mp4", "media_type": "video" }, { "id": 32, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582707847739viip-1582707842479.png", "media_type": "image" }, { "id": 33, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582716144797viip-1582716136297.png", "media_type": "image" }, { "id": 34, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582720821843viip-1582720802758.png", "media_type": "image" }, { "id": 35, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582721054939viip-1582721032773.png", "media_type": "image" }, { "id": 36, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582722013827viip-1582722009558.png", "media_type": "image" }, { "id": 37, "story_id": "10", "file": "https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1582722053554viip-1582722040403.mp4", "media_type": "video" } ], "user_story_data": { "name": "test" } } ] } }


This is my json how to use in this library and please explain how to implement in model because it have 4 model class and i am confuse to implement in like - IGStories ,IGSnap,IGUser and IGStory.

boominadhaprakash commented 4 years ago

Hi @promaticsArun,

Have you worked with models on your projects? Is that our stories.json and the response what you are getting is same in structure?. Please first refer our stories.json and our models. Compare the key values. If it has different keys on your json, then modify the keys based on that.

IGStories => It is the root model. IGStory => Which represents single story and it has the single story data. So, IGStories model having array of IGStory. IGSnap => Story might have many snaps like images or videos. That single image record or video record called Snap. So, IGSnap model contains that data. IGUser => This model contains the user related data, who posted that story.

The above one is hierarchy order. First try to understand this logic. Once you got my point post your reply. Will discuss further. Will go step by step. Don't jump into implementation directly. First try to understand the code. If you understood, you can shape the code however you want.

Regards, Boominadha Prakash

promaticsArun commented 4 years ago

{ "code": 200, "stories": { "count": 20, "rows": [ { "id": 11, "user_id": "7", "last_updated": "2020-03-03T10:27:02.000Z", "story_media": [ { "id": 40, "story_id": "11", "file": " https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1583146841862viip-1583146839826.jpeg ", "media_type": "image", "created_at": "2020-03-02T11:00:42.000Z" }, { "id": 41, "story_id": "11", "file": " https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1583146863880viip-1583146862194.jpeg ", "media_type": "image", "created_at": "2020-03-02T11:01:05.000Z" }, { "id": 42, "story_id": "11", "file": " https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1583146891685viip-1583146889810.jpeg ", "media_type": "image", "created_at": "2020-03-02T11:01:32.000Z" }, { "id": 43, "story_id": "11", "file": " https://viip.s3.amazonaws.com/public/img/StoryMedia/1583150481058viip-1583150478649.jpeg ", "media_type": "image", "created_at": "2020-03-02T12:01:23.000Z" }, { "id": 44, "story_id": "11", "file": " https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/1583153881881viip-1583153880350.jpeg ", "media_type": "image", "created_at": "2020-03-02T12:58:03.000Z" }, { "id": 45, "story_id": "11", "file": " https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/SampleVideo_1280x720_1mb.mp4 ", "media_type": "video", "created_at": "2020-03-02T12:58:03.000Z" } ], "user_story_data": { "name": "test", "profile_images_one": { "id": 594, "image": " https://viip.s3.us-east-2.amazonaws.com/public/img/ProfileImages/1582710893286cropped6757299503570724801.jpg " } } }, { "id": 8, "user_id": "29", "last_updated": "2020-03-03T10:27:02.000Z", "story_media": [ { "id": 10, "story_id": "8", "file": " https://viip.s3.us-east-2.amazonaws.com/public/img/StoryMedia/15821138806641582113855755.png ", "media_type": "image", "created_at": "2020-02-19T12:04:43.000Z" } ], "user_story_data": { "name": "misha", "profile_images_one": { "id": 408, "image": " https://viip.s3.us-east-2.amazonaws.com/public/img/ProfileImages/1582112037429cropped5330596681584767557.jpg " } } } ] } }


This is my json and i am unable to distribute code in Source => Model and IGStories, IGStory,IGSnap,and IGUser please suggest me how to distrbute code in four model and ViewModel . This is my humble request to you.

On Mon, Mar 2, 2020 at 7:02 PM Boominadha Prakash notifications@github.com wrote:

Reopened #83 https://github.com/drawRect/Instagram_Stories/issues/83.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/drawRect/Instagram_Stories/issues/83?email_source=notifications&email_token=AOV2PAW45QD3FDHCXWKDTXDRFOYOBA5CNFSM4KWQR23KYY3PNVWWK3TUL52HS4DFWZEXG43VMVCXMZLOORHG65DJMZUWGYLUNFXW5KTDN5WW2ZLOORPWSZGOXAHGSFY#event-3087952151, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOV2PASEQHQAY45EV4MWOB3RFOYOBANCNFSM4KWQR23A .

ranmyfriend commented 4 years ago

Hi @promaticsArun We hope you have resolved this query. Due to this, we closing it for now. if anything comes up later, please reach us.