Creating a Playlist for an Apple Music User - react-native

I've created an app in React Native which allows a user to search for songs, which uses the Apple Music API. So far, so good.
For the next step. What I want to do is use the songs the user has searched for, and let them save them as a playlist in their Apple Music account (assuming they are a subscriber, etc.).
However, there seems to be a lack of documentation and examples on how to do this (at least compared to Spotify - I'm recreating a Spotify App I made in the past).
I'll need to get authorisation from the user, and then use this endpoint: https://developer.apple.com/documentation/applemusicapi/create_a_new_library_playlist, but I can't find out how exactly to do this. Other parts of the API documentation seem to simply state "With proper authorization from the user, you can also create or modify playlists and apply ratings to the user's content." but never actually explain or link to how to get this authorization.
Can anyone point me in the right direction? And let me know if what I'm trying to do is actually possible with Apple Music - it seems like it is, but the way I'm going around in circles, I'm not so sure anymore. Thank you

I don't know if this will help or not (I'm an iOS dev, not a React dev), but here's the call to save a playlist to a user's Music library, in Swift. Maybe it'll help point you in the right direction(?)
If you'd rather not have Swift code polluting your thread, let me know and I'll remove it.
import StoreKit
// ...
// request user token
if let devToken = UserDefaults.standard.string(forKey: "devToken") {
SKCloudServiceController().requestUserToken(forDeveloperToken: devToken, completionHandler: { userToken, _ in
guard let _ = userToken else { return }
self.addPlaylist()
})
}
// add playlist
func addPlaylist() {
MPMediaLibrary.default().addItem(withProductID: "pl.u-065LACYzL34", completionHandler: { _, error in
guard error == nil else {
print("add playlist sad")
return
}
// success
})
}

I've been looking at trying to do this for a while now.
MusicKit JS works in the browser, but since there is no browser in iOS, that's a no-go: there is no Window.musicKit.getInstance(). And I've yet to find any other way to authorize MusicKit, using JavaScript, except for MusicKit JS.
You can access the Apple music Catalog via the API with only a developer token. You can even access (read only) a user's playlist, if it's public and you know the global id, but that's not what we're after here. We want access to a user's Library so that we can do stuff (except delete, because you can't delete stuff through the Apple Music API).
To authorize access to a user's Library in iOS, you need to use StoreKit, per this, and in order to do that with React Native, you need to use Native Modules per this.
The problem about that second bit, is that I got no idea how to do this. I've read a few things, but I'm not connecting the dot's yet.
If you (or anyone) has figured this out, dropping a note with a how-to here would be awesome. If I do figure it out, I'll come back here and post.
Update: I found this article, which comes close to explaining it really well.
The issues I'm having here are that in the Add a React Native iOS Project section, there's an unfinished sentence ("Here we create..."), and I can't seem to find React.xcodeproj when I run through the steps the author has provided.

Additional remarks: you can run Javascript on a Page in Shortcuts but only when you run shortcuts from sharesheet from Safari.
Also, contrary to what you may seen in many tutorials keep in mind that for POST requests a header Music-User-Token has a value without word "Bearer". In GET request using "Bearer" word will also work. I've built webpage to get music-user-token to clipboard and save it to use it in Shortcuts.

Related

React Native Multiple Images Picker

The problem
So, I am developing a react native application and I am facing the callenge of selecting multiple images from the user gallery. Just like apps like WhatsApp, Telegram, Twitter and even Reddit do. So with that in mind, i tried to use launchImageLibraryAsync from expo-image-picker but, as specified in their documentation, the "multiple selecion" of images is only supported on the web.
What I have thinked of
So, based on several searches, it seemed like i had to build my own "Gallery". To do this, so far i've tried to use #react-native-community/cameraroll and expo-media-library, but both of them requires that we pass the first property to the getPhotos (for #react-native-community/cameraroll) or to the getAssetsAsync (for expo-media-library) functions, which defines the first items to be fetched. This is a problem because I do not want to fetch like 20 items and then, when the user reaches the end of the list, it fetches more 20 items. I need something like this (this example is from Telegram). You can see that the app never stops me from scrolling, it goes all the way through my entire gallery.
What would also be nice
If you use reddit mobile, you can see that you can also select multiple photos using the several Apps like Google Photos, Files, Google Drive and so on.
This would be even nicer because I wouldn't need to implement a custom made Picker. Do you guys know how could I implement this?
OBS: I am using Expo with Bare Workflow, so I can use just about any package. I also opened a discussion at the Expo repo about it. You can check it here: https://github.com/expo/expo/discussions/15210.
Thank you in advance :)
I have been using this package called expo-images-picker check it out. It has similar function to what you need. It works in Mobile as well.
Link here

Website replicating in React Native, WebView vs code, notifications needed

first time asking here as i am looking for some guidance before i start coding.
I have been developing websites mostly in PHP/MySQL/Jquery for years. As I was requested to port a website to an app, I selected React Native in order not to learn 2 different languages for IOS-Android.
I subscribed to some react native lessons, as I found it very clear and fun to follow, and it indeed is.
But here I am finding that to replicate the website is a truly difficult task for me. A temporary version exists at https://app.thallo.care/app.php?language=en (view on mobile if you like). There are many fixed positioned things and floating menus that i cannot easily program on react native.
I tried webview, it works wonderfully, but i am not positive i will be able to implement notifications the way i want to, or custom app styling with inject javascript i am unsure it will work.
The only app difference comparing to the desktop version, is that the user will receive notifications. The website will have a calendar where he will add events, and i need to send notifications to the user device on the event datetime that he has set.
Now the question... Should i use webview and manage notifications on a third party app like amazon SNS or anything else, will i get per-user notifications on events with webview? (I dont need to open a specific page on the app, but it would be nice). Or should i insist on react native coding and try to replicate as much as possible, to be able to have proper notifications? Reminder - the events won't be sent by the app. they are stored in MySQL and should be stored on some other service as well (that i dont know of yet). I don't know also if the webview can handle the website programmed login-logout with $_SESSION php parameters.
I would really appreciate some guidance.
Thanks in advance,

How do I notify users of new content available in tvOS apps from the home screen?

Push notifications have been left out of tvOS (understandably so) but the docs seem to contradict themselves in alerting users to the fact that there is something new available in your tvOS app.
Here it seems to say that you can add an app badge: https://developer.apple.com/library/prerelease/tvos/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/Chapters/WhatAreRemoteNotif.html
Here it says they've been removed from UIKit: https://developer.apple.com/library/prerelease/tvos/releasenotes/General/tvOS90APIDiffs/Objective-C/UIKit.html
Removed UIApplication.applicationIconBadgeNumber
Assuming the badge approach is not supported in this release, does anyone know the best practice for alerting a user that there is new content in your app without the user taking an explicit action? ie focusing on the app and showing them something in TopShelf?
I encountered the same problem and dived into this. Probably your best way is to update the topshelf with latest items, which is my way to solve this for now. You can use network calls to update the topshelf with content from your backend.
This depends on the type of application. E.g. showing the latest top movies for a movies app.
You can trigger an update of the topshelf after your network call completed using the following code:
NSNotificationCenter.defaultCenter().postNotificationName(TVTopShelfItemsDidChangeNotification, object: nil)
Make sure to implement the TVTopShelfProvider which should be clear using the following documentation:
This protocol is adopted by the principal class of an app’s TV Services extension. Apps that implement this extension can provide dynamic content to the Top Shelf element rather than having the system use the static image submitted with the app. The topShelfStyle property specifies the interface style you want, and the topShelfItems property specifies the content items to display. Whenever you change the content provided by the extension, post a TVTopShelfItemsDidChangeNotification notification to prompt the system to reload your content.
Icon badges are removed for app icons, push notifications as well (except for silent push notifications).

Confused with IOS Deep linking

I'll just want to ask if someone here know the step by step process of creating a deep link for an IOS app? I've tried to read some articles but it did not give me absolute answers. Thank you :)
Deep linking is basically just setting up url to your app so that other apps can launch it with information. The can launch to certain parts of the app if you set it up so that your app reacts to certain urls. So there are a few things that you have to do. For this example I will use two apps. If you are trying to integrate with an existing app you just have to find out what their url schemes are. So for this example I will use 'Messages' as one app and 'Schedule' as another.
First: in the 'Messages' app we will need to setup the schemes our Schedule app to call.
So open up your first app we need to add schemes so other apps can open it. Go to your info.plist click the little + and type URL types hit the triangle to expand and hit the + type URL Schemes and within that one add an item and put your apps name in it. Also add URL identifier along with $(PRODUCT_BUNDLE_IDENTIFIER) as the value. `
Then we just have to add the apps that we can open so hit the top level + again and add LSApplicationQueriesSchemes This whitlists the apps so we can evaluate weather or not they are installed on the device.
Now we can jump over to the other app and create a way to call this. For this example lets make it happen when we press a button.
IBAction launchMessagesApp() {
let url = NSURL(string: "Messages://") where UIApplication.sharedApplication().canOpenURL(url) {
self.launchAppWithURL(url, name: "Messages")
}
The canOpenURL(url) checks to see if the application is on the device. If you wanted to you could launch the app store to your app if that retuned false. then launchAppWithURL actually launches it. That is the basic setup you may also want to have multiple things happen so you may have multiple url schemes that launch the same app but take it to different parts of the app. In the app delegate of the app in the function
func application(app: UIApplication, openURL url: NSURL, options: [String : AnyObject]) -> Bool {
print(url)
//Any customizations for the app here
}
You can do anything you can imagine.
Have you checked out Turnpike? It's an open source tool for enabling deep linking in iOS apps. http://urxtech.github.io/#GettingStarted
If you want to create a deeplink you might need to do some server code to detect the user device/browser and do some actions based on this.
I've created a tool that simplify this process, you can check it here:
http://www.uppurl.com/
It's mainly a short link tool that checks for user device and give him the right url based on his devices. With this tool you don't need to write any server code and it also takes care of different devices, operating systems and browsers.

Show a single thumbnail when posting on facebook

A little background info is that my team and I developed a website for a Real Estate Agency and I've been assigned the task of setting the image of the currently selected property into facebook's sharing feature.
The webpage for the property is dynamic as there are several listings, so what I've done is select the first image that is loaded on the page and set it to the og:image meta tag.
Now let's say I copy the URL and post it on Facebook, it'll show the correct thumbnail, HOWEVER, it'll also show multiple thumbnails from other listings.
All images on the website are over 200 x 200px and are within an aspect ratio of 3:1.
My question is, how do I tell Facebook to only take my initial image and not grab others while it's as it.
Is there perhaps a SelectSingleImage property that I can apply?
I've already spent more time searching for the answer to this issue than I would have liked, so thanks for any help provided, it's much appreciated.
One method I use sometimes is to recognize Facebook's server and simply provide it with different data. This way you can actually only have one image on the page (as far as Facebook knows).
I don't know anything about vb.net, but here is a simple code sample in PHP. All it does is perform a regular expression on the user agent of the request to match it against the string "facebook".
$isFacebook = false;
if(preg_match("/facebook/",strtolower($_SERVER["HTTP_USER_AGENT"]))) {
$isFacebook = true;
}
Facebook may very well change their user agent signature one day, but for now, I'm pretty sure you'll be safe but keep synced with the Developers Blog and the Roadmap.
It seems that Facebook saved those images in cache for some bizarre reason, but to resolve this issue all I had to do was enter the URL into Facebook's Linter tool which in turn cleared the cache on their server.